UI: Improvement widget preview view

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html

@@ -37,7 +37,7 @@
   <span translate *ngIf="widgetsBundle && !hasWidgetTypes()"
         style="display: flex;"
         fxLayoutAlign="center center"
-        class="mat-headline tb-absolute-fill">widgets-bundle.empty</span>
+        class="mat-headline">widgets-bundle.empty</span>
   <div *ngIf="!widgetsBundle" fxFlexFill fxLayoutGap="12px grid" fxLayout="row wrap">
     <div *ngFor="let widgetsBundle of widgetsBundles$ | async" class="mat-card-container">
       <mat-card fxFlexFill fxLayout="row" fxLayoutGap="16px" (click)="selectBundle($event, widgetsBundle)">

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss

@@ -16,8 +16,12 @@
 @import '../../../../../scss/constants';
 
 :host{
+  min-width: 100%;
+  min-height: 100%;
+  position: absolute;
+  background-color: #cfd8dc;
+
   .widget-select {
-    min-height: 100%;
     padding: 12px 0 12px 12px;
     background-color: #cfd8dc;
 

ui-ngx/src/app/modules/home/components/details-panel.component.html

@@ -19,8 +19,8 @@
   <mat-toolbar class="details-toolbar" color="primary" [ngStyle]="{height: headerHeightPx+'px'}">
     <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" style="height: 100%;">
       <div class="mat-toolbar-tools tb-details-title-header" fxFlex fxLayout="column" fxLayoutAlign="start start">
-        <div class="tb-details-title" fxLayout="row" fxLayoutGap="16px">
-          <button class="tb-mat-20" mat-icon-button type="button" [fxHide]="!showBackStateIcon" (click)="onBackStateDetails()">
+        <div class="tb-details-title" fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+          <button class="tb-mat-28" mat-icon-button type="button" [fxHide]="!showBackStateIcon" (click)="onBackStateDetails()">
             <mat-icon>arrow_back</mat-icon>
           </button>
           <span>{{ headerTitle }}</span>

ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts

@@ -274,6 +274,7 @@ export class ImportExportService {
         const isSystem = widgetsBundle.tenantId.id === NULL_UUID;
         this.widgetService.getBundleWidgetTypes(bundleAlias, isSystem).subscribe(
           (widgetTypes) => {
+            widgetTypes = widgetTypes.sort((a, b) => a.createdTime - b.createdTime);
             const widgetsBundleItem: WidgetsBundleItem = {
               widgetsBundle: this.prepareExport(widgetsBundle),
               widgetTypes: []

ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss

@@ -89,6 +89,7 @@ mat-toolbar {
             .mat-select-placeholder {
               color: #fff;
               opacity: .8;
+              line-height: 26px;
             }
           }
         }

ui-ngx/src/styles.scss

@@ -762,8 +762,8 @@ mat-label {
   }
 
   .mat-icon-button {
-    &.tb-mat-20 {
-      @include tb-mat-icon-button-size(20);
+    &.tb-mat-28 {
+      @include tb-mat-icon-button-size(28);
     }
     &.tb-mat-32 {
       @include tb-mat-icon-button-size(32);