From 6b931aa86c9ca5590ed830d31ab6437ff872f5c1 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Tue, 11 Jun 2019 10:16:00 +0200
Subject: [PATCH] =?UTF-8?q?Nouvelles=20cases=20cliquables,=20s=C3=A9lectio?=
=?UTF-8?q?n=20en=20bleu,=20suppression=20des=20bordures=20de=20cases=20su?=
=?UTF-8?q?r=20Firefox=20(ctrl+clic)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../pab-table/pab-table.component.html | 10 +++-
.../pab-table/pab-table.component.scss | 9 +---
.../pab-table/pab-table.component.ts | 46 ++++++++++++++-----
src/theme.scss | 9 ++++
4 files changed, 54 insertions(+), 20 deletions(-)
diff --git a/src/app/components/pab-table/pab-table.component.html b/src/app/components/pab-table/pab-table.component.html
index 936d5eaee..11d96c74d 100644
--- a/src/app/components/pab-table/pab-table.component.html
+++ b/src/app/components/pab-table/pab-table.component.html
@@ -14,6 +14,7 @@
<tr>
<th *ngFor="let h of headers"
(click)="toggleSelection(h, $event)"
+ (mousedown)="preventCtrlClickBorder($event)"
[attr.rowspan]="h.rowspan ? h.rowspan : null" [attr.colspan]="h.colspan ? h.colspan : null"
[class.selectable-cell]="isSelectable(h)" [class.selected-cell]="isSelected(h)">
@@ -21,7 +22,13 @@
</th>
</tr>
<tr>
- <th *ngFor="let col of columns">{{ col.title }}</th>
+ <th *ngFor="let col of columns"
+ (click)="toggleSelection(col, $event)"
+ (mousedown)="preventCtrlClickBorder($event)"
+ [class.selectable-cell]="isSelectable(col)" [class.selected-cell]="isSelected(col)">
+
+ {{ col.title }}
+ </th>
</tr>
</ng-template>
@@ -29,6 +36,7 @@
<tr [class.selected-row]="isSelected(row)">
<td *ngFor="let cell of row.cells"
(click)="toggleSelection(cell, $event)"
+ (mousedown)="preventCtrlClickBorder($event)"
[ngClass]="cell.class"
[class.editable-cell]="hasModel(cell)" [class.readonly-cell]="! hasModel(cell)"
[class.selectable-cell]="isSelectable(cell)" [class.selected-cell]="isSelected(cell) && ! isSelected(row)"
diff --git a/src/app/components/pab-table/pab-table.component.scss b/src/app/components/pab-table/pab-table.component.scss
index 05a284ae0..ec0cd7277 100644
--- a/src/app/components/pab-table/pab-table.component.scss
+++ b/src/app/components/pab-table/pab-table.component.scss
@@ -29,22 +29,17 @@ mat-card-content {
@import "../../../theme.scss";
.editable-cell-bg {
- // background-color: #e9f5ff;
- // background-color: yellow;
@extend .bg-accent-extralight;
}
.selected-row-bg {
- // background-color: green;
// @extend .bg-warn-extralight;
- @extend .bg-warn-extralight;
+ @extend .bg-accent-extralight;
}
.selected-cell-bg {
- // background-color: red;
// @extend .bg-warn-extralight;
- @extend .bg-warn-extralight;
+ @extend .bg-accent-extralight;
}
.selected-editable-cell-bg {
- // background-color: red;
@extend .bg-accent-verylight;
}
diff --git a/src/app/components/pab-table/pab-table.component.ts b/src/app/components/pab-table/pab-table.component.ts
index 0364c44b8..dbb77fca4 100644
--- a/src/app/components/pab-table/pab-table.component.ts
+++ b/src/app/components/pab-table/pab-table.component.ts
@@ -221,9 +221,16 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
}
this.latestClickedCell = cell;
// @TODO
- /* $event.preventDefault();
+ $event.preventDefault();
$event.stopPropagation();
- return false; */
+ return false;
+ }
+ }
+
+ // prevents Firefox to display weird cell border when ctrl+clicking
+ public preventCtrlClickBorder($event) {
+ if ($event.ctrlKey) {
+ $event.preventDefault();
}
}
@@ -342,9 +349,12 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
// 0. build spanned headers over real columns
this.headers = [];
// 1 header for basin
+ let bs: any[] = this.model.children;
+ bs = bs.concat(this.model.downWall);
this.headers.push({
title: "Bassin",
- colspan: 6
+ colspan: 6,
+ selectable: bs
});
// 1 header for each device of the wall having the most devices (including downwall)
for (let i = 0; i < maxNbDevices; i++) {
@@ -360,34 +370,46 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
this.cols = [];
// 6 cols for basin
this.cols.push({
- title: "N° de bassin"
+ title: "N° de bassin",
+ selectable: bs
});
this.cols.push({
- title: "Longueur"
+ title: "Longueur",
+ selectable: bs
});
this.cols.push({
- title: "Largeur"
+ title: "Largeur",
+ selectable: bs
});
this.cols.push({
- title: "Débit d'attrait"
+ title: "Débit d'attrait",
+ selectable: bs
});
this.cols.push({
- title: "Cote radier mi-bassin"
+ title: "Cote radier mi-bassin",
+ selectable: bs
});
this.cols.push({
- title: "Cote radier amont paroi"
+ title: "Cote radier amont paroi",
+ selectable: bs
});
// no col for wall type (defined by rowspan-2 header above)
// 3 cols for each device of the wall having the most devices (including downwall)
for (let i = 0; i < maxNbDevices; i++) {
this.cols.push({
- title: "Type"
+ title: "Type",
+ selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]),
+ selectableColumn: i
});
this.cols.push({
- title: "Paramètres"
+ title: "Paramètres",
+ selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]),
+ selectableColumn: i
});
this.cols.push({
- title: "Valeurs"
+ title: "Valeurs",
+ selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]),
+ selectableColumn: i
});
}
diff --git a/src/theme.scss b/src/theme.scss
index f1704256b..f45053954 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -193,6 +193,9 @@ $warn: map-get($nghyd-theme, warn);
.bg-primary-light {
background-color: mat-color($primary, 300);
}
+.bg-primary-lighter {
+ background-color: mat-color($primary, 200);
+}
.bg-primary-verylight {
background-color: mat-color($primary, 100);
}
@@ -209,6 +212,9 @@ $warn: map-get($nghyd-theme, warn);
.bg-accent-light {
background-color: mat-color($accent, 300);
}
+.bg-accent-lighter {
+ background-color: mat-color($accent, 200);
+}
.bg-accent-verylight {
background-color: mat-color($accent, 100);
}
@@ -225,6 +231,9 @@ $warn: map-get($nghyd-theme, warn);
.bg-warn-light {
background-color: mat-color($warn, 300);
}
+.bg-warn-lighter {
+ background-color: mat-color($warn, 200);
+}
.bg-warn-verylight {
background-color: mat-color($warn, 100);
}
--
GitLab