From e924d225e0ffac3f59a9759a87519d50de2d800d Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Wed, 15 May 2019 17:46:57 +0200
Subject: [PATCH] Add some changes for mobile menu
---
src/atlasViewer/atlasViewer.component.ts | 5 ++++
src/atlasViewer/atlasViewer.style.css | 4 ++++
src/atlasViewer/atlasViewer.template.html | 22 ++++++++++++++---
src/components/dropdown/dropdown.component.ts | 3 ++-
src/components/dropdown/dropdown.style.css | 21 ++++++++++++++++
.../dropdown/dropdown.template.html | 8 +++++--
.../radiolist/radiolist.component.ts | 4 +++-
src/components/radiolist/radiolist.style.css | 6 +++++
.../radiolist/radiolist.template.html | 4 ++--
.../sharedModules/angularMaterial.module.ts | 6 ++---
src/ui/signinBanner/signinBanner.style.css | 6 ++++-
.../signinBanner/signinBanner.template.html | 24 +++++++++++++------
12 files changed, 93 insertions(+), 20 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 65251c14b..b8ae07f3d 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -18,6 +18,7 @@ import { colorAnimation } from "./atlasViewer.animation"
import { FixedMouseContextualContainerDirective } from "src/util/directives/FixedMouseContextualContainerDirective.directive";
import { DatabrowserService } from "src/ui/databrowserModule/databrowser.service";
import { AGREE_COOKIE, AGREE_KG_TOS, SHOW_KG_TOS } from "src/services/state/uiState.store";
+import { TabsetComponent } from "ngx-bootstrap/tabs";
@Component({
selector: 'atlas-viewer',
@@ -43,6 +44,9 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
@ViewChild(NehubaContainer) nehubaContainer: NehubaContainer
@ViewChild(FixedMouseContextualContainerDirective) rClContextualMenu: FixedMouseContextualContainerDirective
+
+ @ViewChild('mobileMenuTabs') mobileMenuTabs: TabsetComponent
+
/**
* required for styling of all child components
*/
@@ -437,6 +441,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
this.uiStore.dispatch({
type : OPEN_SIDE_PANEL
})
+ this.mobileMenuTabs.tabs[1].active = true
}
}
diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css
index 6b62d804f..041d2d458 100644
--- a/src/atlasViewer/atlasViewer.style.css
+++ b/src/atlasViewer/atlasViewer.style.css
@@ -174,4 +174,8 @@ div.displayCard
mat-card {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
margin: 5px;
+}
+
+.mpobileMenuTabs {
+ margin: 40px 0 0 5px;
}
\ No newline at end of file
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index cd9a06e2e..181293760 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -15,9 +15,25 @@
[fixedInViewport]="true"
[(opened)]="mobileMenuOpened"
class="mobileNavigationPanel"
- [ngStyle]="{'background-color': darktheme? 'black' : 'white'}" >
+ [ngStyle]="{'background-color': darktheme? '#404040' : '#F2F2F2'}" >
+
+ <!-- 'absorbs' the auto-focus behavior -->
+ <button mat-button style="height: 0; position: absolute;"></button>
<logo-container class="logoContainerMobile"></logo-container>
- <mat-card>
+
+ <tabset #mobileMenuTabs [justified]="true" class="mpobileMenuTabs" >
+ <tab heading="Template">
+ <signin-banner [darktheme] = "darktheme" signinWrapper></signin-banner>
+ </tab>
+ <tab heading="Containers">
+ <menu-icons iconWrapper hidden #MenuIcons>
+ </menu-icons>
+ <ng-template #dockedContainer>
+ </ng-template>
+ </tab>
+ </tabset>
+
+ <!-- <mat-card>
<mat-card-title [ngStyle]="{'color': darktheme? '#D7D7D7' : 'black'}" >Template Selection</mat-card-title>
<signin-banner [darktheme] = "darktheme" signinWrapper></signin-banner>
</mat-card>
@@ -28,7 +44,7 @@
</menu-icons>
<ng-template #dockedContainer>
</ng-template>
- </mat-card>
+ </mat-card> -->
</mat-sidenav>
<mat-sidenav-content>
diff --git a/src/components/dropdown/dropdown.component.ts b/src/components/dropdown/dropdown.component.ts
index 765285512..2300de680 100644
--- a/src/components/dropdown/dropdown.component.ts
+++ b/src/components/dropdown/dropdown.component.ts
@@ -21,7 +21,8 @@ export class DropdownComponent{
@Input() listDisplay : (obj:any)=>string = (obj)=>obj.name
@Input() activeDisplay : (obj:any|null)=>string = (obj)=>obj ? obj.name : `Please select an item.`
- @Input() isMobile: boolean;
+ @Input() isMobile: boolean
+ @Input() darktheme: boolean
@Output() itemSelected : EventEmitter<any> = new EventEmitter()
diff --git a/src/components/dropdown/dropdown.style.css b/src/components/dropdown/dropdown.style.css
index 61791c6ec..4fc671675 100644
--- a/src/components/dropdown/dropdown.style.css
+++ b/src/components/dropdown/dropdown.style.css
@@ -55,4 +55,25 @@ radio-list
height:0;
overflow-x:hidden;
display:block;
+}
+
+.drop-down-open-dark {
+ border-width: 1px 1px 0 1px;
+ border-style: solid;
+ border-color: white
+}
+.drop-down-open-light {
+ border-width: 1px 1px 0 1px solid black;
+ border-style: solid;
+ border-color: black;
+}
+.drop-down-closed-dark {
+ border-width: 1px;
+ border-style: solid;
+ border-color: white
+}
+.drop-down-closed-light {
+ border: 1px;
+ border-style: solid;
+ border-color: black
}
\ No newline at end of file
diff --git a/src/components/dropdown/dropdown.template.html b/src/components/dropdown/dropdown.template.html
index 042087148..165044e39 100644
--- a/src/components/dropdown/dropdown.template.html
+++ b/src/components/dropdown/dropdown.template.html
@@ -3,7 +3,10 @@
[innerHTML] = "activeDisplay(selectedItem)"
hoverable
#dropdownToggle
- dropdownToggle>
+ dropdownToggle
+
+ [ngStyle]="{'border': isMobile? '1px solid' : 'none', 'border-color': darktheme? 'white' : 'black', 'border-width': openState? '1px 1px 0 1px' : ''}">
+
</span>
<!-- needed to ensure dropdown width matches -->
@@ -19,6 +22,7 @@
[selectedItem]="selectedItem"
[inputArray]="inputArray"
[@showState]="openState ? 'show' : 'hide'"
- [isMobile] = "isMobile">
+ [isMobile] = "isMobile"
+ [darktheme] = "darktheme">
</radio-list>
diff --git a/src/components/radiolist/radiolist.component.ts b/src/components/radiolist/radiolist.component.ts
index 1981f203f..62859b0dc 100644
--- a/src/components/radiolist/radiolist.component.ts
+++ b/src/components/radiolist/radiolist.component.ts
@@ -41,5 +41,7 @@ export class RadioList{
@Input()
ulClass: string = ''
- @Input() isMobile: boolean;
+ @Input() isMobile: boolean
+ @Input() darktheme: boolean
+
}
\ No newline at end of file
diff --git a/src/components/radiolist/radiolist.style.css b/src/components/radiolist/radiolist.style.css
index d264f83b0..d045a7644 100644
--- a/src/components/radiolist/radiolist.style.css
+++ b/src/components/radiolist/radiolist.style.css
@@ -55,3 +55,9 @@ ul,span.dropdown-item-1
white-space: nowrap;
border:none;
}
+
+.radioListBorder {
+ border-style: solid;
+ border-width: 0px 1px 1px 1px;
+ border-color: white
+}
\ No newline at end of file
diff --git a/src/components/radiolist/radiolist.template.html b/src/components/radiolist/radiolist.template.html
index 608d628cb..63438bc4d 100644
--- a/src/components/radiolist/radiolist.template.html
+++ b/src/components/radiolist/radiolist.template.html
@@ -1,5 +1,5 @@
-<ul
- [ngClass]="ulClass"
+<ul
+ [ngClass]="[ulClass, isMobile? 'radioListBorder' : '']"
[ngStyle]="{'opacity': isMobile? '1' : '0.8'}"
role="menu">
<li
diff --git a/src/ui/sharedModules/angularMaterial.module.ts b/src/ui/sharedModules/angularMaterial.module.ts
index 2a5617776..f5b493857 100644
--- a/src/ui/sharedModules/angularMaterial.module.ts
+++ b/src/ui/sharedModules/angularMaterial.module.ts
@@ -1,8 +1,8 @@
-import {MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule} from '@angular/material';
+import {MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule} from '@angular/material';
import { NgModule } from '@angular/core';
@NgModule({
- imports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule],
- exports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule],
+ imports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule],
+ exports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule],
})
export class AngularMaterialModule { }
\ No newline at end of file
diff --git a/src/ui/signinBanner/signinBanner.style.css b/src/ui/signinBanner/signinBanner.style.css
index e3573d450..03432c472 100644
--- a/src/ui/signinBanner/signinBanner.style.css
+++ b/src/ui/signinBanner/signinBanner.style.css
@@ -49,10 +49,14 @@ dropdown-component
margin: 0 3px;
}
-.login-button-mobile {
+.login-button-panel-mobile {
order: -1;
align-self: flex-start;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
}
+
.login-button-mobile > button {
outline: none;
background-color: transparent;
diff --git a/src/ui/signinBanner/signinBanner.template.html b/src/ui/signinBanner/signinBanner.template.html
index d668c513e..32caba1f3 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -6,7 +6,8 @@
[selectedItem]="selectedTemplate$ | async"
[inputArray]="loadedTemplates$ | async | filterNull"
[isMobile] = "isMobile"
- [ngClass]="isMobile ? 'selectTemplateDetailsMobile' : 'selectTemplateDetaiNoMobile'">
+ [ngClass]="isMobile ? 'selectTemplateDetailsMobile' : 'selectTemplateDetaiNoMobile'"
+ [darktheme] ="darktheme">
</dropdown-component>
<ng-container *ngIf="selectedTemplate$ | async as selectedTemplate">
@@ -17,7 +18,8 @@
[selectedItem]="selectedParcellation"
[inputArray]="selectedTemplate.parcellations"
[isMobile] = "isMobile"
- [ngClass]="isMobile ? 'selectTemplateDetailsMobile' : 'selectTemplateDetaiNoMobile'">
+ [ngClass]="isMobile ? 'selectTemplateDetailsMobile' : 'selectTemplateDetaiNoMobile'"
+ [darktheme] ="darktheme">
</dropdown-component>
<region-hierarchy
@@ -51,11 +53,19 @@
class="fas"></i>
</div>
- <div
- *ngIf="isMobile"
- (click)="showSignin()"
- class="login-button-mobile">
- <button mat-button [ngStyle]="{'color': darktheme? '#D7D7D7' : 'black'}">Log In</button>
+ <div class="login-button-panel-mobile">
+ <div
+ *ngIf="isMobile"
+ (click)="showSignin()"
+ class="login-button-mobile">
+ <button mat-button [ngStyle]="{'color': darktheme? '#D7D7D7' : 'black'}">Log In</button>
+ </div>
+
+ <div (click)="showHelp()" class="login-button-mobile">
+ <button mat-button [ngStyle]="{'color': darktheme? '#D7D7D7' : 'black'}">Help</button>
+ </div>
+
</div>
+
</div>
\ No newline at end of file
--
GitLab