This is an automated email from the ASF dual-hosted git repository. hshpak pushed a commit to branch feat/DATALAB-2963/close-filter-pop-up-by-clicking-outside in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 1858c615a87124382bc92d012022a4b4ccb7c6f1 Author: Hennadii_Shpak <[email protected]> AuthorDate: Tue Aug 9 12:16:06 2022 +0300 added clickOutsideFormDirective --- ...click-outside-with-material-select.directive.ts | 25 ++++++++++++++++++++++ .../webapp/src/app/core/directives/index.ts | 6 +++--- .../directives/updated-click-outside.directive.ts | 18 ---------------- .../src/app/resources/images/images.component.html | 10 ++++++--- .../src/app/resources/images/images.component.scss | 2 +- .../src/app/resources/images/images.component.ts | 4 ++++ 6 files changed, 40 insertions(+), 25 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/core/directives/click-outside-with-material-select.directive.ts b/services/self-service/src/main/resources/webapp/src/app/core/directives/click-outside-with-material-select.directive.ts new file mode 100644 index 000000000..0a6f6c639 --- /dev/null +++ b/services/self-service/src/main/resources/webapp/src/app/core/directives/click-outside-with-material-select.directive.ts @@ -0,0 +1,25 @@ +import { Directive, ElementRef, Output, EventEmitter, HostListener, Input } from '@angular/core'; + +@Directive({ + selector: '[datalabClickedOutsideMatSelect]' +}) +export class ClickedOutsideMatSelectDirective { + constructor(private el: ElementRef) { } + @Input() isFormOpened: boolean; + @Output() public clickedOutside = new EventEmitter(); + + @HostListener('document:click', ['$event.target']) + public onClick(target: any): void { + if (!this.isFormOpened) { + return; + } + const clickedInside = this.el.nativeElement.contains(target); + const isClickOnDropdown = [...target.classList].some(item => item.includes('mat-option')); + const isClickOnOverlay = [...target.classList].some(item => item.includes('cdk-overlay')); + const isClickOnForm = !clickedInside && !isClickOnDropdown && !isClickOnOverlay; + + if (isClickOnForm) { + this.clickedOutside.emit(target); + } + } +} diff --git a/services/self-service/src/main/resources/webapp/src/app/core/directives/index.ts b/services/self-service/src/main/resources/webapp/src/app/core/directives/index.ts index da4deb198..40b54483b 100644 --- a/services/self-service/src/main/resources/webapp/src/app/core/directives/index.ts +++ b/services/self-service/src/main/resources/webapp/src/app/core/directives/index.ts @@ -23,12 +23,12 @@ import { CommonModule } from '@angular/common'; import { ClickOutsideDirective } from './click-outside.directive'; import { ScrollDirective } from './scrollTo.directive'; import { IsEndpointsActiveDirective } from './is-endpoint-active.directive'; -import { UpdatedClickedOutsideDirective } from './updated-click-outside.directive'; +import { ClickedOutsideMatSelectDirective } from './click-outside-with-material-select.directive'; @NgModule({ imports: [CommonModule], - declarations: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective, UpdatedClickedOutsideDirective], - exports: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective, UpdatedClickedOutsideDirective] + declarations: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective, ClickedOutsideMatSelectDirective], + exports: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective, ClickedOutsideMatSelectDirective] }) export class DirectivesModule { } diff --git a/services/self-service/src/main/resources/webapp/src/app/core/directives/updated-click-outside.directive.ts b/services/self-service/src/main/resources/webapp/src/app/core/directives/updated-click-outside.directive.ts deleted file mode 100644 index bacc18cd8..000000000 --- a/services/self-service/src/main/resources/webapp/src/app/core/directives/updated-click-outside.directive.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; - -@Directive({ - selector: '[datalabClickedOutside]' -}) -export class UpdatedClickedOutsideDirective { - constructor(private el: ElementRef) { } - - @Output() public clickedOutside = new EventEmitter(); - - @HostListener('document:click', ['$event.target']) - public onClick(target: any) { - const clickedInside = this.el.nativeElement.contains(target); - if (!clickedInside) { - this.clickedOutside.emit(target); - } - } -} diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html index 517788c8b..7eb49c4bb 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html @@ -93,15 +93,19 @@ <!-- </button>--> <!-- </div>--> <!-- </span>--> - - <div class="filter__wrapper"> + <div + class="filter__wrapper" + datalabClickedOutsideMatSelect + (clickedOutside)="onClickOutside()" + [isFormOpened]="isFilterOpened | async" + > <button mat-raised-button [disabled]="!(dataSource | async)?.length && !($isFiltered | async)" class="butt filter__btn" (click)="onFilterClick()"> <i class="material-icons" [ngClass]="{'filtered-icon': $isFiltered | async}">filter_list</i> <span class="filter__btn--name" [ngClass]="{'filtered-icon': $isFiltered | async}">Filter</span> <button *ngIf="$isFiltered | async" type="button" (click)="onResetFilterClick($event)" class="close__btn">×</button> </button> - <div *ngIf="isFilterOpened | async" class="filer-pop-up__wrapper"> + <div *ngIf="isFilterOpened | async" class="filer__component--wrapper"> <datalab-page-filter [$filterDropdownData]="$filterDropdownData" [$filterFormStartValue]="$filterFormValue" diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss index c1cb190ae..0ee14977d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss @@ -119,7 +119,7 @@ margin: 0 !important; } -.filer-pop-up__wrapper { +.filer__component--wrapper { position: absolute; top: 46px; //UNCOMMENT AFTER UNCOMMENT ACTION MENU diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts index f0d05e393..9eb9cd37a 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts @@ -211,6 +211,10 @@ export class ImagesComponent implements OnInit, OnDestroy { ); } + onClickOutside() { + this.imagesService.closeFilter(); + } + private initFilteredColumnState(): void { this.$filteredColumnState = this.imagesService.$filteredColumnState; } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
