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.
-->
<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 }}"
#userInput
formControlName="user"

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

@ -23,34 +23,25 @@
}
::ng-deep {
mat-form-field.container {
padding-top: 8px;
mat-form-field.search-users {
padding: 8px;
height: 340px;
font-size: 14px;
background-color: #fff;
.mat-form-field-wrapper {
margin-right: 8px;
margin-left: 8px;
padding: 0;
}
}
.mat-form-field-appearance-outline .mat-form-field-outline {
color: rgba(0, 0, 0, 0.12) !important;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
.mat-form-field-appearance-outline .mdc-notched-outline__trailing{
color: rgba(0, 0, 0, 0.12) !important;
}
.tb-assignee-autocomplete {
&.tb-assignee-autocomplete.mat-autocomplete-visible {
&.tb-assignee-autocomplete.mat-mdc-autocomplete-panel {
position: relative;
left: -8px;
margin-top: 8px;
box-shadow: none !important;
}
.mat-option {
.mat-mdc-option {
font-size: 14px;
border: none;
height: 52px !important;
@ -87,7 +78,7 @@
color: rgba(0, 0, 0, 0.38);
}
}
.mat-option-text {
.mdc-list-item__primary-text {
display: flex;
justify-content: start;
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"
(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)">
{{ getUserInitials(alarm.assignee) }}
</span>
<span [matTooltip]="getUserDisplayName(alarm.assignee)"
matTooltipPosition="above"
style="text-overflow: ellipsis">{{ getUserDisplayName(alarm.assignee) }}</span>
style="text-overflow: ellipsis">
{{ getUserDisplayName(alarm.assignee) }}
</span>
<span *ngIf="!alarm.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
</span>
<span *ngIf="!alarm?.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>
<span translate>alarm.unassigned</span>
</span>

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

@ -17,9 +17,9 @@
:host {
.tb-assignee {
cursor: pointer;
max-width: 273px;
.assigned-container {
max-width: 233px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -28,7 +28,6 @@
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 8px;
border-radius: 50%;
width: 28px;
height: 28px;
@ -43,7 +42,6 @@
width: 28px;
height: 28px;
font-size: 28px;
margin-right: 8px;
color: rgba(0, 0, 0, 0.38);
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 *ngTemplateOutlet="commentInput"></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"
*ngIf="displayDataElement.isSystemComment; else userComment">
<span class="tb-alarm-comments-system-text"
@ -77,12 +77,12 @@
</div>
<div fxLayout="row" class="tb-alarm-comments-action-buttons"
[ngClass]="{ 'show-buttons': displayDataElement.showActions }">
<button mat-button mat-icon-button
<button mat-icon-button
type="button"
(click)="editComment(displayDataElement.commentId)">
<mat-icon class="material-icons">edit</mat-icon>
</button>
<button mat-button mat-icon-button
<button mat-icon-button
type="button"
(click)="deleteComment(displayDataElement.commentId)">
<mat-icon class="material-icons">delete</mat-icon>
@ -96,7 +96,7 @@
[style.background-color]="displayDataElement.avatarBgColor">
{{ getUserInitials(displayDataElement.displayName) }}
</div>
<mat-form-field fxFlex appearance="standard" class="mat-block">
<mat-form-field fxFlex appearance="fill" class="mat-block">
<textarea matInput
type="text"
placeholder="{{ 'alarm-comment.add' | translate }}"
@ -136,7 +136,7 @@
[style.background-color]="getCurrentUserBgColor(userDisplayName)">
{{ getUserInitials(userDisplayName) }}
</div>
<mat-form-field appearance="standard" fxFlex class="mat-block">
<mat-form-field appearance="fill" fxFlex class="mat-block">
<textarea matInput
type="text"
placeholder="{{ 'alarm-comment.add' | translate }}"
@ -147,8 +147,7 @@
(keyup.enter)="saveComment()"
(keydown.enter)="$event.preventDefault()">
</textarea>
<button mat-button
mat-icon-button
<button mat-icon-button
type="button"
matSuffix
*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">
<fieldset [disabled]="isLoading$ | async" style="padding: 0 24px">
<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>
<input matInput formControlName="originatorName" readonly>
</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>
<input matInput formControlName="createdTime" readonly>
</mat-form-field>
</div>
<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>
<input matInput formControlName="type" readonly>
</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>
<input matInput formControlName="alarmSeverity" readonly
[ngStyle]="{fontWeight: 'bold', color: alarmSeverityColorsMap.get((alarm$ | async)?.severity)}">
</mat-form-field>
</div>
<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>
<input matInput formControlName="alarmStatus" readonly>
</mat-form-field>
@ -72,11 +72,11 @@
<ng-template matExpansionPanelContent>
<div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('startTime').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>
<input matInput formControlName="startTime" readonly>
</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>
<input matInput formControlName="endTime" readonly>
</mat-form-field>
@ -84,11 +84,11 @@
</div>
<div fxLayout="row" fxLayoutGap="6px" *ngIf="alarmFormGroup.get('ackTime').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>
<input matInput formControlName="ackTime" readonly>
</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>
<input matInput formControlName="clearTime" readonly>
</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 {
visibility: hidden;
}
.mat-cell {
.mat-mdc-cell {
.assignee-cell {
.assigned-container {
white-space: nowrap;