diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css index c9c1ac7c1e2a3617ebe776786d75ff6ff8351421..065bff9f6f631476d94acf85743f37c787c21160 100644 --- a/src/res/css/extra_styles.css +++ b/src/res/css/extra_styles.css @@ -362,9 +362,9 @@ markdown-dom pre code max-height: 20em; } -.mh-10em +.max-h-10em { - max-height: 10em; + max-height: 10em!important; } .pe-all @@ -445,6 +445,12 @@ markdown-dom pre code { overflow-y:hidden !important; } + +.overflow-y-auto +{ + overflow-y: auto!important; +} + .h-90vh { height: 90vh!important; diff --git a/src/ui/databrowserModule/databrowser/databrowser.template.html b/src/ui/databrowserModule/databrowser/databrowser.template.html index e0df240574c738d685d75d1f40089dc1d3098e6d..ca40722db5809fc4de0280314b9153dbf933c4e2 100644 --- a/src/ui/databrowserModule/databrowser/databrowser.template.html +++ b/src/ui/databrowserModule/databrowser/databrowser.template.html @@ -58,16 +58,6 @@ </mat-card-content> </ng-template> -<ng-template #modalityPicker> - <modality-picker - iav-stop="click" - class="w-100" - [countedDataM]="countedDataM" - (modalityFilterEmitter)="handleModalityFilterEvent($event)"> - - </modality-picker> -</ng-template> - <ng-template #errorTemplate> <mat-card-content> <div class="ml-2 mr-2 alert alert-danger"> @@ -122,23 +112,46 @@ <mat-expansion-panel hideToggle> <mat-expansion-panel-header class="align-items-center"> - <mat-panel-title> + <mat-panel-title class="d-inline-flex align-items-center"> Filter </mat-panel-title> <mat-panel-description class="d-flex flex-row justify-content-end align-items-center"> <small *ngIf="dataentries.length > 0" class="text-muted mr-2"> - {{ (dataentries | filterDataEntriesByMethods : visibleCountedDataM).length }} / {{ dataentries.length }} + <ng-template [ngIf]="modalityPickerCmp && modalityPickerCmp.checkedModality.length > 0" + [ngIfElse]="noFilterTmpl"> + {{ (dataentries | filterDataEntriesByMethods : visibleCountedDataM).length }} / {{ dataentries.length }} + </ng-template> + + <ng-template #noFilterTmpl> + {{ dataentries.length }} datasets + </ng-template> </small> - <i class="fas fa-filter"></i> + <button mat-icon-button + matTooltip="Clear filters" + iav-stop="mousedown click" + iav-delay-event="click" + (delayedEmit)="modalityPickerCmp && modalityPickerCmp.clearAll()" + *ngIf="modalityPickerCmp.checkedModality.length > 0" + color="primary"> + <i class="fas fa-backspace"></i> + </button> </mat-panel-description> </mat-expansion-panel-header> - <ng-container *ngTemplateOutlet="modalityPicker"> - </ng-container> + <div class="max-h-10em overflow-y-auto overflow-x-hidden"> + <modality-picker + iav-stop="click" + class="w-100" + [countedDataM]="countedDataM" + (modalityFilterEmitter)="handleModalityFilterEvent($event)" + #modalityPickerCmp> + + </modality-picker> + </div> </mat-expansion-panel> </mat-accordion> diff --git a/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html b/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html index 34052b616b6716623d81b0e249a108bc41eeee52..c5a19766ab57bf553be1a5cb6365fa86b73f1f88 100644 --- a/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html +++ b/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html @@ -1,12 +1,3 @@ -<div> - <button - (click)="clearAll()" - [disabled]="checkedModality.length === 0" - mat-raised-button> - Clear all - </button> -</div> - <mat-checkbox [checked]="datamodality.visible" (change)="toggleModality(datamodality)" diff --git a/src/util/directives/delayEvent.directive.ts b/src/util/directives/delayEvent.directive.ts new file mode 100644 index 0000000000000000000000000000000000000000..1a405b6e0e613de71dc630bdf2d349ff023b98bf --- /dev/null +++ b/src/util/directives/delayEvent.directive.ts @@ -0,0 +1,49 @@ +import { Directive, Input, OnChanges, OnDestroy, ElementRef, Output, EventEmitter } from "@angular/core"; + +const VALID_EVENTNAMES = new Set([ + 'mousedown', + 'mouseup', + 'click', + 'mouseenter', + 'mouseleave', + 'touchstart', + 'touchmove', + 'touchend' +]) + +@Directive({ + selector: '[iav-delay-event]' +}) + +export class DelayEventDirective implements OnChanges, OnDestroy { + + private evListener = (ev:Event) => setTimeout(() => this.delayedEmit.emit(ev)) + + @Input('iav-delay-event') + delayEvent: string = '' + + @Output() + delayedEmit: EventEmitter<any> = new EventEmitter() + + constructor(private el: ElementRef){ + + } + + private destroyCb: (() => void)[] = [] + ngOnChanges(){ + + const el = this.el.nativeElement as HTMLElement + for (const evName of this.delayEvent.split(' ')){ + if (VALID_EVENTNAMES.has(evName)) { + el.addEventListener(evName, this.evListener) + this.destroyCb.push(() => el.removeEventListener(evName, this.evListener)) + } else { + console.warn(`${evName} is not a valid event name in the supported set`, VALID_EVENTNAMES) + } + } + } + + ngOnDestroy(){ + while(this.destroyCb.length > 0) this.destroyCb.pop()() + } +} \ No newline at end of file diff --git a/src/util/util.module.ts b/src/util/util.module.ts index 0ec4c182d3b84ff95858f11e5c728df9e7c9a1c6..7baaf43fbe1c60c10d8fb34c417d71abb5251074 100644 --- a/src/util/util.module.ts +++ b/src/util/util.module.ts @@ -2,17 +2,20 @@ import { NgModule } from "@angular/core"; import { FilterNullPipe } from "./pipes/filterNull.pipe"; import { FilterRowsByVisbilityPipe } from "src/components/flatTree/filterRowsByVisibility.pipe"; import { StopPropagationDirective } from "./directives/stopPropagation.directive"; +import { DelayEventDirective } from "./directives/delayEvent.directive"; @NgModule({ declarations: [ FilterNullPipe, FilterRowsByVisbilityPipe, - StopPropagationDirective + StopPropagationDirective, + DelayEventDirective ], exports: [ FilterNullPipe, FilterRowsByVisbilityPipe, - StopPropagationDirective + StopPropagationDirective, + DelayEventDirective ] })