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

UI: Create overlay models and refactoring code

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-08-31 11:14:25 +03:00
parent f0fbc784b4
commit 7d1d85d0e0
7 changed files with 52 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.ts
View File

@ -45,7 +45,7 @@ import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
import { TranslateService } from '@ngx-translate/core';
import { deepClone } from '@core/utils';
import { fromEvent, Subscription } from 'rxjs';
import { POSITION_MAP } from '@shared/components/popover.models';
import { POSITION_MAP } from '@shared/models/overlay.models';
export const ALARM_FILTER_CONFIG_DATA = new InjectionToken<any>('AlarmFilterConfigData');

2
ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
View File

@ -123,7 +123,7 @@ import {
} from '@home/components/alarm/alarm-filter-config.component';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { FormBuilder } from '@angular/forms';
import { DEFAULT_OVERLAY_POSITIONS } from '@shared/components/popover.models';
import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
interface AlarmsTableWidgetSettings extends TableWidgetSettings {
alarmsTitle: string;

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

@ -52,9 +52,9 @@ import {
getPlacementName,
popoverMotion,
PopoverPlacement,
POSITION_MAP,
PropertyMapping
} from '@shared/components/popover.models';
import { POSITION_MAP } from '@shared/models/overlay.models';
import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils';
import { animate, AnimationBuilder, AnimationMetadata, style } from '@angular/animations';

30
ui-ngx/src/app/shared/components/popover.models.ts
View File

@ -15,8 +15,9 @@
///
import { animate, AnimationTriggerMetadata, style, transition, trigger } from '@angular/animations';
import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { POSITION_MAP } from '@shared/models/overlay.models';
export const popoverMotion: AnimationTriggerMetadata = trigger('popoverMotion', [
transition('void => active', [
@ -45,35 +46,8 @@ export const PopoverPlacements = ['top', 'topLeft', 'topRight', 'right', 'rightT
type PopoverPlacementTuple = typeof PopoverPlacements;
export type PopoverPlacement = PopoverPlacementTuple[number];
export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
top: new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }),
topLeft: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
topRight: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }),
right: new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }),
rightTop: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }),
rightBottom: new ConnectionPositionPair(
{ originX: 'end', originY: 'bottom' },
{ overlayX: 'start', overlayY: 'bottom' }
),
bottom: new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }),
bottomLeft: new ConnectionPositionPair(
{ originX: 'start', originY: 'bottom' },
{ overlayX: 'start', overlayY: 'top' }
),
bottomRight: new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }),
left: new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }),
leftTop: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'top' }),
leftBottom: new ConnectionPositionPair(
{ originX: 'start', originY: 'bottom' },
{ overlayX: 'end', overlayY: 'bottom' }
)
};
export const DEFAULT_POPOVER_POSITIONS = [POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left];
export const DEFAULT_OVERLAY_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft,
POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right];
export function getPlacementName(position: ConnectedOverlayPositionChange): PopoverPlacement | undefined {
for (const placement in POSITION_MAP) {
if (

2
ui-ngx/src/app/shared/components/time/timewindow.component.ts
View File

@ -61,7 +61,7 @@ import {
textStyle,
TimewindowStyle
} from '@shared/models/widget-settings.models';
import { DEFAULT_OVERLAY_POSITIONS } from '@shared/components/popover.models';
import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
import { fromEvent } from 'rxjs';
// @dynamic

44
ui-ngx/src/app/shared/models/overlay.models.ts Normal file
View File

@ -0,0 +1,44 @@
///
/// 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 { ConnectionPositionPair } from '@angular/cdk/overlay';
export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = {
top: new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }),
topLeft: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
topRight: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }),
right: new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }),
rightTop: new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }),
rightBottom: new ConnectionPositionPair(
{ originX: 'end', originY: 'bottom' },
{ overlayX: 'start', overlayY: 'bottom' }
),
bottom: new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }),
bottomLeft: new ConnectionPositionPair(
{ originX: 'start', originY: 'bottom' },
{ overlayX: 'start', overlayY: 'top' }
),
bottomRight: new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }),
left: new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }),
leftTop: new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'top' }),
leftBottom: new ConnectionPositionPair(
{ originX: 'start', originY: 'bottom' },
{ overlayX: 'end', overlayY: 'bottom' }
)
};
export const DEFAULT_OVERLAY_POSITIONS = [POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft,
POSITION_MAP.topRight, POSITION_MAP.left, POSITION_MAP.right];

2
ui-ngx/src/app/shared/models/public-api.ts
View File

@ -44,6 +44,8 @@ export * from './notification.models';
export * from './websocket/notification-ws.models';
export * from './websocket/websocket.models';
export * from './oauth2.models';
export * from './ota-package.models';
export * from './overlay.models';
export * from './queue.models';
export * from './relation.models';
export * from './resource.models';