From 18beb00a2e3c752503ea0fa23c263ac0df43a862 Mon Sep 17 00:00:00 2001
From: xgui3783 <xgui3783@gmail.com>
Date: Wed, 1 Jul 2020 22:55:25 +0200
Subject: [PATCH] chore added dismiss on outside click for layer widgets (#566)
refactor: removed unused classes
chore: improved mobile UI
---
src/atlasViewer/atlasViewer.template.html | 11 +++++++---
.../alwContainer/alwContainer.component.ts | 3 ++-
.../nehubaContainer.template.html | 8 +++++--
.../statusCard/statusCard.template.html | 6 +++--
src/ui/ui.module.ts | 3 ---
.../directives/elementOutClick.directive.ts | 22 -------------------
6 files changed, 20 insertions(+), 33 deletions(-)
delete mode 100644 src/util/directives/elementOutClick.directive.ts
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 422971347..690af5b76 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/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>
diff --git a/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts b/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts
index 69319b14b..02d2c0edf 100644
--- a/src/ui/atlasLayerWidget/alwContainer/alwContainer.component.ts
+++ b/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 {
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 259da4bbc..f338d4799 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/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-->
diff --git a/src/ui/nehubaContainer/statusCard/statusCard.template.html b/src/ui/nehubaContainer/statusCard/statusCard.template.html
index 88779b7f4..bc84eff6d 100644
--- a/src/ui/nehubaContainer/statusCard/statusCard.template.html
+++ b/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>
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index 67db58fb2..419490f6a 100644
--- a/src/ui/ui.module.ts
+++ b/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,
diff --git a/src/util/directives/elementOutClick.directive.ts b/src/util/directives/elementOutClick.directive.ts
deleted file mode 100644
index 93f3b1d64..000000000
--- a/src/util/directives/elementOutClick.directive.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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)
- }
-}
--
GitLab