UI: continue new-menu polish — home shell reorg, rule-chain page toolbar, navigation-card gaps

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

@@ -157,7 +157,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'tenant-profile.tenant-profiles',
       type: 'link',
       path: '/tenantProfiles',
-      icon: 'mdi:alpha-t-box'
+      icon: 'mdi:alpha-t-box-outline'
     }
   ],
   [
@@ -177,7 +177,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widget.widgets',
       type: 'link',
       path: '/resources/widgets-library',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -187,7 +187,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widget.widgets',
       type: 'link',
       path: '/resources/widgets-library/widget-types',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -197,7 +197,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'widgets-bundle.widgets-bundles',
       type: 'link',
       path: '/resources/widgets-library/widgets-bundles',
-      icon: 'now_widgets'
+      icon: 'mdi:widgets-outline'
     }
   ],
   [
@@ -227,7 +227,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'resource.files',
       type: 'link',
       path: '/resources/resources-library',
-      icon: 'mdi:rhombus-split'
+      icon: 'mdi:rhombus-split-outline'
     }
   ],
   [
@@ -383,7 +383,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.settings',
       type: 'link',
       path: '/settings',
-      icon: 'settings'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -394,7 +394,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.general-settings',
       type: 'link',
       path: '/settings/general',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -404,7 +404,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.outgoing-mail',
       type: 'link',
       path: '/settings/outgoing-mail',
-      icon: 'mail'
+      icon: 'mail_outline'
     }
   ],
   [
@@ -415,7 +415,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.home-settings',
       type: 'link',
       path: '/settings/home',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -426,7 +426,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'admin.notifications-settings',
       type: 'link',
       path: '/settings/notifications',
-      icon: 'mdi:message-badge'
+      icon: 'mdi:message-badge-outline'
     }
   ],
   [
@@ -479,7 +479,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       fullName: 'security.general-settings',
       type: 'link',
       path: '/security-settings/general',
-      icon: 'settings_applications'
+      icon: 'mdi:cog-outline'
     }
   ],
   [
@@ -499,7 +499,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'admin.oauth2.oauth2',
       type: 'link',
       path: '/security-settings/oauth2',
-      icon: 'mdi:shield-account'
+      icon: 'mdi:shield-account-outline'
     }
   ],
   [
@@ -579,7 +579,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'dashboard.dashboards',
       type: 'link',
       path: '/dashboards',
-      icon: 'dashboards'
+      icon: 'mdi:view-dashboard-outline'
     }
   ],
   [
@@ -619,7 +619,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'entity-view.entity-views',
       type: 'link',
       path: '/entities/entityViews',
-      icon: 'view_quilt'
+      icon: 'mdi:view-quilt-outline'
     }
   ],
   [
@@ -649,7 +649,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'device-profile.device-profiles',
       type: 'link',
       path: '/profiles/deviceProfiles',
-      icon: 'mdi:alpha-d-box'
+      icon: 'mdi:alpha-d-box-outline'
     }
   ],
   [
@@ -659,7 +659,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'asset-profile.asset-profiles',
       type: 'link',
       path: '/profiles/assetProfiles',
-      icon: 'mdi:alpha-a-box'
+      icon: 'mdi:alpha-a-box-outline'
     }
   ],
   [
@@ -679,7 +679,7 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'customer.customers',
       type: 'link',
       path: '/customers',
-      icon: 'supervisor_account'
+      icon: 'mdi:account-supervisor-outline'
     }
   ],
   [

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

@@ -26,6 +26,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    color: rgba(0,0,0,0.76);
     .mat-icon {
       margin: auto !important;
     }

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

@@ -49,6 +49,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      color: rgba(0,0,0,0.76);
       .mat-icon {
         margin: auto;
       }

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

@@ -55,40 +55,40 @@
           <button mat-icon-button id="main"
                   [class.!hidden]="forceFullscreen || displaySearchMode()"
                   class="gt-sm:!hidden" (click)="sidenav.toggle()">
-            <mat-icon class="material-icons">menu</mat-icon>
+            <mat-icon>menu</mat-icon>
           </button>
           <button mat-icon-button
                   [class.!hidden]="!forceFullscreen || displaySearchMode"
                   (click)="goBack()">
-            <mat-icon class="material-icons">arrow_back</mat-icon>
+            <mat-icon>arrow_back</mat-icon>
-          </button>
-          <button mat-icon-button
-                  [class.!hidden]="!displaySearchMode()"
-                  (click)="closeSearch()">
-            <mat-icon class="material-icons">arrow_back</mat-icon>
           </button>
           <tb-breadcrumb
             [class.!hidden]="displaySearchMode()"
             class="mat-toolbar-tools flex-1">
           </tb-breadcrumb>
-          <div [class.!hidden]="!displaySearchMode()" class="flex flex-1 flex-row">
+          @if (searchEnabled) {
-            <mat-form-field class="tb-appearance-transparent flex-1">
+            <div [class.!hidden]="!showSearch" [class.mr-4]="!textSearch.value" class="flex flex-1 flex-row">
-              <input #searchInput matInput
+              <mat-form-field class="tb-appearance-transparent flex-1">
-                     [formControl]="textSearch"
+                <input #searchInput matInput
-                     placeholder="{{ 'common.enter-search' | translate }}"/>
+                       [formControl]="textSearch"
-            </mat-form-field>
+                       placeholder="{{ 'common.enter-search' | translate }}"/>
-          </div>
+              </mat-form-field>
-          <button [class.!hidden]="!searchEnabled"
+            </div>
-                  mat-icon-button (click)="openSearch()">
+            <button [class.!hidden]="showSearch"
-            <mat-icon class="material-icons">search</mat-icon>
+                    mat-icon-button (click)="openSearch()">
-          </button>
+              <mat-icon>search</mat-icon>
+            </button>
+            <button [class.!hidden]="!showSearch"
+                    mat-icon-button (click)="closeSearch()">
+              <mat-icon>close</mat-icon>
+            </button>
+          }
           <tb-github-badge class="lt-md:!hidden"></tb-github-badge>
           @if (fullscreenEnabled) {
             <button
-              [class.!hidden]="displaySearchMode()"
               class="lt-md:!hidden"
               mat-icon-button (click)="toggleFullscreen()">
-              <mat-icon class="material-icons">{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+              <mat-icon>{{ isFullscreen() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
             </button>
           }
           <tb-notification-bell></tb-notification-bell>

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

@@ -49,6 +49,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      color: rgba(0,0,0,0.76);
       .mat-icon {
         margin: auto;
       }

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

@@ -185,7 +185,7 @@
           }
         </mat-drawer>
         <mat-drawer-content class="tb-rulechain-graph-content">
-          <button color="primary"
+          <button color="#fff"
                   mat-mini-fab
                   class="tb-library-node-btn"
                   (click)="drawer.toggle();"
@@ -194,7 +194,7 @@
             <mat-icon class="tb-library-node-btn-icon" [class.tb-library-node-btn-icon-toggled]="drawer.opened">chevron_right</mat-icon>
           </button>
           @if (!isImport) {
-            <button color="primary"
+            <button color="#fff"
                     type="button"
                     mat-mini-fab class="add-note-button"
                     (click)="addNote()"
@@ -203,7 +203,7 @@
               <mat-icon>sticky_note_2</mat-icon>
             </button>
             <button #versionControlButton
-                    color="primary"
+                    color="#fff"
                     type="button"
                     mat-mini-fab class="version-control-button"
                     (click)="toggleVersionControl($event, versionControlButton)"

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss

@@ -69,7 +69,7 @@
     position: absolute;
     top: 50%;
     z-index: 1000;
-    opacity: 0.5;
+    opacity: 0.8;
     border-radius: 0 15px 15px 0 !important;
     transform: translateY(-50%);
     &-icon {
@@ -86,7 +86,7 @@
       content: "";
       pointer-events: none;
       border-radius: 0 0 0 15px;
-      box-shadow: -10px 0px 0 0px #305680;
+      box-shadow: -10px 0px 0 0px #fff;
       border: none;
     }
     &:after {
@@ -98,7 +98,7 @@
       content: "";
       pointer-events: none;
       border-top-left-radius: 15px;
-      box-shadow: -10px 0px 0px 0px #305680;
+      box-shadow: -10px 0px 0px 0px #fff;
       border: none;
     }
   }