MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[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:
Konstantinos Triantafyllou 2019-12-16 15:47:10 +00:00
parent 79d00f7f35
commit 8a4ebd48ef
3 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/topic/indicators.component.html
View File

@ -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')"

20
src/app/topic/indicators.component.ts
View File

@ -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() {

9
src/assets/theme-assets/dashboard-custom.css
View File

@ -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;
}