Merge pull request #8897 from vvlladd28/improvement/move-form-table-style
Move form table style from data key to form.scss
This commit is contained in:
Igor Kulikov
GitHub
commit
738cb5cebf
@ -15,7 +15,7 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<div [formGroup]="keyRowFormGroup" class="tb-data-key-row">
|
||||
<div [formGroup]="keyRowFormGroup" class="tb-form-table-row tb-data-key-row">
|
||||
<mat-form-field *ngIf="hasAdditionalLatestDataKeys" class="tb-inline-field tb-source-field" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="latest">
|
||||
<mat-option [value]="false">{{ 'datakey.timeseries' | translate }}</mat-option>
|
||||
@ -157,7 +157,7 @@
|
||||
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="tb-data-keys-table-row-buttons">
|
||||
<div class="tb-form-table-row-cell-buttons">
|
||||
<button type="button"
|
||||
mat-icon-button
|
||||
(click)="editKey(true)"
|
||||
|
||||
@ -14,12 +14,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
.tb-data-key-row {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
padding-left: 12px;
|
||||
|
||||
.mat-mdc-form-field.tb-inline-field.tb-key-field {
|
||||
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) {
|
||||
.mat-mdc-form-field-infix {
|
||||
@ -62,19 +56,3 @@
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.tb-data-keys-table-row-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
button.mat-mdc-icon-button.mat-mdc-button-base {
|
||||
padding: 7px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
.mat-icon {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
&.tb-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,22 +17,22 @@
|
||||
-->
|
||||
<div class="tb-form-panel">
|
||||
<div class="tb-form-panel-title">{{ panelTitle }}</div>
|
||||
<div class="tb-data-keys-table">
|
||||
<div class="tb-data-keys-header">
|
||||
<div *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys-header-cell tb-source-header" translate>datakey.source</div>
|
||||
<div class="tb-data-keys-header-cell" fxFlex translate>datakey.key</div>
|
||||
<div class="tb-data-keys-header-cell" fxFlex translate>datakey.label</div>
|
||||
<div *ngIf="!hideDataKeyColor" class="tb-data-keys-header-cell tb-color-header" translate>datakey.color</div>
|
||||
<div *ngIf="!hideUnits" class="tb-data-keys-header-cell tb-units-header" translate>widget-config.units-short</div>
|
||||
<div *ngIf="!hideDecimals" class="tb-data-keys-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
|
||||
<div class="tb-data-keys-header-cell tb-actions-header"></div>
|
||||
<div class="tb-form-table">
|
||||
<div class="tb-form-table-header">
|
||||
<div *ngIf="hasAdditionalLatestDataKeys" class="tb-form-table-header-cell tb-source-header" translate>datakey.source</div>
|
||||
<div class="tb-form-table-header-cell" fxFlex translate>datakey.key</div>
|
||||
<div class="tb-form-table-header-cell" fxFlex translate>datakey.label</div>
|
||||
<div *ngIf="!hideDataKeyColor" class="tb-form-table-header-cell tb-color-header" translate>datakey.color</div>
|
||||
<div *ngIf="!hideUnits" class="tb-form-table-header-cell tb-units-header" translate>widget-config.units-short</div>
|
||||
<div *ngIf="!hideDecimals" class="tb-form-table-header-cell tb-decimals-header" translate>widget-config.decimals-short</div>
|
||||
<div class="tb-form-table-header-cell tb-actions-header"></div>
|
||||
</div>
|
||||
<div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-data-keys-body tb-drop-list"
|
||||
<div *ngIf="keysFormArray().controls.length; else noKeys" class="tb-form-table-body tb-drop-list"
|
||||
cdkDropList cdkDropListOrientation="vertical"
|
||||
[cdkDropListDisabled]="!dragEnabled"
|
||||
(cdkDropListDropped)="keyDrop($event)">
|
||||
<div cdkDrag [cdkDragDisabled]="!dragEnabled"
|
||||
class="tb-data-keys-table-row tb-draggable"
|
||||
class="tb-form-table-row tb-draggable"
|
||||
*ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
|
||||
<tb-data-key-row fxFlex
|
||||
[formControl]="keyControl"
|
||||
@ -41,7 +41,7 @@
|
||||
[entityAliasId]="entityAliasId"
|
||||
(keyRemoved)="removeKey($index)">
|
||||
</tb-data-key-row>
|
||||
<div class="tb-data-keys-table-row-buttons">
|
||||
<div class="tb-form-table-row-cell-buttons">
|
||||
<button mat-icon-button
|
||||
type="button"
|
||||
cdkDragHandle
|
||||
|
||||
@ -13,55 +13,17 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
.tb-data-keys-table {
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding-bottom: 12px;
|
||||
.tb-data-keys-header {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
place-content: center flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-left: 12px;
|
||||
.tb-data-keys-header-cell {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.2px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
&.tb-source-header {
|
||||
width: 140px;
|
||||
}
|
||||
&.tb-units-header {
|
||||
width: 80px;
|
||||
}
|
||||
&.tb-color-header, &.tb-decimals-header {
|
||||
width: 60px;
|
||||
}
|
||||
&.tb-actions-header {
|
||||
width: 114px;
|
||||
}
|
||||
}
|
||||
.tb-form-table-header-cell {
|
||||
&.tb-source-header {
|
||||
width: 140px;
|
||||
}
|
||||
.tb-data-keys-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
&.tb-units-header {
|
||||
width: 80px;
|
||||
}
|
||||
.tb-prompt {
|
||||
height: 38px;
|
||||
&.tb-color-header, &.tb-decimals-header {
|
||||
width: 60px;
|
||||
}
|
||||
&.tb-actions-header {
|
||||
width: 114px;
|
||||
}
|
||||
}
|
||||
|
||||
.tb-data-keys-table-row {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@ -269,4 +269,71 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tb-form-table {
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.tb-form-table-header {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
place-content: center flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-left: 12px;
|
||||
&-cell {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.2px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
}
|
||||
|
||||
.tb-form-table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tb-prompt {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.tb-form-table-row {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
padding-left: 12px;
|
||||
|
||||
&.tb-draggable {
|
||||
gap: 0;
|
||||
padding-left: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&-cell-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
button.mat-mdc-icon-button.mat-mdc-button-base {
|
||||
padding: 7px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
.mat-icon {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
&.tb-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user