From 57e342960d7c115223f0ad704538d4c80bf55b5e Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 16 Jun 2026 19:59:19 +0300 Subject: [PATCH 01/35] UI: drop icon from breadcrumb, polish header layout, add sidebar-close icon --- .../src/app/modules/home/home.component.html | 9 ++-- .../src/app/modules/home/home.component.scss | 15 +++--- ui-ngx/src/app/modules/home/home.component.ts | 2 +- .../home/menu/side-menu.component.scss | 1 + .../components/breadcrumb.component.html | 48 +++++++++++-------- .../components/breadcrumb.component.scss | 3 -- .../shared/components/breadcrumb.component.ts | 2 - .../src/app/shared/components/breadcrumb.ts | 1 - ui-ngx/src/app/shared/models/icon.models.ts | 3 +- ui-ngx/src/assets/icons/sidebar-close.svg | 4 ++ ui-ngx/src/assets/logo_title_black.svg | 37 ++++++++++++++ 11 files changed, 87 insertions(+), 38 deletions(-) create mode 100644 ui-ngx/src/assets/icons/sidebar-close.svg create mode 100644 ui-ngx/src/assets/logo_title_black.svg diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html index 81d0ae2e6d..211722fee8 100644 --- a/ui-ngx/src/app/modules/home/home.component.html +++ b/ui-ngx/src/app/modules/home/home.component.html @@ -22,19 +22,20 @@ [mode]="sidenavMode" [opened]="sidenavOpened && !forceFullscreen">
- -
+ +
+
- +
- + @if (!isPublicUser() && forceFullscreen) { - + }
+ @@ -78,7 +79,6 @@ } - @if (!hideLoadingBar && (isLoading$ | async)) { -
- @if (displayUserInfo) { -
+ diff --git a/ui-ngx/src/app/shared/components/user-menu.component.scss b/ui-ngx/src/app/shared/components/user-menu.component.scss index 92befac2b1..995e82765a 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.scss +++ b/ui-ngx/src/app/shared/components/user-menu.component.scss @@ -14,37 +14,47 @@ * limitations under the License. */ :host { - div.tb-user-info { + button.tb-user-menu { + width: 250px; + height: 100%; + padding: 16px; + display: flex; + flex-direction: row; + justify-content: start; + gap: 8px; line-height: 1.5; span { text-transform: none; + text-align: start; } span.tb-user-display-name { - font-size: .8rem; - font-weight: 300; - letter-spacing: .008em; + color: rgba(0, 0, 0, 0.76); + font-size: 14px; + line-height: 16px; + font-weight: 500; + letter-spacing: 0.25px; } span.tb-user-authority { - font-size: .8rem; - font-weight: 300; - letter-spacing: .005em; - opacity: .8; + color: rgba(0, 0, 0, 0.54); + font-size: 12px; + line-height: 16px; + font-weight: 400; + letter-spacing: 0.25px; } } .mat-icon.tb-mini-avatar { - width: 36px; - height: 36px; - margin: auto 8px; - font-size: 36px; - cursor: default; + width: 32px; + height: 32px; + font-size: 32px; + margin: 0; } } .tb-user-menu-items { - min-width: 256px; + min-width: 250px; } diff --git a/ui-ngx/src/app/shared/components/user-menu.component.ts b/ui-ngx/src/app/shared/components/user-menu.component.ts index 15c56dfb3f..1fcde5a1b6 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.ts +++ b/ui-ngx/src/app/shared/components/user-menu.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { User } from '@shared/models/user.model'; import { Authority } from '@shared/models/authority.enum'; import { select, Store } from '@ngrx/store'; @@ -23,6 +23,7 @@ import { selectAuthUser, selectUserDetails } from '@core/auth/auth.selectors'; import { map } from 'rxjs/operators'; import { AuthService } from '@core/auth/auth.service'; import { Router } from '@angular/router'; +import { MatMenu, MatMenuTrigger } from '@angular/material/menu'; @Component({ selector: 'tb-user-menu', @@ -33,8 +34,6 @@ import { Router } from '@angular/router'; }) export class UserMenuComponent implements OnInit, OnDestroy { - @Input() displayUserInfo: boolean; - authorities = Authority; authority$ = this.store.pipe( From 04713b35ca35877ca3f2ef9a5f6f598099837f54 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 18 Jun 2026 11:10:52 +0300 Subject: [PATCH 04/35] UI: side-menu typography polish, toggled-section divider, and tb-icon-based user menu items Set the side-menu toolbar text color via --mat-toolbar-container-text-color, switch menu-item link color to the same 76%-black token, and replace the global per-li border with a thinner divider that only shows under an opened section toggle. User-menu account/logout items use tb-icon, and the dropdown gets a tighter spacing system with a logout-separating border. --- ui-ngx/src/app/modules/home/home.component.html | 2 +- ui-ngx/src/app/modules/home/home.component.scss | 1 + .../home/menu/menu-toggle.component.html | 2 +- .../home/menu/menu-toggle.component.scss | 3 +++ .../modules/home/menu/side-menu.component.scss | 12 +++++++----- .../shared/components/user-menu.component.html | 6 +++--- .../shared/components/user-menu.component.scss | 17 ++++++++++++++++- 7 files changed, 32 insertions(+), 11 deletions(-) diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html index 5b67d91b98..e11b4c624b 100644 --- a/ui-ngx/src/app/modules/home/home.component.html +++ b/ui-ngx/src/app/modules/home/home.component.html @@ -30,7 +30,7 @@ -
+
diff --git a/ui-ngx/src/app/modules/home/home.component.scss b/ui-ngx/src/app/modules/home/home.component.scss index ef7b91e2fa..6a866bab0d 100644 --- a/ui-ngx/src/app/modules/home/home.component.scss +++ b/ui-ngx/src/app/modules/home/home.component.scss @@ -54,6 +54,7 @@ height: inherit; padding: 0; border-right: 1px solid rgba(0, 0, 0, 0.12); + --mat-toolbar-container-text-color: rgba(0, 0, 0, .76); tb-user-menu { border-top: 1px solid rgba(0, 0, 0, 0.12); } diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html index 2223a99062..fad34b8215 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html +++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - @if (section.icon !== null) { {{section.icon}} diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss index faa0d01ff2..84aac93c5a 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss +++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss @@ -18,6 +18,9 @@ :host ::ng-deep { .tb-button-toggle { + &.tb-toggled { + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + } .tb-toggle-icon { display: inline-block; width: 15px; diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss index e60580e95a..d58bc0f649 100644 --- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss +++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss @@ -19,17 +19,18 @@ :host ::ng-deep { - .tb-side-menu, + .tb-side-menu { + padding: 12px 0; + margin: 0; + list-style: none; + } + .tb-side-menu ul { padding: 0; margin-top: 0; list-style: none; } - .tb-side-menu > li { - border-bottom: 1px solid rgba(0, 0, 0, .12); - } - a.mat-mdc-button.mat-mdc-button-base { display: inline-flex; width: 100%; @@ -39,6 +40,7 @@ line-height: 40px; border-radius: 0; padding: 0 16px; + --mat-button-text-label-text-color: rgba(0, 0, 0, .76); &:hover { border-bottom: none; background-color: rgba(255,255,255,0.08); diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html index b7157488a9..c9207da9af 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.html +++ b/ui-ngx/src/app/shared/components/user-menu.component.html @@ -30,11 +30,11 @@ @if (authority$ | async; as authority) {
-
diff --git a/ui-ngx/src/app/shared/components/user-menu.component.scss b/ui-ngx/src/app/shared/components/user-menu.component.scss index 995e82765a..7148f3d529 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.scss +++ b/ui-ngx/src/app/shared/components/user-menu.component.scss @@ -30,7 +30,6 @@ } span.tb-user-display-name { - color: rgba(0, 0, 0, 0.76); font-size: 14px; line-height: 16px; font-weight: 500; @@ -57,4 +56,20 @@ .tb-user-menu-items { min-width: 250px; + display: flex; + flex-direction: column; + gap: 8px; + --mat-menu-item-label-text-size: 14px; + --mat-menu-item-label-text-line-height: 20px; + --mat-menu-item-spacing: 8px; + --mat-menu-item-icon-size: 18px; + .mat-icon { + font-size: 18px; + } + .mat-mdc-menu-item { + min-height: 40px; + &.tb-logout { + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + } } From a3f4f5b105680d6eb79d46951cb4691bda2c5f29 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 18 Jun 2026 16:12:45 +0300 Subject: [PATCH 05/35] UI: hide sidebar-close on mobile, widen user-menu trigger, tighten side-menu typography Gate the sidebar-close toolbar button behind sidenavDesktop so it doesn't render on the overlay sidenav. User-menu trigger button now fills the rail width via ViewEncapsulation.None + a tb-user-menu-panel that matches the trigger width. Toggled section labels bump to weight 500, hover background drop, and inactive labels lean on --mat-button-text-label-text-weight. Add sidebar-open SVG to the icon registry for the collapsed-sidenav trigger. --- .../src/app/modules/home/home.component.html | 4 +- ui-ngx/src/app/modules/home/home.component.ts | 4 ++ .../home/menu/menu-toggle.component.scss | 15 +++-- .../home/menu/side-menu.component.scss | 5 +- .../components/user-menu.component.html | 7 ++- .../components/user-menu.component.scss | 57 ++++++++++--------- .../shared/components/user-menu.component.ts | 11 +++- ui-ngx/src/app/shared/models/icon.models.ts | 1 + ui-ngx/src/assets/icons/sidebar-open.svg | 4 ++ 9 files changed, 69 insertions(+), 39 deletions(-) create mode 100644 ui-ngx/src/assets/icons/sidebar-open.svg diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html index e11b4c624b..d99a075107 100644 --- a/ui-ngx/src/app/modules/home/home.component.html +++ b/ui-ngx/src/app/modules/home/home.component.html @@ -25,7 +25,9 @@
- + @if (sidenavDesktop) { + + }
diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts index 924c892f9c..f7a423e135 100644 --- a/ui-ngx/src/app/modules/home/home.component.ts +++ b/ui-ngx/src/app/modules/home/home.component.ts @@ -52,6 +52,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni sidenavMode: 'over' | 'push' | 'side' = 'side'; sidenavOpened = true; + sidenavDesktop = true; logo = 'assets/logo_title_black.svg'; @@ -83,6 +84,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']); this.sidenavMode = isGtSm ? 'side' : 'over'; this.sidenavOpened = isGtSm; + this.sidenavDesktop = isGtSm; this.breakpointObserver .observe(MediaBreakpoints['gt-sm']) @@ -91,9 +93,11 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni if (state.matches) { this.sidenavMode = 'side'; this.sidenavOpened = true; + this.sidenavDesktop = true; } else { this.sidenavMode = 'over'; this.sidenavOpened = false; + this.sidenavDesktop = false; } } ); diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss index 84aac93c5a..c327fcb6fb 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss +++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss @@ -20,11 +20,13 @@ .tb-button-toggle { &.tb-toggled { border-bottom: 1px solid rgba(0, 0, 0, 0.05); + --mat-button-text-label-text-weight: 500; } .tb-toggle-icon { display: inline-block; - width: 15px; - min-width: 15px; + width: 12px; + min-width: 12px; + font-size: 12px; margin: auto 0 auto auto; background-size: 100% auto; transition: transform .3s ease-in-out; @@ -61,10 +63,13 @@ transition-property: height; a.mat-mdc-button { - padding: 0 16px 0 32px; - font-weight: 500; + //padding: 0 16px 0 32px; + .mat-icon { + visibility: hidden; + } + /* font-weight: 500; text-transform: none !important; - text-rendering: optimizeLegibility; + text-rendering: optimizeLegibility;*/ } } } diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss index d58bc0f649..1578e1c7c8 100644 --- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss +++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss @@ -23,6 +23,7 @@ padding: 12px 0; margin: 0; list-style: none; + --mat-button-text-label-text-weight: 400; } .tb-side-menu ul { @@ -43,13 +44,12 @@ --mat-button-text-label-text-color: rgba(0, 0, 0, .76); &:hover { border-bottom: none; - background-color: rgba(255,255,255,0.08); } &:focus { border-bottom: none; } &.tb-active { - background-color: rgba(255, 255, 255, .15); + background-color: rgba(0, 0, 0, .08); } .mat-icon { margin-right: 8px; @@ -63,7 +63,6 @@ text-overflow: ellipsis; white-space: nowrap; display: inline-flex; - font-weight: 400; & > span { overflow: hidden; text-overflow: ellipsis; diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html index c9207da9af..102a3f6120 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.html +++ b/ui-ngx/src/app/shared/components/user-menu.component.html @@ -15,7 +15,8 @@ limitations under the License. --> - - + @if (authority$ | async; as authority) { -
+
+ @if (showLogo()) { + + } + @if (sidenavDesktop()) { + }
@@ -38,7 +48,9 @@ - +
- } -
+ + + @if (sidenavDesktop()) { + + }
- +
- + - +