Skip to content
Snippets Groups Projects
Commit 8a1d6497 authored by Xiao Gui's avatar Xiao Gui
Browse files

chore: swapped fa-save to fa-bookmark 

chore: reorganised region selection
parent 25fb0721
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/res/css/extra_styles.css
+ 5
− 0
View file @ 8a1d6497
...@@ -476,3 +476,8 @@ bs-modal-backdrop.modal-backdrop ...@@ -476,3 +476,8 @@ bs-modal-backdrop.modal-backdrop
.cursorPointer { .cursorPointer {
cursor: pointer; cursor: pointer;
} }
cdk-virtual-scroll-viewport > .cdk-virtual-scroll-content-wrapper
{
width: 100%;
}
\ No newline at end of file
src/ui/viewerStateController/viewerState.style.css
+ 0
− 8
View file @ 8a1d6497
...@@ -5,14 +5,6 @@ ...@@ -5,14 +5,6 @@
overflow: hidden; overflow: hidden;
} }
.virtual-scroll-viewport-container > cdk-virtual-scroll-viewport
{
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 3em;
}
.virtual-scroll-row .virtual-scroll-row
{ {
width: 20em; width: 20em;
......
src/ui/viewerStateController/viewerState.template.html
+ 159
− 144
View file @ 8a1d6497
<mat-card> <mat-card>
<!-- template selection --> <!-- template selection -->
<mat-form-field> <mat-card-content class="d-inline-flex flex-nowrap">
<mat-label> <mat-form-field>
Template <mat-label>
</mat-label> Template
<mat-select </mat-label>
[value]="(templateSelected$ | async)?.name" <mat-select
(selectionChange)="handleTemplateChange($event)" [value]="(templateSelected$ | async)?.name"
(openedChange)="focused = $event"> (selectionChange)="handleTemplateChange($event)"
<mat-option (openedChange)="focused = $event">
*ngFor="let template of (availableTemplates$ | async)" <mat-option
[value]="template.name"> *ngFor="let template of (availableTemplates$ | async)"
{{ template.name }} [value]="template.name">
</mat-option> {{ template.name }}
</mat-select> </mat-option>
</mat-form-field> </mat-select>
</mat-form-field>
<!-- padding so that info icon lines up -->
<button mat-icon-button class="pe-none invisible"></button> <!-- padding so that info icon lines up -->
<button mat-icon-button class="pe-none invisible"></button>
<ng-container *ngIf="templateSelected$ | async as templateSelected">
<!-- show on hover component --> <ng-container *ngIf="templateSelected$ | async as templateSelected">
<sleight-of-hand <!-- show on hover component -->
class="d-inline-block" <sleight-of-hand
*ngIf="templateSelected | templateParcellationHasMoreInfoPipe as moreInfo"> class="d-inline-block"
*ngIf="templateSelected | templateParcellationHasMoreInfoPipe as moreInfo">
<!-- shown when off -->
<div sleight-of-hand-front> <!-- shown when off -->
<button <div sleight-of-hand-front>
mat-icon-button> <button
<i class="fas fa-info"></i> mat-icon-button>
</button>
</div>
<!-- shown on hover -->
<div class="d-flex flex-row align-items-start" sleight-of-hand-back>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<div class="position-relative">
<button class="position-relative invisible pe-none" mat-icon-button>
<i class="fas fa-info"></i> <i class="fas fa-info"></i>
</button> </button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div> </div>
</div> <!-- shown on hover -->
</sleight-of-hand> <div class="d-flex flex-row align-items-start" sleight-of-hand-back>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button>
</ng-container> <i class="fas fa-info"></i>
</button>
<div class="position-relative">
<button class="position-relative invisible pe-none" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div>
</div>
</sleight-of-hand>
</ng-container>
</mat-card-content>
<!-- parcellation selection --> <!-- parcellation selection -->
<mat-form-field *ngIf="templateSelected$ | async as templateSelected"> <mat-card-content class="d-inline-flex flex-nowrap">
<mat-label>
Parcellation
</mat-label>
<mat-select
(selectionChange)="handleParcellationChange($event)"
[value]="(parcellationSelected$ | async)?.name"
(openedChange)="focused = $event">
<mat-option
*ngFor="let parcellation of (templateSelected.parcellations | appendTooltipTextPipe)"
[value]="parcellation.name">
{{ parcellation.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- selected regions -->
<region-text-search-autocomplete
[showAutoComplete]="false"
(focusedStateChanged)="focused = $event">
</region-text-search-autocomplete>
<ng-container *ngIf="parcellationSelected$ | async as parcellationSelected"> <mat-form-field
<!-- show on hover component --> *ngIf="templateSelected$ | async as templateSelected"
<sleight-of-hand class="d-inline-flex flex-nowrap">
class="d-inline-block" <mat-label>
*ngIf="parcellationSelected | templateParcellationHasMoreInfoPipe as moreInfo"> Parcellation
</mat-label>
<!-- shown when off --> <mat-select
<div sleight-of-hand-front> (selectionChange)="handleParcellationChange($event)"
<button [value]="(parcellationSelected$ | async)?.name"
mat-icon-button> (openedChange)="focused = $event">
<i class="fas fa-info"></i> <mat-option
</button> *ngFor="let parcellation of (templateSelected.parcellations | appendTooltipTextPipe)"
</div> [value]="parcellation.name">
{{ parcellation.name }}
<!-- shown on hover --> </mat-option>
<div class="d-flex flex-row align-items-start" sleight-of-hand-back> </mat-select>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button> </mat-form-field>
<i class="fas fa-info"></i>
</button> <!-- selected regions -->
<region-text-search-autocomplete
<div class="position-relative"> [showAutoComplete]="false"
<button class="position-relative invisible pe-none" mat-icon-button> (focusedStateChanged)="focused = $event">
</region-text-search-autocomplete>
<ng-container *ngIf="parcellationSelected$ | async as parcellationSelected">
<!-- show on hover component -->
<sleight-of-hand
class="d-inline-block"
*ngIf="parcellationSelected | templateParcellationHasMoreInfoPipe as moreInfo">
<!-- shown when off -->
<div sleight-of-hand-front>
<button
mat-icon-button>
<i class="fas fa-info"></i> <i class="fas fa-info"></i>
</button> </button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div> </div>
</div> <!-- shown on hover -->
</sleight-of-hand> <div class="d-flex flex-row align-items-start" sleight-of-hand-back>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button>
</ng-container> <i class="fas fa-info"></i>
</button>
<!-- divider -->
<mat-divider></mat-divider> <div class="position-relative">
<button class="position-relative invisible pe-none" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div>
</div>
</sleight-of-hand>
</ng-container>
</mat-card-content>
<!-- chips --> <!-- selected regions -->
<mat-card class="w-20em mh-10em overflow-auto overflow-x-hidden"> <mat-card-content>
<mat-chip-list class="mat-chip-list-stacked" #selectedRegionsChipList> <mat-chip-list>
<mat-chip class="w-100" *ngFor="let region of (regionsSelected$ | async)"> <cdk-virtual-scroll-viewport
<span class="flex-grow-1 flex-shrink-1 text-truncate"> class="w-100 h-10em overflow-x-hidden"
{{ region.name }} [itemSize]="32">
</span> <mat-chip
<button *cdkVirtualFor="let region of (regionsSelected$ | async)"
*ngIf="region.position" class="w-100">
(click)="gotoRegion($event, region)" <span class="flex-grow-1 flex-shrink-1 text-truncate">
mat-icon-button> {{ region.name }}
<i class="fas fa-map-marked-alt"></i> </span>
</button> <button
<button *ngIf="region.position"
(click)="deselectRegion($event, region)" (click)="gotoRegion($event, region)"
mat-icon-button> mat-icon-button>
<i class="fas fa-trash"></i> <i class="fas fa-map-marked-alt"></i>
</button> </button>
</mat-chip> <button
(click)="deselectRegion($event, region)"
mat-icon-button>
<i class="fas fa-trash"></i>
</button>
</mat-chip>
</cdk-virtual-scroll-viewport>
</mat-chip-list> </mat-chip-list>
<!-- place holder when no regions has been selected --> <!-- place holder when no regions has been selected -->
<span class="muted" *ngIf="(regionsSelected$ | async).length === 0"> <span class="muted" *ngIf="(regionsSelected$ | async).length === 0">
No regions selected. Double click on any regions in the viewer, or use the search tool to select regions of interest. No regions selected. Double click on any regions in the viewer, or use the search tool to select regions of interest.
</span> </span>
</mat-card> </mat-card-content>
<!-- control btns --> <!-- control btns -->
<div class="mt-2 mb-2 d-flex justify-content-between"> <mat-card-actions class="d-flex justify-content-between">
<div class="d-flex"> <div class="d-flex">
<!-- save --> <!-- save -->
<button <button
matTooltip="Save this selection of regions" matTooltip="Bookmark this selection of regions"
matTooltipPosition="below" matTooltipPosition="below"
mat-button mat-button
(click)="saveSelection($event)" (click)="saveSelection($event)"
color="primary"> color="primary">
<i class="fas fa-save"></i> <i class="far fa-bookmark"></i>
</button> </button>
<!-- load --> <!-- load -->
<button <button
(click)="loadSelection($event)" (click)="loadSelection($event)"
matTooltip="Load a selection of regions" matTooltip="Load a bookmarked region selection"
matTooltipPosition="below" matTooltipPosition="below"
mat-button mat-button
color="primary" color="primary"
...@@ -197,7 +208,11 @@ ...@@ -197,7 +208,11 @@
[disabled]="(regionsSelected$ | async)?.length === 0"> [disabled]="(regionsSelected$ | async)?.length === 0">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </mat-card-actions>
<mat-card-footer>
</mat-card-footer>
</mat-card> </mat-card>
<!-- bottom sheet for saved regions --> <!-- bottom sheet for saved regions -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment