[Monitor Dashboard | Trunk]: Reordering enabled always, but add on hover shadow.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57895 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/topic/indicators.component.html

@@ -58,8 +58,7 @@
         <div *ngIf="indicator" [id]="indicator._id"
              [class.uk-width-1-3@m]="grid && indicator.width === 'small'"
              [class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
-             [class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
+             [class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
-             long-click (onLongPress)="onLongPress('number')">
           <div class="md-card" [class.md-card-hover]="canNumbersReorder" [class.uk-sortable-nodrag]="!canNumbersReorder">
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
@@ -123,8 +122,7 @@
         <div *ngIf="indicator" [id]="indicator._id"
              [class.uk-width-1-3@m]="grid && indicator.width === 'small'"
              [class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
-             [class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
+             [class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
-             long-click (onLongPress)="onLongPress()">
           <div class="md-card" [class.md-card-hover]="canChartsReorder" [class.uk-sortable-nodrag]="!canChartsReorder">
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
@@ -235,7 +233,7 @@
 <modal-alert #editIndicatorModal
              [classBody]="'large-modal'"
              (alertOutput)="saveIndicator()"
-             [okDisabled]="indicatorFb && (indicatorFb.invalid ||(!indicatorFb.dirty && index !==-1))">
+             [okDisabled]="indicatorFb && (indicatorFb.invalid || indicatorFb.pristine)">
   <div *ngIf="indicatorFb" class="uk-padding-small" [formGroup]="indicatorFb">
     <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('name')" label="Title"></div>
     <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('description')"

src/app/topic/indicators.component.ts

@@ -53,8 +53,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
    * Toggles
    */
   public grid: boolean = true;
-  public numberReorder: boolean = false;
-  public chartReorder: boolean = false;
   private subscriptions: any[] = [];
   private urlSubscriptions: any[] = [];
   @ViewChild('editIndicatorModal') editIndicatorModal: AlertModal;
@@ -95,12 +93,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       };
       this.subscriptions.push(UIkit.util.on(document, 'moved', '#chart', callback));
       this.subscriptions.push(UIkit.util.on(document, 'moved', '#number', callback));
-      this.subscriptions.push(UIkit.util.on(document, 'stop', '#chart', (): void => {
-        this.chartReorder = false;
-      }));
-      this.subscriptions.push(UIkit.util.on(document, 'stop', '#number', (): void => {
-        this.numberReorder = false;
-      }));
     }
   }
   
@@ -163,14 +155,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
       this.filters.value.privacy);
   }
   
-  onLongPress(type = 'chart') {
-    if(type === 'number') {
-      this.numberReorder = true;
-    } else {
-      this.chartReorder = true;
-    }
-  }
-  
   onChartTypeChange(value) {
     this.displayCharts = this.filterChartType(this.charts, value);
   }
@@ -245,11 +229,11 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
   }
   
   get canNumbersReorder(): boolean {
-    return this.numberReorder && this.displayNumbers.length === this.numbers.length && this.grid;
+    return this.displayNumbers.length === this.numbers.length && this.grid;
   }
   
   get canChartsReorder(): boolean {
-    return this.chartReorder && this.displayCharts.length === this.charts.length && this.grid;
+    return this.displayCharts.length === this.charts.length && this.grid;
   }
   
   get canEdit() {

src/assets/theme-assets/dashboard-custom.css

@@ -183,6 +183,15 @@ body.dashboard {
   cursor: move;
 }
 
+.dashboard .uk-sortable-drag .md-card.md-card-hover {
+  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.dashboard .uk-sortable-drag  {
+  overflow: unset !important;
+}
+
 .uk-drag .dashboard .disable-sortable {
   pointer-events: none;
 }