UI: Improve menu sections height calculation. Improve entities table border.

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

@@ -24,7 +24,6 @@ export interface MenuSection extends HasUUID{
   path: string;
   icon: string;
   isMdiIcon?: boolean;
-  height?: string;
   pages?: Array<MenuSection>;
   opened?: boolean;
   disabled?: boolean;

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

@@ -58,8 +58,8 @@ export class MenuService {
           let homeSections: Array<HomeSection>;
           switch (authState.authUser.authority) {
             case Authority.SYS_ADMIN:
-              this.currentMenuSections = this.buildSysAdminMenu(authState);
-              homeSections = this.buildSysAdminHome(authState);
+              this.currentMenuSections = this.buildSysAdminMenu();
+              homeSections = this.buildSysAdminHome();
               break;
             case Authority.TENANT_ADMIN:
               this.currentMenuSections = this.buildTenantAdminMenu(authState);
@@ -87,7 +87,7 @@ export class MenuService {
     );
   }
 
-  private buildSysAdminMenu(authState: AuthState): Array<MenuSection> {
+  private buildSysAdminMenu(): Array<MenuSection> {
     const sections: Array<MenuSection> = [];
     sections.push(
       {
@@ -117,7 +117,6 @@ export class MenuService {
         name: 'admin.resources',
         type: 'toggle',
         path: '/resources',
-        height: '80px',
         icon: 'folder',
         pages: [
           {
@@ -180,7 +179,6 @@ export class MenuService {
         name: 'security.security',
         type: 'toggle',
         path: '/security-settings',
-        height: '120px',
         icon: 'security',
         pages: [
           {
@@ -212,7 +210,7 @@ export class MenuService {
     return sections;
   }
 
-  private buildSysAdminHome(authState: AuthState): Array<HomeSection> {
+  private buildSysAdminHome(): Array<HomeSection> {
     const homeSections: Array<HomeSection> = [];
     homeSections.push(
       {
@@ -320,7 +318,6 @@ export class MenuService {
         name: 'entity.entities',
         type: 'toggle',
         path: '/entities',
-        height: '120px',
         icon: 'category',
         pages: [
           {
@@ -351,7 +348,6 @@ export class MenuService {
         name: 'profiles.profiles',
         type: 'toggle',
         path: '/profiles',
-        height: '80px',
         icon: 'badge',
         pages: [
           {
@@ -387,7 +383,6 @@ export class MenuService {
           name: 'edge.management',
           type: 'toggle',
           path: '/edgeManagement',
-          height: '80px',
           icon: 'settings_input_antenna',
           pages: [
             {
@@ -414,7 +409,6 @@ export class MenuService {
         name: 'feature.advanced-features',
         type: 'toggle',
         path: '/features',
-        height: '120px',
         icon: 'construction',
         pages: [
           {
@@ -445,7 +439,6 @@ export class MenuService {
         name: 'admin.resources',
         type: 'toggle',
         path: '/resources',
-        height: '80px',
         icon: 'folder',
         pages: [
           {
@@ -554,7 +547,6 @@ export class MenuService {
         name: 'security.security',
         type: 'toggle',
         path: '/security-settings',
-        height: '40px',
         icon: 'security',
         pages: [
           {
@@ -759,7 +751,6 @@ export class MenuService {
         name: 'entity.entities',
         type: 'toggle',
         path: '/entities',
-        height: '120px',
         icon: 'category',
         pages: [
           {

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
     <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss

@@ -24,6 +24,13 @@
       width: 100%;
       height: 100%;
       background: #fff;
+      overflow: hidden;
+
+      &.tb-outlined-border {
+        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
+        border: solid 1px #e0e0e0;
+        border-radius: 4px;
+      }
 
       .mat-toolbar-tools{
         min-height: auto;

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -34,7 +34,7 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+      <div fxLayout="column" class="tb-entity-table-content tb-outlined-border">
         <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">

ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss

@@ -29,6 +29,13 @@
       width: 100%;
       height: 100%;
       background: #fff;
+      overflow: hidden;
+
+      &.tb-outlined-border {
+        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
+        border: solid 1px #e0e0e0;
+        border-radius: 4px;
+      }
 
       .mat-toolbar-tools{
         min-height: auto;

ui-ngx/src/app/modules/home/components/relation/relation-table.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
     <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">
         <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">

ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss

@@ -24,6 +24,13 @@
       width: 100%;
       height: 100%;
       background: #fff;
+      overflow: hidden;
+
+      &.tb-outlined-border {
+        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
+        border: solid 1px #e0e0e0;
+        border-radius: 4px;
+      }
 
       .mat-toolbar-tools{
         min-height: auto;

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill" [ngClass]="{'tb-popover-mode': popoverComponent}">
-  <div fxFlex fxLayout="column" class="tb-entity-table-content" [ngClass]="{'mat-elevation-z1': !popoverComponent}">
+  <div fxFlex fxLayout="column" class="tb-entity-table-content" [ngClass]="{'tb-outlined-border': !popoverComponent}">
     <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container">

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.scss

@@ -31,6 +31,13 @@
       width: 100%;
       height: 100%;
       background: #fff;
+      overflow: hidden;
+
+      &.tb-outlined-border {
+        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
+        border: solid 1px #e0e0e0;
+        border-radius: 4px;
+      }
 
       .mat-toolbar-tools{
         min-height: auto;

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="mat-padding tb-entity-table tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+  <div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
     <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <span class="tb-entity-table-title" translate>widget-config.actions</span>

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss

@@ -22,6 +22,13 @@
       width: 100%;
       height: 100%;
       background: #fff;
+      overflow: hidden;
+
+      &.tb-outlined-border {
+        box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%);
+        border: solid 1px #e0e0e0;
+        border-radius: 4px;
+      }
 
       .tb-entity-table-title {
         padding-right: 20px;

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

@@ -16,7 +16,7 @@
 
 -->
 <a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}">
-  <mat-icon *ngIf="!section.isMdiIcon && section.icon !== null" class="tb-mat-18">{{section.icon}}</mat-icon>
-  <mat-icon *ngIf="section.isMdiIcon && section.icon !== null" [svgIcon]="section.icon" class="tb-mat-18"></mat-icon>
+  <mat-icon *ngIf="!section.isMdiIcon && section.icon !== null">{{section.icon}}</mat-icon>
+  <mat-icon *ngIf="section.isMdiIcon && section.icon !== null" [svgIcon]="section.icon"></mat-icon>
   <span>{{section.name | translate}}</span>
 </a>

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

@@ -16,8 +16,8 @@
 
 -->
 <a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
-  <mat-icon *ngIf="!section.isMdiIcon && section.icon !== null" class="tb-mat-18">{{section.icon}}</mat-icon>
-  <mat-icon *ngIf="section.isMdiIcon && section.icon !== null" [svgIcon]="section.icon" class="tb-mat-18"></mat-icon>
+  <mat-icon *ngIf="!section.isMdiIcon && section.icon !== null">{{section.icon}}</mat-icon>
+  <mat-icon *ngIf="section.isMdiIcon && section.icon !== null" [svgIcon]="section.icon"></mat-icon>
   <span>{{section.name | translate}}</span>
   <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
         [ngClass]="{'tb-toggled' : section.opened}"></span>

ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts

@@ -40,7 +40,7 @@ export class MenuToggleComponent implements OnInit {
 
   sectionHeight(): string {
     if (this.section.opened) {
-      return this.section.height;
+      return this.section.pages.length * 40 + 'px';
     } else {
       return '0px';
     }

ui-ngx/src/app/modules/home/menu/side-menu.component.scss

@@ -63,6 +63,7 @@
       white-space: nowrap;
       display: inline-flex;
       & > span {
+        letter-spacing: .03125em;
         overflow: hidden;
         text-overflow: ellipsis;
       }