Add log in and help buttons to splash screen

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

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>

src/ui/sharedModules/angularMaterial.module.ts

-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

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(){

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;

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