tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Flex layout replacements. Switch to tailwind.css.

pull/11862/head
Igor Kulikov 2 years ago
parent
ae8cf7d2e5
commit
7d5235d615
18 changed files with 172 additions and 173 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
  2. 8
      ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
  3. 4
      ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
  4. 31
      ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
  5. 2
      ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
  6. 14
      ui-ngx/src/app/modules/home/components/sms/smpp-sms-provider-configuration.component.html
  7. 38
      ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
  8. 18
      ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
  9. 12
      ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
  10. 40
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
  11. 34
      ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
  12. 12
      ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
  13. 17
      ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
  14. 10
      ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
  15. 38
      ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
  16. 2
      ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
  17. 24
      ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
  18. 3
      ui-ngx/tailwind.config.js

38
ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<form [formGroup]="queueFormGroup" fxLayout="column"> <form [formGroup]="queueFormGroup" class="flex flex-col">
<mat-form-field class="mat-block" appearance="fill"> <mat-form-field class="mat-block" appearance="fill">
<mat-label translate>admin.queue-name</mat-label> <mat-label translate>admin.queue-name</mat-label>
<input matInput formControlName="name" required> <input matInput formControlName="name" required>
@ -37,10 +37,10 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="submitStrategy"> <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="submitStrategy">
<div fxFlex> <div class="flex-1">
<label class="group-label" translate>queue.submit-strategy</label> <label class="group-label" translate>queue.submit-strategy</label>
<mat-radio-group fxFlex fxLayout="column" formControlName="type" required> <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
<mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy"> <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
{{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }} {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
<mat-icon <mat-icon
@ -51,7 +51,7 @@
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
<div fxFlex *ngIf="hideBatchSize"> <div class="flex-1" *ngIf="hideBatchSize">
<label class="group-label" translate>queue.grouping-parameter</label> <label class="group-label" translate>queue.grouping-parameter</label>
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>queue.batch-size</mat-label> <mat-label translate>queue.batch-size</mat-label>
@ -75,10 +75,10 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="processingStrategy"> <div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="processingStrategy">
<div fxFlex> <div class="flex-1">
<label class="group-label" translate>queue.processing-strategy</label> <label class="group-label" translate>queue.processing-strategy</label>
<mat-radio-group fxFlex fxLayout="column" formControlName="type" required> <mat-radio-group class="flex-1 flex flex-col" formControlName="type" required>
<mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy"> <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
{{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }} {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
<mat-icon <mat-icon
@ -89,7 +89,7 @@
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
<div fxFlex> <div class="flex-1">
<label class="group-label" translate>queue.retries-settings</label> <label class="group-label" translate>queue.retries-settings</label>
<mat-form-field class="mat-block" subscriptSizing="dynamic"> <mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-label translate>queue.retries</mat-label> <mat-label translate>queue.retries</mat-label>
@ -156,11 +156,11 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div fxFlex fxLayout="column" fxLayoutGap="10px"> <div class="flex-1 flex flex-col gap-2.5">
<div fxFlex> <div class="flex-1">
<label class="group-label" translate>queue.batch-processing</label> <label class="group-label" translate>queue.batch-processing</label>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px"> <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>queue.poll-interval</mat-label> <mat-label translate>queue.poll-interval</mat-label>
<input type="number" matInput formControlName="pollInterval" required> <input type="number" matInput formControlName="pollInterval" required>
<mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')"> <mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
@ -171,7 +171,7 @@
{{ 'queue.poll-interval-min-value' | translate }} {{ 'queue.poll-interval-min-value' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>queue.partitions</mat-label> <mat-label translate>queue.partitions</mat-label>
<input type="number" matInput formControlName="partitions" required> <input type="number" matInput formControlName="partitions" required>
<mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')"> <mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
@ -184,13 +184,13 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div fxFlex> <div class="flex-1">
<label class="group-label" translate>queue.immediate-processing</label> <label class="group-label" translate>queue.immediate-processing</label>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px"> <div class="flex-1 flex flex-row xs:flex-col gap-2.5">
<mat-checkbox fxFlex fxFlexAlign.gt-xs="center" formControlName="consumerPerPartition"> <mat-checkbox class="flex-1 gt-xs:flex gt-xs:justify-center gt-xs:items-stretch" formControlName="consumerPerPartition">
{{ 'queue.consumer-per-partition' | translate }} {{ 'queue.consumer-per-partition' | translate }}
</mat-checkbox> </mat-checkbox>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>queue.processing-timeout</mat-label> <mat-label translate>queue.processing-timeout</mat-label>
<input type="number" matInput formControlName="packProcessingTimeout" required> <input type="number" matInput formControlName="packProcessingTimeout" required>
<mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')"> <mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
@ -208,7 +208,7 @@
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
<div formGroupName="additionalInfo"> <div formGroupName="additionalInfo">
<mat-checkbox fxFlex formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;"> <mat-checkbox class="flex-1" formControlName="duplicateMsgToAllPartitions" style="padding-bottom: 16px;">
{{ 'queue.duplicate-msg-to-all-partitions' | translate }} {{ 'queue.duplicate-msg-to-all-partitions' | translate }}
</mat-checkbox> </mat-checkbox>
<mat-form-field class="mat-block" subscriptSizing="dynamic"> <mat-form-field class="mat-block" subscriptSizing="dynamic">

8
ui-ngx/src/app/modules/home/components/relation/relation-dialog.component.html
View File

@ -16,9 +16,9 @@
--> -->
<form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;"> <form [formGroup]="relationFormGroup" (ngSubmit)="save()" style="min-width: 600px;">
<mat-toolbar fxLayout="row" color="primary"> <mat-toolbar class="flex flex-row" color="primary">
<h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2> <h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
@ -51,8 +51,8 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div mat-dialog-actions fxLayout="row"> <div mat-dialog-actions class="flex flex-row">
<span fxFlex></span> <span class="flex-1"></span>
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

4
ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
View File

@ -52,8 +52,8 @@
</button> </button>
</div> </div>
</div> </div>
<div [fxShow]="!relationFiltersFormArray.length"> <div [class.!hidden]="relationFiltersFormArray.length">
<span fxLayoutAlign="center center" class="tb-prompt" translate>relation.any-relation</span> <span class="tb-prompt flex justify-center items-center" translate>relation.any-relation</span>
</div> </div>
</div> </div>
</div> </div>

31
ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
View File

@ -16,10 +16,10 @@
--> -->
<div class="mat-padding tb-entity-table tb-absolute-fill"> <div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border"> <div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container"> <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
<span class="tb-entity-table-title"> <span class="tb-entity-table-title">
{{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}} {{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
</span> </span>
@ -33,7 +33,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
(click)="addRelation($event)" (click)="addRelation($event)"
matTooltip="{{ 'action.add' | translate }}" matTooltip="{{ 'action.add' | translate }}"
@ -52,14 +52,14 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode || !dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<button mat-icon-button <button mat-icon-button
matTooltip="{{ 'action.search' | translate }}" matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
<mat-form-field fxFlex> <mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label> <mat-label>&nbsp;</mat-label>
<input #searchInput matInput <input #searchInput matInput
[formControl]="textSearch" [formControl]="textSearch"
@ -72,8 +72,8 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()"> <mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools" fxLayoutAlign="space-between center"> <div class="mat-toolbar-tools flex justify-between items-center">
<span class="tb-entity-table-info"> <span class="tb-entity-table-info">
{{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }} {{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
</span> </span>
@ -85,7 +85,7 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<div fxFlex class="table-container"> <div class="table-container flex-1">
<table mat-table [dataSource]="dataSource" <table mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="select" sticky> <ng-container matColumnDef="select" sticky>
@ -140,7 +140,7 @@
<mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px"> <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let relation"> <mat-cell *matCellDef="let relation">
<div fxFlex fxLayout="row" fxLayoutAlign="end"> <div class="flex-1 flex flex-row justify-end items-stretch">
<button mat-icon-button [disabled]="isLoading$ | async" <button mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ 'relation.edit' | translate }}" matTooltip="{{ 'relation.edit' | translate }}"
matTooltipPosition="above" matTooltipPosition="above"
@ -156,14 +156,13 @@
</div> </div>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row [ngClass]="{'mat-row-select': true, <mat-row class="mat-row-select"
'mat-selected': dataSource.selection.isSelected(relation)}" [class.mat-selected]="dataSource.selection.isSelected(relation)"
*matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row> *matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
</table> </table>
<span [fxShow]="dataSource.isEmpty() | async" <span [class.!hidden]="(dataSource.isEmpty() | async) === false"
fxLayoutAlign="center center" class="no-data-found flex justify-center items-center" translate>{{ 'relation.no-relations-text' }}</span>
class="no-data-found" translate>{{ 'relation.no-relations-text' }}</span>
</div> </div>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-paginator [length]="dataSource.total() | async" <mat-paginator [length]="dataSource.total() | async"

2
ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
View File

@ -23,7 +23,7 @@
(focusin)="onFocus()" (focusin)="onFocus()"
[required]="required" [required]="required"
[matAutocomplete]="ruleChainAutocomplete" [matAutocomplete]="ruleChainAutocomplete"
[fxShow]="!disabled || !selectRuleChainFormGroup.get('ruleChainId').value"> [class.!hidden]="disabled && selectRuleChainFormGroup.get('ruleChainId').value">
<a *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && disabled" aria-label="Open device profile" [routerLink]=ruleChainURL> <a *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && disabled" aria-label="Open device profile" [routerLink]=ruleChainURL>
{{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }} {{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
</a> </a>

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

@ -16,8 +16,8 @@
--> -->
<form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;"> <form [formGroup]="smppSmsProviderConfigurationFormGroup" style="padding-bottom: 16px;">
<div fxLayout="row wrap" fxLayoutGap="6px"> <div class="flex flex-row flex-wrap gap-1.5">
<mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block"> <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
<mat-label translate>admin.smpp-provider.smpp-version</mat-label> <mat-label translate>admin.smpp-provider.smpp-version</mat-label>
<mat-select formControlName="protocolVersion"> <mat-select formControlName="protocolVersion">
<mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value"> <mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@ -25,14 +25,14 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.smpp-provider.smpp-host</mat-label> <mat-label translate>admin.smpp-provider.smpp-host</mat-label>
<input required matInput formControlName="host"> <input required matInput formControlName="host">
<mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')"> <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')">
{{'admin.smpp-provider.smpp-host-required' | translate}} {{'admin.smpp-provider.smpp-host-required' | translate}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block"> <mat-form-field class="mat-block lt-sm:flex-full gt-xs:flex-full gt-xs:max-w-25%">
<mat-label translate>admin.smpp-provider.smpp-port</mat-label> <mat-label translate>admin.smpp-provider.smpp-port</mat-label>
<input required matInput type="number" formControlName="port"> <input required matInput type="number" formControlName="port">
<mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')"> <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
@ -40,15 +40,15 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div fxLayout="row wrap" fxLayoutGap="6px"> <div class="flex flex-row flex-wrap gap-1.5">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.smpp-provider.system-id</mat-label> <mat-label translate>admin.smpp-provider.system-id</mat-label>
<input required matInput formControlName="systemId"> <input required matInput formControlName="systemId">
<mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')"> <mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')">
{{'admin.smpp-provider.system-id-required' | translate}} {{'admin.smpp-provider.system-id-required' | translate}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.smpp-provider.password</mat-label> <mat-label translate>admin.smpp-provider.password</mat-label>
<input required matInput type="password" autocomplete="new-password" formControlName="password"> <input required matInput type="password" autocomplete="new-password" formControlName="password">
<tb-toggle-password matSuffix></tb-toggle-password> <tb-toggle-password matSuffix></tb-toggle-password>

38
ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
View File

@ -21,7 +21,7 @@
<mat-card-title> <mat-card-title>
<span class="mat-headline-5" translate>admin.auto-commit-settings</span> <span class="mat-headline-5" translate>admin.auto-commit-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="autoCommitSettings"></div> <div tb-help="autoCommitSettings"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -31,19 +31,19 @@
<form [formGroup]="autoCommitSettingsForm" #formDirective="ngForm" (ngSubmit)="save()"> <form [formGroup]="autoCommitSettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
<fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)"> <fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)">
<legend class="group-title" translate>admin.auto-commit-entities</legend> <legend class="group-title" translate>admin.auto-commit-entities</legend>
<div fxLayout="column"> <div class="flex flex-col">
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType; <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
let $index = index; last as isLast;" let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
<mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)"> <mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
<mat-panel-title> <mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
<div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div> <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
</div> </div>
</mat-panel-title> </mat-panel-title>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button style="min-width: 40px;" <button mat-icon-button style="min-width: 40px;"
type="button" type="button"
(click)="removeEntityType($index)" (click)="removeEntityType($index)"
@ -54,10 +54,10 @@
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em"> <div class="entity-type-config-content flex flex-col gap-2">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px"> <div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
<div fxLayout="row" fxLayoutGap="16px" fxLayout.xs="column" fxLayoutGap.xs="0px"> <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
<tb-entity-type-select <tb-entity-type-select
showLabel showLabel
formControlName="entityType" formControlName="entityType"
@ -73,8 +73,8 @@
</tb-branch-autocomplete> </tb-branch-autocomplete>
</div> </div>
</div> </div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px" <div class="flex-1 flex flex-row justify-start items-center gap-4 xs:flex-col xs:justify-start xs:items-start xs:gap-0"
fxLayout.xs="column" fxLayoutAlign.xs="start start" fxLayoutGap.xs="0px" formGroupName="config"> formGroupName="config">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials"> <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
{{ 'version-control.export-credentials' | translate }} {{ 'version-control.export-credentials' | translate }}
</mat-checkbox> </mat-checkbox>
@ -91,17 +91,17 @@
</mat-expansion-panel> </mat-expansion-panel>
</div> </div>
<div *ngIf="!entityTypesFormGroupArray().length"> <div *ngIf="!entityTypesFormGroupArray().length">
<span translate fxLayoutAlign="center center" <span translate
class="tb-prompt">admin.no-auto-commit-entities-prompt</span> class="tb-prompt flex justify-center items-center">admin.no-auto-commit-entities-prompt</span>
</div> </div>
<div style="padding-top: 16px;" fxLayout="row"> <div style="padding-top: 16px;" class="flex flex-row">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
type="button" type="button"
[disabled]="!addEnabled()" [disabled]="!addEnabled()"
(click)="addEntityType()"> (click)="addEntityType()">
<span translate>version-control.add-entity-type</span> <span translate>version-control.add-entity-type</span>
</button> </button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
type="button" type="button"
[disabled]="!entityTypesFormGroupArray().length" [disabled]="!entityTypesFormGroupArray().length"
@ -112,12 +112,12 @@
</div> </div>
</fieldset> </fieldset>
<div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div> <div class="tb-hint" *ngIf="isReadOnly | async" translate>version-control.auto-commit-settings-read-only-hint</div>
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px"> <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
<button mat-raised-button color="warn" type="button" [fxShow]="settings !== null" <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
[disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)"> [disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
{{'action.delete' | translate}} {{'action.delete' | translate}}
</button> </button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || (isReadOnly | async) || autoCommitSettingsForm.invalid || !autoCommitSettingsForm.dirty" <button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || (isReadOnly | async) || autoCommitSettingsForm.invalid || !autoCommitSettingsForm.dirty"
type="submit">{{'action.save' | translate}} type="submit">{{'action.save' | translate}}
</button> </button>

18
ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
View File

@ -15,22 +15,22 @@
limitations under the License. limitations under the License.
--> -->
<section *ngIf="!versionCreateResult$" fxLayout="column" style="height: 100%;"> <section *ngIf="!versionCreateResult$" class="flex flex-col" style="height: 100%;">
<mat-toolbar> <mat-toolbar>
<h2>{{ 'version-control.create-entities-version' | translate }}</h2> <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate" <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async"> *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<form [formGroup]="createVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;"> <form [formGroup]="createVersionFormGroup" class="flex flex-col" style="flex: 1; padding-top: 16px; overflow: auto;">
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px"> <div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
<tb-branch-autocomplete <tb-branch-autocomplete
fxFlex class="flex-1"
required required
formControlName="branch"> formControlName="branch">
</tb-branch-autocomplete> </tb-branch-autocomplete>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>version-control.version-name</mat-label> <mat-label translate>version-control.version-name</mat-label>
<input required matInput formControlName="versionName"> <input required matInput formControlName="versionName">
<mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') || <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@ -52,7 +52,7 @@
formControlName="entityTypes"> formControlName="entityTypes">
</tb-entity-types-version-create> </tb-entity-types-version-create>
</form> </form>
<div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;"> <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -71,7 +71,7 @@
<section *ngIf="resultMessage"> <section *ngIf="resultMessage">
<div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div> <div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
</section> </section>
<div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" fxLayoutAlign="end center" fxLayoutGap="8px"> <div *ngIf="(versionCreateResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -80,7 +80,7 @@
</button> </button>
</div> </div>
<ng-template #progress> <ng-template #progress>
<section fxLayout="column" fxLayoutAlign="center center"> <section class="flex flex-col justify-center items-center">
<div class="mat-headline-6 vc-result-message progress"> <div class="mat-headline-6 vc-result-message progress">
<span translate>version-control.creating-version</span> <span translate>version-control.creating-version</span>
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <mat-progress-bar mode="indeterminate"></mat-progress-bar>

12
ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
View File

@ -15,15 +15,15 @@
limitations under the License. limitations under the License.
--> -->
<section *ngIf="!versionLoadResult$" fxLayout="column" style="height: 100%;"> <section *ngIf="!versionLoadResult$" class="flex flex-col" style="height: 100%;">
<mat-toolbar> <mat-toolbar>
<h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2> <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate" <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async"> *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<form [formGroup]="loadVersionFormGroup" fxLayout="column" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden"> <form [formGroup]="loadVersionFormGroup" class="flex flex-col" style="flex: 1; padding: 16px 0; overflow-y: auto; overflow-x: hidden">
<tb-entity-types-version-load <tb-entity-types-version-load
formControlName="entityTypes"> formControlName="entityTypes">
</tb-entity-types-version-load> </tb-entity-types-version-load>
@ -33,7 +33,7 @@
{{ 'version-control.rollback-on-error' | translate }} {{ 'version-control.rollback-on-error' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
<div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;"> <div class="flex justify-end items-center gap-2" style="padding-top: 16px;">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -54,7 +54,7 @@
</div> </div>
<div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div> <div *ngIf="errorMessage" class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
<div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div> <div *ngFor="let entityTypeLoadResult of entityTypeLoadResults" class="mat-headline-6 vc-result-message">{{ entityTypeLoadResultMessage(entityTypeLoadResult) }}</div>
<div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" fxLayoutAlign="end center" fxLayoutGap="8px"> <div *ngIf="(versionLoadResult$ | async)?.done || hasError; else progress" class="flex justify-end items-center gap-2">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -63,7 +63,7 @@
</button> </button>
</div> </div>
<ng-template #progress> <ng-template #progress>
<section fxLayout="column" fxLayoutAlign="center center"> <section class="flex flex-col justify-center items-center">
<div class="mat-headline-6 vc-result-message progress"> <div class="mat-headline-6 vc-result-message progress">
<span translate>version-control.restoring-entities-from-version</span> <span translate>version-control.restoring-entities-from-version</span>
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <mat-progress-bar mode="indeterminate"></mat-progress-bar>

40
ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
View File

@ -15,22 +15,22 @@
limitations under the License. limitations under the License.
--> -->
<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group" fxLayout="column"> <fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group flex flex-col">
<legend class="group-title" translate>version-control.entities-to-export</legend> <legend class="group-title" translate>version-control.entities-to-export</legend>
<div fxLayout="column" style="flex: 1; overflow: auto;"> <div class="flex flex-col" style="flex: 1; overflow: auto;">
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType; <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
let $index = index; last as isLast;" let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup" <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false"> [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
<mat-panel-title> <mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
<div>{{ entityTypeText(entityTypeFormGroup) }}</div> <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
</div> </div>
</mat-panel-title> </mat-panel-title>
<span fxFlex></span> <span class="flex-1"></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button" type="button"
(click)="removeEntityType($index)" (click)="removeEntityType($index)"
@ -40,9 +40,9 @@
</button> </button>
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em"> <div class="entity-type-config-content flex flex-col gap-2">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px"> <div class="flex flex-row xs:flex-col gt-xs:gap-4">
<tb-entity-type-select <tb-entity-type-select
showLabel showLabel
formControlName="entityType" formControlName="entityType"
@ -50,8 +50,8 @@
[filterAllowedEntityTypes]="false" [filterAllowedEntityTypes]="false"
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)"> [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
</tb-entity-type-select> </tb-entity-type-select>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config"> <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>version-control.sync-strategy</mat-label> <mat-label translate>version-control.sync-strategy</mat-label>
<mat-select formControlName="syncStrategy"> <mat-select formControlName="syncStrategy">
<mat-option [value]="'default'"> <mat-option [value]="'default'">
@ -62,7 +62,7 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials"> <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
{{ 'version-control.export-credentials' | translate }} {{ 'version-control.export-credentials' | translate }}
</mat-checkbox> </mat-checkbox>
@ -75,14 +75,14 @@
</div> </div>
</div> </div>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center" <div class="flex flex-row xs:flex-col gt-xs:gap-4 gt-xs:justify-start gt-xs:items-center gt-xs:min-h-19"
formGroupName="config" ngStyle.gt-xs="min-height: 76px;"> formGroupName="config">
<mat-slide-toggle formControlName="allEntities"> <mat-slide-toggle formControlName="allEntities">
{{ 'version-control.all-entities' | translate }} {{ 'version-control.all-entities' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<tb-entity-list <tb-entity-list
fxFlex class="flex-1"
[fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value" [class.!hidden]="entityTypeFormGroup.get('config').get('allEntities').value"
[entityType]="entityTypeFormGroup.get('entityType').value" [entityType]="entityTypeFormGroup.get('entityType').value"
required required
formControlName="entityIds"> formControlName="entityIds">
@ -92,18 +92,18 @@
</mat-expansion-panel> </mat-expansion-panel>
</div> </div>
<div *ngIf="!entityTypesFormGroupArray().length"> <div *ngIf="!entityTypesFormGroupArray().length">
<span translate fxLayoutAlign="center center" <span translate
class="tb-prompt">version-control.no-entities-to-export-prompt</span> class="tb-prompt flex justify-center items-center">version-control.no-entities-to-export-prompt</span>
</div> </div>
</div> </div>
<div style="padding-top: 16px;" fxLayout="row"> <div style="padding-top: 16px;" class="flex flex-row">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
type="button" type="button"
[disabled]="!addEnabled()" [disabled]="!addEnabled()"
(click)="addEntityType()"> (click)="addEntityType()">
<span translate>version-control.add-entity-type</span> <span translate>version-control.add-entity-type</span>
</button> </button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
type="button" type="button"
[disabled]="!entityTypesFormGroupArray().length" [disabled]="!entityTypesFormGroupArray().length"

34
ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
View File

@ -15,22 +15,22 @@
limitations under the License. limitations under the License.
--> -->
<fieldset class="fields-group" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column"> <fieldset class="fields-group flex flex-col" [formGroup]="entityTypesVersionLoadFormGroup">
<legend class="group-title" translate>version-control.entities-to-restore</legend> <legend class="group-title" translate>version-control.entities-to-restore</legend>
<div fxLayout="column" style="flex: 1; overflow: auto;"> <div class="flex flex-col" style="flex: 1; overflow: auto;">
<div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType; <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
let $index = index; last as isLast;" let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup" <mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false"> [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
<mat-panel-title> <mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> <div class="flex-1 flex flex-row justify-start items-center">
<div>{{ entityTypeText(entityTypeFormGroup) }}</div> <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
</div> </div>
</mat-panel-title> </mat-panel-title>
<span fxFlex></span> <span class="flex-1"></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button" type="button"
(click)="removeEntityType($index)" (click)="removeEntityType($index)"
@ -40,19 +40,19 @@
</button> </button>
</div> </div>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em"> <div class="entity-type-config-content flex flex-col gap-2">
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px"> <div class="flex flex-row xs:flex-col gt-xs:gap-8">
<tb-entity-type-select <tb-entity-type-select
fxFlex class="flex-1"
showLabel showLabel
formControlName="entityType" formControlName="entityType"
required required
[filterAllowedEntityTypes]="false" [filterAllowedEntityTypes]="false"
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)"> [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
</tb-entity-type-select> </tb-entity-type-select>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config"> <div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4 xs:gap-2" formGroupName="config">
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<mat-checkbox #removeOtherEntitiesCheckbox <mat-checkbox #removeOtherEntitiesCheckbox
formControlName="removeOtherEntities" formControlName="removeOtherEntities"
(change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)"> (change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
@ -62,7 +62,7 @@
{{ 'version-control.find-existing-entity-by-name' | translate }} {{ 'version-control.find-existing-entity-by-name' | translate }}
</mat-checkbox> </mat-checkbox>
</div> </div>
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials"> <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
{{ 'version-control.load-credentials' | translate }} {{ 'version-control.load-credentials' | translate }}
</mat-checkbox> </mat-checkbox>
@ -79,18 +79,18 @@
</mat-expansion-panel> </mat-expansion-panel>
</div> </div>
<div *ngIf="!entityTypesFormGroupArray().length"> <div *ngIf="!entityTypesFormGroupArray().length">
<span translate fxLayoutAlign="center center" <span translate
class="tb-prompt">version-control.no-entities-to-restore-prompt</span> class="tb-prompt flex justify-center items-center">version-control.no-entities-to-restore-prompt</span>
</div> </div>
</div> </div>
<div style="padding-top: 16px;" fxLayout="row"> <div style="padding-top: 16px;" class="flex flex-row">
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
type="button" type="button"
[disabled]="!addEnabled()" [disabled]="!addEnabled()"
(click)="addEntityType()"> (click)="addEntityType()">
<span translate>version-control.add-entity-type</span> <span translate>version-control.add-entity-type</span>
</button> </button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-raised-button color="primary" <button mat-raised-button color="primary"
type="button" type="button"
[disabled]="!entityTypesFormGroupArray().length" [disabled]="!entityTypesFormGroupArray().length"

12
ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
View File

@ -18,19 +18,19 @@
<section *ngIf="!versionCreateResult$"> <section *ngIf="!versionCreateResult$">
<mat-toolbar> <mat-toolbar>
<h2>{{ 'version-control.create-entity-version' | translate }}</h2> <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate" <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async"> *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<form [formGroup]="createVersionFormGroup" style="padding-top: 16px;"> <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<tb-branch-autocomplete <tb-branch-autocomplete
required required
formControlName="branch"> formControlName="branch">
</tb-branch-autocomplete> </tb-branch-autocomplete>
<mat-form-field class="mat-block" fxFlex> <mat-form-field class="mat-block flex-1">
<mat-label translate>version-control.version-name</mat-label> <mat-label translate>version-control.version-name</mat-label>
<input required matInput formControlName="versionName"> <input required matInput formControlName="versionName">
<mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') || <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@ -50,7 +50,7 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
<div fxLayoutAlign="end center" fxLayoutGap="8px"> <div class="flex justify-end items-center gap-2">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -69,7 +69,7 @@
<section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress"> <section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
<section *ngIf="resultMessage"> <section *ngIf="resultMessage">
<div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div> <div class="mat-headline-6 vc-result-message">{{ resultMessage }}</div>
<div fxLayoutAlign="end center" fxLayoutGap="8px"> <div class="flex justify-end items-center gap-2">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -80,7 +80,7 @@
</section> </section>
</section> </section>
<ng-template #progress> <ng-template #progress>
<section fxLayout="column" fxLayoutAlign="center center"> <section class="flex flex-col justify-center items-center">
<div class="mat-headline-6 vc-result-message progress"> <div class="mat-headline-6 vc-result-message progress">
<span translate>version-control.creating-version</span> <span translate>version-control.creating-version</span>
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <mat-progress-bar mode="indeterminate"></mat-progress-bar>

17
ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.html
View File

@ -15,13 +15,12 @@
limitations under the License. limitations under the License.
--> -->
<section class="entity-version-diff-view" [ngClass]="{'content-ready': contentReady}" <section class="entity-version-diff-view flex flex-col" [class.content-ready]="contentReady"
tb-fullscreen [fullscreen]="isFullscreen" (fullscreenChanged)="onFullscreenChanged($event)" tb-fullscreen [fullscreen]="isFullscreen" (fullscreenChanged)="onFullscreenChanged($event)"
[ngStyle]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}" [style]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}">
fxLayout="column">
<mat-toolbar *ngIf="contentReady"> <mat-toolbar *ngIf="contentReady">
<h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2> <h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-icon-button <button mat-icon-button
matTooltip="{{'version-control.previous-difference' | translate}}" matTooltip="{{'version-control.previous-difference' | translate}}"
matTooltipPosition="below" matTooltipPosition="below"
@ -54,14 +53,14 @@
<mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon> <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
</button> </button>
</mat-toolbar> </mat-toolbar>
<div fxLayout="row" *ngIf="contentReady"> <div class="flex flex-row" *ngIf="contentReady">
<div class="version-title" fxFlex>{{ 'version-control.current' | translate }}</div> <div class="version-title flex-1">{{ 'version-control.current' | translate }}</div>
<div style="width: 58px;"></div> <div style="width: 58px;"></div>
<div class="version-title" fxFlex>{{ versionIdContent() }}</div> <div class="version-title flex-1">{{ versionIdContent() }}</div>
</div> </div>
<mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner> <mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
<div fxFlex [fxShow]="contentReady" class="diff-viewer" #diffViewer></div> <div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
<div class="bottom-panel" *ngIf="contentReady" fxLayoutAlign="end center" fxLayoutGap="8px"> <div class="bottom-panel flex justify-end items-center gap-2" *ngIf="contentReady">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

10
ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
View File

@ -18,7 +18,7 @@
<section *ngIf="!versionLoadResult$"> <section *ngIf="!versionLoadResult$">
<mat-toolbar *ngIf="entityDataInfo"> <mat-toolbar *ngIf="entityDataInfo">
<h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2> <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate" <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="entityDataInfo && (isLoading$ | async)"> *ngIf="entityDataInfo && (isLoading$ | async)">
@ -26,7 +26,7 @@
<mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner> <mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
<form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;"> <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column"> <div class="flex-1 flex flex-col">
<mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;"> <mat-checkbox *ngIf="entityDataInfo.hasCredentials" formControlName="loadCredentials" style="margin-bottom: 16px;">
{{ 'version-control.load-credentials' | translate }} {{ 'version-control.load-credentials' | translate }}
</mat-checkbox> </mat-checkbox>
@ -39,7 +39,7 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
<div *ngIf="entityDataInfo" fxLayoutAlign="end center" fxLayoutGap="8px"> <div *ngIf="entityDataInfo" class="flex justify-end items-center gap-2">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -58,7 +58,7 @@
<section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress"> <section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
<section *ngIf="errorMessage"> <section *ngIf="errorMessage">
<div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div> <div class="mat-headline-6 vc-result-message error" [innerHTML]="errorMessage"></div>
<div fxLayoutAlign="end center" fxLayoutGap="8px"> <div class="flex justify-end items-center gap-2">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"
@ -69,7 +69,7 @@
</section> </section>
</section> </section>
<ng-template #progress> <ng-template #progress>
<section fxLayout="column" fxLayoutAlign="center center"> <section class="flex flex-col justify-center items-center">
<div class="mat-headline-6 vc-result-message progress"> <div class="mat-headline-6 vc-result-message progress">
<span translate>version-control.restoring-entity-version</span> <span translate>version-control.restoring-entity-version</span>
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <mat-progress-bar mode="indeterminate"></mat-progress-bar>

38
ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
View File

@ -15,11 +15,11 @@
limitations under the License. limitations under the License.
--> -->
<div class="mat-padding tb-entity-table tb-absolute-fill" [ngClass]="{'tb-popover-mode': popoverComponent}"> <div class="mat-padding tb-entity-table tb-absolute-fill" [class.tb-popover-mode]="popoverComponent">
<div fxFlex fxLayout="column" class="tb-entity-table-content" [ngClass]="{'tb-outlined-border': !popoverComponent}"> <div class="tb-entity-table-content flex-1 flex flex-col" [class.tb-outlined-border]="!popoverComponent">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs="center start" class="title-container"> <div class="title-container flex flex-row justify-start items-center xs:flex-col xs:justify-center xs:items-start">
<span class="tb-entity-table-title">{{(singleEntityMode ? 'version-control.entity-versions' : 'version-control.versions') | translate}}</span> <span class="tb-entity-table-title">{{(singleEntityMode ? 'version-control.entity-versions' : 'version-control.versions') | translate}}</span>
<tb-branch-autocomplete <tb-branch-autocomplete
#branchAutocompleteComponent #branchAutocompleteComponent
@ -31,8 +31,8 @@
(ngModelChange)="branchChanged($event)"> (ngModelChange)="branchChanged($event)">
</tb-branch-autocomplete> </tb-branch-autocomplete>
</div> </div>
<span fxFlex></span> <span class="flex-1"></span>
<div fxLayout="row" fxLayoutAlign="center center" fxLayout.xs="column" fxLayoutAlign.xs="center end"> <div class="flex flex-row justify-center items-center xs:flex-col xs:justify-center xs:items-end">
<button *ngIf="singleEntityMode" mat-stroked-button color="primary" <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
#createVersionButton #createVersionButton
[disabled]="(isLoading$ | async) || (isReadOnly | async)" [disabled]="(isLoading$ | async) || (isReadOnly | async)"
@ -47,7 +47,7 @@
<mat-icon>update</mat-icon> <mat-icon>update</mat-icon>
{{'version-control.create-entities-version' | translate }} {{'version-control.create-entities-version' | translate }}
</button> </button>
<div fxLayout="row"> <div class="flex flex-row">
<button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()" <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
matTooltip="{{ 'action.refresh' | translate }}" matTooltip="{{ 'action.refresh' | translate }}"
matTooltipPosition="above"> matTooltipPosition="above">
@ -64,14 +64,14 @@
</div> </div>
</div> </div>
</mat-toolbar> </mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode"> <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
<div class="mat-toolbar-tools"> <div class="mat-toolbar-tools">
<button mat-icon-button <button mat-icon-button
matTooltip="{{ 'action.search' | translate }}" matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above"> matTooltipPosition="above">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
<mat-form-field fxFlex> <mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label> <mat-label>&nbsp;</mat-label>
<input #searchInput matInput <input #searchInput matInput
[formControl]="textSearch" [formControl]="textSearch"
@ -84,7 +84,7 @@
</button> </button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<div fxFlex class="table-container"> <div class="table-container flex-1">
<table mat-table [dataSource]="dataSource" <table mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear> matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="timestamp"> <ng-container matColumnDef="timestamp">
@ -124,11 +124,11 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle]="singleEntityMode ? {minWidth: '80px', maxWidth: '80px', width: '80px'} : <mat-header-cell *matHeaderCellDef [class.min-w-20]="singleEntityMode" [class.max-w-20]="singleEntityMode" [class.w-20]="singleEntityMode"
{minWidth: '40px', maxWidth: '40px', width: '40px'}"> [class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
</mat-header-cell> </mat-header-cell>
<mat-cell *matCellDef="let entityVersion"> <mat-cell *matCellDef="let entityVersion">
<div fxFlex fxLayout="row" fxLayoutAlign="end"> <div class="flex-1 flex flex-row justify-end items-stretch">
<button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async" <button *ngIf="singleEntityMode" mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ 'version-control.compare-with-current' | translate }}" matTooltip="{{ 'version-control.compare-with-current' | translate }}"
matTooltipPosition="above" matTooltipPosition="above"
@ -154,18 +154,16 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row [fxShow]="!dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row> <mat-row [class.!hidden]="dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
</table> </table>
<span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading" <span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
fxLayoutAlign="center center" class="no-data-found flex justify-center items-center" translate>{{
class="no-data-found" translate>{{
singleEntityMode singleEntityMode
? 'version-control.no-entity-versions-text' ? 'version-control.no-entity-versions-text'
: 'version-control.no-versions-text' : 'version-control.no-versions-text'
}}</span> }}</span>
<span [fxShow]="dataSource.dataLoading" <span [class.!hidden]="!dataSource.dataLoading"
fxLayoutAlign="center center" class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
class="no-data-found">{{ 'common.loading' | translate }}</span>
</div> </div>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-paginator [length]="dataSource.total() | async" <mat-paginator [length]="dataSource.total() | async"

2
ui-ngx/src/app/modules/home/components/vc/remove-other-entities-confirm.component.html
View File

@ -24,7 +24,7 @@
</mat-form-field> </mat-form-field>
</fieldset> </fieldset>
</form> </form>
<div fxLayoutAlign="end center" fxLayoutGap="8px"> <div class="flex justify-end items-center gap-2">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
[disabled]="(isLoading$ | async)" [disabled]="(isLoading$ | async)"

24
ui-ngx/src/app/modules/home/components/vc/repository-settings.component.html
View File

@ -17,18 +17,18 @@
--> -->
<div style="height: min-content; max-height: 80vh;"> <div style="height: min-content; max-height: 80vh;">
<mat-card appearance="outlined" class="repository-settings" <mat-card appearance="outlined" class="repository-settings"
[ngClass]="{'settings-card': !detailsMode}" [class.settings-card]="!detailsMode"
[ngStyle]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}"> [style]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<span class="mat-headline-5" translate>admin.repository-settings</span> <span class="mat-headline-5" translate>admin.repository-settings</span>
</mat-card-title> </mat-card-title>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="repositorySettings"></div> <div tb-help="repositorySettings"></div>
</mat-card-header> </mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="hideLoadingBar || !(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="hideLoadingBar || (isLoading$ | async) === false"></div>
<mat-card-content style="padding-top: 16px;"> <mat-card-content style="padding-top: 16px;">
<form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()"> <form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
@ -43,7 +43,7 @@
<mat-label translate>admin.default-branch</mat-label> <mat-label translate>admin.default-branch</mat-label>
<input matInput formControlName="defaultBranch"> <input matInput formControlName="defaultBranch">
</mat-form-field> </mat-form-field>
<div fxLayout="column"> <div class="flex flex-col">
<mat-checkbox formControlName="readOnly"> <mat-checkbox formControlName="readOnly">
{{ 'admin.repository-read-only' | translate }} {{ 'admin.repository-read-only' | translate }}
</mat-checkbox> </mat-checkbox>
@ -53,7 +53,7 @@
</div> </div>
<fieldset [disabled]="isLoading$ | async" class="fields-group"> <fieldset [disabled]="isLoading$ | async" class="fields-group">
<legend class="group-title" translate>admin.authentication-settings</legend> <legend class="group-title" translate>admin.authentication-settings</legend>
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>admin.auth-method</mat-label> <mat-label translate>admin.auth-method</mat-label>
<mat-select required formControlName="authMethod"> <mat-select required formControlName="authMethod">
<mat-option *ngFor="let method of repositoryAuthMethods" [value]="method"> <mat-option *ngFor="let method of repositoryAuthMethods" [value]="method">
@ -61,8 +61,8 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.USERNAME_PASSWORD" fxLayout="column"> <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.USERNAME_PASSWORD" class="flex flex-col">
<mat-form-field fxFlex class="mat-block"> <mat-form-field class="mat-block flex-1">
<mat-label translate>common.username</mat-label> <mat-label translate>common.username</mat-label>
<input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}" <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
autocomplete="new-username"/> autocomplete="new-username"/>
@ -79,7 +79,7 @@
<mat-hint [innerHTML] = "'admin.auth-method-username-password-hint' | translate"></mat-hint> <mat-hint [innerHTML] = "'admin.auth-method-username-password-hint' | translate"></mat-hint>
</mat-form-field> </mat-form-field>
</section> </section>
<section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.PRIVATE_KEY" fxLayout="column"> <section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.PRIVATE_KEY" class="flex flex-col">
<tb-file-input [existingFileName]="repositorySettingsForm.get('privateKeyFileName').value" <tb-file-input [existingFileName]="repositorySettingsForm.get('privateKeyFileName').value"
required required
formControlName="privateKey" formControlName="privateKey"
@ -99,12 +99,12 @@
</mat-form-field> </mat-form-field>
</section> </section>
</fieldset> </fieldset>
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px"> <div class="flex flex-row justify-end items-center gap-4 xs:flex-col xs:justify-end xs:items-stretch">
<button mat-raised-button color="warn" type="button" [fxShow]="settings !== null" <button mat-raised-button color="warn" type="button" [class.!hidden]="!settings"
[disabled]="(isLoading$ | async)" (click)="delete(formDirective)"> [disabled]="(isLoading$ | async)" (click)="delete(formDirective)">
{{'action.delete' | translate}} {{'action.delete' | translate}}
</button> </button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-raised-button type="button" <button mat-raised-button type="button"
[disabled]="(isLoading$ | async) || repositorySettingsForm.invalid" (click)="checkAccess()"> [disabled]="(isLoading$ | async) || repositorySettingsForm.invalid" (click)="checkAccess()">
{{'admin.check-access' | translate}} {{'admin.check-access' | translate}}

3
ui-ngx/tailwind.config.js
View File

@ -86,6 +86,9 @@ module.exports = {
gap: { gap: {
'0.75': '0.1875rem' '0.75': '0.1875rem'
}, },
minHeight: {
'19': '4.75rem'
},
minWidth: { minWidth: {
'25': '6.25rem', '25': '6.25rem',
'37.5': '9.375rem' '37.5': '9.375rem'

Write Preview
Loading…
Cancel
Save