diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts index b7b5d8e97d4c30cd00c4cf7cfc8982a74f21c64f..eb27393a77f1c284743cc34314d09db21040946f 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 9e6b22064b19331575a9a2e6d6fb0818d61922e5..4c3f4e350413a656bebb9bcca79d2b9a98ae9cec 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 f5b4938579625c01795ae85e04c85adac4f6529e..969b6f39c326c3fbef83e86ed797ec0fc7b03abd 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 75656e0fab1a4b698bcca07bc45eda09ba5ced30..82abeb538d88278f09dc065da094f8a59611461e 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 126c598d6d8544ae5e1727d105ac6e20dd089c26..1d53a9f509d6124afce0b454cc5826c211b4cfa6 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 51ae875d91ab9e9858a88eb801986edf6b9b7294..59c5d3d4a1f6da3959292788de5ff73e75ebb533 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