From 2c7679da4a22e24aade196a06612283564a52a4c Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 25 Oct 2019 17:25:50 +0200
Subject: [PATCH] feat: improve modal apperance on mobile feat: disable hover
context menu chore: remove unneeded fn call
---
src/atlasViewer/atlasViewer.template.html | 22 +++++++++++-----
src/theme.scss | 26 +++++++++++++++++++
.../nehubaContainer.template.html | 2 +-
.../splashScreen/splashScreen.template.html | 4 +--
.../sharedModules/angularMaterial.module.ts | 15 +++++++++--
5 files changed, 57 insertions(+), 12 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 8561b2b62..7e12fad60 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -7,9 +7,11 @@
<!-- kg tos -->
<ng-template #kgToS>
<h2 mat-dialog-title>Knowledge Graph ToS</h2>
- <mat-dialog-content class="w-50vw">
- <kgtos-component>
- </kgtos-component>
+ <mat-dialog-content>
+ <small>
+ <kgtos-component>
+ </kgtos-component>
+ </small>
</mat-dialog-content>
<mat-dialog-actions class="justify-content-end">
@@ -22,9 +24,11 @@
<!-- cookie -->
<ng-template #cookieAgreementComponent>
<h2 mat-dialog-title>Cookie Disclaimer</h2>
- <mat-dialog-content class="w-50vw">
- <cookie-agreement>
- </cookie-agreement>
+ <mat-dialog-content>
+ <small>
+ <cookie-agreement>
+ </cookie-agreement>
+ </small>
</mat-dialog-content>
<mat-dialog-actions class="justify-content-end">
@@ -149,7 +153,11 @@
<div floatingMouseContextualContainerDirective>
- <div class="d-inline-block" iav-mouse-hover #iavMouseHoverConetxtualBlock="iavMouseHover" contextualBlock>
+ <div *ngIf="!ismobile"
+ class="d-inline-block"
+ iav-mouse-hover
+ #iavMouseHoverConetxtualBlock="iavMouseHover"
+ contextualBlock>
<ng-container
*ngFor="let labelText of iavMouseHoverConetxtualBlock.currentOnHoverObs$ | async | mouseOverTextPipe : selectedParcellation">
diff --git a/src/theme.scss b/src/theme.scss
index e85cfdce2..2603ff81c 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -19,3 +19,29 @@ $iv-dark-theme: mat-dark-theme($iv-dark-theme-primary, $iv-dark-theme-accent,
{
@include angular-material-theme($iv-dark-theme);
}
+
+.iav-dialog-class
+{
+
+ @media (min-width: 576px) {
+
+ }
+
+ // Medium devices (tablets, 768px and up)
+ @media (min-width: 768px) {
+
+ max-width: 50vw!important;
+ }
+
+ // Large devices (desktops, 992px and up)
+ @media (min-width: 992px) {
+
+ max-width: 50vw!important;
+ }
+
+ // Extra large devices (large desktops, 1200px and up)
+ @media (min-width: 1200px) {
+
+ max-width: 50vw!important;
+ }
+}
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 3e827ac7d..57f43e43f 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -1,7 +1,7 @@
<ng-template #container>
</ng-template>
-<ui-splashscreen iav-stop="mousedown mouseup touchstart touchmove touchend" (contextmenu)="$event.stopPropagation();" *ngIf="!viewerLoaded">
+<ui-splashscreen iav-stop="mousedown mouseup touchstart touchmove touchend" *ngIf="!viewerLoaded">
</ui-splashscreen>
<!-- spatial landmarks overlay -->
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
index 71a731611..90dfb6b6c 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -29,8 +29,8 @@
Parcellations available
</mat-card-subtitle>
<button
- (mousedown)="$event.stopPropagation()"
- (click)="$event.stopPropagation(); selectTemplateParcellation(template, parcellation)"
+ iav-stop="mousedown touchstart click"
+ (click)="selectTemplateParcellation(template, parcellation)"
*ngFor="let parcellation of template.parcellations"
mat-button
color="primary">
diff --git a/src/ui/sharedModules/angularMaterial.module.ts b/src/ui/sharedModules/angularMaterial.module.ts
index 3d2399feb..0b02dfe49 100644
--- a/src/ui/sharedModules/angularMaterial.module.ts
+++ b/src/ui/sharedModules/angularMaterial.module.ts
@@ -21,14 +21,18 @@ import {
MatExpansionModule,
MatGridListModule,
MatIconModule,
- MatMenuModule
-
+ MatMenuModule,
+ MAT_DIALOG_DEFAULT_OPTIONS,
+ MatDialogConfig
} from '@angular/material';
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling'
import { NgModule } from '@angular/core';
import {DragDropModule} from "@angular/cdk/drag-drop";
+
+const defaultDialogOption: MatDialogConfig = new MatDialogConfig()
+
@NgModule({
imports: [
MatButtonModule,
@@ -84,5 +88,12 @@ import {DragDropModule} from "@angular/cdk/drag-drop";
MatMenuModule,
ExperimentalScrollingModule
],
+ providers: [{
+ provide: MAT_DIALOG_DEFAULT_OPTIONS,
+ useValue: {
+ ...defaultDialogOption,
+ panelClass: 'iav-dialog-class'
+ }
+ }]
})
export class AngularMaterialModule { }
--
GitLab