diff --git a/core/src/assets/svg/sprite.svg b/core/src/assets/svg/sprite.svg index e586bbc6c0..32afc784e7 100644 --- a/core/src/assets/svg/sprite.svg +++ b/core/src/assets/svg/sprite.svg @@ -264,6 +264,13 @@ c0,3.9-2.4,4.8-4.7,5.1c0.4,0.3,0.7,0.9,0.7,1.9c0,1.4,0,2.5,0,2.8c0,0.3,0.2,0.6,0.7,0.5c4.1-1.4,7-5.2,7-9.7 C25.3,9.6,20.7,5,15,5z"/> + + + + + + + + > `, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/core/src/js/components/decktracker/main/filters/decktracker-deck-sort-dropdown.component.ts b/core/src/js/components/decktracker/main/filters/decktracker-deck-sort-dropdown.component.ts index 0b160db14a..0e68cdcd01 100644 --- a/core/src/js/components/decktracker/main/filters/decktracker-deck-sort-dropdown.component.ts +++ b/core/src/js/components/decktracker/main/filters/decktracker-deck-sort-dropdown.component.ts @@ -22,17 +22,17 @@ import { AbstractSubscriptionComponent } from '../../../abstract-subscription.co styleUrls: [ `../../../../../css/global/filters.scss`, `../../../../../css/component/app-section.component.scss`, - `../../../../../css/component/filter-dropdown.component.scss`, + `../../../../../css/component/sort-dropdown.component.scss`, ], template: ` - + > `, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/core/src/js/components/duels/desktop/filters/duels-hero-sort-dropdown.component.ts b/core/src/js/components/duels/desktop/filters/duels-hero-sort-dropdown.component.ts index 6b4c8634a9..9e5641d625 100644 --- a/core/src/js/components/duels/desktop/filters/duels-hero-sort-dropdown.component.ts +++ b/core/src/js/components/duels/desktop/filters/duels-hero-sort-dropdown.component.ts @@ -22,10 +22,10 @@ import { AbstractSubscriptionComponent } from '../../../abstract-subscription.co styleUrls: [ `../../../../../css/global/filters.scss`, `../../../../../css/component/app-section.component.scss`, - `../../../../../css/component/filter-dropdown.component.scss`, + `../../../../../css/component/sort-dropdown.component.scss`, ], template: ` - + > `, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/core/src/js/components/duels/desktop/filters/duels-treasures-sort-dropdown.component.ts b/core/src/js/components/duels/desktop/filters/duels-treasures-sort-dropdown.component.ts index 816093f9b7..2d505595a2 100644 --- a/core/src/js/components/duels/desktop/filters/duels-treasures-sort-dropdown.component.ts +++ b/core/src/js/components/duels/desktop/filters/duels-treasures-sort-dropdown.component.ts @@ -21,10 +21,10 @@ import { AbstractSubscriptionComponent } from '../../../abstract-subscription.co styleUrls: [ `../../../../../css/global/filters.scss`, `../../../../../css/component/app-section.component.scss`, - `../../../../../css/component/filter-dropdown.component.scss`, + `../../../../../css/component/sort-dropdown.component.scss`, ], template: ` - + > `, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/core/src/js/components/sort-dropdown.component.ts b/core/src/js/components/sort-dropdown.component.ts new file mode 100644 index 0000000000..5b8f506f7c --- /dev/null +++ b/core/src/js/components/sort-dropdown.component.ts @@ -0,0 +1,113 @@ +import { + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewRef, +} from '@angular/core'; +import { IOption } from 'ng-select'; + +@Component({ + selector: 'sort-dropdown', + styleUrls: [`../../css/global/scrollbar.scss`, `../../css/component/sort-dropdown.component.scss`], + template: ` + + + +
+ + + +
+ + + + + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SortDropdownComponent implements AfterViewInit { + @Output() onOptionSelected: EventEmitter = new EventEmitter(); + + @Input() options: readonly IOption[]; + @Input() placeholder: string; + + @Input() set filter(value: string) { + this._filter = value; + // Don't know why this is required, but it is. + if (!(this.cdr as ViewRef)?.destroyed) { + this.cdr.detectChanges(); + } + } + + @Input() set visible(value: boolean) { + this._visible = value; + if (value) { + setTimeout(() => { + this.addCarets(); + }); + } + } + + _visible: boolean; + _filter: string; + + constructor(private readonly cdr: ChangeDetectorRef, private readonly el: ElementRef) {} + + refresh() { + if (!(this.cdr as ViewRef)?.destroyed) { + this.cdr.detectChanges(); + } + } + + ngAfterViewInit() { + this.addCarets(); + } + + private addCarets() { + const carets = this.el.nativeElement.querySelectorAll('.single .caret'); + + if (!!carets?.length) { + return; + } + + const singleEls: HTMLElement[] = this.el.nativeElement.querySelectorAll('.single'); + + singleEls.forEach((singleEl) => { + const caretEl = singleEl.appendChild(document.createElement('i')); + caretEl.innerHTML = ` + + `; + caretEl.classList.add('i-30'); + caretEl.classList.add('caret'); + }); + if (!(this.cdr as ViewRef)?.destroyed) { + this.cdr.detectChanges(); + } + } + + select(option: IOption) { + this.onOptionSelected.next(option); + } +} diff --git a/core/src/js/modules/shared/shared.module.ts b/core/src/js/modules/shared/shared.module.ts index 7e246adb71..24cb7fa5f4 100644 --- a/core/src/js/modules/shared/shared.module.ts +++ b/core/src/js/modules/shared/shared.module.ts @@ -89,6 +89,7 @@ import { FilterDropdownMultiselectComponent } from '../../components/filter-drop import { FilterDropdownComponent } from '../../components/filter-dropdown.component'; import { FilterComponent } from '../../components/filter.component'; import { FsFilterDropdownComponent } from '../../components/fs-filter-dropdown.component'; +import { SortDropdownComponent } from '../../components/sort-dropdown.component'; import { HotkeyComponent } from '../../components/hotkey.component'; import { InfiniteScrollComponent } from '../../components/infinite-scroll.component'; import { LoadingStateComponent } from '../../components/loading-state.component'; @@ -304,6 +305,7 @@ export function HttpLoaderFactory(http: HttpClient) { FilterDropdownComponent, FilterDropdownMultiselectComponent, FsFilterDropdownComponent, + SortDropdownComponent, StatCellComponent, ProgressBarComponent, @@ -444,6 +446,7 @@ export function HttpLoaderFactory(http: HttpClient) { FilterDropdownComponent, FilterDropdownMultiselectComponent, FsFilterDropdownComponent, + SortDropdownComponent, StatCellComponent, ProgressBarComponent,