From e198d505c39bf11df6624020361121a0fc81ae30 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Thu, 4 Jul 2019 13:48:41 +0200
Subject: [PATCH] chore: simplify splash screen
---
src/atlasViewer/atlasViewer.template.html | 3 +-
src/ui/menuicons/menuicons.component.ts | 12 +-
src/ui/menuicons/menuicons.template.html | 149 +++++++++---------
.../splashScreen/splashScreen.style.css | 56 +------
.../splashScreen/splashScreen.template.html | 15 +-
5 files changed, 95 insertions(+), 140 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index f6cc260ea..67a91c84c 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/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>
diff --git a/src/ui/menuicons/menuicons.component.ts b/src/ui/menuicons/menuicons.component.ts
index 57250e2b4..c488a4e52 100644
--- a/src/ui/menuicons/menuicons.component.ts
+++ b/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')
+ )
}
/**
diff --git a/src/ui/menuicons/menuicons.template.html b/src/ui/menuicons/menuicons.template.html
index 4ea766718..214281632 100644
--- a/src/ui/menuicons/menuicons.template.html
+++ b/src/ui/menuicons/menuicons.template.html
@@ -1,93 +1,96 @@
<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
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
index 69caafe88..cea119513 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
@@ -1,50 +1,12 @@
-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;
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
index 76f0b92f4..28ec10df8 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -1,21 +1,16 @@
-<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>
--
GitLab