chore: cosmetic UI fixes

bugfix: category badges captures click event

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

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

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;
+}

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>

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>

src/extra_styles.css

@@ -390,11 +390,6 @@ markdown-dom p
   height: 0px;
 }
 
-.pe-none
-{
-  pointer-events: none!important;
-}
-
 .h-2rem
 {
   height: 2rem!important;

src/overwrite.scss

@@ -284,3 +284,8 @@ a[mat-raised-button]
 {
   text-decoration: none;
 }
+
+.#{$nsp}-pe-none
+{
+  pointer-events: none!important;
+}

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(),
       })
     }

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"

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;
+}

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>