UI: simplify navigation cards/home-links and slim menu-models seed map

Drop hardcoded card-grid sizing and inline icon styles in the navigation-card / navigation-cards / home-links templates and stylesheets; tighten menu-models default seed map and menu-service helper accordingly.

ui-ngx/src/app/core/services/menu.models.ts

@@ -40,11 +40,6 @@ export interface MenuReference {
   pages?: Array<MenuReference>;
 }
 
-export interface HomeSectionReference {
-  name: string;
-  places: Array<MenuId>;
-}
-
 export interface HomeSection {
   name: string;
   places: Array<MenuSection>;
@@ -1064,107 +1059,14 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
   ]
 ]);
 
-const defaultHomeSectionMap = new Map<Authority, HomeSectionReference[]>([
-  [
-    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<MenuSection> => {
   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<HomeSection> => {
-  const references = defaultHomeSectionMap.get(authState.authUser.authority);
-  return (references || []).map(ref =>
-    homeReferenceToHomeSection(availableMenuSections, ref)).filter(section => !!section);
+export const buildUserHome = (currentMenuSections: MenuSection[]): Array<HomeSection> => {
+  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
+      };
+    }
   }
-};
+}

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);
         }
       }

ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<a mat-raised-button color="primary" class="tb-nav-button" href="{{settings.path}}" (click)="navigate($event, settings.path)">
+<a mat-stroked-button class="tb-nav-button" href="{{settings.path}}" (click)="navigate($event, settings.path)">
   <tb-icon matButtonIcon class="tb-mat-96">{{settings.icon}}</tb-icon>
   <span>{{translatedName}}</span>
 </a>

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);
-      }
-    }
   }
 }

ui-ngx/src/app/modules/home/components/widget/lib/navigation-cards-widget.component.html

@@ -27,7 +27,7 @@
             <mat-grid-list rowHeight="170px" [cols]="sectionPlaces(section).length">
               @for (place of sectionPlaces(section); track place) {
                 <mat-grid-tile>
-                  <a mat-raised-button color="primary" class="tb-card-button" href="{{place.path}}" (click)="navigate($event, place.path)">
+                  <a mat-stroked-button class="tb-card-button" href="{{place.path}}" (click)="navigate($event, place.path)">
                     <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
                     <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
                   </a>

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);
-        }
-      }
     }
   }
 }

ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html

@@ -29,7 +29,7 @@
             <mat-grid-list rowHeight="170px" [cols]="section.places.length">
               @for (place of section.places; track place) {
                 <mat-grid-tile>
-                  <a mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
+                  <a mat-stroked-button class="tb-card-button" routerLink="{{place.path}}">
                     <tb-icon matButtonIcon class="tb-mat-96">{{place.icon}}</tb-icon>
                     <span>{{place.customTranslate ? (place.name | customTranslate) : (place.name | translate)}}</span>
                   </a>

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);
-        }
-      }
     }
   }
 }