feat(measurer): Display distances of the measures of a polygon (#878)

* feat(measurer):display distances for the areas * float(measurer): display distances of the areas * feat(measurer):display distances of the areas * feat(print): print measurement tooltips * lint * feat(context):keeps distance-tooltips after switch * feat(context):keeps distance-tooltips after switch * feat(context):keeps distance-tooltips after switch * feat(measurer):Display distances of the measures * feat(measurer):Display distances of the measures * wip * feat(context):display measurements * feat(context):display measurements * wip Co-authored-by: Pierre-Etienne Lord <[email protected]>
infra-geo-ouverte · Jun 23, 2021 · 5e4612d · 5e4612d
1 parent f9e530c
commit 5e4612d
Show file tree

Hide file tree

Showing 8 changed files with 275 additions and 56 deletions.
diff --git a/packages/geo/src/lib/measure/measurer/measurer.component.html b/packages/geo/src/lib/measure/measurer/measurer.component.html
@@ -21,10 +21,26 @@
     </mat-slide-toggle>
 
     <mat-slide-toggle
-      [checked]="showTooltips"
+      [checked]="displayLines"
       [labelPosition]="'before'"
-      (change)="onToggleTooltips($event.checked)">
-      {{'igo.geo.measure.toggleMapTooltips' | translate}}
+      (change)="onToggleDisplayLines($event.checked)">
+      {{'igo.geo.measure.toggleDisplayLines' | translate}}
+    </mat-slide-toggle> 
+
+    <mat-slide-toggle
+      [disabled]="!(hasArea$ | async)"
+      [checked]="displayDistance"
+      [labelPosition]="'before'"
+      (change)="onToggleDisplayDistance($event.checked)">
+      {{'igo.geo.measure.toggleDisplayDistance' | translate}}
+    </mat-slide-toggle>
+
+    <mat-slide-toggle
+      [disabled]="!(hasArea$ | async)"
+      [checked]="displayAreas"
+      [labelPosition]="'before'"
+      (change)="onToggleDisplayAreas($event.checked)">
+      {{'igo.geo.measure.toggleDisplayAreas' | translate}}
     </mat-slide-toggle>
 
     <mat-slide-toggle

diff --git a/packages/geo/src/lib/measure/measurer/measurer.component.scss b/packages/geo/src/lib/measure/measurer/measurer.component.scss
@@ -40,3 +40,42 @@ $slide-toggle-width: 60px;
 .table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox {
   width: 52px;
 }
+
+@mixin igo-measurer-theming($theme, $typography) {
+  $foreground: map-get($theme, foreground);
+
+  .igo-map-tooltip-measure {
+    background-color: rgba(255, 204, 51, 0.7);
+    border: 1px solid rgb(255, 205, 51);
+    color: mat-color($foreground, text);
+    font-weight: bold;
+    font-size: mat-font-size($typography, subheading-2);
+  }
+  .igo-map-tooltip-measure-area {
+    background-color: rgba(255, 204, 51, 0.7);
+    border: 1px solid rgb(255, 205, 51);
+    color: mat-color($foreground, text);
+    font-weight: bold;
+    font-size: mat-font-size($typography, subheading-2);
+  }
+  .igo-map-tooltip-measure-line-segments {
+    background-color: rgba(255, 204, 51, 0.7);
+    border: 1px solid rgb(255, 205, 51);
+    color: mat-color($foreground, text);
+    font-weight: bold;
+    font-size: mat-font-size($typography, subheading-2);
+  }
+  .igo-map-tooltip-measure-polygone-segments {
+    background-color: rgba(255, 204, 51, 0.7);
+    border: 1px solid rgb(255, 205, 51);
+    color: mat-color($foreground, text);
+    font-weight: bold;
+    font-size: mat-font-size($typography, subheading-2);
+  }
+  .igo-map-tooltip-hidden {
+    display: none;
+  }
+  .igo-map-tooltip-measure-by-display{
+    display: none;
+  }
+}