fix(geo): color-picker style adjustments for the modal (#1681)

* fix(geo): adjustments for style modal layer color picker * fix(geo): draw button-toggle hide indicator --------- Co-authored-by: Alexandre Caron <[email protected]>
infra-geo-ouverte · May 31, 2024 · 8e0561e · 8e0561e
1 parent 6f84c0c
commit 8e0561e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 53 deletions.
diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts
@@ -25,7 +25,11 @@ import {
 } from '@angular/forms';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import {
+  MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
+  MatButtonToggleDefaultOptions,
+  MatButtonToggleModule
+} from '@angular/material/button-toggle';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
@@ -147,6 +151,14 @@ import { DrawShorcutsComponent } from './draw-shorcuts.component';
     MatBadgeModule,
     AsyncPipe,
     IgoLanguageModule
+  ],
+  providers: [
+    {
+      provide: MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
+      useValue: {
+        hideSingleSelectionIndicator: true
+      } satisfies MatButtonToggleDefaultOptions
+    }
   ]
 })
 export class DrawComponent implements OnInit, OnDestroy {

diff --git a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.html
@@ -1,24 +1,22 @@
-<h2 mat-dialog-title class="mat-typography">
+<h2 mat-dialog-title>
   {{ 'igo.geo.style.styleModal' | translate }}
 </h2>
 <div mat-dialog-content>
-  <div class="edition-drawing mat-typography">
+  <div class="edit-colorpicker">
     <form class="igo-form" [formGroup]="form">
-      <div
-        class="fill-color-picker mat-typography"
-        *ngIf="linestringOnly !== true"
-      >
-        <span>
-          <mat-icon class="stroke-palette-icon">format_color_fill</mat-icon>
-          {{ 'igo.geo.style.fill' | translate }}
-        </span>
-        <igo-color-picker-form-field
-          formControlName="fill"
-          (colorChange)="setLayerFillColor($event)"
-        ></igo-color-picker-form-field>
-      </div>
+      <div class="color-picker">
+        <ng-container *ngIf="linestringOnly !== true">
+          <span>
+            <mat-icon class="stroke-palette-icon">format_color_fill</mat-icon>
+            {{ 'igo.geo.style.fill' | translate }}
+          </span>
+
+          <igo-color-picker-form-field
+            formControlName="fill"
+            (colorChange)="setLayerFillColor($event)"
+          ></igo-color-picker-form-field>
+        </ng-container>
 
-      <div class="stroke-color-picker mat-typography">
         <span>
           <mat-icon class="stroke-palette-icon">border_color</mat-icon>
           {{ 'igo.geo.style.stroke' | translate }}

diff --git a/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.scss b/packages/geo/src/lib/style/style-modal/layer/style-modal-layer.component.scss
@@ -7,48 +7,27 @@ h2 {
   padding: 10px;
 }
 
-.fill-field,
-.stroke-field {
-  width: 130px;
-}
-
-.fill-color-picker {
-  mat-icon {
-    position: relative;
-    top: 7px;
-  }
-  mat-form-field {
-    left: 8px;
-  }
-}
-
-.stroke-color-picker {
-  mat-icon {
-    position: relative;
-    top: 7px;
-  }
-  mat-form-field {
-    left: 35px;
+.color-picker {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  grid-gap: 16px;
+  margin-bottom: 16px;
+
+  span {
+    display: flex;
+    align-items: center;
+
+    mat-icon {
+      margin-right: 8px;
+    }
   }
 }
 
-.box {
-  width: 25px;
-  height: 25px;
-}
-
-.edition-drawing {
+.edit-colorpicker {
   padding: 10px 0;
 }
 
-.igo-input-container .mat-mdc-form-field + .mat-form-field {
-  margin-left: 8px;
-}
-
-.igo-form-input-box {
-  width: 150px;
-}
-
 button {
   margin-right: 5px;
 }