From c631d4e350318343d9efb5deae2d4ca4bba090d5 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Fri, 12 Jul 2019 11:28:54 +0200
Subject: [PATCH] PAB profile graph: enable resetZoom button only when zoom
changed; add "title" to graph buttons
---
.../pab-profile-graph.component.html | 8 ++--
.../pab-profile-graph.component.scss | 6 +++
.../pab-profile-graph.component.ts | 38 +++++++++++++++++--
src/locale/messages.en.json | 4 ++
src/locale/messages.fr.json | 4 ++
5 files changed, 53 insertions(+), 7 deletions(-)
diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.html b/src/app/components/pab-profile-graph/pab-profile-graph.component.html
index 954f059c1..28b4288fd 100644
--- a/src/app/components/pab-profile-graph/pab-profile-graph.component.html
+++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.html
@@ -1,16 +1,16 @@
<div class="graph-results-container" #graphProfile fxLayout="row wrap" fxLayoutAlign="center center">
<div fxFlex="1 1 100%">
<div class="graph-profile-buttons">
- <button mat-icon-button (click)="resetZoom()">
+ <button mat-icon-button (click)="resetZoom()" [disabled]="! zoomWasChanged" [title]="uitextResetZoomTitle">
<mat-icon color="primary">replay</mat-icon>
</button>
- <button mat-icon-button (click)="exportAsImage(graphProfile)">
+ <button mat-icon-button (click)="exportAsImage(graphProfile)" [title]="uitextExportImageTitle">
<mat-icon color="primary">image</mat-icon>
</button>
- <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(graphProfile)">
+ <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(graphProfile)" [title]="uitextEnterFSTitle">
<mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
</button>
- <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()">
+ <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
<mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
</button>
</div>
diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.scss b/src/app/components/pab-profile-graph/pab-profile-graph.component.scss
index 6382f8a70..465866a6c 100644
--- a/src/app/components/pab-profile-graph/pab-profile-graph.component.scss
+++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.scss
@@ -19,5 +19,11 @@
transform: scale(1.2);
}
}
+
+ &:disabled {
+ mat-icon {
+ color: #bfbfbf;
+ }
+ }
}
}
diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
index 4eb60ec9a..9cc7da3ae 100644
--- a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
+++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, ChangeDetectorRef } from "@angular/core";
import { ChartComponent } from "angular2-chartjs";
@@ -27,6 +27,8 @@ export class PabProfileGraphComponent extends ResultsComponent {
/** inferred extended values list for each variating parameter */
private varValues = [];
+ private _zoomWasChanged = false;
+
/*
* config du graphe
*/
@@ -55,7 +57,8 @@ export class PabProfileGraphComponent extends ResultsComponent {
public constructor(
private appSetupService: ApplicationSetupService,
- private intlService: I18nService
+ private intlService: I18nService,
+ private cd: ChangeDetectorRef
) {
super();
const nDigits = this.appSetupService.displayDigits;
@@ -85,6 +88,7 @@ export class PabProfileGraphComponent extends ResultsComponent {
}]
};
// enable zoom and pan (using "chartjs-plugin-zoom" package)
+ const that = this;
this.graph_options["plugins"] = {
zoom: {
pan: {
@@ -96,7 +100,8 @@ export class PabProfileGraphComponent extends ResultsComponent {
drag: true, // conflicts with pan; set to false to enable mouse wheel zoom
mode: "xy",
// percentage of zoom on a wheel event
- speed: 0.1,
+ // speed: 0.1,
+ onZoomComplete: function(t: any) { return function() { t.zoomComplete(); }; }(that)
}
}
};
@@ -130,6 +135,16 @@ export class PabProfileGraphComponent extends ResultsComponent {
}
}
+ private zoomComplete() {
+ console.log("zoom complete du Q !");
+ this._zoomWasChanged = true;
+ this.cd.detectChanges();
+ }
+
+ public get zoomWasChanged(): boolean {
+ return this._zoomWasChanged;
+ }
+
public updateView() {
this.generateScatterGraph();
}
@@ -193,6 +208,23 @@ export class PabProfileGraphComponent extends ResultsComponent {
public resetZoom() {
this.chartComponent.chart.resetZoom();
+ this._zoomWasChanged = false;
+ }
+
+ public get uitextResetZoomTitle() {
+ return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_RESET_ZOOM");
+ }
+
+ public get uitextExportImageTitle() {
+ return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE");
+ }
+
+ public get uitextEnterFSTitle() {
+ return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_ENTER_FS");
+ }
+
+ public get uitextExitFSTitle() {
+ return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXIT_FS");
}
private getXSeries(): string[] {
diff --git a/src/locale/messages.en.json b/src/locale/messages.en.json
index 5e07c524b..1fce8bfcd 100644
--- a/src/locale/messages.en.json
+++ b/src/locale/messages.en.json
@@ -101,6 +101,10 @@
"INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_1": "Partially submerged",
"INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_2": "Submerged",
"INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_3": "Zero flow",
+ "INFO_GRAPH_BUTTON_TITLE_RESET_ZOOM": "Restore default zoom",
+ "INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE": "Save picture",
+ "INFO_GRAPH_BUTTON_TITLE_ENTER_FS": "Display fullscreen",
+ "INFO_GRAPH_BUTTON_TITLE_EXIT_FS": "Exis fullscreen mode",
"INFO_DEVICE_ADDED": "1 device added",
"INFO_DEVICE_ADDED_N_TIMES": "%s devices added",
"INFO_DEVICE_COPIED": "Device #%s copied",
diff --git a/src/locale/messages.fr.json b/src/locale/messages.fr.json
index 8b97db895..1c4ace04c 100644
--- a/src/locale/messages.fr.json
+++ b/src/locale/messages.fr.json
@@ -101,6 +101,10 @@
"INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_1": "Partiellement noyé",
"INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_2": "Noyé",
"INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_3": "Débit nul",
+ "INFO_GRAPH_BUTTON_TITLE_RESET_ZOOM": "Réinitialiser le zoom",
+ "INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE": "Enregistrer l'image",
+ "INFO_GRAPH_BUTTON_TITLE_ENTER_FS": "Afficher en plein écran",
+ "INFO_GRAPH_BUTTON_TITLE_EXIT_FS": "Sortir du mode plein écran",
"INFO_DEVICE_ADDED": "1 ouvrage ajouté",
"INFO_DEVICE_ADDED_N_TIMES": "%s ouvrages ajoutés",
"INFO_DEVICE_COPIED": "Ouvrage n°%s copié",
--
GitLab