From 25ffddb4d71de46f5e1abe58717fe0ae39a6a086 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Tue, 4 Sep 2018 15:53:29 +0200
Subject: [PATCH] improve the consistency of angular components and styles
---
src/res/css/extra_styles.css | 9 ++++--
src/ui/citation/citations.component.ts | 2 +-
src/ui/citation/citations.style.css | 6 ++++
.../dedicated/dedicated.component.ts | 1 -
.../fileviewer/dedicated/dedicated.style.css | 20 ++----------
.../dedicated/dedicated.template.html | 20 ++++++------
src/ui/fileviewer/fileviewer.component.ts | 6 ++--
src/ui/fileviewer/fileviewer.style.css | 5 +++
src/ui/fileviewer/fileviewer.template.html | 14 ++++-----
.../nehubaContainer/nehubaContainer.style.css | 6 ++++
.../nehubaContainer.template.html | 31 +++++++++----------
11 files changed, 61 insertions(+), 59 deletions(-)
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 3a880eccf..82f035c9b 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -96,7 +96,7 @@ label.perspective-panel-show-slice-views:hover
[darktheme="true"] a
{
- color:#337ab7;
+ color:#d7e6f4;
}
label.perspective-panel-show-slice-views:before
@@ -108,6 +108,11 @@ label.perspective-panel-show-slice-views:before
color: #337ab7;
}
+[darktheme="true"] label.perspective-panel-show-slice-views:before
+{
+ color: #d7e6f4;
+}
+
[darktheme="true"] .scale-bar-container
{
color:#f2f2f2;
@@ -139,4 +144,4 @@ markdown-dom pre code
.glyphicon-none
{
width:1em;
-}
\ No newline at end of file
+}
diff --git a/src/ui/citation/citations.component.ts b/src/ui/citation/citations.component.ts
index 36dd3368d..c51675446 100644
--- a/src/ui/citation/citations.component.ts
+++ b/src/ui/citation/citations.component.ts
@@ -3,7 +3,7 @@ import { Property } from "../../services/stateStore.service";
@Component({
- selector : 'citations',
+ selector : 'citations-component',
templateUrl : './citations.template.html',
styleUrls : [
'./citations.style.css'
diff --git a/src/ui/citation/citations.style.css b/src/ui/citation/citations.style.css
index b0db950b0..9eaed9b36 100644
--- a/src/ui/citation/citations.style.css
+++ b/src/ui/citation/citations.style.css
@@ -5,9 +5,15 @@
display:block;
white-space: normal;
padding-bottom:0px;
+ margin-top:1em;
}
:host > div[citationContainer]:not(:first-child)
{
padding-top: 0px;
}
+
+div[publicationContainer]
+{
+ margin-top:1em;
+}
\ No newline at end of file
diff --git a/src/ui/fileviewer/dedicated/dedicated.component.ts b/src/ui/fileviewer/dedicated/dedicated.component.ts
index 73f0904dd..c0a4e773b 100644
--- a/src/ui/fileviewer/dedicated/dedicated.component.ts
+++ b/src/ui/fileviewer/dedicated/dedicated.component.ts
@@ -2,7 +2,6 @@ import { Component, OnDestroy, Input } from "@angular/core";
import { Store, select } from "@ngrx/store";
import { DedicatedViewState, File, ADD_NG_LAYER, REMOVE_NG_LAYER, NgViewerStateInterface } from "../../../services/stateStore.service";
import { Observable, Subscription } from "rxjs";
-import { filter, map } from "rxjs/operators";
import { getActiveColorMapFragmentMain } from "../../nehubaContainer/nehubaContainer.component";
diff --git a/src/ui/fileviewer/dedicated/dedicated.style.css b/src/ui/fileviewer/dedicated/dedicated.style.css
index f8288c558..8f54fa6f0 100644
--- a/src/ui/fileviewer/dedicated/dedicated.style.css
+++ b/src/ui/fileviewer/dedicated/dedicated.style.css
@@ -1,20 +1,4 @@
-.well
+a
{
- border-radius:0;
- border:0;
- width:calc(100% - 2em);
- box-sizing:border-box;
- margin:1em;
- overflow-x:auto;
-}
-.obstructedText
-{
- display:inline-block;
- margin:0 1em;
- width : calc(100% - 2em);
-}
-
-:host-context([darktheme="true"]) .well
-{
- background-color:rgba(0,0,0,0.2);
+ margin: 0 1em;
}
\ No newline at end of file
diff --git a/src/ui/fileviewer/dedicated/dedicated.template.html b/src/ui/fileviewer/dedicated/dedicated.template.html
index 4b4fd2b39..f1481940c 100644
--- a/src/ui/fileviewer/dedicated/dedicated.template.html
+++ b/src/ui/fileviewer/dedicated/dedicated.template.html
@@ -1,14 +1,14 @@
-<span
- (click) = "showDedicatedView()"
- *ngIf = "!isShowing"
- class = "btn btn-link">
+<a
+ href = "#"
+ (click) = "$event.preventDefault();showDedicatedView()"
+ *ngIf = "!isShowing">
show this dataset in the viewer
-</span>
-<span
- (click) = "removeDedicatedView()"
- *ngIf = "isShowing"
- class = "btn btn-link">
+</a>
+<a
+ href = "#"
+ (click) = "$event.preventDefault();removeDedicatedView()"
+ *ngIf = "isShowing">
clear this dataset from the viewer
-</span>
\ No newline at end of file
+</a>
\ No newline at end of file
diff --git a/src/ui/fileviewer/fileviewer.component.ts b/src/ui/fileviewer/fileviewer.component.ts
index 4bb4fa988..7ad43ca02 100644
--- a/src/ui/fileviewer/fileviewer.component.ts
+++ b/src/ui/fileviewer/fileviewer.component.ts
@@ -31,7 +31,6 @@ export class FileViewer implements OnChanges,OnDestroy,OnInit{
}
ngOnInit(){
- console.log('ng onchanges',this.searchResultFile)
this.createUrls()
}
ngOnChanges(){
@@ -47,13 +46,14 @@ export class FileViewer implements OnChanges,OnDestroy,OnInit{
null
}
+ /* TODO require better way to check if a chart exists */
private createUrls(){
const timer$ = interval(50)
const timerSet$ = timer$.pipe(
switchMap(()=>from(new Promise((rs,rj)=>{
if(!this.childChart)
- rj('childChart not yet defined')
+ rj('chart not defined after 500ms')
this.childChart.canvas.nativeElement.toBlob((blob)=>{
blob ? rs(blob) : rj('blob is undefined')
@@ -66,7 +66,7 @@ export class FileViewer implements OnChanges,OnDestroy,OnInit{
timerSet$.subscribe((blob)=>{
this._pngDownloadUrl = URL.createObjectURL(blob)
- },(err)=>console.error('error',err))
+ },(err)=>console.warn('warning',err))
if(!this.searchResultFile.url && this.searchResultFile.data){
diff --git a/src/ui/fileviewer/fileviewer.style.css b/src/ui/fileviewer/fileviewer.style.css
index 096b468ea..6d80a20c3 100644
--- a/src/ui/fileviewer/fileviewer.style.css
+++ b/src/ui/fileviewer/fileviewer.style.css
@@ -20,4 +20,9 @@ img
max-width: 100%;
box-sizing: border-box;
padding: 0.5em 1em;
+}
+
+div[anchorContainer]
+{
+ padding:0.2em 1em;
}
\ No newline at end of file
diff --git a/src/ui/fileviewer/fileviewer.template.html b/src/ui/fileviewer/fileviewer.template.html
index 7dc5acf37..82b0c4e55 100644
--- a/src/ui/fileviewer/fileviewer.template.html
+++ b/src/ui/fileviewer/fileviewer.template.html
@@ -3,11 +3,11 @@
</div>
<!-- citation -->
-<citations
+<citations-component
citationContainer
- *ngIf = "searchResultFile"
+ *ngIf = "searchResultFile && !searchResultFile.kgID"
[properties] = "searchResultFile.datasetProperties">
-</citations>
+</citations-component>
<!-- file viewer -->
<div
@@ -72,10 +72,10 @@
</small>
</readmore>
-<div *ngIf = "downloadUrl">
- <a [href]="downloadUrl" target = "_blank" class = "btn btn-link" download>Download File</a>
+<div anchorContainer *ngIf = "downloadUrl">
+ <a [href]="downloadUrl" target = "_blank" download>Download File</a>
</div>
-<div *ngIf = "downloadPng">
- <a [href] = "downloadPng" target = "_blank" class = "btn btn-link" download>Download Chart as Image</a>
+<div anchorContainer *ngIf = "downloadPng">
+ <a [href] = "downloadPng" target = "_blank" download>Download Chart as Image</a>
</div>
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index 5efeba62d..83626740a 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -101,4 +101,10 @@ small[onHoverSegment]
hr
{
margin : 0.2em 2em;
+}
+
+div[linksContainer]
+{
+ display:inline-block;
+ margin-left:1em;
}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 60ae07933..0e22c3267 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -66,32 +66,29 @@
*ngIf = "viewerLoaded">
<div statusCard>
- <citations
+ <citations-component
*ngIf = "selectedParcellation.properties"
[properties] = "selectedParcellation.properties"
citationContainer>
- </citations>
- <citations
+ </citations-component>
+ <citations-component
[properties] = "selectedTemplate.properties"
*ngIf = "showCitation"
citationContainer>
- </citations>
+ </citations-component>
- <hr
- *ngIf = "showCitation" />
+ <hr *ngIf = "showCitation" />
- <span
- class = "btn btn-link"
- (click)="statusPanelRealSpace = !statusPanelRealSpace">
- {{statusPanelRealSpace ? 'RealSpace' : 'VoxelSpace'}}
- </span>
-
- <span
- (click) = "resetNavigation()"
- class = "btn btn-link">
- reset navigation
- </span>
+ <div linksContainer>
+ <a href = "#" (click)="$event.preventDefault();statusPanelRealSpace = !statusPanelRealSpace">
+ {{statusPanelRealSpace ? 'real space' : 'voxel space'}}
+ </a>
+
+ <a href = "#" (click) = "$event.preventDefault();resetNavigation()">
+ reset navigation
+ </a>
+ </div>
<br />
<div textContainer>
--
GitLab