From b4dfdf394a0d85fc8fbfe9e1464d47a0a7b18e9f Mon Sep 17 00:00:00 2001
From: Daviti Gogshelidze <daviti1@mail.com>
Date: Tue, 4 Jun 2019 10:01:37 +0200
Subject: [PATCH] Add log in and help buttons to splash screen
---
.../splashScreen/splashScreen.component.ts | 9 +++++++--
.../splashScreen/splashScreen.template.html | 5 ++++-
.../sharedModules/angularMaterial.module.ts | 13 ++++++++++---
.../signinBanner/signinBanner.components.ts | 4 ++++
src/ui/signinBanner/signinBanner.style.css | 16 +++++++++++++++-
.../signinBanner/signinBanner.template.html | 19 +++++++++++++++++--
6 files changed, 57 insertions(+), 9 deletions(-)
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
index b7b5d8e97..eb27393a7 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
@@ -17,8 +17,9 @@ export class SplashScreen{
loadedTemplate$ : Observable<any[]>
constructor(
private store:Store<ViewerStateInterface>,
- private constanceService: AtlasViewerConstantsServices
- ){
+ private constanceService: AtlasViewerConstantsServices,
+ private constantsService: AtlasViewerConstantsServices,
+){
this.loadedTemplate$ = this.store.pipe(
select('viewerState'),
filter((state:ViewerStateInterface)=> typeof state !== 'undefined' && typeof state.fetchedTemplates !== 'undefined' && state.fetchedTemplates !== null),
@@ -40,4 +41,8 @@ export class SplashScreen{
correctString(name){
return name.replace(/[|&;$%@()+,\s./]/g, '')
}
+
+ get isMobile(){
+ return this.constantsService.mobile
+ }
}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
index 9e6b22064..4c3f4e350 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -2,7 +2,10 @@
<div splashScreenHeader>
<div class="splashScreenHeaderLogoContainer"><img class="splashScreenHeaderLogo " src="./res/image/HBP_Primary_RGB_WhiteText.png"> </div>
<span class="splashScreenHeaderTitle" media="screen and (min-width: 670px)">HBP Atlas Viewer</span>
- <div class="spaceForFill"></div>
+ <div class="spaceForFill">
+ <signin-banner *ngIf="!isMobile">
+ </signin-banner>
+ </div>
</div>
<div splashScreenTemplate>
<div *ngFor="let template of loadedTemplate$ | async | filterNull" splashScreenTemplateItem>
diff --git a/src/ui/sharedModules/angularMaterial.module.ts b/src/ui/sharedModules/angularMaterial.module.ts
index f5b493857..969b6f39c 100644
--- a/src/ui/sharedModules/angularMaterial.module.ts
+++ b/src/ui/sharedModules/angularMaterial.module.ts
@@ -1,8 +1,15 @@
-import {MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule} from '@angular/material';
+import {
+ MatButtonModule,
+ MatCheckboxModule,
+ MatSidenavModule,
+ MatCardModule,
+ MatTabsModule,
+ MatMenuModule
+} from '@angular/material';
import { NgModule } from '@angular/core';
@NgModule({
- imports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule],
- exports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule],
+ imports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule, MatMenuModule],
+ exports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule, MatMenuModule],
})
export class AngularMaterialModule { }
\ No newline at end of file
diff --git a/src/ui/signinBanner/signinBanner.components.ts b/src/ui/signinBanner/signinBanner.components.ts
index 75656e0fa..82abeb538 100644
--- a/src/ui/signinBanner/signinBanner.components.ts
+++ b/src/ui/signinBanner/signinBanner.components.ts
@@ -31,6 +31,7 @@ export class SigninBanner implements OnInit, OnDestroy{
public selectedParcellation$: Observable<any>
public selectedRegions$: Observable<any[]>
private selectedRegions: any[] = []
+ private selectedTemplate: any
@Input() darktheme: boolean
constructor(
@@ -74,6 +75,9 @@ export class SigninBanner implements OnInit, OnDestroy{
this.selectedRegions = regions
})
)
+ this.subscriptions.push(
+ this.selectedTemplate$.subscribe(template => this.selectedTemplate = template)
+ )
}
ngOnDestroy(){
diff --git a/src/ui/signinBanner/signinBanner.style.css b/src/ui/signinBanner/signinBanner.style.css
index 126c598d6..1d53a9f50 100644
--- a/src/ui/signinBanner/signinBanner.style.css
+++ b/src/ui/signinBanner/signinBanner.style.css
@@ -46,12 +46,26 @@ dropdown-component
.login-button-panel-mobile {
order: -1;
- align-self: flex-start;
+ align-self: flex-start;
width: 100%;
display: flex;
justify-content: space-between;
}
+.login-button-panel-splash {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-left: auto;
+ text-align: right
+}
+.login-button-splash > button {
+ color: #FFFFFF;
+ outline: none;
+ background-color: coral;
+ margin: 5px;
+}
+
.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 51ae875d9..59c5d3d4a 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -3,6 +3,7 @@
[ngClass]="{ 'flex-column w-100 align-items-stretch' : isMobile}" >
<dropdown-component
+ *ngIf="selectedTemplate || isMobile"
(itemSelected)="changeTemplate($event)"
[activeDisplay]="displayActiveTemplate"
[selectedItem]="selectedTemplate$ | async"
@@ -42,7 +43,7 @@
<!-- help btn -->
<div class="btnWrapper">
<div
- *ngIf="!isMobile"
+ *ngIf="!isMobile && selectedTemplate"
(click)="showHelp()"
class="btn btn-outline-secondary btn-sm rounded-circle login-icon">
<i class="fas fa-question-circle"></i>
@@ -54,7 +55,7 @@
<div class="btnWrapper">
<div
- *ngIf="!isMobile"
+ *ngIf="!isMobile && selectedTemplate"
(click)="showSignin()"
class="btn btn-outline-secondary btn-sm rounded-circle login-icon">
<i
@@ -75,4 +76,18 @@
</div>
</div>
+
+
+ <div *ngIf="!selectedTemplate && !isMobile" class="login-button-panel-splash">
+ <div
+ (click)="showSignin()"
+ class="login-button-splash">
+ <button mat-button>Log In</button>
+ </div>
+ <div (click)="showHelp()" class="login-button-splash">
+ <button mat-button>Help</button>
+ </div>
+ </div>
+
+
</div>
\ No newline at end of file
--
GitLab