dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improve/fix popover hover

Browse Source
This commit is contained in:
Igor Kulikov 2023-04-26 18:06:16 +03:00
parent bf1b9e4e54
commit f74da6a4b5
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/shared/components/popover.component.ts
View File

@ -58,6 +58,7 @@ import {
import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators'; import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils'; import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils';
import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations'; import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations';
import { coerceBoolean } from '@shared/decorators/coerce-boolean';
export type TbPopoverTrigger = 'click' | 'focus' | 'hover' | null; export type TbPopoverTrigger = 'click' | 'focus' | 'hover' | null;
@ -72,10 +73,12 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
/* eslint-disable @angular-eslint/no-input-rename */ /* eslint-disable @angular-eslint/no-input-rename */
@Input('tbPopoverContent') content?: string | TemplateRef<void>; @Input('tbPopoverContent') content?: string | TemplateRef<void>;
@Input('tbPopoverContext') context?: any | null = null;
@Input('tbPopoverTrigger') trigger?: TbPopoverTrigger = 'hover'; @Input('tbPopoverTrigger') trigger?: TbPopoverTrigger = 'hover';
@Input('tbPopoverPlacement') placement?: string | string[] = 'top'; @Input('tbPopoverPlacement') placement?: string | string[] = 'top';
@Input('tbPopoverOrigin') origin?: ElementRef<HTMLElement>; @Input('tbPopoverOrigin') origin?: ElementRef<HTMLElement>;
@Input('tbPopoverVisible') visible?: boolean; @Input('tbPopoverVisible') visible?: boolean;
@Input('tbPopoverShowCloseButton') @coerceBoolean() showCloseButton = true;
@Input('tbPopoverMouseEnterDelay') mouseEnterDelay?: number; @Input('tbPopoverMouseEnterDelay') mouseEnterDelay?: number;
@Input('tbPopoverMouseLeaveDelay') mouseLeaveDelay?: number; @Input('tbPopoverMouseLeaveDelay') mouseLeaveDelay?: number;
@Input('tbPopoverOverlayClassName') overlayClassName?: string; @Input('tbPopoverOverlayClassName') overlayClassName?: string;
@ -220,9 +223,11 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
const mappingProperties: PropertyMapping = { const mappingProperties: PropertyMapping = {
// common mappings // common mappings
content: ['tbContent', () => this.content], content: ['tbContent', () => this.content],
context: ['tbComponentContext', () => this.context],
trigger: ['tbTrigger', () => this.trigger], trigger: ['tbTrigger', () => this.trigger],
placement: ['tbPlacement', () => this.placement], placement: ['tbPlacement', () => this.placement],
visible: ['tbVisible', () => this.visible], visible: ['tbVisible', () => this.visible],
showCloseButton: ['tbShowCloseButton', () => this.showCloseButton],
mouseEnterDelay: ['tbMouseEnterDelay', () => this.mouseEnterDelay], mouseEnterDelay: ['tbMouseEnterDelay', () => this.mouseEnterDelay],
mouseLeaveDelay: ['tbMouseLeaveDelay', () => this.mouseLeaveDelay], mouseLeaveDelay: ['tbMouseLeaveDelay', () => this.mouseLeaveDelay],
overlayClassName: ['tbOverlayClassName', () => this.overlayClassName], overlayClassName: ['tbOverlayClassName', () => this.overlayClassName],
@ -320,7 +325,9 @@ export class TbPopoverDirective implements OnChanges, OnDestroy, AfterViewInit {
<div style="width: 100%; height: 100%;"> <div style="width: 100%; height: 100%;">
<div class="tb-popover-inner-content"> <div class="tb-popover-inner-content">
<ng-container *ngIf="tbContent"> <ng-container *ngIf="tbContent">
<ng-container *tbStringTemplateOutlet="tbContent">{{ tbContent }}</ng-container> <ng-container *tbStringTemplateOutlet="tbContent; context: tbComponentContext">
{{ tbContent }}
</ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="tbComponentFactory" <ng-container *ngIf="tbComponentFactory"
[tbComponentOutlet]="tbComponentFactory" [tbComponentOutlet]="tbComponentFactory"
@ -504,6 +511,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit {
}); });
this.intersectionObserver.observe(el); this.intersectionObserver.observe(el);
} }
this.tbAnimationState = 'active';
} }
hide(): void { hide(): void {

3
ui-ngx/src/styles.scss
View File

@ -852,6 +852,9 @@ mat-label {
@include tb-mat-icon-size(20); @include tb-mat-icon-size(20);
} }
} }
&.tb-mat-24 {
@include tb-mat-icon-button-size(24);
}
&.tb-mat-28 { &.tb-mat-28 {
@include tb-mat-icon-button-size(28); @include tb-mat-icon-button-size(28);
} }