diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index e963d7c9f..c75fe1c4b 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -18,50 +18,52 @@
- - - - - - - - +
+ + + + + + + + +
@@ -307,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 fc1ae2ec5..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%; @@ -38,39 +35,54 @@ $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; + width: $nav-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: $corner-large; 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; -} - -.app-toolbar-button-menu { - margin: 11px 17px 11px 16px; +.sidebar-button-label { + color: $on-surface-variant; + text-align: center; + font-family: $font-text; + font-size: 12px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.1px; } .app-sidebar-button:disabled { @@ -82,23 +94,35 @@ $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; } .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 > .mat-icon { - color: $white; + & > .mat-icon { + color: $on-secondary-fixed-variant; + } + .sidebar-button-label { + color: $secondary; + } + + .mat-mdc-button-persistent-ripple::before { + opacity: 1; + background: $secondary-fixed; + } } .logo-link { @@ -135,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 { @@ -181,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 2195ddde7..1dd59997b 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,11 +23,11 @@ .version-content, .version-content-update { min-width: 48px; - height: 34px; + 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; @@ -39,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 9b1d0dcff..19c475b1e 100644 --- a/modules/ui/src/styles.scss +++ b/modules/ui/src/styles.scss @@ -57,10 +57,6 @@ body { } } -.app-sidebar-button-active .mat-icon path { - fill: $white; -} - .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; @@ -111,32 +107,37 @@ mat-hint { content: none; } -.app-sidebar-button { - .mdc-button__label { - position: relative; - left: -999px; - overflow: hidden; +.app-sidebar { + .mat-mdc-button .mat-mdc-button-ripple { + display: none; } } - -.active-menu { - .app-sidebar-button { - .mdc-button__label { - left: 8px; - display: inline; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } +.app-sidebar-button { + &.mat-mdc-button:has(.material-icons, mat-icon, [matButtonIcon]) { + padding: 6px; } - .app-sidebar-button-active .mat-icon path { - fill: $grey-800; + &.mat-mdc-button .mat-mdc-button-persistent-ripple { + top: 6px; + left: calc(50% - 28px); + height: 32px; + width: 56px; } + &.app-sidebar-button-active { + .mat-mdc-button-persistent-ripple::before { + opacity: 1; + background: $light-grey; + } - 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; + } + } + } } } @@ -238,6 +239,10 @@ 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; +} + .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;