From d1e21cc78d1b7ec50c32c568e085f6c71957be0d Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Mon, 11 Jul 2022 09:55:49 +0200
Subject: [PATCH] chore: cosmetic UI fixes bugfix: category badges captures
click event
---
docs/releases/v2.7.2.md | 2 +
e2e/checklist.md | 5 +++
.../parcellation.smartChip.style.css | 11 +++++
.../parcellation.smartChip.template.html | 40 +++++++++----------
.../entryListItem/entryListItem.template.html | 2 +-
src/extra_styles.css | 5 ---
src/overwrite.scss | 5 +++
src/ui/quickTour/quickTour.service.ts | 2 +-
.../nehuba.layoutOverlay.template.html | 2 +-
.../viewerCmp/viewerCmp.style.css | 6 +++
.../viewerCmp/viewerCmp.template.html | 10 ++---
11 files changed, 57 insertions(+), 33 deletions(-)
diff --git a/docs/releases/v2.7.2.md b/docs/releases/v2.7.2.md
index 7279c7cd2..2a5ada611 100644
--- a/docs/releases/v2.7.2.md
+++ b/docs/releases/v2.7.2.md
@@ -8,3 +8,5 @@
- fix the position of quick tour panel of slice view panels
- fix the atlas selection logic. This should reduce 4xx/5xx calls significantly
+- minor update to parcellation chip appearance
+- clicking on feature badge now properly selects the feature
diff --git a/e2e/checklist.md b/e2e/checklist.md
index b1a0c2ce2..eef89d804 100644
--- a/e2e/checklist.md
+++ b/e2e/checklist.md
@@ -14,6 +14,11 @@
- [ ] Human multilevel atlas
- [ ] on click from home page, MNI152, Julich v2.9 loads without issue
- [ ] on hover, show correct region name(s)
+ - [ ] Parcellation smart chip
+ - [ ] show/hide parcellation toggle exists and works
+ - [ ] `q` is a shortcut to show/hide parcellation toggle
+ - [ ] info button exists and works
+ - [ ] info button shows desc, and link to KG
- [ ] regional is fine :: select hOC1 right
- [ ] probabilistic map loads fine
- [ ] segmentation layer hides
diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css
index e8d0ca357..f83fb1f49 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css
+++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css
@@ -21,3 +21,14 @@
{
margin: 0.5rem;
}
+
+.icons-container
+{
+ transform: scale(0.7);
+ margin-right: -1.5rem;
+}
+
+.icons-container > *
+{
+ margin: auto 0.2rem;
+}
diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
index 29c269adc..c15b1d11c 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
+++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
@@ -58,9 +58,25 @@
#menuTrigger="matMenuTrigger"
>
- <div prefix class="sxplr-scale-70">
- <button mat-mini-fab
- [color]="(parcellationVisibility$ | async) ? 'primary' : 'default'"
+ <div class="icons-container"
+ suffix
+ iav-stop="mousedown click">
+
+ <ng-template #mainParcDesc>
+ <ng-template [ngTemplateOutlet]="parcDescTmpl"
+ [ngTemplateOutletContext]="{ parcellation: parcellation }">
+ </ng-template>
+ </ng-template>
+
+ <button mat-icon-button
+ color="default"
+ [sxplr-dialog]="mainParcDesc"
+ [sxplr-dialog-size]="null">
+ <i class="fas fa-info"></i>
+ </button>
+
+ <button mat-icon-button
+ color="default"
[matTooltip]="ARIA_LABELS.TOGGLE_DELINEATION"
iav-stop="mousedown click"
[iav-key-listener]="[{'type': 'keydown', 'key': 'q', 'capture': true, 'target': 'document' }]"
@@ -74,26 +90,10 @@
{{ ARIA_LABELS.TOGGLE_DELINEATION }}
</span>
</button>
- </div>
-
- <div class="sxplr-scale-70"
- suffix
- iav-stop="mousedown click">
-
- <ng-template #mainParcDesc>
- <ng-template [ngTemplateOutlet]="parcDescTmpl"
- [ngTemplateOutletContext]="{ parcellation: parcellation }">
- </ng-template>
- </ng-template>
- <button mat-mini-fab color="default"
- [sxplr-dialog]="mainParcDesc"
- [sxplr-dialog-size]="null">
- <i class="fas fa-info"></i>
- </button>
<button mat-mini-fab
*ngIf="!(parcellation | parcellationIsBaseLayer)"
- color="primary"
+ color="default"
(click)="dismiss()">
<spinner-cmp class="sxplr-w-100 sxplr-h-100" *ngIf="onDismissClicked$ | async; else defaultDismissIcon"></spinner-cmp>
diff --git a/src/atlasComponents/sapiViews/features/entryListItem/entryListItem.template.html b/src/atlasComponents/sapiViews/features/entryListItem/entryListItem.template.html
index 76f584328..fc1ac7920 100644
--- a/src/atlasComponents/sapiViews/features/entryListItem/entryListItem.template.html
+++ b/src/atlasComponents/sapiViews/features/entryListItem/entryListItem.template.html
@@ -3,7 +3,7 @@
<mat-chip-list
*ngIf="feature | featureBadgeFlag"
- class="sxplr-scale-80 transform-origin-left-center">
+ class="sxplr-scale-80 transform-origin-left-center sxplr-pe-none">
<mat-chip
[color]="feature | featureBadgeColour"
selected>
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 35a70999b..643ab1e50 100644
--- a/src/extra_styles.css
+++ b/src/extra_styles.css
@@ -390,11 +390,6 @@ markdown-dom p
height: 0px;
}
-.pe-none
-{
- pointer-events: none!important;
-}
-
.h-2rem
{
height: 2rem!important;
diff --git a/src/overwrite.scss b/src/overwrite.scss
index b1e3e9f6a..86f98096c 100644
--- a/src/overwrite.scss
+++ b/src/overwrite.scss
@@ -284,3 +284,8 @@ a[mat-raised-button]
{
text-decoration: none;
}
+
+.#{$nsp}-pe-none
+{
+ pointer-events: none!important;
+}
diff --git a/src/ui/quickTour/quickTour.service.ts b/src/ui/quickTour/quickTour.service.ts
index 3853a1949..3aed96edf 100644
--- a/src/ui/quickTour/quickTour.service.ts
+++ b/src/ui/quickTour/quickTour.service.ts
@@ -90,7 +90,7 @@ export class QuickTourService {
height: '0px',
width: '0px',
hasBackdrop: true,
- backdropClass: ['pe-none', 'cdk-overlay-dark-backdrop'],
+ backdropClass: ['sxplr-pe-none', 'cdk-overlay-dark-backdrop'],
positionStrategy: this.overlay.position().global(),
})
}
diff --git a/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html b/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html
index e716c29fa..245fb9f07 100644
--- a/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html
+++ b/src/viewerModule/nehuba/layoutOverlay/nehuba.layoutOverlay/nehuba.layoutOverlay.template.html
@@ -68,7 +68,7 @@
[attr.data-viewer-controller-visible]="visible"
[attr.data-viewer-controller-index]="panelIndex">
- <div class="position-absolute w-100 h-100 pe-none"
+ <div class="position-absolute w-100 h-100 sxplr-pe-none"
*ngIf="panelIndex === 1"
quick-tour
[quick-tour-description]="quickTourIconsSlide.description"
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index e7f00472f..66c272acf 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -123,3 +123,9 @@ mat-list[dense].contextual-block
{
overflow: hidden auto;
}
+
+.region-chip-suffix
+{
+ transform: scale(0.7);
+ margin-right: -0.25rem;
+}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 90d6d4a38..f1a6b4faf 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -5,7 +5,7 @@
<div class="floating-ui">
<div *ngIf="(media.mediaBreakPoint$ | async) < 2"
- class="fixed-bottom pe-none mb-2 d-flex justify-content-center">
+ class="fixed-bottom sxplr-pe-none mb-2 d-flex justify-content-center">
<logo-container></logo-container>
</div>
@@ -99,7 +99,7 @@
</mat-drawer>
<!-- master content -->
- <mat-drawer-content class="visible pe-none position-relative">
+ <mat-drawer-content class="visible sxplr-pe-none position-relative">
<iav-layout-fourcorners>
<!-- top left -->
@@ -148,7 +148,7 @@
<!-- bottom left -->
- <div iavLayoutFourCornersBottomLeft class="ws-no-wrap d-inline-flex w-100vw pe-none align-items-center mb-4">
+ <div iavLayoutFourCornersBottomLeft class="ws-no-wrap d-inline-flex w-100vw sxplr-pe-none align-items-center mb-4">
<!-- special bottom left -->
<ng-template [ngIf]="viewerMode$ | async" let-mode [ngIfElse]="localBottomLeftTmpl"></ng-template>
@@ -436,7 +436,7 @@
<div prefix>
</div>
- <div suffix class="sxplr-scale-70">
+ <div suffix class="region-chip-suffix">
<button mat-mini-fab
color="primary"
iav-stop="mousedown click"
@@ -545,7 +545,7 @@
<i class="fas fa-sitemap"></i>
</button>
- <div class="w-100 h-100 position-absolute pe-none" *ngIf="showTour">
+ <div class="w-100 h-100 position-absolute sxplr-pe-none" *ngIf="showTour">
</div>
</div>
--
GitLab