From eb6a675c87e9c9efef7b1d4c2aacae4b638f1fc1 Mon Sep 17 00:00:00 2001 From: Volha Mardvilka Date: Fri, 15 Nov 2024 13:21:40 +0000 Subject: [PATCH 1/2] 378065443: (feat) add gm3 for nav bar --- modules/ui/src/app/app.component.html | 92 ++++++++++--------- modules/ui/src/app/app.component.scss | 67 ++++++++++---- .../components/version/version.component.scss | 3 +- modules/ui/src/styles.scss | 76 +++++++++------ modules/ui/src/theming/variables.scss | 3 + 5 files changed, 153 insertions(+), 88 deletions(-) diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index e963d7c9f..17df13bc2 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -18,50 +18,52 @@
- - - - - - - - +
+ + + + + + + + +
@@ -310,7 +312,7 @@

Testrun

[matTooltip]="label" (keydown.enter)="onNavigationClick()"> - {{ icon }} + {{ icon }} {{ label }} diff --git a/modules/ui/src/app/app.component.scss b/modules/ui/src/app/app.component.scss index fc1ae2ec5..dd50dddf4 100644 --- a/modules/ui/src/app/app.component.scss +++ b/modules/ui/src/app/app.component.scss @@ -38,35 +38,60 @@ $nav-open-btn-width: 210px; .app-sidebar { display: flex; flex-direction: column; - background-color: $white; + background-color: $surface-container-low; height: 100%; gap: 8px; width: $nav-close-width; align-items: center; } +.nav-items-container { + height: calc(100% - $nav-button-height); + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; +} + .app-sidebar-button { - border-radius: 20px; + display: flex; + flex-direction: column; + border-radius: 16px; border: 1px solid transparent; min-width: 48px; padding: 0; box-sizing: border-box; height: 34px; - margin: 11px 0; + padding: 10px; line-height: 50% !important; + + justify-content: center; + gap: 4px; + align-self: stretch; + height: unset; + width: 86px; + margin: 0 auto; } .app-sidebar-button { --mat-text-button-with-icon-horizontal-padding: 8px; - width: $nav-close-btn-width; - display: flex; - justify-content: flex-start; padding-inline: 8px; } -.app-sidebar-button:first-child { - margin-top: 19px; +.sidebar-button-label { + + color: $on-surface-variant; + text-align: center; + /* GM3/Static/label/medium */ + font-family: $font-text; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.1px; } .app-toolbar-button-menu { @@ -82,24 +107,34 @@ $nav-open-btn-width: 210px; margin-right: 0; width: 24px; font-size: 24px; - color: $dark-grey; + color: $on-surface-variant; height: 24px; } .app-sidebar-button > .mat-icon { - margin: 0 3px; + margin: 4px; min-width: 24px; - line-height: 18px !important; + //line-height: 18px !important; } + .app-sidebar-button-active { - border: 1px solid mat.get-theme-color($light-theme, primary, 40); - background-color: mat.get-theme-color($light-theme, primary, 40); + .material-symbols-outlined { + font-variation-settings: 'FILL' 1, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24 + } } +// +//.app-sidebar-button-active { +// border: 1px solid mat.get-theme-color($light-theme, primary, 40); +// background-color: mat.get-theme-color($light-theme, primary, 40); +//} -.app-sidebar-button-active > .mat-icon { - color: $white; -} +//.app-sidebar-button-active > .mat-icon { +// color: $white; +//} .logo-link { color: $on-surface; diff --git a/modules/ui/src/app/components/version/version.component.scss b/modules/ui/src/app/components/version/version.component.scss index 2195ddde7..17cfb2c2a 100644 --- a/modules/ui/src/app/components/version/version.component.scss +++ b/modules/ui/src/app/components/version/version.component.scss @@ -14,6 +14,7 @@ * limitations under the License. */ @import 'colors'; +@import 'variables'; :host { position: relative; @@ -22,7 +23,7 @@ .version-content, .version-content-update { min-width: 48px; - height: 34px; + height: $nav-button-height; max-width: 100%; background: $color-background-grey; border-radius: 20px; diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss index 9b1d0dcff..41d1cf4d9 100644 --- a/modules/ui/src/styles.scss +++ b/modules/ui/src/styles.scss @@ -56,16 +56,24 @@ body { } } } - +// app-sidebar .app-sidebar-button-active .mat-icon path { fill: $white; + //fill: #004A77 } - +// app-sidebar .app-sidebar-button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple, .app-toolbar-button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple { border-radius: inherit; } +.app-sidebar-button-active { + font-variation-settings: 'FILL' 1, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24 +} + .consent-dialog, .device-form-dialog, .initiate-test-run-dialog { @@ -110,36 +118,46 @@ mat-hint { .mat-sort-header-container.mat-focus-indicator:focus::before { content: none; } - +// app-sidebar .app-sidebar-button { - .mdc-button__label { - position: relative; - left: -999px; - overflow: hidden; - } -} - -.active-menu { - .app-sidebar-button { - .mdc-button__label { - left: 8px; - display: inline; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - - .app-sidebar-button-active .mat-icon path { - fill: $grey-800; + //.mdc-button__label { + // position: relative; + // left: -999px; + // overflow: hidden; + //} + &.mat-mdc-button:has(.material-icons,mat-icon,[matButtonIcon]) { + padding: 6px; } - app-version { - min-width: 80px; - width: auto !important; + &.mat-mdc-button .mat-mdc-button-persistent-ripple { + top: 6px; + left: calc(50% - 28px); + height: 32px; + width: 56px; } } +//.active-menu { +// .app-sidebar-button { +// .mdc-button__label { +// left: 8px; +// display: inline; +// white-space: nowrap; +// text-overflow: ellipsis; +// overflow: hidden; +// } +// } +// +// .app-sidebar-button-active .mat-icon path { +// fill: $grey-800; +// } +// +// app-version { +// min-width: 80px; +// width: auto !important; +// } +//} + .filter-button.active .filter-icon path { fill: mat.get-theme-color($light-theme, primary, 35); } @@ -238,6 +256,12 @@ mat-hint { --mdc-outlined-text-field-focus-label-text-color: #1a73e8; } +.mat-mdc-button .mat-mdc-button-persistent-ripple::before { + --mat-text-button-state-layer-color: #1F1F1F; + //background-color: var(--mat-text-button-state-layer-color, var(--mat-app-primary)); + //background-color: #1F1F1F; +} + .setting-field { --mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, 0.38); --mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.58); diff --git a/modules/ui/src/theming/variables.scss b/modules/ui/src/theming/variables.scss index 69dff6349..0c0c6af7a 100644 --- a/modules/ui/src/theming/variables.scss +++ b/modules/ui/src/theming/variables.scss @@ -19,6 +19,9 @@ $form-max-width: 732px; $icon-size: 24px; $corner-large: 16px; +// nav variables +$nav-button-height: 32px; + $font-primary: 'Google Sans', sans-serif; $font-secondary: 'Roboto', sans-serif; $font-text: 'Google Sans Text', sans-serif; From 927dcbf367543589f9c63c4ea1a12cc19c59e0eb Mon Sep 17 00:00:00 2001 From: Volha Mardvilka Date: Mon, 18 Nov 2024 12:22:17 +0000 Subject: [PATCH 2/2] 378065443: (feat) add gm3 for nav bar --- modules/ui/src/app/app.component.html | 9 +-- modules/ui/src/app/app.component.scss | 57 +++++++-------- modules/ui/src/app/app.component.ts | 15 ---- .../components/version/version.component.scss | 4 +- modules/ui/src/assets/icons/devices.svg | 5 -- modules/ui/src/assets/icons/reports.svg | 5 -- .../ui/src/assets/icons/risk-assessment.svg | 10 --- modules/ui/src/index.html | 2 +- modules/ui/src/styles.scss | 69 +++++++------------ 9 files changed, 56 insertions(+), 120 deletions(-) delete mode 100644 modules/ui/src/assets/icons/devices.svg delete mode 100644 modules/ui/src/assets/icons/reports.svg delete mode 100644 modules/ui/src/assets/icons/risk-assessment.svg diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index 17df13bc2..c75fe1c4b 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -35,7 +35,7 @@ navButtonRoute; context: { route: Routes.Devices, - svgIcon: 'devices', + icon: 'home_iot_device', label: 'Devices', name: 'devices', } @@ -57,7 +57,7 @@ navButtonRoute; context: { route: Routes.RiskAssessment, - svgIcon: 'risk_assessment', + icon: 'rule', label: 'Risk Assessment', name: 'risk-assessment', } @@ -309,10 +309,11 @@

Testrun

mat-button routerLink="{{ route }}" routerLinkActive="app-sidebar-button-active" - [matTooltip]="label" (keydown.enter)="onNavigationClick()"> - {{ icon }} + {{ + icon + }} {{ label }} diff --git a/modules/ui/src/app/app.component.scss b/modules/ui/src/app/app.component.scss index dd50dddf4..0ef2ab018 100644 --- a/modules/ui/src/app/app.component.scss +++ b/modules/ui/src/app/app.component.scss @@ -21,10 +21,7 @@ $toolbar-height: 64px; $content-padding-top: 18px; $content-padding-bottom: 16px; -$nav-close-width: 96px; -$nav-open-width: 236px; -$nav-close-btn-width: 48px; -$nav-open-btn-width: 210px; +$nav-width: 96px; .app-container { height: 100%; @@ -41,7 +38,7 @@ $nav-open-btn-width: 210px; background-color: $surface-container-low; height: 100%; gap: 8px; - width: $nav-close-width; + width: $nav-width; align-items: center; } @@ -58,15 +55,12 @@ $nav-open-btn-width: 210px; .app-sidebar-button { display: flex; flex-direction: column; - border-radius: 16px; + border-radius: $corner-large; border: 1px solid transparent; min-width: 48px; - padding: 0; box-sizing: border-box; - height: 34px; padding: 10px; line-height: 50% !important; - justify-content: center; gap: 4px; align-self: stretch; @@ -82,22 +76,15 @@ $nav-open-btn-width: 210px; } .sidebar-button-label { - color: $on-surface-variant; text-align: center; - /* GM3/Static/label/medium */ font-family: $font-text; font-size: 12px; - font-style: normal; font-weight: 500; line-height: 16px; letter-spacing: 0.1px; } -.app-toolbar-button-menu { - margin: 11px 17px 11px 16px; -} - .app-sidebar-button:disabled { background: rgba(0, 0, 0, 0.12); } @@ -114,27 +101,29 @@ $nav-open-btn-width: 210px; .app-sidebar-button > .mat-icon { margin: 4px; min-width: 24px; - //line-height: 18px !important; } - .app-sidebar-button-active { .material-symbols-outlined { - font-variation-settings: 'FILL' 1, - 'wght' 400, - 'GRAD' 0, - 'opsz' 24 + font-variation-settings: + 'FILL' 1, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24; + } + + & > .mat-icon { + color: $on-secondary-fixed-variant; + } + .sidebar-button-label { + color: $secondary; } -} -// -//.app-sidebar-button-active { -// border: 1px solid mat.get-theme-color($light-theme, primary, 40); -// background-color: mat.get-theme-color($light-theme, primary, 40); -//} -//.app-sidebar-button-active > .mat-icon { -// color: $white; -//} + .mat-mdc-button-persistent-ripple::before { + opacity: 1; + background: $secondary-fixed; + } +} .logo-link { color: $on-surface; @@ -170,13 +159,13 @@ $nav-open-btn-width: 210px; .app-toolbar { position: absolute; top: 0; - left: $nav-close-width; + left: $nav-width; z-index: 3; height: $toolbar-height; padding: 0 16px; background-color: $surface-container-low; color: $grey-800; - width: calc(100% - $nav-close-width); + width: calc(100% - $nav-width); } .app-bar-buttons { @@ -216,7 +205,7 @@ app-version { margin-top: auto; margin-bottom: 16px; max-width: 100%; - width: $nav-close-width; + width: $nav-width; display: flex; justify-content: center; } diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index e4a7bf23d..6647989d6 100644 --- a/modules/ui/src/app/app.component.ts +++ b/modules/ui/src/app/app.component.ts @@ -39,10 +39,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y'; import { filter, take } from 'rxjs/operators'; import { skip, timer } from 'rxjs'; -const DEVICES_LOGO_URL = '/assets/icons/devices.svg'; const DEVICES_RUN_URL = '/assets/icons/device_run.svg'; -const REPORTS_LOGO_URL = '/assets/icons/reports.svg'; -const RISK_ASSESSMENT_LOGO_URL = '/assets/icons/risk-assessment.svg'; const TESTRUN_LOGO_URL = '/assets/icons/testrun_logo_small.svg'; const TESTRUN_LOGO_COLOR_URL = '/assets/icons/testrun_logo_color.svg'; const CLOSE_URL = '/assets/icons/close.svg'; @@ -89,22 +86,10 @@ export class AppComponent implements AfterViewInit { this.appStore.getReports(); this.appStore.getTestModules(); this.appStore.getNetworkAdapters(); - this.matIconRegistry.addSvgIcon( - 'devices', - this.domSanitizer.bypassSecurityTrustResourceUrl(DEVICES_LOGO_URL) - ); this.matIconRegistry.addSvgIcon( 'device_run', this.domSanitizer.bypassSecurityTrustResourceUrl(DEVICES_RUN_URL) ); - this.matIconRegistry.addSvgIcon( - 'reports', - this.domSanitizer.bypassSecurityTrustResourceUrl(REPORTS_LOGO_URL) - ); - this.matIconRegistry.addSvgIcon( - 'risk_assessment', - this.domSanitizer.bypassSecurityTrustResourceUrl(RISK_ASSESSMENT_LOGO_URL) - ); this.matIconRegistry.addSvgIcon( 'testrun_logo_small', this.domSanitizer.bypassSecurityTrustResourceUrl(TESTRUN_LOGO_URL) diff --git a/modules/ui/src/app/components/version/version.component.scss b/modules/ui/src/app/components/version/version.component.scss index 17cfb2c2a..1dd59997b 100644 --- a/modules/ui/src/app/components/version/version.component.scss +++ b/modules/ui/src/app/components/version/version.component.scss @@ -25,9 +25,9 @@ min-width: 48px; height: $nav-button-height; max-width: 100%; - background: $color-background-grey; border-radius: 20px; cursor: pointer; + color: $on-surface-variant; & ::ng-deep .mdc-button__label { text-overflow: ellipsis; overflow: hidden; @@ -40,7 +40,7 @@ width: 8px; height: 8px; border-radius: 100%; - background: $red-800; + background: $red-700; top: 3px; right: 3px; } diff --git a/modules/ui/src/assets/icons/devices.svg b/modules/ui/src/assets/icons/devices.svg deleted file mode 100644 index 7bb8bafc7..000000000 --- a/modules/ui/src/assets/icons/devices.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/modules/ui/src/assets/icons/reports.svg b/modules/ui/src/assets/icons/reports.svg deleted file mode 100644 index 944b31409..000000000 --- a/modules/ui/src/assets/icons/reports.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/modules/ui/src/assets/icons/risk-assessment.svg b/modules/ui/src/assets/icons/risk-assessment.svg deleted file mode 100644 index 42ff5f942..000000000 --- a/modules/ui/src/assets/icons/risk-assessment.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/modules/ui/src/index.html b/modules/ui/src/index.html index b35cdf0b8..ef2ef4f9b 100644 --- a/modules/ui/src/index.html +++ b/modules/ui/src/index.html @@ -75,7 +75,7 @@ href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" /> diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss index 41d1cf4d9..19c475b1e 100644 --- a/modules/ui/src/styles.scss +++ b/modules/ui/src/styles.scss @@ -56,24 +56,12 @@ body { } } } -// app-sidebar -.app-sidebar-button-active .mat-icon path { - fill: $white; - //fill: #004A77 -} -// app-sidebar + .app-sidebar-button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple, .app-toolbar-button.mat-mdc-icon-button .mat-mdc-button-persistent-ripple { border-radius: inherit; } -.app-sidebar-button-active { - font-variation-settings: 'FILL' 1, - 'wght' 400, - 'GRAD' 0, - 'opsz' 24 -} - .consent-dialog, .device-form-dialog, .initiate-test-run-dialog { @@ -118,14 +106,14 @@ mat-hint { .mat-sort-header-container.mat-focus-indicator:focus::before { content: none; } -// app-sidebar + +.app-sidebar { + .mat-mdc-button .mat-mdc-button-ripple { + display: none; + } +} .app-sidebar-button { - //.mdc-button__label { - // position: relative; - // left: -999px; - // overflow: hidden; - //} - &.mat-mdc-button:has(.material-icons,mat-icon,[matButtonIcon]) { + &.mat-mdc-button:has(.material-icons, mat-icon, [matButtonIcon]) { padding: 6px; } @@ -135,28 +123,23 @@ mat-hint { height: 32px; width: 56px; } -} + &.app-sidebar-button-active { + .mat-mdc-button-persistent-ripple::before { + opacity: 1; + background: $light-grey; + } -//.active-menu { -// .app-sidebar-button { -// .mdc-button__label { -// left: 8px; -// display: inline; -// white-space: nowrap; -// text-overflow: ellipsis; -// overflow: hidden; -// } -// } -// -// .app-sidebar-button-active .mat-icon path { -// fill: $grey-800; -// } -// -// app-version { -// min-width: 80px; -// width: auto !important; -// } -//} + &.mat-mdc-button { + &:hover, + &:focus-visible { + .mat-mdc-button-persistent-ripple::before { + opacity: 0.6; + background: $grey-100; + } + } + } + } +} .filter-button.active .filter-icon path { fill: mat.get-theme-color($light-theme, primary, 35); @@ -257,9 +240,7 @@ mat-hint { } .mat-mdc-button .mat-mdc-button-persistent-ripple::before { - --mat-text-button-state-layer-color: #1F1F1F; - //background-color: var(--mat-text-button-state-layer-color, var(--mat-app-primary)); - //background-color: #1F1F1F; + --mat-text-button-state-layer-color: #1f1f1f; } .setting-field {