feat(search): clean feature, geolocate-button replacement, queryable …

…layer panel resize #275) * feat/ui(search): clean feature, geolocate-button replacement, queryable layer panel resize * <feat/ui>(sidenav/portal): scrollable vs scrollable button, zoom button (tablet), expansion panel (mobile) * ui(portal): geolocate button replacement * package-lock
infra-geo-ouverte · Sep 11, 2019 · f485b8e · f485b8e
1 parent 1229749
commit f485b8e
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 87 deletions.
diff --git a/src/app/pages/portal/expansion-panel/expansion-panel.component.html b/src/app/pages/portal/expansion-panel/expansion-panel.component.html
@@ -1,6 +1,11 @@
 <div>
 
   <div class="app-expansion-panel-container">
+    <igo-backdrop
+      [shown]="backdropShown"
+      (click)="onBackdropClick()">
+    </igo-backdrop>
+
     <app-expansion-panel-header [(expanded)]="expanded">
       <ng-content select="[expansionPanelHeader]"></ng-content>
     </app-expansion-panel-header>
@@ -10,11 +15,6 @@
       [@showContent]="expanded">
       <ng-content></ng-content>
     </div>
-
-    <igo-backdrop
-      [shown]="backdropShown"
-      (click)="onBackdropClick()">
-    </igo-backdrop>
   </div>
 
 </div>
diff --git a/src/app/pages/portal/portal.animation.ts b/src/app/pages/portal/portal.animation.ts
@@ -1,3 +1,5 @@
+import './portal.variables.scss';
+
 import {
   trigger,
   state,
@@ -16,6 +18,18 @@ export function expansionPanelAnimation(): AnimationTriggerMetadata {
         'max-width': '100%'
       })
     ),
+    state(
+      'notVisible',
+      style({
+        display: 'none'
+      })
+    ),
+    state(
+      'mobile',
+      style({
+        left: 'calc(100% - 40px)',
+      })
+    ),
     state(
       'reduced',
       style({
@@ -104,13 +118,13 @@ export function controlsAnimations(): AnimationTriggerMetadata[] {
       state(
         'false',
         style({
-          left: '5px'
+          right: '5px'
         })
       ),
       state(
         'true',
         style({
-          left: '405px'
+          left: 'calc(100% - 40px)'
         })
       ),
       transition('* => *', animate('200ms'))

diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -1,81 +1,83 @@
 <mat-sidenav-container class="app-main-container">
+  <mat-sidenav-content>
 
-  <igo-backdrop
-    [shown]="backdropShown"
-    (click)="onBackdropClick()">
-  </igo-backdrop>
+    <igo-backdrop
+      [shown]="backdropShown"
+      (click)="onBackdropClick()">
+    </igo-backdrop>
 
-  <button
-    mat-icon-button
-    id="menu-button"
-    class="menu-button"
-    color="primary"
-    tooltip-position="below"
-    matTooltipShowDelay="500"
-    [matTooltip]="(sidenavOpened ? 'menu.close' : 'menu.open') | translate"
-    (click)="onToggleSidenavClick()">
-    <mat-icon svgIcon="menu">
-    </mat-icon>
-  </button>
+    <button
+      mat-icon-button
+      id="menu-button"
+      class="menu-button"
+      color="primary"
+      tooltip-position="below"
+      matTooltipShowDelay="500"
+      [matTooltip]="(sidenavOpened ? 'menu.close' : 'menu.open') | translate"
+      (click)="onToggleSidenavClick()">
+      <mat-icon svgIcon="menu">
+      </mat-icon>
+    </button>
 
-  <igo-search-bar
-    #searchBar
-    [term]="searchBarTerm"
-    [minLength]="minSearchTermLength"
-    [searchSettings]="true"
-    (searchTermChange)="onSearchTermChange($event)"
-    (search)="onSearch($event)"
-    (clearFeature)="onClearSearch()">
-  </igo-search-bar>
+    <igo-search-bar
+      #searchBar
+      [term]="searchBarTerm"
+      [minLength]="minSearchTermLength"
+      [searchSettings]="true"
+      (searchTermChange)="onSearchTermChange($event)"
+      (search)="onSearch($event)"
+      (clearFeature)="onClearSearch()">
+    </igo-search-bar>
 
-  <app-sidenav
-    [map]="map"
-    [(opened)]="sidenavOpened"
-    (toolChange)="toolChanged($event)">
-  </app-sidenav>
+    <app-sidenav
+      [map]="map"
+      [(opened)]="sidenavOpened"
+      (toolChange)="toolChanged($event)">
+    </app-sidenav>
 
-  <igo-map-browser
-    #mapBrowser
-    igoQuery
-    [waitForAllQueries]="true"
-    [queryFeatures]="true"
-    igoMapContext
-    igoLayerContext
-    igoDropGeoFile
-    (query)="onMapQuery($event)"
-    [map]="map"
-    [igoContextMenu]=contextMenu
-    (menuPosition)="onContextMenuOpen($event)"
-    [ngClass]="{'igo-attribution-offset': map.getBaseLayers().length > 1}"
-    [@mapStateX]="sidenavOpened ? 'right' : 'left'"
-    (@mapStateX.start)="removeMapBrowserClass($event)"
-    (@mapStateX.done)="updateMapBrowserClass($event)"
-    [@mapStateY]="expansionPanelExpanded ? 'up' : 'down'"
-    (@mapStateY.start)="removeMapBrowserClass($event)"
-    (@mapStateY.done)="updateMapBrowserClass($event)">
-
-    <igo-zoom-button [map]="map" color="primary"
-      [@controlsOffsetY]="expansionPanelExpanded">
-    </igo-zoom-button>
-    <igo-geolocate-button [map]="map" color="primary"
-      [@controlsOffsetY]="expansionPanelExpanded">
-    </igo-geolocate-button>
-    <igo-rotation-button [map]="map" color="primary"></igo-rotation-button>
-    <igo-user-button [map]="map" color="primary"
-      [@controlsOffsetY]="expansionPanelExpanded">
-    </igo-user-button>
-    <igo-baselayers-switcher [map]="map"
-      [@baselayersStateY]="expansionPanelExpanded ? 'up' : 'down'"
-      [@baselayersStateX]="(mediaService.media$ | async) !== 'mobile' && sidenavOpened ? 'right' : 'left'">
-    </igo-baselayers-switcher>
-  </igo-map-browser>
+    <igo-map-browser
+      #mapBrowser
+      igoQuery
+      [waitForAllQueries]="true"
+      [queryFeatures]="true"
+      igoMapContext
+      igoLayerContext
+      igoDropGeoFile
+      (query)="onMapQuery($event)"
+      [map]="map"
+      [igoContextMenu]=contextMenu
+      (menuPosition)="onContextMenuOpen($event)"
+      [ngClass]="{'igo-attribution-offset': map.getBaseLayers().length > 1}"
+      [@mapStateX]="sidenavOpened ? 'right' : 'left'"
+      (@mapStateX.start)="removeMapBrowserClass($event)"
+      (@mapStateX.done)="updateMapBrowserClass($event)"
+      [@mapStateY]="expansionPanelExpanded ? 'up' : 'down'"
+      (@mapStateY.start)="removeMapBrowserClass($event)"
+      (@mapStateY.done)="updateMapBrowserClass($event)">
 
+      <igo-zoom-button [map]="map" color="primary"
+        [@controlsOffsetY]="expansionPanelExpanded">
+      </igo-zoom-button>
+      <igo-geolocate-button [map]="map" color="primary"
+        [@controlsOffsetY]="expansionPanelExpanded"
+        [@controlsOffsetX]="expansionPanelExpanded">
+      </igo-geolocate-button>
+      <igo-rotation-button [map]="map" color="primary"></igo-rotation-button>
+      <igo-user-button [map]="map" color="primary"
+        [@controlsOffsetY]="expansionPanelExpanded">
+      </igo-user-button>
+      <igo-baselayers-switcher [map]="map"
+        [@baselayersStateY]="expansionPanelExpanded ? 'up' : 'down'"
+        [@baselayersStateX]="(mediaService.media$ | async) !== 'mobile' && sidenavOpened ? 'right' : 'left'">
+      </igo-baselayers-switcher>
+    </igo-map-browser>
+  </mat-sidenav-content>
 </mat-sidenav-container>
 
 <app-expansion-panel
   *ngIf="hasExpansionPanel"
   [(expanded)]="expansionPanelExpanded"
-  [@expansionPanelSize]="sidenavOpened ? 'reduced' : 'full'">
+  [@expansionPanelSize]="getExpansionStatus()">
 
   <ng-container expansionPanelHeader>
     <!-- <igo-workspace-selector igoWorkspaceSelector [store]="workspaceStore" [map]="map"></igo-workspace-selector> -->

diff --git a/src/app/pages/portal/portal.component.scss b/src/app/pages/portal/portal.component.scss
@@ -58,6 +58,7 @@ igo-search-bar {
 
   @include mobile {
     width: $search-bar-width-mobile;
+    max-width: 400px;
   }
 }
 
@@ -70,12 +71,22 @@ mat-sidenav-container {
   display: unset;
 }
 
+mat-sidenav-content {
+  @include mobile {
+    z-index: auto;
+  }
+}
+
 /*** Expansion Panel ***/
 app-expansion-panel {
   position: absolute;
   bottom: 0;
   z-index: 4;
   overflow: hidden;
+
+  @include mobile {
+    z-index: 1;
+  }
 }
 
 /*** Toast Panel ***/
@@ -108,4 +119,13 @@ igo-geolocate-button {
   @include mobile {
     margin-bottom: 0px;
   }
+  @include tablet {
+    margin-bottom: 0px;
+  }
+}
+
+igo-zoom-button {
+  @include tablet {
+    display: none;
+  }
 }
diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts
@@ -517,6 +517,22 @@ export class PortalComponent implements OnInit, OnDestroy {
     }
   }
 
+  getExpansionStatus() {
+    if (this.sidenavOpened === false) {
+      return 'full';
+    }
+    if (this.sidenavOpened === true && this.isMobile() === false) {
+      return 'reduced';
+    }
+    if (this.sidenavOpened === true && this.isMobile() === true) {
+      if (this.expansionPanelExpanded === true) {
+        return 'mobile';
+      } else {
+        return 'notVisible';
+      }
+    }
+  }
+
   // private handleContextChange(context: Context) {
   //   if (context !== undefined && this.contextLoaded) {
   //     const tool = this.toolService.getTool("mapDetails");

diff --git a/src/app/pages/portal/portal.variables.scss b/src/app/pages/portal/portal.variables.scss
@@ -24,4 +24,4 @@ $igo-toast-panel-width: 30%;
 
 $search-bar-left: calc(#{$igo-icon-size} + #{$igo-margin});
 $search-bar-width: calc(#{$app-sidenav-width} - #{$search-bar-left} - (2 * #{$igo-margin}));
-$search-bar-width-mobile: calc(100% - #{$app-mobile-min-space-right} - #{$search-bar-left} - (3 * #{$igo-margin}));
+$search-bar-width-mobile: calc(100% - #{$app-mobile-min-space-right} - #{$search-bar-left} - (3 * #{$igo-margin}));
diff --git a/src/app/pages/portal/sidenav/sidenav.component.html b/src/app/pages/portal/sidenav/sidenav.component.html
@@ -5,7 +5,7 @@
 
   <div class="app-sidenav-content">
 
-      <div class="app-content" [ngClass]="{toolActived: toolbox.activeTool$ | async}">
+      <div #content class="app-content" [ngClass]="{toolActived: toolbox.activeTool$ | async}">
 
         <button *ngIf="toolbox.activeTool$ | async"
           id="homeButton"
@@ -44,6 +44,6 @@
           </igo-toolbox>
 
         </igo-panel>
-      </div>
+    </div>
   </div>
 </mat-sidenav>
diff --git a/src/app/pages/portal/sidenav/sidenav.component.scss b/src/app/pages/portal/sidenav/sidenav.component.scss
@@ -21,6 +21,7 @@ mat-sidenav {
 
   @include mobile {
     width: $app-sidenav-width-mobile;
+    max-width: 450px;
   }
 }
 
@@ -50,10 +51,16 @@ div.toolActived > igo-panel ::ng-deep > div.igo-panel-header {
 #homeButton {
   position: absolute;
   top: 50px;
-  left: 3px;
+  left: 0px;
   background-color: #1976d2;
   color: white;
   border-radius: 0;
   height: 46px;
-  width: 44px;
+  width: 48px;
 }
+
+igo-toolbox {
+  @include mobile {
+    overflow: auto;
+  }
+}
diff --git a/src/contexts/_default.json b/src/contexts/_default.json
@@ -40,15 +40,6 @@
     "about"
   ],
   "tools": [
-    {
-      "name": "about",
-      "options": {
-        "html": "<h1>This is a IGO</h1>"
-      }
-    },
-    {
-      "name": "directions"
-    },
     {
       "name": "searchResults",
       "options": {
@@ -81,14 +72,32 @@
         }
       }
     },
+    {
+      "name": "directions"
+    },
     {
       "name": "timeAnalysis"
     },
     {
       "name": "measurer"
     },
+    {
+      "name": "catalogBrowser"
+    },
+    {
+      "name": "catalog"
+    },
     {
       "name": "print"
+    },
+    {
+      "name": "shareMap"
+    },
+    {
+      "name": "about",
+      "options": {
+        "html": "<h1>This is a IGO</h1>"
+      }
     }
   ]
 }