chore added dismiss on outside click for layer widgets (#566)

refactor: removed unused classes
chore: improved mobile UI

src/atlasViewer/atlasViewer.template.html

@@ -95,12 +95,17 @@
       </signin-banner>
     </div>
 
-    <layout-floating-container zIndex="13" #floatingOverlayContainer>
+    <layout-floating-container
+      zIndex="13"
+      #floatingOverlayContainer
+      iav-media-query
+      #media="iavMediaQuery">
       <div floatingContainerDirective>
-
       </div>
 
-      <div class="fixed-bottom muted-7 pe-none mb-8 d-flex justify-content-end m-4">
+      <div
+        *ngIf="(media.mediaBreakPoint$ | async) < 3"
+        class="fixed-bottom muted-7 pe-none mb-8 d-flex justify-content-end m-4">
         <ng-container *ngTemplateOutlet="logoTmpl">
         </ng-container>
       </div>

src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts

@@ -9,7 +9,8 @@ import { map, shareReplay, withLatestFrom, filter, tap } from "rxjs/operators";
   templateUrl: './alwContainer.template.html',
   styleUrls: [
     './alwContainer.style.css'
-  ]
+  ],
+  exportAs: 'atlasLayerWidgetContainer'
 })
 
 export class AtlasLayerContainer {

src/ui/nehubaContainer/nehubaContainer.template.html

@@ -23,7 +23,7 @@
   </div>
 </current-layout>
 
-<layout-floating-container [zIndex]="5">
+<layout-floating-container [zIndex]="10">
 
   <div *ngIf="templateSelected$ | async"
     class="viewer-config-container d-flex align-items-end pe-none">
@@ -34,7 +34,11 @@
       (iav-outsideClick)="viewerSelector.selectorExpanded = false">
     </viewer-selector>
 
-    <atlas-layer-container class="pe-none overflow-visible"></atlas-layer-container>
+    <atlas-layer-container
+      class="pe-none overflow-visible"
+      (iav-outsideClick)="alwWidget.visibleTab = null"
+      #alwWidget="atlasLayerWidgetContainer">
+    </atlas-layer-container>
   </div>
 
   <!-- StatusCard container-->

src/ui/nehubaContainer/statusCard/statusCard.template.html

@@ -100,10 +100,12 @@
 
 <!-- minimised status bar -->
 <ng-template #showMin>
-  <div class="iv-custom-comp text overflow-visible text-nowrap d-inline-flex align-items-center pb-2">
+  <div class="iv-custom-comp text overflow-visible text-nowrap d-inline-flex align-items-center pb-2"
+    iav-media-query
+    #media="iavMediaQuery">
     
     <i aria-label="viewer navigation" class="fas fa-compass"></i>
-    <span  class="pl-2">
+    <span *ngIf="(media.mediaBreakPoint$ | async) < 3" class="pl-2">
       {{ navVal$ | async }}
     </span>
 

src/ui/ui.module.ts

@@ -62,7 +62,6 @@ import { ReorderPanelIndexPipe } from "./nehubaContainer/reorderPanelIndex.pipe"
 import { TouchSideClass } from "./nehubaContainer/touchSideClass.directive";
 import { BinSavedRegionsSelectionPipe, SavedRegionsSelectionBtnDisabledPipe } from "./viewerStateController/viewerState.pipes";
 
-import {ElementOutClickDirective} from "src/util/directives/elementOutClick.directive";
 import {FilterWithStringPipe} from "src/util/pipes/filterWithString.pipe";
 import { SearchSideNav } from "./searchSideNav/searchSideNav.component";
 
@@ -186,7 +185,6 @@ import {ViewerSelectorComponent} from "src/ui/viewerSelector/viewerSelector.comp
     /* directive */
     DownloadDirective,
     TouchSideClass,
-    ElementOutClickDirective,
     FixedMouseContextualContainerDirective,
     NehubaViewerTouchDirective,
   ],
@@ -228,7 +226,6 @@ import {ViewerSelectorComponent} from "src/ui/viewerSelector/viewerSelector.comp
     CookieAgreement,
     KGToS,
     StatusCardComponent,
-    ElementOutClickDirective,
     SearchSideNav,
     ViewerStateMini,
     RegionMenuComponent,

src/util/directives/elementOutClick.directive.ts

-import {Directive, ElementRef, EventEmitter, HostListener, Output} from "@angular/core";
-
-@Directive({
-  selector: '[iav-onclick-outside]',
-})
-export class ElementOutClickDirective {
-  constructor(private elRef: ElementRef) { }
-
-  @Output('iav-onclick-outside')
-  public outsideClick = new EventEmitter()
-
-  @HostListener('document:click', ['$event', '$event.target'])
-  public onclick(event: MouseEvent, targetElement: HTMLElement): void {
-    if (!targetElement) {
-      return
-    }
-    if (this.elRef.nativeElement.contains(targetElement)) {
-      return
-    }
-    this.outsideClick.emit(event)
-  }
-}