diff --git a/docs/releases/v2.7.2.md b/docs/releases/v2.7.2.md index 7279c7cd29df3ca7cb8cca41418290209ab8c755..2a5ada611284053bd629c4f6dc0ed4c765889b58 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 b1a0c2ce262eb278c84724a0c680404b6c512fc6..eef89d804006fd65b2cfadb59cc3d687cb78f714 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 e8d0ca357ccbfe577e65a2f9d78c1589227cbf33..f83fb1f49984f554b1a3fbcea0852d7f8005949b 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 29c269adce83878e8bb3e36e0ae666dbf0fcf54b..c15b1d11c2b503b4023ec2b46df3d163bb5f7dab 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 76f584328b3e46b5a240defb44e98e7cc2abe4a2..fc1ac7920b3599f52aafb071417eb6bb41c0d6e1 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 35a70999b7b44433ec39f25835dac0ceb5bff1a7..643ab1e507c31fc6e833ca777748a16714e83982 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 b1e3e9f6aa4fc9289fb7e23bb1bbb41d3b3f0a60..86f98096cead1a68e768e98ebd77aa084859fdf2 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 3853a19497de7f3494d77c587b1a1e044cf00f5c..3aed96edf8d1cde0ff32642954be57f735a634a5 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 e716c29fac236a4c7394b76a68a5027ffaf94646..245fb9f07ed2da09550b1bc63a6f1d9497a924cb 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 e7f00472f295d233a6d12cbd1b6dcc751d59d000..66c272acfcbc1f6fca1419582bde6d98efa53d88 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 90d6d4a3810ecb35d68f616af533a3579493d78a..f1a6b4faf088a2d733b6c91ff1f9d6c6d53964d5 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>