ui(*map-browser): Modifications on multiple interface elemen… (#313)

* feat/ui/fix(*map-browser): Modifications on multiple interface elements (map-browser, toast-panel, expansion-panel, sidenav) * ui(expansion-panel): Modified theme and margin when expanded * Update config.json
infra-geo-ouverte · Sep 18, 2019 · 6d3786f · 6d3786f
1 parent 3f1b13b
commit 6d3786f
Show file tree

Hide file tree

Showing 11 changed files with 305 additions and 62 deletions.
diff --git a/src/app/pages/portal/expansion-panel/expansion-panel-header.component.html b/src/app/pages/portal/expansion-panel/expansion-panel-header.component.html
@@ -1,6 +1,6 @@
 <div>
   <div class="app-expansion-panel-trigger-container">
-    <button mat-icon-button (click)="onToggleClick()">
+    <button mat-icon-button (click)="onToggleClick()" color="primary">
       <mat-icon *ngIf="!expanded" svgIcon="launch"></mat-icon>
       <mat-icon *ngIf="expanded" style="transform: rotate(180deg)" svgIcon="launch"></mat-icon>
     </button>

diff --git a/src/app/pages/portal/expansion-panel/expansion-panel-header.component.scss b/src/app/pages/portal/expansion-panel/expansion-panel-header.component.scss
@@ -13,7 +13,3 @@
 .app-expansion-panel-content {
   display: inline-flex;
 }
-
-button {
-  margin: 4px 6px;
-}
diff --git a/src/app/pages/portal/portal.animation.ts b/src/app/pages/portal/portal.animation.ts
@@ -9,40 +9,81 @@ import {
   AnimationTriggerMetadata
 } from '@angular/animations';
 
-export function expansionPanelAnimation(): AnimationTriggerMetadata {
-  return trigger('expansionPanelSize', [
-    state(
-      'full',
-      style({
-        left: '0px',
-        'max-width': '100%'
-      })
-    ),
-    state(
-      'notVisible',
-      style({
-        display: 'none'
-      })
-    ),
-    state(
-      'mobile',
-      style({
-        left: 'calc(100% - 40px)',
-      })
-    ),
-    state(
-      'reduced',
-      style({
-        left: '405px',
-        'max-width': 'calc(100% - 405px)'
-      })
-    ),
-    transition('* => *', animate('200ms'))
-  ]);
+export function expansionPanelAnimation(): AnimationTriggerMetadata[] {
+  return [
+    trigger('expansionPanelSize', [
+      state(
+        'full',
+        style({
+          left: '5px',
+          'max-width': '100%'
+        })
+      ),
+      state(
+        'notTriggered',
+        style({
+          left: '5px',
+          bottom: '5px',
+          'max-width': '100%'
+        })
+      ),
+      state(
+        'notVisible',
+        style({
+          display: 'none'
+        })
+      ),
+      state(
+        'mobile',
+        style({
+          left: 'calc(100% - 40px)',
+        })
+      ),
+      state(
+        'reduced',
+        style({
+          left: '405px',
+          'max-width': 'calc(100% - 405px)'
+        })
+      ),
+      state(
+        'reducedNotTriggered',
+        style({
+          left: '405px',
+          bottom: '5px',
+          'max-width': 'calc(100% - 405px)'
+        })
+      ),
+      transition('* => *', animate('200ms'))
+    ]),
+    trigger('toastOffsetY', [
+      state(
+        'true',
+        style({
+          bottom: '50px'
+        })
+      ),
+      state(
+        'false',
+        style({
+          bottom: '5px'
+        })
+      )
+    ])
+  ];
 }
 
 export function toastPanelAnimation(): AnimationTriggerMetadata[] {
   return [
+    trigger('toastPanelMobileSidenav', [
+      state(
+        'true',
+        style({
+          display: 'none'
+        })
+      ),
+      transition('* => *', animate('200ms')),
+    ]),
     trigger('toastPanelOffsetX', [
       state(
         'false',
@@ -68,7 +109,8 @@ export function toastPanelAnimation(): AnimationTriggerMetadata[] {
       state(
         'true',
         style({
-          bottom: '285px'
+          bottom: '285px',
+          zIndex: '1'
         })
       ),
       transition('* => *', animate('200ms'))
@@ -98,7 +140,7 @@ export function baselayersAnimation(): AnimationTriggerMetadata[] {
       state(
         'down',
         style({
-          bottom: '55px'
+          bottom: '47px'
         })
       ),
       state(
@@ -108,6 +150,35 @@ export function baselayersAnimation(): AnimationTriggerMetadata[] {
         })
       ),
       transition('* => *', animate('200ms'))
+    ]),
+    trigger('baselayersWithExpansionPanel', [
+      state(
+        'true',
+        style({
+          bottom: '47px'
+        })
+      ),
+      state(
+        'false',
+        style({
+          bottom: '5px'
+        })
+      ),
+      transition('* => *', animate('200ms'))
+    ]),
+    trigger('baselayersWithToastPanel', [
+      state(
+        'up',
+        style({
+          bottom: '92px'
+        })
+      ),
+      state(
+        'down',
+        style({
+          bottom: '47px'
+        })
+      )
     ])
   ];
 }
@@ -144,6 +215,15 @@ export function controlsAnimations(): AnimationTriggerMetadata[] {
         })
       ),
       transition('* => *', animate('200ms'))
+    ]),
+    trigger('mobileOffsetY', [
+      state(
+        'low',
+        style({
+          bottom: '50px'
+        })
+      ),
+      transition('* => *', animate('200ms'))
     ])
   ];
 }
@@ -201,7 +281,7 @@ export function mapSlideX(): AnimationTriggerMetadata {
         left: '0'
       })
     ),
-    transition('* => *', animate('250ms'))
+    transition('* => *', animate('200ms'))
   ]);
 }
 export function mapSlideY(): AnimationTriggerMetadata {
@@ -224,6 +304,6 @@ export function mapSlideY(): AnimationTriggerMetadata {
         bottom: '0'
       })
     ),
-    transition('* => *', animate('250ms'))
+    transition('* => *', animate('200ms'))
   ]);
 }
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -51,7 +51,7 @@
       [@mapStateX]="sidenavOpened ? 'right' : 'left'"
       (@mapStateX.start)="removeMapBrowserClass($event)"
       (@mapStateX.done)="updateMapBrowserClass($event)"
-      [@mapStateY]="expansionPanelExpanded ? 'up' : 'down'"
+      [@mapStateY]="getExpansionToastPanelStatus()"
       (@mapStateY.start)="removeMapBrowserClass($event)"
       (@mapStateY.done)="updateMapBrowserClass($event)">
 
@@ -60,16 +60,20 @@
       </igo-zoom-button>
       <igo-geolocate-button [map]="map" color="primary"
         [@controlsOffsetY]="expansionPanelExpanded"
-        [@controlsOffsetX]="expansionPanelExpanded">
+        [@mobileOffsetY]="getToastPanelStatus()">
       </igo-geolocate-button>
       <igo-rotation-button [map]="map" color="primary"></igo-rotation-button>
       <igo-user-button [map]="map" color="primary"
-        [@controlsOffsetY]="expansionPanelExpanded">
+        [@controlsOffsetY]="expansionPanelExpanded"
+        [@mobileOffsetY]="getToastPanelStatus()">
       </igo-user-button>
       <igo-baselayers-switcher [map]="map"
         [useStaticIcon]="true"
         [@baselayersStateY]="expansionPanelExpanded ? 'up' : 'down'"
-        [@baselayersStateX]="(mediaService.media$ | async) !== 'mobile' && sidenavOpened ? 'right' : 'left'">
+        [@baselayersStateX]="(mediaService.media$ | async) !== 'mobile' && sidenavOpened ? 'right' : 'left'"
+        [@baselayersWithExpansionPanel]="hasExpansionPanel ? 'true' : 'false'"
+        [@baselayersWithToastPanel]="getBaselayersSwitcherStatus()"
+        [useStaticIcon]="true">
       </igo-baselayers-switcher>
     </igo-map-browser>
   </mat-sidenav-content>
@@ -78,7 +82,8 @@
 <app-expansion-panel
   *ngIf="hasExpansionPanel"
   [(expanded)]="expansionPanelExpanded"
-  [@expansionPanelSize]="getExpansionStatus()">
+  [@expansionPanelSize]="getExpansionPanelStatus()"
+  [@toastOffsetY]="(isMobile() && !toastPanelOpened && queryState.store.entities$.value.length > 0 && !expansionPanelExpanded) ? 'true' : 'false'">
 
   <ng-container expansionPanelHeader>
     <!-- <igo-workspace-selector igoWorkspaceSelector [store]="workspaceStore" [map]="map"></igo-workspace-selector> -->
@@ -102,8 +107,10 @@
 
 <app-toast-panel
   [store]="queryStore"
-  [@toastPanelOffsetX]="(isMobile || !isLandscape) ? undefined : sidenavOpened"
+  [@toastPanelOffsetX]="(isMobile() || !isLandscape()) ? undefined : sidenavOpened"
   [@toastPanelOffsetY]="expansionPanelExpanded"
+  [@toastPanelMobileSidenav]="(isMobile() && sidenavOpened) || (isTablet() && isPortrait() && sidenavOpened)"
+  (openedChange)="toastPanelOpened = $event"
   (resultSelect)="addFeatureToMap($event)">
 </app-toast-panel>
 

diff --git a/src/app/pages/portal/portal.component.scss b/src/app/pages/portal/portal.component.scss
@@ -28,6 +28,34 @@ igo-map-browser {
   height: 100%;
 }
 
+igo-map-browser ::ng-deep .ol-attribution {
+  left: 50px;
+  bottom: $igo-margin;
+  text-align: left;
+  padding: 0;
+  margin-right: 90px;
+  background-color: rgba(255, 255, 255, 0);
+  width: calc(100% - 500px);
+
+  &.ol-logo-only {
+    height: inherit;
+  }
+  &.ol-collapsed {
+    background: none;
+    button {
+      transform: none;
+    }
+  }
+  button {
+    transform: rotate(180deg);
+    background-color: white;
+    cursor: pointer;
+  }
+  &.ol-uncollapsible {
+    height: auto;
+  }
+}
+
 igo-map-browser ::ng-deep .ol-overlaycontainer-stopevent {
   position: absolute;
   width: 100%;
@@ -36,14 +64,26 @@ igo-map-browser ::ng-deep .ol-overlaycontainer-stopevent {
 }
 
 igo-map-browser.sidenav-offset ::ng-deep .ol-overlaycontainer-stopevent {
-  left: 380px;
+  left: 400px;
   width: calc(100% - 380px);
+
+  @include mobile {
+    display: none;
+  }
 }
 
 igo-map-browser.expansion-offset ::ng-deep .ol-overlaycontainer-stopevent {
   bottom: 279px;
 }
 
+igo-map-browser.toast-offset-scale-line ::ng-deep .ol-overlaycontainer-stopevent ::ng-deep .ol-scale-line {
+  bottom: 50px;
+}
+
+igo-map-browser.toast-offset-attribution ::ng-deep .ol-overlaycontainer-stopevent ::ng-deep .ol-attribution {
+  bottom: 50px;
+}
+
 /*** Search bar ***/
 igo-search-bar {
   background-color: $app-background-color;
@@ -58,7 +98,7 @@ igo-search-bar {
 
   @include mobile {
     width: $search-bar-width-mobile;
-    max-width: 400px;
+    max-width: 350px;
   }
 }
 
@@ -103,6 +143,11 @@ app-toast-panel {
     left: $app-footer-height;
     margin-left: 0;
   }
+
+  @include tablet {
+    width: 500px;
+    left: calc(50% + 100px);
+  }
 }
 
 app-toast-panel.expansion-panel-expanded,
@@ -114,8 +159,15 @@ app-toast-panel.app-toast-panel-opened {
   }
 }
 
+app-toast-panel:not(.app-toast-panel-opened) {
+  ::ng-deep igo-panel ::ng-deep div.igo-panel-content {
+    visibility: hidden;
+  }
+}
+
 igo-geolocate-button {
-  margin-bottom: 90px;
+  margin-bottom: 85px;
+
   @include mobile {
     margin-bottom: 0px;
   }