From fee4e3a2535744319425cf2e474ebc7967169139 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 1 Mar 2021 18:15:31 +0200
Subject: [PATCH] UI: Improvement widget preview view

---
 .../dashboard-page/dashboard-widget-select.component.html   | 2 +-
 .../dashboard-page/dashboard-widget-select.component.scss   | 6 +++++-
 .../modules/home/components/details-panel.component.html    | 4 ++--
 .../home/components/import-export/import-export.service.ts  | 1 +
 .../shared/components/widgets-bundle-select.component.scss  | 1 +
 ui-ngx/src/styles.scss                                      | 4 ++--
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 438893dbd1..e118594544 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/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)">
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
index f9ca857a9e..6862d122a9 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/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;
 
diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html
index 67575f893f..5df90d6da9 100644
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts b/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts
index bebb324068..8a275a8160 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts
+++ b/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: []
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss
index 4c261cefb3..83e4ed0bcd 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.scss
+++ b/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;
             }
           }
         }
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index abe1dfc3e1..5a4db51b0e 100644
--- a/ui-ngx/src/styles.scss
+++ b/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);