diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html index 03c542ae012382565c680676d08825f4697f3348..81f80bacd8693d2bf18a155c27d7030a12f84cc8 100644 --- a/src/ui/searchSideNav/searchSideNav.template.html +++ b/src/ui/searchSideNav/searchSideNav.template.html @@ -74,13 +74,15 @@ <!-- selected brain region --> <div class="flex-grow-1 flex-shrink-1 pt-2 pb-2 d-flex flex-row align-items-center flex-nowrap"> - <i class="fas fa-brain font-2x mr-2"></i> + <i class="flex-grow-0 flex-shrink-0 fas fa-brain font-2x mr-2"></i> - <span class="font-weight-bold"> + <span class="flex-grow-1 flex-shrink-1 font-weight-bold"> {{ region.name }} </span> - <button (click)="removeRegion(region)" mat-icon-button> + <button mat-icon-button + class="flex-grow-0 flex-shrink-0" + (click)="removeRegion(region)" > <i class="fas fa-trash"></i> </button> </div> diff --git a/src/ui/viewerStateController/regionHierachy/regionHierarchy.template.html b/src/ui/viewerStateController/regionHierachy/regionHierarchy.template.html index 6f85fde79957f9953b4c710a3e070620a78d8168..0202c9ffe5a5a9d270d97a705c548f178199d20a 100644 --- a/src/ui/viewerStateController/regionHierachy/regionHierarchy.template.html +++ b/src/ui/viewerStateController/regionHierachy/regionHierarchy.template.html @@ -48,7 +48,7 @@ <mat-divider></mat-divider> <div *ngIf="(selectedRegions | filterRowsByVisbilityPipe : null : filterTreeBySearch).length > 0" - class="mt-2 min-h-8" + class="mt-2 min-h-8 flex-grow-1 flex-shrink-1" hideScrollbarcontainer> <regions-list-view class="d-block h-100" (gotoRegion)="gotoRegion($event)" diff --git a/src/ui/viewerStateController/regionsListView/simpleRegionsListView/regionListView.template.html b/src/ui/viewerStateController/regionsListView/simpleRegionsListView/regionListView.template.html index 9fff5b6a62291bde1090d91dfc9dad4f2efa13aa..beb854bc7e2e05eacdb833760be1d71e0bfaec8c 100644 --- a/src/ui/viewerStateController/regionsListView/simpleRegionsListView/regionListView.template.html +++ b/src/ui/viewerStateController/regionsListView/simpleRegionsListView/regionListView.template.html @@ -1,13 +1,47 @@ <mat-chip-list class="p-1 d-block h-100 w-100"> + <ng-container *ngTemplateOutlet="horizontal ? horizontalTmpl : verticalTmpl"> + </ng-container> +</mat-chip-list> + +<!-- whilst it would be quite clever to dynamically change the few properties +virtual scroll needs to be re init'ed for it to work well +TODO check if this can be achieved with detach/attach --> +<ng-template #verticalTmpl> + <cdk-virtual-scroll-viewport - [orientation]="horizontal ? 'horizontal' : 'vertical'" + orientation="vertical" class="w-100 h-100" - minBufferPx="1000" - maxBufferPx="1500" - itemSize="200"> + itemSize="32"> <mat-chip *cdkVirtualFor="let region of regionsSelected" - [ngClass]="{'w-100': !horizontal }"> + class="w-100" > + <span class="flex-grow-1 flex-shrink-1 text-truncate"> + {{ region.name }} + </span> + <button + *ngIf="region.position" + iav-stop="mousedown click" + (click)="gotoRegion.emit(region)" + mat-icon-button> + <i class="fas fa-map-marked-alt"></i> + </button> + <button + iav-stop="mousedown click" + (click)="deselectRegion.emit(region)" + mat-icon-button> + <i class="fas fa-trash"></i> + </button> + </mat-chip> + </cdk-virtual-scroll-viewport> +</ng-template> + +<ng-template #horizontalTmpl> + <cdk-virtual-scroll-viewport + orientation="horizontal" + class="w-100 h-100" + itemSize="200"> + + <mat-chip *cdkVirtualFor="let region of regionsSelected"> <span class="flex-grow-1 flex-shrink-1 text-truncate"> {{ region.name }} </span> @@ -26,4 +60,4 @@ </button> </mat-chip> </cdk-virtual-scroll-viewport> -</mat-chip-list> \ No newline at end of file +</ng-template> \ No newline at end of file