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

Merge pull request #8157 from rusikv/alarmCommentsUI

Browse Source 
[3.5] UI: Fixes due to angular 15 version upgrade
This commit is contained in:
Andrew Shvayka 2023-03-01 17:56:41 +02:00 committed by GitHub
commit 784b91889b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 29 additions and 39 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-assignee-panel.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<mat-form-field appearance="outline" [formGroup]="selectUserFormGroup" class="mat-block container"> <mat-form-field appearance="outline" [formGroup]="selectUserFormGroup" class="mat-block search-users">
<input matInput type="text" placeholder="{{ 'user.search' | translate }}" <input matInput type="text" placeholder="{{ 'user.search' | translate }}"
#userInput #userInput
formControlName="user" formControlName="user"

21
ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss
View File

@ -23,34 +23,25 @@
} }
::ng-deep { ::ng-deep {
mat-form-field.container { mat-form-field.search-users {
padding-top: 8px; padding: 8px;
height: 340px; height: 340px;
font-size: 14px; font-size: 14px;
background-color: #fff; background-color: #fff;
.mat-form-field-wrapper {
margin-right: 8px;
margin-left: 8px;
padding: 0;
}
} }
.mat-form-field-appearance-outline .mat-form-field-outline { .mat-form-field-appearance-outline .mdc-notched-outline__trailing{
color: rgba(0, 0, 0, 0.12) !important;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: rgba(0, 0, 0, 0.12) !important; color: rgba(0, 0, 0, 0.12) !important;
} }
.tb-assignee-autocomplete { .tb-assignee-autocomplete {
&.tb-assignee-autocomplete.mat-autocomplete-visible { &.tb-assignee-autocomplete.mat-mdc-autocomplete-panel {
position: relative; position: relative;
left: -8px; left: -8px;
margin-top: 8px; margin-top: 8px;
box-shadow: none !important; box-shadow: none !important;
} }
.mat-option { .mat-mdc-option {
font-size: 14px; font-size: 14px;
border: none; border: none;
height: 52px !important; height: 52px !important;
@ -87,7 +78,7 @@
color: rgba(0, 0, 0, 0.38); color: rgba(0, 0, 0, 0.38);
} }
} }
.mat-option-text { .mdc-list-item__primary-text {
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;

8
ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html
View File

@ -18,15 +18,17 @@
<div class="tb-assignee" fxLayout="row" fxLayoutAlign="start center" <div class="tb-assignee" fxLayout="row" fxLayoutAlign="start center"
(click)="openAlarmAssigneePanel($event, alarm)"> (click)="openAlarmAssigneePanel($event, alarm)">
<span *ngIf="alarm.assigneeId" class="assigned-container"> <span *ngIf="alarm?.assigneeId" class="assigned-container">
<span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)"> <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
{{ getUserInitials(alarm.assignee) }} {{ getUserInitials(alarm.assignee) }}
</span> </span>
<span [matTooltip]="getUserDisplayName(alarm.assignee)" <span [matTooltip]="getUserDisplayName(alarm.assignee)"
matTooltipPosition="above" matTooltipPosition="above"
style="text-overflow: ellipsis">{{ getUserDisplayName(alarm.assignee) }}</span> style="text-overflow: ellipsis">
{{ getUserDisplayName(alarm.assignee) }}
</span>
</span> </span>
<span *ngIf="!alarm.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center"> <span *ngIf="!alarm?.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="material-icons unassigned-icon">account_circle</mat-icon> <mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>
<span translate>alarm.unassigned</span> <span translate>alarm.unassigned</span>
</span> </span>

4
ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss
View File

@ -17,9 +17,9 @@
:host { :host {
.tb-assignee { .tb-assignee {
cursor: pointer; cursor: pointer;
max-width: 273px;
.assigned-container { .assigned-container {
max-width: 233px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -28,7 +28,6 @@
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 8px;
border-radius: 50%; border-radius: 50%;
width: 28px; width: 28px;
height: 28px; height: 28px;
@ -43,7 +42,6 @@
width: 28px; width: 28px;
height: 28px; height: 28px;
font-size: 28px; font-size: 28px;
margin-right: 8px;
color: rgba(0, 0, 0, 0.38); color: rgba(0, 0, 0, 0.38);
overflow: visible; overflow: visible;
} }

13
ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
View File

@ -42,7 +42,7 @@
<ng-container *ngIf="isDirectionDescending()"> <ng-container *ngIf="isDirectionDescending()">
<ng-container *ngTemplateOutlet="commentInput"></ng-container> <ng-container *ngTemplateOutlet="commentInput"></ng-container>
</ng-container> </ng-container>
<div fxFlex *ngFor="let displayDataElement of displayData; let i = index"> <div fxFlex *ngFor="let displayDataElement of displayData; index as i">
<div style="margin-left: 38px" <div style="margin-left: 38px"
*ngIf="displayDataElement.isSystemComment; else userComment"> *ngIf="displayDataElement.isSystemComment; else userComment">
<span class="tb-alarm-comments-system-text" <span class="tb-alarm-comments-system-text"
@ -77,12 +77,12 @@
</div> </div>
<div fxLayout="row" class="tb-alarm-comments-action-buttons" <div fxLayout="row" class="tb-alarm-comments-action-buttons"
[ngClass]="{ 'show-buttons': displayDataElement.showActions }"> [ngClass]="{ 'show-buttons': displayDataElement.showActions }">
<button mat-button mat-icon-button <button mat-icon-button
type="button" type="button"
(click)="editComment(displayDataElement.commentId)"> (click)="editComment(displayDataElement.commentId)">
<mat-icon class="material-icons">edit</mat-icon> <mat-icon class="material-icons">edit</mat-icon>
</button> </button>
<button mat-button mat-icon-button <button mat-icon-button
type="button" type="button"
(click)="deleteComment(displayDataElement.commentId)"> (click)="deleteComment(displayDataElement.commentId)">
<mat-icon class="material-icons">delete</mat-icon> <mat-icon class="material-icons">delete</mat-icon>
@ -96,7 +96,7 @@
[style.background-color]="displayDataElement.avatarBgColor"> [style.background-color]="displayDataElement.avatarBgColor">
{{ getUserInitials(displayDataElement.displayName) }} {{ getUserInitials(displayDataElement.displayName) }}
</div> </div>
<mat-form-field fxFlex appearance="standard" class="mat-block"> <mat-form-field fxFlex appearance="fill" class="mat-block">
<textarea matInput <textarea matInput
type="text" type="text"
placeholder="{{ 'alarm-comment.add' | translate }}" placeholder="{{ 'alarm-comment.add' | translate }}"
@ -136,7 +136,7 @@
[style.background-color]="getCurrentUserBgColor(userDisplayName)"> [style.background-color]="getCurrentUserBgColor(userDisplayName)">
{{ getUserInitials(userDisplayName) }} {{ getUserInitials(userDisplayName) }}
</div> </div>
<mat-form-field appearance="standard" fxFlex class="mat-block"> <mat-form-field appearance="fill" fxFlex class="mat-block">
<textarea matInput <textarea matInput
type="text" type="text"
placeholder="{{ 'alarm-comment.add' | translate }}" placeholder="{{ 'alarm-comment.add' | translate }}"
@ -147,8 +147,7 @@
(keyup.enter)="saveComment()" (keyup.enter)="saveComment()"
(keydown.enter)="$event.preventDefault()"> (keydown.enter)="$event.preventDefault()">
</textarea> </textarea>
<button mat-button <button mat-icon-button
mat-icon-button
type="button" type="button"
matSuffix matSuffix
*ngIf="getAlarmCommentFormControl().value" *ngIf="getAlarmCommentFormControl().value"

18
ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
View File

@ -31,28 +31,28 @@
<div mat-dialog-content style="padding: 24px 0 0 0"> <div mat-dialog-content style="padding: 24px 0 0 0">
<fieldset [disabled]="isLoading$ | async" style="padding: 0 24px"> <fieldset [disabled]="isLoading$ | async" style="padding: 0 24px">
<div fxLayout="row" fxLayoutGap="6px"> <div fxLayout="row" fxLayoutGap="6px">
<mat-form-field appearance="none" fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>alarm.originator</mat-label> <mat-label translate>alarm.originator</mat-label>
<input matInput formControlName="originatorName" readonly> <input matInput formControlName="originatorName" readonly>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="none" fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>alarm.created-time</mat-label> <mat-label translate>alarm.created-time</mat-label>
<input matInput formControlName="createdTime" readonly> <input matInput formControlName="createdTime" readonly>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="6px"> <div fxLayout="row" fxLayoutGap="6px">
<mat-form-field appearance="none" fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>alarm.type</mat-label> <mat-label translate>alarm.type</mat-label>
<input matInput formControlName="type" readonly> <input matInput formControlName="type" readonly>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="none" fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>alarm.severity</mat-label> <mat-label translate>alarm.severity</mat-label>
<input matInput formControlName="alarmSeverity" readonly <input matInput formControlName="alarmSeverity" readonly
[ngStyle]="{fontWeight: 'bold', color: alarmSeverityColorsMap.get((alarm$ | async)?.severity)}"> [ngStyle]="{fontWeight: 'bold', color: alarmSeverityColorsMap.get((alarm$ | async)?.severity)}">
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutGap="6px"> <div fxLayout="row" fxLayoutGap="6px">
<mat-form-field appearance="none" fxFlex class="mat-block"> <mat-form-field fxFlex class="mat-block">
<mat-label translate>alarm.status</mat-label> <mat-label translate>alarm.status</mat-label>
<input matInput formControlName="alarmStatus" readonly> <input matInput formControlName="alarmStatus" readonly>
</mat-form-field> </mat-form-field>
@ -72,11 +72,11 @@
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('startTime').value || <div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('startTime').value ||
alarmFormGroup.get('endTime').value"> alarmFormGroup.get('endTime').value">
<mat-form-field *ngIf="alarmFormGroup.get('startTime').value" appearance="none" fxFlex class="mat-block"> <mat-form-field *ngIf="alarmFormGroup.get('startTime').value" fxFlex class="mat-block">
<mat-label translate>alarm.start-time</mat-label> <mat-label translate>alarm.start-time</mat-label>
<input matInput formControlName="startTime" readonly> <input matInput formControlName="startTime" readonly>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="alarmFormGroup.get('endTime').value" appearance="none" fxFlex class="mat-block"> <mat-form-field *ngIf="alarmFormGroup.get('endTime').value" fxFlex class="mat-block">
<mat-label translate>alarm.end-time</mat-label> <mat-label translate>alarm.end-time</mat-label>
<input matInput formControlName="endTime" readonly> <input matInput formControlName="endTime" readonly>
</mat-form-field> </mat-form-field>
@ -84,11 +84,11 @@
</div> </div>
<div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('ackTime').value || <div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('ackTime').value ||
alarmFormGroup.get('clearTime').value"> alarmFormGroup.get('clearTime').value">
<mat-form-field *ngIf="alarmFormGroup.get('ackTime').value" appearance="none" fxFlex class="mat-block"> <mat-form-field *ngIf="alarmFormGroup.get('ackTime').value" fxFlex class="mat-block">
<mat-label translate>alarm.ack-time</mat-label> <mat-label translate>alarm.ack-time</mat-label>
<input matInput formControlName="ackTime" readonly> <input matInput formControlName="ackTime" readonly>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="alarmFormGroup.get('clearTime').value" appearance="none" fxFlex class="mat-block"> <mat-form-field *ngIf="alarmFormGroup.get('clearTime').value" fxFlex class="mat-block">
<mat-label translate>alarm.clear-time</mat-label> <mat-label translate>alarm.clear-time</mat-label>
<input matInput formControlName="clearTime" readonly> <input matInput formControlName="clearTime" readonly>
</mat-form-field> </mat-form-field>

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

@ -26,7 +26,7 @@
&.invisible { &.invisible {
visibility: hidden; visibility: hidden;
} }
.mat-cell { .mat-mdc-cell {
.assignee-cell { .assignee-cell {
.assigned-container { .assigned-container {
white-space: nowrap; white-space: nowrap;