Igor Kulikov
3 years ago
22 changed files with 462 additions and 2422 deletions
File diff suppressed because it is too large
@ -0,0 +1,65 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-material-icons-panel"> |
|||
<div class="tb-material-icons-title" translate>icon.icons</div> |
|||
<mat-form-field class="tb-material-icons-search tb-inline-field" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-icon matPrefix>search</mat-icon> |
|||
<input matInput [formControl]="searchIconControl" placeholder="{{ 'icon.search-icon' | translate }}"/> |
|||
<button *ngIf="searchIconControl.value" |
|||
type="button" |
|||
matSuffix mat-icon-button aria-label="Clear" |
|||
(click)="clearSearch()"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-form-field> |
|||
<cdk-virtual-scroll-viewport [fxShow]="!notFound" #iconsPanel |
|||
[itemSize]="iconsRowHeight" class="tb-material-icons-viewport" [ngStyle]="{width: iconsPanelWidth, height: iconsPanelHeight}"> |
|||
<div *cdkVirtualFor="let iconRow of iconRows$ | async" class="tb-material-icons-row"> |
|||
<ng-container *ngFor="let icon of iconRow"> |
|||
<button *ngIf="icon.name === selectedIcon" |
|||
class="tb-select-icon-button" |
|||
mat-raised-button |
|||
color="primary" |
|||
(click)="selectIcon(icon)" |
|||
matTooltip="{{ icon.displayName }}" |
|||
matTooltipPosition="above" |
|||
type="button"> |
|||
<mat-icon>{{icon.name}}</mat-icon> |
|||
</button> |
|||
<button *ngIf="icon.name !== selectedIcon" |
|||
class="tb-select-icon-button" |
|||
mat-button |
|||
(click)="selectIcon(icon)" |
|||
matTooltip="{{ icon.displayName }}" |
|||
matTooltipPosition="above" |
|||
type="button"> |
|||
<mat-icon>{{icon.name}}</mat-icon> |
|||
</button> |
|||
</ng-container> |
|||
</div> |
|||
</cdk-virtual-scroll-viewport> |
|||
<button *ngIf="!showAllSubject.value" class="tb-material-icons-show-more" mat-button color="primary" (click)="showAllSubject.next(true)"> |
|||
{{ 'action.show-more' | translate }} |
|||
</button> |
|||
<ng-container *ngIf="notFound"> |
|||
<div class="tb-no-data-available" [ngStyle]="{width: iconsPanelWidth}"> |
|||
<div class="tb-no-data-bg"></div> |
|||
<div class="tb-no-data-text">{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}</div> |
|||
</div> |
|||
</ng-container> |
|||
</div> |
|||
@ -0,0 +1,61 @@ |
|||
/** |
|||
* Copyright © 2016-2023 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
.tb-material-icons-panel { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
align-items: center; |
|||
.tb-material-icons-title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
line-height: 24px; |
|||
letter-spacing: 0.25px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
.tb-material-icons-title, .tb-material-icons-search, .tb-material-icons-show-more { |
|||
width: 100%; |
|||
} |
|||
.tb-material-icons-viewport { |
|||
min-height: 144px; |
|||
} |
|||
.tb-material-icons-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
gap: 12px; |
|||
} |
|||
.tb-material-icons-row + .tb-material-icons-row { |
|||
margin-top: 12px; |
|||
} |
|||
.tb-no-data-available { |
|||
min-height: 144px; |
|||
} |
|||
button.mat-mdc-button-base.tb-select-icon-button { |
|||
width: 36px; |
|||
min-width: 36px; |
|||
height: 36px; |
|||
padding: 6px; |
|||
&:not(.mat-primary) { |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
> .mat-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
font-size: 24px; |
|||
margin: 0; |
|||
} |
|||
} |
|||
} |
|||
@ -1,24 +1,135 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { OnInit } from '@angular/core'; |
|||
import { |
|||
ChangeDetectorRef, |
|||
Component, |
|||
EventEmitter, |
|||
Input, |
|||
OnInit, |
|||
Output, |
|||
ViewChild, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { UntypedFormControl } from '@angular/forms'; |
|||
import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs'; |
|||
import { BehaviorSubject, combineLatest, debounce, Observable, of, timer } from 'rxjs'; |
|||
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; |
|||
import { getMaterialIcons, MaterialIcon } from '@shared/models/icon.models'; |
|||
import { distinctUntilChanged, map, mergeMap, share, startWith, tap } from 'rxjs/operators'; |
|||
import { ResourcesService } from '@core/services/resources.service'; |
|||
import { TbPopoverComponent } from '@shared/components/popover.component'; |
|||
import { BreakpointObserver } from '@angular/cdk/layout'; |
|||
import { MediaBreakpoints } from '@shared/models/constants'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-material-icons', |
|||
templateUrl: './material-icons.component.html', |
|||
providers: [], |
|||
styleUrls: ['./material-icons.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class MaterialIconsComponent extends PageComponent implements OnInit { |
|||
|
|||
searchIconsControl: UntypedFormControl; |
|||
@ViewChild('iconsPanel') |
|||
iconsPanel: CdkVirtualScrollViewport; |
|||
|
|||
@Input() |
|||
selectedIcon: string; |
|||
|
|||
@Input() |
|||
popover: TbPopoverComponent<MaterialIconsComponent>; |
|||
|
|||
@Output() |
|||
iconSelected = new EventEmitter<string>(); |
|||
|
|||
iconRows$: Observable<MaterialIcon[][]>; |
|||
showAllSubject = new BehaviorSubject<boolean>(false); |
|||
searchIconControl: UntypedFormControl; |
|||
|
|||
iconsRowHeight = 48; |
|||
|
|||
iconsPanelHeight: string; |
|||
iconsPanelWidth: string; |
|||
|
|||
icons$: Observable<Array<string>>; |
|||
notFound = false; |
|||
|
|||
constructor(protected store: Store<AppState>) { |
|||
constructor(protected store: Store<AppState>, |
|||
private resourcesService: ResourcesService, |
|||
private breakpointObserver: BreakpointObserver, |
|||
private cd: ChangeDetectorRef) { |
|||
super(store); |
|||
this.searchIconsControl = new UntypedFormControl(''); |
|||
this.searchIconControl = new UntypedFormControl(''); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
const iconsRowSize = this.breakpointObserver.isMatched(MediaBreakpoints['lt-md']) ? 8 : 11; |
|||
this.calculatePanelSize(iconsRowSize); |
|||
const iconsRowSizeObservable = this.breakpointObserver |
|||
.observe(MediaBreakpoints['lt-md']).pipe( |
|||
map((state) => state.matches ? 8 : 11), |
|||
startWith(iconsRowSize), |
|||
); |
|||
this.iconRows$ = combineLatest({showAll: this.showAllSubject.asObservable(), |
|||
rowSize: iconsRowSizeObservable, |
|||
searchText: this.searchIconControl.valueChanges.pipe( |
|||
startWith(''), |
|||
debounce((searchText) => searchText ? timer(150) : of({})), |
|||
)}).pipe( |
|||
map((data) => { |
|||
if (data.searchText && !data.showAll) { |
|||
data.showAll = true; |
|||
this.showAllSubject.next(true); |
|||
} |
|||
return data; |
|||
}), |
|||
distinctUntilChanged((p, c) => c.showAll === p.showAll && c.searchText === p.searchText && c.rowSize === p.rowSize), |
|||
mergeMap((data) => getMaterialIcons(this.resourcesService, data.rowSize, data.showAll, data.searchText).pipe( |
|||
map(iconRows => ({iconRows, iconsRowSize: data.rowSize})) |
|||
)), |
|||
tap((data) => { |
|||
this.notFound = !data.iconRows.length; |
|||
this.calculatePanelSize(data.iconsRowSize, data.iconRows.length); |
|||
this.cd.markForCheck(); |
|||
setTimeout(() => { |
|||
this.checkSize(); |
|||
}, 0); |
|||
}), |
|||
map((data) => data.iconRows), |
|||
share() |
|||
); |
|||
} |
|||
|
|||
clearSearch() { |
|||
this.searchIconControl.patchValue('', {emitEvent: true}); |
|||
} |
|||
|
|||
selectIcon(icon: MaterialIcon) { |
|||
this.iconSelected.emit(icon.name); |
|||
} |
|||
|
|||
private calculatePanelSize(iconsRowSize: number, iconRows = 4) { |
|||
this.iconsPanelHeight = Math.min(iconRows * this.iconsRowHeight, 10 * this.iconsRowHeight) + 'px'; |
|||
this.iconsPanelWidth = (iconsRowSize * 36 + (iconsRowSize - 1) * 12 + 6) + 'px'; |
|||
} |
|||
|
|||
private checkSize() { |
|||
this.iconsPanel?.checkViewportSize(); |
|||
this.popover?.updatePosition(); |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue