Fix dropdown-filter bug with hide()

This commit is contained in:
Konstantinos Triantafyllou 2022-07-01 15:44:05 +03:00
parent ffd997dfcb
commit 995e73a1b5
2 changed files with 14 additions and 25 deletions

View File

@ -1,15 +1,16 @@
import {Component, Input, ViewChild} from "@angular/core";
import {Component, ElementRef, Input, ViewChild} from "@angular/core";
declare var UIkit;
@Component({
selector: 'dropdown-filter',
template: `
<button class="uk-button uk-button-default uk-flex uk-flex-middle">
<button class="uk-button uk-button-default uk-flex uk-flex-middle"
[class.uk-disabled]="disabled" [disabled]="disabled">
<span>{{name}}<span *ngIf="count > 0">({{count}})</span></span>
<icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen(dropdown)?'less':'more')"></icon>
<icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen?'less':'more')"></icon>
</button>
<div #dropdown class="uk-dropdown" [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
<div #dropdownElement class="uk-dropdown" [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
<ng-content></ng-content>
</div>
`
@ -21,13 +22,15 @@ export class DropdownFilterComponent {
public count: number = 0;
@Input()
public dropdownClass: string;
@ViewChild("dropdown") dropdown;
@Input()
public disabled = false;
@ViewChild("dropdownElement") dropdownElement: ElementRef;
isOpen(element) {
return UIkit.dropdown(element).isActive();
get isOpen() {
return this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive();
}
closeDropdown() {
UIkit.dropdown(this.dropdown).hide();
UIkit.dropdown(this.dropdownElement.nativeElement).hide();
}
}

View File

@ -210,26 +210,12 @@ export const orcid_bin = {
export const link = {
name: 'link',
data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="link"><path\n' +
' fill="none" stroke="#000" stroke-width="1.1"\n' +
' d="M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375"></path><path\n' +
' fill="none" stroke="#000" stroke-width="1.1"\n' +
' d="M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375"></path><path\n' +
' fill="none" stroke="#000" stroke-width="1.1"\n' +
' d="M7.925,11.875 L11.925,7.975"></path>\n' +
' </svg>'
data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="link"><path fill="none" stroke="#000" stroke-width="1.1" d="M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M7.925,11.875 L11.925,7.975"></path></svg>'
}
/** Add new icon under this line to be sure that it will be added on preview */
export const quotes = {
name: 'quotes',
data: '<svg width="20"\n' +
' height="20"\n' +
' viewBox="0 0 20 20"\n' +
' xmlns="http://www.w3.org/2000/svg"\n' +
' data-svg="quote-right">\n' +
' <path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path>\n' +
' <path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path>\n' +
' </svg>'
}
data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="quote-right"><path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path><path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path></svg>'
}