chore: simplify splash screen

src/atlasViewer/atlasViewer.template.html

@@ -128,10 +128,9 @@
     </ui-nehuba-container>
   
     <div *ngIf="!isMobile" bannerWrapper>
-      <menu-icons iconWrapper *ngIf="selectedTemplate">
+      <menu-icons iconWrapper>
       </menu-icons>
 
-      <div *ngIf="!selectedTemplate"></div>
       <signin-banner signinWrapper [ngStyle]="{'margin-right': !selectedTemplate? '20px': ''}">
       </signin-banner>
     </div>

src/ui/menuicons/menuicons.component.ts

@@ -8,6 +8,8 @@ import { PluginBannerUI } from "../pluginBanner/pluginBanner.component";
 import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
 import { DatabrowserService } from "../databrowserModule/databrowser.service";
 import { PluginServices } from "src/atlasViewer/atlasViewer.pluginService.service";
+import { Store, select } from "@ngrx/store";
+import { Observable } from "rxjs";
 
 @Component({
   selector: 'menu-icons',
@@ -45,13 +47,16 @@ export class MenuIconsBar{
     return this.constantService.mobile
   }
 
+  public selectedTemplate$: Observable<any>
+
   constructor(
     private widgetServices:WidgetServices,
     private injector:Injector,
     private constantService:AtlasViewerConstantsServices,
     public dbService: DatabrowserService,
     cfr: ComponentFactoryResolver,
-    public pluginServices:PluginServices
+    public pluginServices:PluginServices,
+    store: Store<any>
   ){
 
     this.dbService.createDatabrowser = this.clickSearch.bind(this)
@@ -59,6 +64,11 @@ export class MenuIconsBar{
     this.dbcf = cfr.resolveComponentFactory(DataBrowser)
     this.lbcf = cfr.resolveComponentFactory(LayerBrowser)
     this.pbcf = cfr.resolveComponentFactory(PluginBannerUI)
+
+    this.selectedTemplate$ = store.pipe(
+      select('viewerState'),
+      select('templateSelected')
+    )
   }
 
   /**

src/ui/menuicons/menuicons.template.html

 <logo-container *ngIf="!isMobile">
 </logo-container>
 
-<div
-  *ngIf="false"
-  [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
-  class="btnWrapper">
+<!-- hide icons when templates has yet been selected -->
+<ng-template [ngIf]="selectedTemplate$ | async">
   <div
-    [tooltip]="dataBrowserTitle"
-    placement="right"
-    (click)="clickSearch($event)"
-    [ngClass]="databrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
-    class="shadow btn btn-sm rounded-circle">
-    <i class="fas fa-search">
-      
-    </i>
+    *ngIf="false"
+    [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+    class="btnWrapper">
+    <div
+      [tooltip]="dataBrowserTitle"
+      placement="right"
+      (click)="clickSearch($event)"
+      [ngClass]="databrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
+      class="shadow btn btn-sm rounded-circle">
+      <i class="fas fa-search">
+        
+      </i>
+    </div>
   </div>
-</div>
 
-<div
-  [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
-  class="btnWrapper">
   <div
-    tooltip="Layer"
-    placement="right"
-    (click)="clickLayer($event)"
-    [ngClass]="layerbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
-    class="shadow btn btn-sm rounded-circle">
-    <i class="fas fa-layer-group">
-      
-    </i>
+    [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+    class="btnWrapper">
+    <div
+      tooltip="Layer"
+      placement="right"
+      (click)="clickLayer($event)"
+      [ngClass]="layerbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
+      class="shadow btn btn-sm rounded-circle">
+      <i class="fas fa-layer-group">
+        
+      </i>
+    </div>
   </div>
-</div>
 
-<div
-  *ngIf="false"
-  [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
-  class="btnWrapper">
   <div
-    tooltip="Plugins"
-    (click)="clickPlugins($event)"
-    placement="right"
-    [ngClass]="pluginbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
-    class="shadow btn btn-sm rounded-circle">
-    <i class="fas fa-tools">
-      
-    </i>
+    *ngIf="false"
+    [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+    class="btnWrapper">
+    <div
+      tooltip="Plugins"
+      (click)="clickPlugins($event)"
+      placement="right"
+      [ngClass]="pluginbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
+      class="shadow btn btn-sm rounded-circle">
+      <i class="fas fa-tools">
+        
+      </i>
+    </div>
   </div>
-</div>
-
-<div
-  *ngFor="let manifest of pluginServices.fetchedPluginManifests"
-  [tooltip]="manifest.displayName || manifest.name"
-  placement="right"
-  [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
-  class="btnWrapper">
 
   <div
-    (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
-    [ngClass]="!pluginServices.launchedPlugins.has(manifest.name) ? 'btn-outline-secondary' : pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
-    class="shadow btn btn-sm rounded-circle">
-    {{ (manifest.displayName || manifest.name).slice(0, 1) }}
-  </div>
-</div>
+    *ngFor="let manifest of pluginServices.fetchedPluginManifests"
+    [tooltip]="manifest.displayName || manifest.name"
+    placement="right"
+    [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+    class="btnWrapper">
 
-<div
-  *ngFor="let manifest of pluginServices.orphanPlugins"
-  [tooltip]="manifest.displayName || manifest.name"
-  placement="right"
-  [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
-  class="btnWrapper">
+    <div
+      (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
+      [ngClass]="!pluginServices.launchedPlugins.has(manifest.name) ? 'btn-outline-secondary' : pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
+      class="shadow btn btn-sm rounded-circle">
+      {{ (manifest.displayName || manifest.name).slice(0, 1) }}
+    </div>
+  </div>
 
   <div
-    (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
-    [ngClass]="pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
-    class="shadow btn btn-sm rounded-circle">
-    {{ (manifest.displayName || manifest.name).slice(0, 1) }}
+    *ngFor="let manifest of pluginServices.orphanPlugins"
+    [tooltip]="manifest.displayName || manifest.name"
+    placement="right"
+    [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+    class="btnWrapper">
+
+    <div
+      (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
+      [ngClass]="pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
+      class="shadow btn btn-sm rounded-circle">
+      {{ (manifest.displayName || manifest.name).slice(0, 1) }}
+    </div>
   </div>
-</div>
 
-<div
-  *ngFor="let wu of dbService.instantiatedWidgetUnits"
-  [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
-  placement="right"
-  [tooltip]="wu.title"
-  class="btnWrapper">
   <div
-    (click)="widgetServices.minimisedWindow.delete(wu)"
-    [ngClass]="widgetServices.minimisedWindow.has(wu) ? 'btn-outline-info' : 'btn-info'"
-    class="shadow btn btn-sm rounded-circle">
-    <i class="fas fa-search"></i>
+    *ngFor="let wu of dbService.instantiatedWidgetUnits"
+    [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+    placement="right"
+    [tooltip]="wu.title"
+    class="btnWrapper">
+    <div
+      (click)="widgetServices.minimisedWindow.delete(wu)"
+      [ngClass]="widgetServices.minimisedWindow.has(wu) ? 'btn-outline-info' : 'btn-info'"
+      class="shadow btn btn-sm rounded-circle">
+      <i class="fas fa-search"></i>
+    </div>
   </div>
-</div>
\ No newline at end of file
+</ng-template>
\ No newline at end of file

src/ui/nehubaContainer/splashScreen/splashScreen.style.css

-div[splashScreenContainer]
+.appendMargin
 {
-  height: 100%;
-  display:flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  overflow-y:auto;
-}
-
-div[splashScreenHeader] {
-  max-height: 100px;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
+  padding-top:10em;
 }
 
-
 .splashScreenHeaderTitle {
   font-size: 45px;
 }
 
-
-.splashScreenHeaderLogoContainer {
-  flex: 1;
-  padding-top: 20px;
-}
-.splashScreenHeaderLogo {
-  margin-left: 50px;
-  width: 100px;
-  height: auto;
-}
-
-.spaceForFill {
-  flex: 1;
-}
-
-div[splashScreenTemplate] {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-}
-
 div[splashScreenTemplateItem] {
   max-width: 600px;
   width: 400px;
@@ -68,20 +30,6 @@ div[splashScreenTemplateHeader] {
 
 }
 
-div[splashScreenTemplateBody] {
-  display: flex;
-  flex-direction: column;
-}
-
-div[splashScreenTemplateBodyDescription] {
-  flex: 1;
-  text-align: justify;
-  margin: 0 10px 10px 10px;
-}
-div[splashScreenTemplateBodyImage] {
-  flex: 1;
-}
-
 .template-image {
   width: 100%;
   height: auto;

src/ui/nehubaContainer/splashScreen/splashScreen.template.html

-<div splashScreenContainer>
-  <div splashScreenHeader *ngIf="!isMobile">
-    <div class="splashScreenHeaderLogoContainer"><img class="splashScreenHeaderLogo " src="./res/image/HBP_Primary_RGB_BlackText.png"> </div>
-    <div class="spaceForFill">
-    </div>
-  </div>
+<div [ngClass]="isMobile ? '' : 'appendMargin'" class="h-100 d-flex flex-column justify-content-start align-items-center overflow-auto">
 
-  <div splashScreenTemplate>
+  <div class="d-flex w-100 flex-wrap justify-content-center">
     <div *ngFor="let template of loadedTemplate$ | async | filterNull" splashScreenTemplateItem>
       <div class="template-card" (click) = "selectTemplate(template)">
         <div splashScreenTemplateHeader>
           {{template.properties.name}}
         </div>
-        <div splashScreenTemplateBody>
-          <div splashScreenTemplateBodyImage>
+        <div class="d-flex flex-column">
+          <div class="flex-grow-1">
             <img class="template-image" [src]="'./res/image/' + correctString(template.properties.name) + '.png'">
           </div>
-          <div splashScreenTemplateBodyDescription>
+          <div class="flex-grow-1 text-justify ml-2 mr-2 mb-2 mt-0">
             {{template.properties.description}}
           </div>
         </div>