mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-26 07:27:36 +00:00
fix(console): formfield changes and ux (#1020)
* cnsl-formfield, cnsl-label, cnsl-input, ch prefix * create user cnsl-fields, add cnsl-error * replace user forms with cnsl-fields * replace all other occurrences of mat-form-field with cnsl-fields * improve hover, active, focus behavior, headlin styling * user-grant refactor * style cleanup * stylelint * fix detail layout flexstart, user table header * input dir * error, input directives instead components, on blur handler * error directive, formfield content children * formfield control directive * use new field for new contact dialog * formfield hint, error directive, scss * hint or error binding, animation after view init * avatar changes, policy header * style lint * lint * input control within formfield, errorstatematcher * use matformcontrol to merge with selects * member table min width, lint * lint * implement from matformcontrol insteat custom, add selector * find error * add focus listener * labelfloat * fix input directive * renaming * rm logs * user search overflow, org create i18n, meta cleanup * sidenav shadow * redirect to org table * lint * lint test files * remove usage of formfieldmodule, use input module, layout optim * replace formfieldmodule usage with inputmodule * lint input dir, scss * user grant, user table optimisations * reorganize sidenav, project table empty, tooltips, avatar ch * user grant tooltips, form field error directive accessor * checkbox overflow fix, table dateblock, i18n tooltips * app placeholder, i18n, optimize mobile layout * change refresh table order, i18n, redirect chips * stylelint * chore(deps-dev): bump stylelint from 13.7.2 to 13.8.0 in /console (#1007) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump stylelint from 13.7.2 to 13.8.0 in /console Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.7.2 to 13.8.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/13.7.2...13.8.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/cli from 11.0.1 to 11.0.2 in /console (#1006) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular/cli from 11.0.1 to 11.0.2 in /console Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.0.1 to 11.0.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.0.1...v11.0.2) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump google-proto-files from 2.2.0 to 2.3.0 in /console (#1005) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps): bump google-proto-files from 2.2.0 to 2.3.0 in /console Bumps [google-proto-files](https://github.com/googleapis/nodejs-proto-files) from 2.2.0 to 2.3.0. - [Release notes](https://github.com/googleapis/nodejs-proto-files/releases) - [Changelog](https://github.com/googleapis/nodejs-proto-files/blob/master/CHANGELOG.md) - [Commits](https://github.com/googleapis/nodejs-proto-files/compare/v2.2.0...v2.3.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/node from 14.14.6 to 14.14.9 in /console (#1004) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @types/node from 14.14.6 to 14.14.9 in /console Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.14.6 to 14.14.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service from 11.0.0 to 11.0.2 in /console (#999) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular/language-service in /console Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.0.0 to 11.0.2. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.0.2/packages/language-service) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular from 0.1100.1 to 0.1100.2 in /console (#1003) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular-devkit/build-angular in /console Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1100.1 to 0.1100.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * chore(deps-dev): bump prettier from 2.1.2 to 2.2.0 in /console (#1002) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump prettier from 2.1.2 to 2.2.0 in /console Bumps [prettier](https://github.com/prettier/prettier) from 2.1.2 to 2.2.0. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/2.1.2...2.2.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/jasmine from 3.6.1 to 3.6.2 in /console (#1001) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @types/jasmine from 3.6.1 to 3.6.2 in /console Bumps [@types/jasmine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jasmine) from 3.6.1 to 3.6.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jasmine) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * chore(deps): bump file-saver from 2.0.2 to 2.0.5 in /console (#1000) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps): bump file-saver from 2.0.2 to 2.0.5 in /console Bumps [file-saver](https://github.com/eligrey/FileSaver.js) from 2.0.2 to 2.0.5. - [Release notes](https://github.com/eligrey/FileSaver.js/releases) - [Changelog](https://github.com/eligrey/FileSaver.js/blob/master/CHANGELOG.md) - [Commits](https://github.com/eligrey/FileSaver.js/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * chore(deps-dev): bump jasmine-spec-reporter in /console (#974) Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 5.0.2 to 6.0.0. - [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases) - [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md) - [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v5.0.2...v6.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * input field border improvements, primary color * redirect form, conventional ux * redirects inputs on app create * fix dynamic suffix padding, user grant layout, lint * input style accessor, contact view optim, ext idp, card fixes * hide error on untouched formfield, border red on error touched * fix change detector * change, user, form validation, delete refresh * safari font weight adjustment, change refresh emitter * key validation * remove tabls layout from projects * app changes, refactor project, app state, meta layout * add key dialog validation, startdate, rever change tabs * stylelint * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <florian@caos.ch> * finnaly fix fckntimestamp picker * optional key expiry * small state badge * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <florian@caos.ch> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Silvan <silvan.reusser@gmail.com> Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
19
console/src/styles/error.scss
Normal file
19
console/src/styles/error.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin cnsl-error-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat-color($warn, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.cnsl-error {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: $warn-color;
|
||||
margin-bottom: 5px;
|
||||
|
||||
// &.block {
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
}
|
72
console/src/styles/input.scss
Normal file
72
console/src/styles/input.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin input-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$secondary-dark: mat-color($primary, A800);
|
||||
$inv-color: mat-color($primary, A600);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-light-color: mat-color($primary, 200);
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat-color($warn, 500);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
[cnslInput],
|
||||
.mat-select {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding-inline-start: 10px;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
background-color: inherit;
|
||||
cursor: text;
|
||||
border-radius: 8px;
|
||||
transform: all .2 linear;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border: 1px solid if($is-dark-theme, #403e3e, #00000040);
|
||||
background-color:if($is-dark-theme, #00000020, #fafafa50);
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
transition: border-color .2s ease-in-out;
|
||||
width: 100%;
|
||||
color: mat-color($foreground, text);
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
border-color: if($is-dark-theme,#aeafb1, #1a1b1b);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&.ng-touched {
|
||||
&.ng-invalid {
|
||||
border-color: $warn-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border-color: if($is-dark-theme,#36373850,#cccdce50);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
[cnslInput]::placeholder {
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mat-paginator {
|
||||
.mat-select {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
@@ -9,8 +9,13 @@
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$sec-dark: mat-color($primary, A800);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
/* stylelint-enable */
|
||||
|
||||
.meta {
|
||||
box-shadow: inset 1px 0 if($is-dark-theme, #303131, #e3e8ee);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: mat-color($foreground, text) !important;
|
||||
|
||||
@@ -56,6 +61,8 @@
|
||||
|
||||
.admin-line {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: calc(100vw - 300px);
|
||||
@@ -67,6 +74,7 @@
|
||||
transform: translateY(75%);
|
||||
transition: all .2s;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
@@ -85,18 +93,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-bottom: 20px solid transparent;
|
||||
border-left: 20px solid $primary-dark;
|
||||
transition: border-color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
}
|
||||
|
||||
&.expanded,
|
||||
&:hover {
|
||||
transform: translateY(0%);
|
||||
@@ -107,4 +103,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
.span {
|
||||
border-color: if($is-dark-theme, #303131, #e3e8ee);
|
||||
}
|
||||
|
||||
.line {
|
||||
background-color: if($is-dark-theme, #303131, #e3e8ee);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -3,10 +3,14 @@
|
||||
@mixin table-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat-color($warn, 500);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$secondary-dark: mat-color($primary, A800);
|
||||
$inv-color: mat-color($primary, A600);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.mat-table,
|
||||
.mat-paginator {
|
||||
@@ -24,21 +28,60 @@
|
||||
padding: 3px 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
|
||||
&.mat-header-cell {
|
||||
color: var(--grey);
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
.mat-form-field-wrapper {
|
||||
.cnsl-form-field-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.mat-header-row {
|
||||
height: 40px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
td {
|
||||
background: var(--table-row-back); // rgba($inv-color, .05);
|
||||
background: if($is-dark-theme, #292a2b, #f4f4f4); // rgba($inv-color, .05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-checkbox {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.no-content-row {
|
||||
background-color: if($is-dark-theme, #00000030, #f4f4f470);
|
||||
// color: $primary-color;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.selection {
|
||||
width: 65px;
|
||||
max-width: 65px;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user