[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
This commit is contained in:
parent
79d00f7f35
commit
8a4ebd48ef
|
@ -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'"
|
||||
long-click (onLongPress)="onLongPress('number')">
|
||||
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
|
||||
<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'"
|
||||
long-click (onLongPress)="onLongPress()">
|
||||
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
|
||||
<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')"
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue