fix(toast-panel): label select in toast-panel content is now working (#…

…270)
infra-geo-ouverte · Aug 30, 2019 · df01cf1 · df01cf1
1 parent abf5cd3
commit df01cf1
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 58 deletions.
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.html b/src/app/pages/portal/toast-panel/toast-panel.component.html
@@ -1,65 +1,72 @@
-<igo-panel
-  *ngIf="store.entities$ | async"
-  [title]="resultSelected$.value ? getTitle(resultSelected$.value) : ('toastPanel.title' | translate )"
-  (click)="onToggleClick($event)"
-  (swipeleft)="swipe($event.type)"
-  (swiperight)="swipe($event.type)"
-  (swipeup)="swipe($event.type)"
-  (swipedown)="swipe($event.type)">
+<ng-template #toast>
+  <igo-panel
+    *ngIf="store.entities$ | async"
+    [title]="resultSelected$.value ? getTitle(resultSelected$.value) : ('toastPanel.title' | translate )"
+    (click)="onToggleClick($event)">
 
-  <button
-    *ngIf="resultSelected$.value"
-    mat-icon-button
-    igoStopPropagation
-    panelLeftButton
-    [matTooltip]="'toastPanel.listButton' | translate"
-    (click)="unselectResult()">
-    <mat-icon svgIcon="format-list-bulleted-square"></mat-icon>
-  </button>
+    <button
+      *ngIf="resultSelected$.value"
+      mat-icon-button
+      igoStopPropagation
+      panelLeftButton
+      [matTooltip]="'toastPanel.listButton' | translate"
+      (click)="unselectResult()">
+      <mat-icon svgIcon="format-list-bulleted-square"></mat-icon>
+    </button>
+
+    <button
+      *ngIf="resultSelected$.value"
+      [disabled]="results[0].meta.id === resultSelected$.value.meta.id"
+      mat-icon-button
+      igoStopPropagation
+      panelLeftButton
+      (click)="previousResult()">
+      <mat-icon svgIcon="chevron-left"></mat-icon>
+    </button>
 
-  <button
-    *ngIf="resultSelected$.value"
-    [disabled]="results[0].meta.id === resultSelected$.value.meta.id"
-    mat-icon-button
-    igoStopPropagation
-    panelLeftButton
-    (click)="previousResult()">
-    <mat-icon svgIcon="chevron-left"></mat-icon>
-  </button>
+    <button
+      *ngIf="resultSelected$.value"
+      [disabled]="results[results.length-1].meta.id === resultSelected$.value.meta.id"
+      mat-icon-button
+      igoStopPropagation
+      panelRightButton
+      (click)="nextResult()">
+      <mat-icon svgIcon="chevron-right"></mat-icon>
+    </button>
 
-  <button
-    *ngIf="resultSelected$.value"
-    [disabled]="results[results.length-1].meta.id === resultSelected$.value.meta.id"
-    mat-icon-button
-    igoStopPropagation
-    panelRightButton
-    (click)="nextResult()">
-    <mat-icon svgIcon="chevron-right"></mat-icon>
-  </button>
+    <button
+      mat-icon-button
+      igoStopPropagation
+      panelRightButton
+      (click)="clear()">
+      <mat-icon svgIcon="close"></mat-icon>
+    </button>
 
-  <button
-    mat-icon-button
-    igoStopPropagation
-    panelRightButton
-    (click)="clear()">
-    <mat-icon svgIcon="close"></mat-icon>
-  </button>
+    <div
+      #content
+      igoStopPropagation>
 
-  <div
-    #content
-    igoStopPropagation>
+      <igo-feature-details
+        *ngIf="resultSelected$.value"
+        [feature]="resultSelected$.value.data">
+      </igo-feature-details>
 
-    <igo-feature-details
-      *ngIf="resultSelected$.value"
-      [feature]="resultSelected$.value.data">
-    </igo-feature-details>
+      <igo-search-results
+        *ngIf="!resultSelected$.value"
+        [store]="store"
+        (resultFocus)="focusResult($event)"
+        (resultSelect)="selectResult($event)">
+      </igo-search-results>
+
+    </div>
+  </igo-panel>
+</ng-template>
 
-    <igo-search-results
-      *ngIf="!resultSelected$.value"
-      [store]="store"
-      (resultFocus)="focusResult($event)"
-      (resultSelect)="selectResult($event)">
-    </igo-search-results>
+<div *ngIf="isMobile(); else toast"
+(swipeleft)="swipe($event.type)"
+(swiperight)="swipe($event.type)"
+(swipeup)="swipe($event.type)"
+(swipedown)="swipe($event.type)">
 
-  </div>
-</igo-panel>
+<ng-template [ngTemplateOutlet]="toast"></ng-template>
+</div>
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.scss b/src/app/pages/portal/toast-panel/toast-panel.component.scss
@@ -50,4 +50,8 @@ igo-panel ::ng-deep .igo-panel-header ::ng-deep [panelrightbutton] {
 
 igo-panel ::ng-deep .igo-panel-content {
   max-height: 230px;
+  -webkit-user-select: auto !important;
+  -moz-user-select: auto !important;
+  -ms-user-select: auto !important;
+  user-select: auto !important;
 }
diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.ts b/src/app/pages/portal/toast-panel/toast-panel.component.ts
@@ -11,6 +11,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { getEntityTitle, EntityStore } from '@igo2/common';
 import { Feature, SearchResult } from '@igo2/geo';
+import { Media, MediaService } from '@igo2/core';
 
 @Component({
   selector: 'app-toast-panel',
@@ -60,7 +61,9 @@ export class ToastPanelComponent {
     return this.store.all();
   }
 
-  constructor() {}
+  constructor(
+    public mediaService: MediaService
+    ) {}
 
   getTitle(result: SearchResult) {
     return getEntityTitle(result);
@@ -94,6 +97,12 @@ export class ToastPanelComponent {
     this.unselectResult();
   }
 
+  isMobile(): boolean {
+    return (
+      this.mediaService.getMedia() === Media.Mobile
+    );
+  }
+
   @HostListener('document:keydown.ArrowLeft')
   previousResult() {
     if (!this.resultSelected$.value) {