From ef20719424c40c16e2e12a45bd7efeb27de7bccd Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 17 May 2019 12:31:21 +0200
Subject: [PATCH] chore: ui tweak
---
src/atlasViewer/atlasViewer.component.ts | 2 --
src/atlasViewer/atlasViewer.template.html | 4 ++--
src/components/dropdown/dropdown.style.css | 21 -------------------
.../dropdown/dropdown.template.html | 7 ++++---
src/components/radiolist/radiolist.style.css | 5 -----
.../radiolist/radiolist.template.html | 2 +-
src/res/css/extra_styles.css | 5 -----
.../databrowser/databrowser.template.html | 9 ++++----
8 files changed, 12 insertions(+), 43 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index cbb974e79..c220280cf 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -39,7 +39,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
@ViewChild('cookieAgreementComponent', {read: TemplateRef}) cookieAgreementComponent : TemplateRef<any>
@ViewChild('kgToS', {read: TemplateRef}) kgTosComponent: TemplateRef<any>
@ViewChild(LayoutMainSide) layoutMainSide: LayoutMainSide
- @ViewChild('dockedContainer', {read: ViewContainerRef}) dockedContainer: ViewContainerRef
@ViewChild(NehubaContainer) nehubaContainer: NehubaContainer
@@ -338,7 +337,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
}
})
})
- this.widgetServices.dockedContainer = this.dockedContainer
this.onhoverSegmentForFixed$ = this.rClContextualMenu.onShow.pipe(
withLatestFrom(this.onhoverSegment$),
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index a08b77900..205d21f7f 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -38,8 +38,8 @@
<layer-browser></layer-browser>
</div>
</panel-component>
- <ng-template #dockedContainer>
- </ng-template>
+ <div dockedContainerDirective>
+ </div>
</tab>
</tabset>
diff --git a/src/components/dropdown/dropdown.style.css b/src/components/dropdown/dropdown.style.css
index 4fc671675..e13bd32eb 100644
--- a/src/components/dropdown/dropdown.style.css
+++ b/src/components/dropdown/dropdown.style.css
@@ -56,24 +56,3 @@ radio-list
overflow-x:hidden;
display:block;
}
-
-.drop-down-open-dark {
- border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: white
-}
-.drop-down-open-light {
- border-width: 1px 1px 0 1px solid black;
- border-style: solid;
- border-color: black;
-}
-.drop-down-closed-dark {
- border-width: 1px;
- border-style: solid;
- border-color: white
-}
-.drop-down-closed-light {
- border: 1px;
- border-style: solid;
- border-color: black
-}
\ No newline at end of file
diff --git a/src/components/dropdown/dropdown.template.html b/src/components/dropdown/dropdown.template.html
index 165044e39..e448400b8 100644
--- a/src/components/dropdown/dropdown.template.html
+++ b/src/components/dropdown/dropdown.template.html
@@ -1,3 +1,4 @@
+<!-- TODO remove dependency on ismobile -->
<span
class = "btn btn-default"
[innerHTML] = "activeDisplay(selectedItem)"
@@ -5,18 +6,18 @@
#dropdownToggle
dropdownToggle
- [ngStyle]="{'border': isMobile? '1px solid' : 'none', 'border-color': darktheme? 'white' : 'black', 'border-width': openState? '1px 1px 0 1px' : ''}">
+ [ngStyle]="{'border': isMobile? 'none' : 'none', 'border-color': darktheme? 'white' : 'black', 'border-width': openState? '1px 1px 0 1px' : ''}">
</span>
<!-- needed to ensure dropdown width matches -->
-<ul class="m-0 h-0 o-h">
+<ul class="m-0 h-0 overflow-hidden">
<li *ngFor="let item of inputArray">
{{ listDisplay(item) }}
</li>
</ul>
<radio-list
- [ulClass]="'dropdown-menu'"
+ [ulClass]="'dropdown-menu shadow'"
(itemSelected)="itemSelected.emit($event)"
[listDisplay]="listDisplay"
[selectedItem]="selectedItem"
diff --git a/src/components/radiolist/radiolist.style.css b/src/components/radiolist/radiolist.style.css
index 1d329b0eb..d264f83b0 100644
--- a/src/components/radiolist/radiolist.style.css
+++ b/src/components/radiolist/radiolist.style.css
@@ -55,8 +55,3 @@ ul,span.dropdown-item-1
white-space: nowrap;
border:none;
}
-
-.radioListBorder {
- border-style: solid;
- border-width: 0px 1px 1px 1px;
-}
\ No newline at end of file
diff --git a/src/components/radiolist/radiolist.template.html b/src/components/radiolist/radiolist.template.html
index 2f0236c6b..3562d8685 100644
--- a/src/components/radiolist/radiolist.template.html
+++ b/src/components/radiolist/radiolist.template.html
@@ -1,5 +1,5 @@
<ul
- [ngClass]="[ulClass, isMobile? 'radioListBorder' : '']"
+ [ngClass]="ulClass"
[ngStyle]="{'opacity': isMobile? '1' : '0.8', 'border-color': darktheme? 'white' : 'black'}"
role="menu">
<li
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 6b557d471..a49851895 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -306,11 +306,6 @@ markdown-dom pre code
transition: all ease 500ms;
}
-.o-h
-{
- overflow:hidden;
-}
-
.h-0
{
height: 0px;
diff --git a/src/ui/databrowserModule/databrowser/databrowser.template.html b/src/ui/databrowserModule/databrowser/databrowser.template.html
index be1302be1..890576252 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.template.html
+++ b/src/ui/databrowserModule/databrowser/databrowser.template.html
@@ -15,11 +15,11 @@
Datasets relevant to
<span
*ngFor="let region of regions"
- class="badge badge-secondary mr-1">
+ class="badge badge-secondary mr-1 mw-100">
<span [ngStyle]="{backgroundColor:getBackgroundColorStyleFromRegion(region)}" class="dot">
</span>
- <span>
+ <span class="d-inline-block mw-100 overflow-hidden text-truncate">
{{ region.name }}
</span>
</span>
@@ -118,13 +118,14 @@
[dataset]="dataset">
<div regionTagsContainer>
+ <!-- TODO may want to separate the region badge into a separate component -->
<span
*ngFor="let region of dataset.parcellationRegion"
- class="badge badge-secondary mr-1">
+ class="badge badge-secondary mr-1 mw-100">
<span [ngStyle]="{backgroundColor:getBackgroundColorStyleFromRegion(region)}" class="dot">
</span>
- <span>
+ <span class="d-inline-block mw-100 overflow-hidden text-truncate">
{{ region.name }}
</span>
</span>
--
GitLab