diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts index 4699eaa2f4..1e3ae4d8a0 100644 --- a/ui-ngx/src/app/core/services/menu.models.ts +++ b/ui-ngx/src/app/core/services/menu.models.ts @@ -40,11 +40,6 @@ export interface MenuReference { pages?: Array; } -export interface HomeSectionReference { - name: string; - places: Array; -} - export interface HomeSection { name: string; places: Array; @@ -1064,107 +1059,14 @@ const defaultUserMenuMap = new Map([ ] ]); -const defaultHomeSectionMap = new Map([ - [ - Authority.SYS_ADMIN, - [ - { - name: 'tenant.management', - places: [MenuId.tenants, MenuId.tenant_profiles] - }, - { - name: 'widget.management', - places: [MenuId.widget_library] - }, - { - name: 'admin.system-settings', - places: [MenuId.general, MenuId.mail_server, - MenuId.notification_settings, MenuId.security_settings, MenuId.oauth2, MenuId.domains, - MenuId.clients, MenuId.two_fa, MenuId.resources_library, MenuId.queues] - } - ] - ], - [ - Authority.TENANT_ADMIN, - [ - { - name: 'rulechain.management', - places: [MenuId.rule_chains] - }, - { - name: 'customer.management', - places: [MenuId.customers] - }, - { - name: 'asset.management', - places: [MenuId.assets, MenuId.asset_profiles] - }, - { - name: 'device.management', - places: [MenuId.devices, MenuId.device_profiles, MenuId.otaUpdates] - }, - { - name: 'entity-view.management', - places: [MenuId.entity_views] - }, - { - name: 'edge.management', - places: [MenuId.edges, MenuId.rulechain_templates] - }, - { - name: 'dashboard.management', - places: [MenuId.widget_library, MenuId.dashboards] - }, - { - name: 'version-control.management', - places: [MenuId.version_control] - }, - { - name: 'audit-log.audit', - places: [MenuId.audit_log, MenuId.api_usage] - }, - { - name: 'admin.system-settings', - places: [MenuId.home_settings, MenuId.resources_library, MenuId.repository_settings, MenuId.auto_commit_settings, MenuId.trendz_settings] - } - ] - ], - [ - Authority.CUSTOMER_USER, - [ - { - name: 'asset.view-assets', - places: [MenuId.assets] - }, - { - name: 'device.view-devices', - places: [MenuId.devices] - }, - { - name: 'entity-view.management', - places: [MenuId.entity_views] - }, - { - name: 'edge.management', - places: [MenuId.edge_instances] - }, - { - name: 'dashboard.view-dashboards', - places: [MenuId.dashboards] - } - ] - ] -]); - export const buildUserMenu = (authState: AuthState): Array => { const references = defaultUserMenuMap.get(authState.authUser.authority); return (references || []).map(ref => referenceToMenuSection(authState, ref)).filter(section => !!section); }; -export const buildUserHome = (authState: AuthState, availableMenuSections: MenuSection[]): Array => { - const references = defaultHomeSectionMap.get(authState.authUser.authority); - return (references || []).map(ref => - homeReferenceToHomeSection(availableMenuSections, ref)).filter(section => !!section); +export const buildUserHome = (currentMenuSections: MenuSection[]): Array => { + return (currentMenuSections || []).map(section => + menuSectionToHomeSection(section)).filter(section => !!section); }; const referenceToMenuSection = (authState: AuthState, reference: MenuReference): MenuSection | undefined => { @@ -1202,14 +1104,18 @@ const filterMenuReference = (authState: AuthState, reference: MenuReference): bo } }; -const homeReferenceToHomeSection = (availableMenuSections: MenuSection[], reference: HomeSectionReference): HomeSection | undefined => { - const places = reference.places.map(id => availableMenuSections.find(m => m.id === id)).filter(p => !!p); - if (places.length) { - return { - name: reference.name, - places - }; - } else { - return undefined; +const menuSectionToHomeSection = (section: MenuSection): HomeSection => { + if (section.id !== MenuId.home) { + if (section.type === 'link') { + return { + name: section.name, + places: [ section ] + } + } else if (section.type === 'toggle' && section.pages?.length) { + return { + name: section.name, + places: section.pages + }; + } } -}; +} diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index 79977ff515..c0f3bf0568 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -67,7 +67,7 @@ export class MenuService { this.updateOpenedMenuSections(); this.menuSections$.next(this.currentMenuSections); this.availableMenuSections$.next(this._availableMenuSections); - const homeSections = buildUserHome(authState, this._availableMenuSections); + const homeSections = buildUserHome(this.currentMenuSections); this.homeSections$.next(homeSections); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html index 2308549987..12cb7f3856 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html @@ -15,7 +15,7 @@ limitations under the License. --> - + {{settings.icon}} {{translatedName}} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss index c5259df3ed..6296614c92 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss @@ -19,15 +19,10 @@ } :host ::ng-deep { - .tb-nav-button { + .tb-nav-button.mat-mdc-outlined-button { + background: #fff; width: 100%; height: 100% !important; - &:hover { - border-bottom: none; - } - &:focus { - border-bottom: none; - } display: flex; flex-direction: column; align-items: center; @@ -46,11 +41,5 @@ white-space: normal; text-align: center; } - &.mat-mdc-raised-button.mat-primary { - .mat-ripple-element { - opacity: 0.3; - background-color: rgba(255, 255, 255, 0.3); - } - } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html index 2f1f53968e..01f92c586b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html @@ -27,7 +27,7 @@ @for (place of sectionPlaces(section); track place) { - + {{place.icon}} {{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss index e4bf4b9462..6470ed3f71 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.scss @@ -42,16 +42,10 @@ padding: 16px; } } - .tb-card-button { + .tb-card-button.mat-mdc-outlined-button { width: 100%; height: 100%; max-width: 240px; - &:hover { - border-bottom: none; - } - &:focus { - border-bottom: none; - } display: flex; flex-direction: column; align-items: center; @@ -70,12 +64,6 @@ white-space: normal; text-align: center; } - &.mat-mdc-raised-button.mat-primary { - .mat-ripple-element { - opacity: 0.3; - background-color: rgba(255, 255, 255, 0.3); - } - } } } } diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html index fd7724cd49..e08aabd6e8 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html +++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html @@ -29,7 +29,7 @@ @for (place of section.places; track place) { - + {{place.icon}} {{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}} diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss index 71d86ef85f..1d0dc71f00 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss +++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss @@ -42,16 +42,10 @@ padding: 16px; } } - .tb-card-button { + .tb-card-button.mat-mdc-outlined-button { width: 100%; height: 100%; max-width: 240px; - &:hover { - border-bottom: none; - } - &:focus { - border-bottom: none; - } display: flex; flex-direction: column; align-items: center; @@ -70,12 +64,6 @@ white-space: normal; text-align: center; } - &.mat-mdc-raised-button.mat-primary { - .mat-ripple-element { - opacity: 0.3; - background-color: rgba(255, 255, 255, 0.3); - } - } } } }