ui:(core, geo): fix input form width, change overly pane to fit-conte…

…nt (#1395) * ui:(core, geo): fix input form width, change overly pane to fit-content * change cdk-overlay-pane from core to filter theming * add providers mat_autocomplite and mat_select config to set overly fit-content * set the style locally
infra-geo-ouverte · Sep 21, 2023 · 7056094 · 7056094
1 parent fbc4ff7
commit 7056094
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/packages/geo/src/lib/filter/ogc-filter-form/ogc-filter-form.component.scss b/packages/geo/src/lib/filter/ogc-filter-form/ogc-filter-form.component.scss
@@ -28,17 +28,15 @@
 
   .logical {
     flex-flow: column nowrap;
-    width: 10%;
-    max-width: 84px;
-    margin-left: 5px;
+    width: 100%;
+    max-width: 60px;
+    margin-right: 5px;
   }
 
   .logicalHidden {
-    flex-flow: column nowrap;
-    width: 10%;
+    width: 0px;
     visibility: hidden;
-    max-width: 45px;
-    margin-left: 5px;
+    max-width: 0px;
   }
 
   ::ng-deep .logical .mat-mdc-select-arrow {
@@ -50,17 +48,17 @@
   }
 
   .field {
-    width: 20%;
+    width: 150px;
+    margin-right: 5px;
   }
 
   ::ng-deep .field .mat-mdc-select-arrow {
     visibility: hidden;
   }
 
   .operator {
-    width: 12%;
-    min-width: 150px;
-    margin-left: 10px;
+    width: 150px;
+    margin-right: 5px;
     text-align: center;
   }
 
@@ -69,34 +67,34 @@
   }
 
   .spatialSelector {
-    width: 15%;
-    margin-left: 5px;
+    width: 110px;
+    margin-right: 5px;
   }
 
   ::ng-deep .spatialSelector .mat-mdc-select-arrow {
     visibility: hidden;
   }
 
   .singleInput {
-    width: 30%;
-    margin-left: 5px;
+    width: 150px;
+    margin-right: 5px;
     @include mobile {
       width: 27%;
     }
   }
 
   .snrc {
-    width: 20%;
-    margin-left: 5px;
+    width: 110px;
+    margin-right: 5px;
   }
 
   ::ng-deep .singleInput .mat-mdc-select-arrow {
     visibility: hidden;
   }
 
   .dualInput {
-    width: 20%;
-    margin-left: 5px;
+    width: 150px;
+    margin-right: 5px;
   }
 
   ::ng-deep .dualInput .mat-mdc-select-arrow {

diff --git a/packages/geo/src/lib/filter/ogc-filter-time/ogc-filter-time.component.scss b/packages/geo/src/lib/filter/ogc-filter-time/ogc-filter-time.component.scss
@@ -68,6 +68,7 @@
   .year-input-only-year {
     width: 120px;
     margin-right: 25px;
+    text-align: left !important;
   }
 
   // to disable selection month and day for year picker

diff --git a/packages/geo/src/lib/filter/ogc-filterable-form/ogc-filterable-form.component.ts b/packages/geo/src/lib/filter/ogc-filterable-form/ogc-filterable-form.component.ts
@@ -1,10 +1,23 @@
 import { Component, Input } from '@angular/core';
 import { OgcFilterableDataSource } from '../shared/ogc-filter.interface';
 import { IgoMap } from '../../map/shared';
+import { MAT_SELECT_CONFIG } from '@angular/material/select';
+import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 
 @Component({
   selector: 'igo-ogc-filterable-form',
-  templateUrl: './ogc-filterable-form.component.html'
+  templateUrl: './ogc-filterable-form.component.html',
+  styles: ['::ng-deep.igo-overlay-panel-width { min-width: fit-content;}'],
+  providers: [
+    {
+      provide: MAT_SELECT_CONFIG,
+      useValue: { overlayPanelClass: 'igo-overlay-panel-width' }
+    },
+    {
+      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+      useValue: { overlayPanelClass: 'igo-overlay-panel-width' }
+    }
+  ]
 })
 export class OgcFilterableFormComponent {
   @Input() datasource: OgcFilterableDataSource;