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 02ad247160b2507942ab24081ee949fdc839fd92 Author: Hennadii_Shpak <[email protected]> AuthorDate: Thu Aug 4 20:38:30 2022 +0300 created new click outside directive --- .../webapp/src/app/core/directives/index.ts | 5 +++-- .../directives/updated-click-outside.directive.ts | 20 ++++++++++++++++++++ .../page-filter/page-filter.component.html | 6 +++++- .../exploratory/page-filter/page-filter.component.ts | 4 ++++ .../src/app/resources/images/images.component.scss | 4 +++- .../webapp/src/app/resources/resources.module.ts | 2 ++ 6 files changed, 37 insertions(+), 4 deletions(-) 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 9f8dcb2b2..da4deb198 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,11 +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'; @NgModule({ imports: [CommonModule], - declarations: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective], - exports: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective] + declarations: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective, UpdatedClickedOutsideDirective], + exports: [ClickOutsideDirective, ScrollDirective, IsEndpointsActiveDirective, UpdatedClickedOutsideDirective] }) 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 new file mode 100644 index 000000000..1b4de30d0 --- /dev/null +++ b/services/self-service/src/main/resources/webapp/src/app/core/directives/updated-click-outside.directive.ts @@ -0,0 +1,20 @@ +import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; + +@Directive({ + selector: '[datalabClickedOutside]' +}) +export class UpdatedClickedOutsideDirective { + counter = 0; + constructor(private el: ElementRef) { } + + @Output() public clickedOutside = new EventEmitter(); + + @HostListener('document:click', ['$event.target']) + public onClick(target: any) { + this.counter ++; + const clickedInside = this.el.nativeElement.contains(target); + if (!clickedInside && this.counter > 1) { + this.clickedOutside.emit(target); + } + } +} diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html index 899545e59..a7b10c2c3 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html @@ -17,7 +17,11 @@ ~ under the License. --> -<div class="dialog-content selection"> +<div + class="dialog-content selection" + datalabClickedOutside + (clickedOutside)="onClickOutside()" +> <ng-container *ngIf="$setFilterValueObservable | async"></ng-container> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts index 577bd8f38..9cf0e7067 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts @@ -75,6 +75,10 @@ export class PageFilterComponent implements OnInit { this.closeFilter.emit(); } + onClickOutside(): void { + this.closeFilter.emit(); + } + onControlChange(fieldName: keyof ImageFilterFormDropdownData): void { this.filterForm.get(fieldName)?.valueChanges.pipe( tap((inputValue: string) => this.onValueChanges.emit(inputValue)) 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 b3895baed..8e3f469c1 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 @@ -122,7 +122,9 @@ .filer__wrapper { position: absolute; top: 46px; - left: 135px; + //UNCOMMENT AFTER UNCOMMENT ACTION MENU + //left: 135px; + left: -35px; z-index: 10; } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts index 488762efa..e454f08ee 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts @@ -40,6 +40,7 @@ import { ShareImageDialogModule } from './exploratory/share-image/share-image-di import { ImageDetailDialogModule } from './exploratory/image-detail-dialog/image-detail-dialog.module'; import {LibraryInfoModalModule} from './exploratory/library-info-modal/library-info-modal.module'; import { PageFilterComponent } from './exploratory/page-filter/page-filter.component'; +import { DirectivesModule } from '../core/directives'; @NgModule({ imports: [ @@ -59,6 +60,7 @@ import { PageFilterComponent } from './exploratory/page-filter/page-filter.compo ShareImageDialogModule, ImageDetailDialogModule, LibraryInfoModalModule, + DirectivesModule ], declarations: [ ResourcesComponent, --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
