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

UI: Angular 15 migration

Browse Source
This commit is contained in:
Igor Kulikov 2023-02-28 15:14:36 +02:00
parent ed42bf76e0
commit 1b73595e59
14 changed files with 44 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rule-engine/rule-engine-components/src/main/resources/public/static/rulenode/rulenode-core-config.js
View File

File diff suppressed because one or more lines are too long

4
ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
View File

@ -17,7 +17,7 @@
-->
<form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
<div fxLayout="row wrap" fxLayoutGap="6px">
<mat-form-field fxFlex.lt-sm="100" fxFlex.gt-sm="15" class="mat-block">
<mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
<mat-label translate>admin.smpp-provider.smpp-version</mat-label>
<mat-select formControlName="protocolVersion">
<mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@ -32,7 +32,7 @@
{{'admin.smpp-provider.smpp-host-required' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex.lt-sm="100" fxFlex.gt-sm="30" class="mat-block">
<mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
<mat-label translate>admin.smpp-provider.smpp-port</mat-label>
<input required matInput type="number" formControlName="port">
<mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">

2
ui-ngx/src/app/modules/home/components/sms/twilio-sms-provider-configuration.component.html
View File

@ -16,7 +16,7 @@
-->
<form [formGroup]="twilioSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
<mat-form-field class="mat-block">
<mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-label translate>admin.number-from</mat-label>
<input type="tel" required [pattern]="phoneNumberPatternTwilio" matInput formControlName="numberFrom">
<mat-error *ngIf="twilioSmsProviderConfigurationFormGroup.get('numberFrom').hasError('required')">

3
ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.scss
View File

@ -17,7 +17,8 @@
:host {
.dialog-container {
min-width: 650px !important;
min-width: 750px !important;
max-width: 750px !important;
@media #{$mat-lt-md} {
min-width: 100% !important;

2
ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
View File

@ -14,6 +14,8 @@
* limitations under the License.
*/
:host {
display: block;
margin-bottom: 16px;
tb-json-object-edit.tb-rule-node-configuration-json {
display: block;
height: 300px;

1
ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
View File

@ -60,6 +60,7 @@
<label translate>rulenode.metadata</label>
</div>
<tb-key-val-map
subscriptSizing="dynamic"
formControlName="metadata"
titleText="rulenode.metadata">
</tb-key-val-map>

2
ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.scss
View File

@ -64,7 +64,7 @@
div.tb-editor-area-title-panel {
position: absolute;
top: 13px;
top: 8px;
right: 40px;
z-index: 5;
font-size: .8rem;

10
ui-ngx/src/app/shared/components/kv-map.component.html
View File

@ -16,17 +16,15 @@
-->
<section fxLayout="column" class="tb-kv-map" [formGroup]="kvListFormGroup">
<label translate class="tb-title no-padding">{{ titleText }}</label>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="max-height: 40px;"
<label translate class="tb-title">{{ titleText }}</label>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"
formArrayName="keyVals"
*ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">
<mat-form-field fxFlex class="mat-block"
style="max-height: 40px;">
<mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
<input [formControl]="keyValControl.get('key')" matInput required
placeholder="{{ (keyPlaceholderText ? keyPlaceholderText : 'key-val.key') | translate }}"/>
</mat-form-field>
<mat-form-field fxFlex class="mat-block"
style="max-height: 40px;">
<mat-form-field fxFlex class="mat-block" subscriptSizing="{{ subscriptSizing }}">
<input [formControl]="keyValControl.get('value')" matInput required
placeholder="{{ (valuePlaceholderText ? valuePlaceholderText : 'key-val.value') | translate }}"/>
</mat-form-field>

4
ui-ngx/src/app/shared/components/kv-map.component.ts
View File

@ -31,6 +31,7 @@ import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { Subscription } from 'rxjs';
import { SubscriptSizing } from '@angular/material/form-field';
@Component({
selector: 'tb-key-val-map',
@ -61,6 +62,9 @@ export class KeyValMapComponent extends PageComponent implements ControlValueAcc
@Input() noDataText: string;
@Input()
subscriptSizing: SubscriptSizing = 'fixed';
kvListFormGroup: UntypedFormGroup;
private propagateChange = null;

3
ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
View File

@ -16,10 +16,11 @@
-->
<mat-form-field [formGroup]="relationTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
<mat-label>{{ required ? ('relation.relation-type' | translate) : ( !modelValue ? ('relation.any-relation-type' | translate) : ' ') }}</mat-label>
<mat-label *ngIf="required">{{ 'relation.relation-type' | translate }}</mat-label>
<input matInput type="text"
#relationTypeInput
formControlName="relationType"
[placeholder]="!required ? ('relation.any-relation-type' | translate) : ''"
(focusin)="onFocus()"
[required]="required"
[matAutocomplete]="relationTypeAutocomplete">

28
ui-ngx/src/app/shared/components/script-lang.component.scss
View File

@ -13,37 +13,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle-group.tb-script-lang-toggle-group {
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
&.mat-button-toggle-group-appearance-standard {
border: none;
border-radius: 18px;
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle+.mat-button-toggle {
border-left: none;
}
}
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle {
background: rgba(0, 0, 0, 0.06);
height: 36px;
align-items: center;
display: flex;
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle-ripple {
top: 2px;
left: 2px;
@ -52,19 +34,13 @@
border-radius: 16px;
}
}
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle-button {
color: #959595;
}
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle-focus-overlay {
border-radius: 16px;
margin: 2px;
}
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle-checked .mat-button-toggle-button {
background-color: #305680;
color: #fff;
@ -72,15 +48,11 @@
margin-left: 2px;
margin-right: 2px;
}
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
line-height: 32px;
font-size: 16px;
font-weight: 500;
}
/*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.
*/
.mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
opacity: .01;
}

13
ui-ngx/src/app/shared/shared.module.ts
View File

@ -24,7 +24,7 @@ import { FlowInjectionToken, NgxFlowModule } from '@flowjs/ngx-flow';
import { NgxFlowchartModule } from 'ngx-flowchart';
import Flow from '@flowjs/flow.js';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
@ -198,7 +198,16 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
TbPopoverService,
{
provide: MAT_SELECT_CONFIG,
useValue: { overlayPanelClass: 'tb-select-overlay' }
useValue: {
overlayPanelClass: 'tb-select-overlay',
hideSingleSelectionIndicator: true
}
},
{
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
useValue: {
hideSingleSelectionIndicator: true
}
}
],
declarations: [

4
ui-ngx/src/scss/mixins.scss
View File

@ -37,6 +37,10 @@
display: block;
margin: auto;
}
.mat-mdc-button-touch-target {
width: #{$size}px;
height: #{$size}px;
}
}
@mixin tb-checkered-bg() {

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

@ -264,10 +264,11 @@ div {
}
.tb-hint {
padding-bottom: 15px;
font-size: 12px;
line-height: 14px;
color: #808080;
padding: 0 16px 16px;
font-size: var(--mdc-typography-caption-font-size, 12px);
line-height: var(--mdc-typography-caption-line-height, 20px);
font-weight: var(--mdc-typography-caption-font-weight, 400);
letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
}
.mat-caption {
@ -1491,4 +1492,8 @@ mat-label {
}
}
}
.mat-expansion-panel {
color: inherit;
}
}