From e5e11566424e5ee49d1e71a75e68e2abddeb8948 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Wed, 8 May 2019 15:07:06 +0200
Subject: [PATCH] chore: use combined modal to display help and ToU chore:
restore clear all selected regions
---
src/atlasViewer/atlasViewer.component.ts | 17 -------------
.../atlasViewer.constantService.service.ts | 3 +--
src/atlasViewer/atlasViewer.template.html | 24 ++++++++++++++-----
.../flatTree/flatTree.template.html | 3 +--
src/main.module.ts | 2 ++
.../regionHierarchy.component.ts | 8 +++++++
.../regionHierachy/regionHierarchy.style.css | 18 --------------
.../regionHierarchy.template.html | 13 +++++++---
.../signinBanner/signinBanner.components.ts | 11 +++++----
.../signinBanner/signinBanner.template.html | 21 +++++-----------
10 files changed, 53 insertions(+), 67 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index c5736694e..efc5e321e 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -33,7 +33,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
@ViewChild('floatingMouseContextualContainer', { read: ViewContainerRef }) floatingMouseContextualContainer: ViewContainerRef
@ViewChild('helpComponent', {read: TemplateRef}) helpComponent : TemplateRef<any>
- @ViewChild('viewerConfigComponent', {read: TemplateRef}) viewerConfigComponent : TemplateRef<any>
@ViewChild('signinModalComponent', {read: TemplateRef}) signinModalComponent : TemplateRef<any>
@ViewChild('cookieAgreementComponent', {read: TemplateRef}) cookieAgreementComponent : TemplateRef<any>
@ViewChild(LayoutMainSide) layoutMainSide: LayoutMainSide
@@ -55,7 +54,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
public selectedRegions$: Observable<any[]>
public selectedPOI$ : Observable<any[]>
private showHelp$: Observable<any>
- private showConfig$: Observable<any>
public dedicatedView$: Observable<string | null>
public onhoverSegment$: Observable<string>
@@ -106,10 +104,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
debounceTime(170)
)
- this.showConfig$ = this.constantsService.showConfigSubject$.pipe(
- debounceTime(170)
- )
-
this.selectedRegions$ = this.store.pipe(
select('viewerState'),
filter(state=>isDefined(state)&&isDefined(state.regionsSelected)),
@@ -245,17 +239,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
})
)
- this.subscriptions.push(
- this.showConfig$.subscribe(() => {
- this.modalService.show(ModalUnit, {
- initialState: {
- title: this.constantsService.showConfigTitle,
- template: this.viewerConfigComponent
- }
- })
- })
- )
-
this.subscriptions.push(
this.ngLayerNames$.pipe(
concatMap(data => this.constantsService.loadExportNehubaPromise.then(data))
diff --git a/src/atlasViewer/atlasViewer.constantService.service.ts b/src/atlasViewer/atlasViewer.constantService.service.ts
index 680be189a..137b18678 100644
--- a/src/atlasViewer/atlasViewer.constantService.service.ts
+++ b/src/atlasViewer/atlasViewer.constantService.service.ts
@@ -172,13 +172,12 @@ Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float
/**
* Observable for showing config modal
*/
- public showConfigSubject$: Subject<null> = new Subject()
public showConfigTitle: String = 'Settings'
/**
* Observable for showing help modal
*/
public showHelpSubject$: Subject<null> = new Subject()
- public showHelpTitle: String = 'Help: Controls and Shortcuts'
+ public showHelpTitle: String = 'About'
private showHelpGeneralMobile = [
['hold 🌠+ ↕', 'change oblique slice mode'],
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 230eabf2a..976e1bdb7 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -78,12 +78,24 @@
</div>
<ng-template #helpComponent>
- <help-component>
- </help-component>
-</ng-template>
-<ng-template #viewerConfigComponent>
- <config-component>
- </config-component>
+ <tabset>
+ <tab heading="Help">
+ <help-component>
+ </help-component>
+ </tab>
+ <tab heading="Settings">
+ <div class="mt-2">
+ <config-component>
+ </config-component>
+ </div>
+ </tab>
+ <tab heading="Privacy Policy">
+ <div class="mt-2">
+ <cookie-agreement>
+ </cookie-agreement>
+ </div>
+ </tab>
+ </tabset>
</ng-template>
<ng-template #signinModalComponent>
<signin-modal>
diff --git a/src/components/flatTree/flatTree.template.html b/src/components/flatTree/flatTree.template.html
index 642dc3ac6..ef02ebb8f 100644
--- a/src/components/flatTree/flatTree.template.html
+++ b/src/components/flatTree/flatTree.template.html
@@ -26,8 +26,7 @@
</span>
</span>
- <span
- class="test"
+ <span
*ngIf="findChildren(flattenedItem).length > 0; else noChildren"
(click)="$event.stopPropagation(); toggleCollapse(flattenedItem)" >
<i [ngClass]="isCollapsed(flattenedItem) ? 'r-270' : ''" class="fas fa-chevron-down"></i>
diff --git a/src/main.module.ts b/src/main.module.ts
index 9a1e6229c..6e8c6547e 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -15,6 +15,7 @@ import { WidgetUnit } from "./atlasViewer/widgetUnit/widgetUnit.component";
import { WidgetServices } from './atlasViewer/widgetUnit/widgetService.service'
import { fasTooltipScreenshotDirective,fasTooltipInfoSignDirective,fasTooltipLogInDirective,fasTooltipNewWindowDirective,fasTooltipQuestionSignDirective,fasTooltipRemoveDirective,fasTooltipRemoveSignDirective } from "./util/directives/glyphiconTooltip.directive";
import { TooltipModule } from "ngx-bootstrap/tooltip";
+import { TabsModule } from 'ngx-bootstrap/tabs'
import { ModalModule } from 'ngx-bootstrap/modal'
import { ModalUnit } from "./atlasViewer/modalUnit/modalUnit.component";
import { AtlasViewerURLService } from "./atlasViewer/atlasViewer.urlService.service";
@@ -46,6 +47,7 @@ import { DatabrowserService } from "./ui/databrowserModule/databrowser.service";
ModalModule.forRoot(),
TooltipModule.forRoot(),
+ TabsModule.forRoot(),
StoreModule.forRoot({
pluginState,
viewerConfigState,
diff --git a/src/ui/regionHierachy/regionHierarchy.component.ts b/src/ui/regionHierachy/regionHierarchy.component.ts
index b6c43e089..1d5e27281 100644
--- a/src/ui/regionHierachy/regionHierarchy.component.ts
+++ b/src/ui/regionHierachy/regionHierarchy.component.ts
@@ -32,6 +32,9 @@ export class RegionHierarchy implements OnInit{
@Output()
private doubleClickRegion: EventEmitter<any> = new EventEmitter()
+ @Output()
+ private clearAllRegions: EventEmitter<null> = new EventEmitter()
+
public searchTerm: string = ''
private subscriptions: Subscription[] = []
@@ -56,6 +59,11 @@ export class RegionHierarchy implements OnInit{
){
}
+ clearRegions(event:MouseEvent){
+ event.stopPropagation()
+ this.clearAllRegions.emit()
+ }
+
get showRegionTree(){
return this._showRegionTree
}
diff --git a/src/ui/regionHierachy/regionHierarchy.style.css b/src/ui/regionHierachy/regionHierarchy.style.css
index 18ab174bf..e6ada8b93 100644
--- a/src/ui/regionHierachy/regionHierarchy.style.css
+++ b/src/ui/regionHierachy/regionHierarchy.style.css
@@ -1,22 +1,4 @@
-div[treeHeader]
-{
- height: 55px;
-}
-
-div[treeHeader] > span
-{
- display:inline-block;
- padding: 12px 0px;
- line-height:2em;
- border:none;
-}
-
-div[treeHeader] > span.btn.btn-link
-{
- margin-left:2em;
-}
-
div[treeContainer]
{
padding:1em;
diff --git a/src/ui/regionHierachy/regionHierarchy.template.html b/src/ui/regionHierachy/regionHierarchy.template.html
index faa9ea2d7..2c46bb630 100644
--- a/src/ui/regionHierachy/regionHierarchy.template.html
+++ b/src/ui/regionHierachy/regionHierarchy.template.html
@@ -17,9 +17,16 @@
hideScrollbarContainer>
<div treeContainer #treeContainer>
- <div treeHeader>
- <span>{{ selectedRegions.length }} {{ selectedRegions.length > 1 ? 'regions' : 'region' }} selected</span>
- <span (click)="clearRegions($event)" *ngIf="selectedRegions.length > 0" class="btn btn-link">clear all</span>
+ <div class="d-inline-flex align-items-center">
+ <div>
+ {{ selectedRegions.length }} {{ selectedRegions.length > 1 ? 'regions' : 'region' }} selected
+ </div>
+ <div
+ (click)="clearRegions($event)"
+ [ngClass]="{ 'invisible': selectedRegions.length === 0 }"
+ class="btn btn-link">
+ clear all
+ </div>
</div>
<ng-container *ngIf="selectedParcellation && selectedParcellation.regions as regions">
diff --git a/src/ui/signinBanner/signinBanner.components.ts b/src/ui/signinBanner/signinBanner.components.ts
index ac2005a42..4f81cf657 100644
--- a/src/ui/signinBanner/signinBanner.components.ts
+++ b/src/ui/signinBanner/signinBanner.components.ts
@@ -121,14 +121,17 @@ export class SigninBanner implements OnInit, OnDestroy{
this.constantService.showHelpSubject$.next()
}
- showConfig() {
- this.constantService.showConfigSubject$.next()
- }
-
showSignin() {
this.constantService.showSigninSubject$.next(this.user)
}
+ clearAllRegions(){
+ this.store.dispatch({
+ type: SELECT_REGIONS,
+ selectRegions: []
+ })
+ }
+
get isMobile(){
return this.constantService.mobile
}
diff --git a/src/ui/signinBanner/signinBanner.template.html b/src/ui/signinBanner/signinBanner.template.html
index 90ea9f142..81aa6e58c 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -20,6 +20,7 @@
[selectedRegions]="selectedRegions$ | async | filterNull"
(singleClickRegion)="handleRegionClick({ mode: 'single', region: $event })"
(doubleClickRegion)="handleRegionClick({ mode: 'double', region: $event })"
+ (clearAllRegions)="clearAllRegions()"
*ngIf="selectedParcellation$ | async as selectedParcellation"
[selectedParcellation]="selectedParcellation">
@@ -34,21 +35,11 @@
<i class="fas fa-question-circle"></i>
</div>
-<!-- config btn -->
+<!-- signin -->
<div
- *ngIf="!isMobile"
- (click)="showConfig()"
+ (click)="showSignin()"
class="btn btn-outline-secondary btn-sm rounded-circle">
- <i class="fas fa-cog"></i>
-</div>
-
-<!-- signin -->
-<div class="btnWrapper">
- <div
- (click)="showSignin()"
- class="btn btn-outline-secondary btn-sm rounded-circle">
- <i
- [ngClass]="user ? 'fa-user' : 'fa-sign-in-alt'"
- class="fas"></i>
- </div>
+ <i
+ [ngClass]="user ? 'fa-user' : 'fa-sign-in-alt'"
+ class="fas"></i>
</div>
\ No newline at end of file
--
GitLab