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

Flex layout replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-14 13:00:40 +03:00
parent ae8cf7d2e5
commit 7d5235d615
18 changed files with 172 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
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-label translate>admin.queue-name</mat-label>
<input matInput formControlName="name" required>
@ -37,10 +37,10 @@
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="submitStrategy">
<div fxFlex>
<div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="submitStrategy">
<div class="flex-1">
<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">
{{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
<mat-icon
@ -51,7 +51,7 @@
</mat-radio-button>
</mat-radio-group>
</div>
<div fxFlex *ngIf="hideBatchSize">
<div class="flex-1" *ngIf="hideBatchSize">
<label class="group-label" translate>queue.grouping-parameter</label>
<mat-form-field class="mat-block">
<mat-label translate>queue.batch-size</mat-label>
@ -75,10 +75,10 @@
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="processingStrategy">
<div fxFlex>
<div class="flex-1 flex flex-row lt-md:flex-col gap-4" formGroupName="processingStrategy">
<div class="flex-1">
<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">
{{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
<mat-icon
@ -89,7 +89,7 @@
</mat-radio-button>
</mat-radio-group>
</div>
<div fxFlex>
<div class="flex-1">
<label class="group-label" translate>queue.retries-settings</label>
<mat-form-field class="mat-block" subscriptSizing="dynamic">
<mat-label translate>queue.retries</mat-label>
@ -156,11 +156,11 @@
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="column" fxLayoutGap="10px">
<div fxFlex>
<div class="flex-1 flex flex-col gap-2.5">
<div class="flex-1">
<label class="group-label" translate>queue.batch-processing</label>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
<mat-form-field fxFlex class="mat-block">
<div class="flex-1 flex flex-row xs:flex-col gap-2.5">
<mat-form-field class="mat-block flex-1">
<mat-label translate>queue.poll-interval</mat-label>
<input type="number" matInput formControlName="pollInterval" required>
<mat-error *ngIf="queueFormGroup.get('pollInterval').hasError('required')">
@ -171,7 +171,7 @@
{{ 'queue.poll-interval-min-value' | translate }}
</mat-error>
</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>
<input type="number" matInput formControlName="partitions" required>
<mat-error *ngIf="queueFormGroup.get('partitions').hasError('required')">
@ -184,13 +184,13 @@
</mat-form-field>
</div>
</div>
<div fxFlex>
<div class="flex-1">
<label class="group-label" translate>queue.immediate-processing</label>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
<mat-checkbox fxFlex fxFlexAlign.gt-xs="center" formControlName="consumerPerPartition">
<div class="flex-1 flex flex-row xs:flex-col gap-2.5">
<mat-checkbox class="flex-1 gt-xs:flex gt-xs:justify-center gt-xs:items-stretch" formControlName="consumerPerPartition">
{{ 'queue.consumer-per-partition' | translate }}
</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>
<input type="number" matInput formControlName="packProcessingTimeout" required>
<mat-error *ngIf="queueFormGroup.get('packProcessingTimeout').hasError('required')">
@ -208,7 +208,7 @@
</mat-expansion-panel>
</mat-accordion>
<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 }}
</mat-checkbox>
<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;">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar class="flex flex-row" color="primary">
<h2>{{ (isAdd ? 'relation.add' : 'relation.edit' ) | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
(click)="cancel()"
type="button">
@ -51,8 +51,8 @@
</div>
</fieldset>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<div mat-dialog-actions class="flex flex-row">
<span class="flex-1"></span>
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"

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

@ -52,8 +52,8 @@
</button>
</div>
</div>
<div [fxShow]="!relationFiltersFormArray.length">
<span fxLayoutAlign="center center" class="tb-prompt" translate>relation.any-relation</span>
<div [class.!hidden]="relationFiltersFormArray.length">
<span class="tb-prompt flex justify-center items-center" translate>relation.any-relation</span>
</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 fxFlex fxLayout="column" class="tb-entity-table-content tb-outlined-border">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
<div class="tb-entity-table-content tb-outlined-border flex-1 flex flex-col">
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode || !dataSource.selection.isEmpty()">
<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">
{{(direction == directions.FROM ? 'relation.from-relations' : 'relation.to-relations') | translate}}
</span>
@ -33,7 +33,7 @@
</mat-select>
</mat-form-field>
</div>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button [disabled]="isLoading$ | async"
(click)="addRelation($event)"
matTooltip="{{ 'action.add' | translate }}"
@ -52,14 +52,14 @@
</button>
</div>
</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">
<button mat-icon-button
matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
</button>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label>
<input #searchInput matInput
[formControl]="textSearch"
@ -72,8 +72,8 @@
</button>
</div>
</mat-toolbar>
<mat-toolbar class="mat-mdc-table-toolbar" color="primary" [fxShow]="!dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools" fxLayoutAlign="space-between center">
<mat-toolbar class="mat-mdc-table-toolbar" color="primary" [class.!hidden]="dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools flex justify-between items-center">
<span class="tb-entity-table-info">
{{ 'relation.selected-relations' | translate:{count: dataSource.selection.selected.length} }}
</span>
@ -85,7 +85,7 @@
</button>
</div>
</mat-toolbar>
<div fxFlex class="table-container">
<div class="table-container flex-1">
<table mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<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>
<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"
matTooltip="{{ 'relation.edit' | translate }}"
matTooltipPosition="above"
@ -156,14 +156,13 @@
</div>
</mat-cell>
</ng-container>
<mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row [ngClass]="{'mat-row-select': true,
'mat-selected': dataSource.selection.isSelected(relation)}"
<mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row class="mat-row-select"
[class.mat-selected]="dataSource.selection.isSelected(relation)"
*matRowDef="let relation; columns: displayedColumns;" (click)="dataSource.selection.toggle(relation)"></mat-row>
</table>
<span [fxShow]="dataSource.isEmpty() | async"
fxLayoutAlign="center center"
class="no-data-found" translate>{{ 'relation.no-relations-text' }}</span>
<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
class="no-data-found flex justify-center items-center" translate>{{ 'relation.no-relations-text' }}</span>
</div>
<mat-divider></mat-divider>
<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()"
[required]="required"
[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>
{{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
</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;">
<div fxLayout="row wrap" fxLayoutGap="6px">
<mat-form-field fxFlex.lt-sm="100" fxFlex.gt-xs="25" class="mat-block">
<div class="flex flex-row flex-wrap gap-1.5">
<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-select formControlName="protocolVersion">
<mat-option *ngFor="let smppVersion of smppVersions" [value]="smppVersion.value">
@ -25,14 +25,14 @@
</mat-option>
</mat-select>
</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>
<input required matInput formControlName="host">
<mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('host').hasError('required')">
{{'admin.smpp-provider.smpp-host-required' | translate}}
</mat-error>
</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>
<input required matInput type="number" formControlName="port">
<mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('port').hasError('required')">
@ -40,15 +40,15 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row wrap" fxLayoutGap="6px">
<mat-form-field fxFlex class="mat-block">
<div class="flex flex-row flex-wrap gap-1.5">
<mat-form-field class="mat-block flex-1">
<mat-label translate>admin.smpp-provider.system-id</mat-label>
<input required matInput formControlName="systemId">
<mat-error *ngIf="smppSmsProviderConfigurationFormGroup.get('systemId').hasError('required')">
{{'admin.smpp-provider.system-id-required' | translate}}
</mat-error>
</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>
<input required matInput type="password" autocomplete="new-password" formControlName="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>
<span class="mat-headline-5" translate>admin.auto-commit-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="autoCommitSettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -31,19 +31,19 @@
<form [formGroup]="autoCommitSettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
<fieldset class="fields-group" [disabled]="(isLoading$ | async) || (isReadOnly | async)">
<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;
let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
<mat-expansion-panel class="entity-type-config flex-1" [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
<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>
<div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
</div>
</mat-panel-title>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button style="min-width: 40px;"
type="button"
(click)="removeEntityType($index)"
@ -54,10 +54,10 @@
</div>
</mat-expansion-panel-header>
<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>
<div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px">
<div fxLayout="row" fxLayoutGap="16px" fxLayout.xs="column" fxLayoutGap.xs="0px">
<div class="flex flex-col gt-lg:flex-row gt-lg:gap-4">
<div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
<tb-entity-type-select
showLabel
formControlName="entityType"
@ -73,8 +73,8 @@
</tb-branch-autocomplete>
</div>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"
fxLayout.xs="column" fxLayoutAlign.xs="start start" fxLayoutGap.xs="0px" formGroupName="config">
<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"
formGroupName="config">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
{{ 'version-control.export-credentials' | translate }}
</mat-checkbox>
@ -91,17 +91,17 @@
</mat-expansion-panel>
</div>
<div *ngIf="!entityTypesFormGroupArray().length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">admin.no-auto-commit-entities-prompt</span>
<span translate
class="tb-prompt flex justify-center items-center">admin.no-auto-commit-entities-prompt</span>
</div>
<div style="padding-top: 16px;" fxLayout="row">
<div style="padding-top: 16px;" class="flex flex-row">
<button mat-raised-button color="primary"
type="button"
[disabled]="!addEnabled()"
(click)="addEntityType()">
<span translate>version-control.add-entity-type</span>
</button>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-raised-button color="primary"
type="button"
[disabled]="!entityTypesFormGroupArray().length"
@ -112,12 +112,12 @@
</div>
</fieldset>
<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">
<button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
<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" [class.!hidden]="!settings"
[disabled]="(isLoading$ | async) || (isReadOnly | async)" (click)="delete(formDirective)">
{{'action.delete' | translate}}
</button>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || (isReadOnly | async) || autoCommitSettingsForm.invalid || !autoCommitSettingsForm.dirty"
type="submit">{{'action.save' | translate}}
</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.
-->
<section *ngIf="!versionCreateResult$" fxLayout="column" style="height: 100%;">
<section *ngIf="!versionCreateResult$" class="flex flex-col" style="height: 100%;">
<mat-toolbar>
<h2>{{ 'version-control.create-entities-version' | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
</mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async">
</mat-progress-bar>
<form [formGroup]="createVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
<form [formGroup]="createVersionFormGroup" class="flex flex-col" style="flex: 1; padding-top: 16px; overflow: auto;">
<div class="flex flex-col gt-sm:flex-row gt-sm:gap-2">
<tb-branch-autocomplete
fxFlex
class="flex-1"
required
formControlName="branch">
</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>
<input required matInput formControlName="versionName">
<mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@ -52,7 +52,7 @@
formControlName="entityTypes">
</tb-entity-types-version-create>
</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"
type="button"
[disabled]="(isLoading$ | async)"
@ -71,7 +71,7 @@
<section *ngIf="resultMessage">
<div class="mat-headline-6 vc-result-message" [innerHtml]="resultMessage"></div>
</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"
type="button"
[disabled]="(isLoading$ | async)"
@ -80,7 +80,7 @@
</button>
</div>
<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">
<span translate>version-control.creating-version</span>
<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.
-->
<section *ngIf="!versionLoadResult$" fxLayout="column" style="height: 100%;">
<section *ngIf="!versionLoadResult$" class="flex flex-col" style="height: 100%;">
<mat-toolbar>
<h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
</mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async">
</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
formControlName="entityTypes">
</tb-entity-types-version-load>
@ -33,7 +33,7 @@
{{ 'version-control.rollback-on-error' | translate }}
</mat-slide-toggle>
</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"
type="button"
[disabled]="(isLoading$ | async)"
@ -54,7 +54,7 @@
</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 *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"
type="button"
[disabled]="(isLoading$ | async)"
@ -63,7 +63,7 @@
</button>
</div>
<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">
<span translate>version-control.restoring-entities-from-version</span>
<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.
-->
<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>
<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;
let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
<mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
<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>
<div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<div>{{ entityTypeText(entityTypeFormGroup) }}</div>
</div>
</mat-panel-title>
<span fxFlex></span>
<span class="flex-1"></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button"
(click)="removeEntityType($index)"
@ -40,9 +40,9 @@
</button>
</div>
</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>
<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
showLabel
formControlName="entityType"
@ -50,8 +50,8 @@
[filterAllowedEntityTypes]="false"
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
</tb-entity-type-select>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" formGroupName="config">
<mat-form-field fxFlex class="mat-block">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4" formGroupName="config">
<mat-form-field class="mat-block flex-1">
<mat-label translate>version-control.sync-strategy</mat-label>
<mat-select formControlName="syncStrategy">
<mat-option [value]="'default'">
@ -62,7 +62,7 @@
</mat-option>
</mat-select>
</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">
{{ 'version-control.export-credentials' | translate }}
</mat-checkbox>
@ -75,14 +75,14 @@
</div>
</div>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
<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">
<mat-slide-toggle formControlName="allEntities">
{{ 'version-control.all-entities' | translate }}
</mat-slide-toggle>
<tb-entity-list
fxFlex
[fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
class="flex-1"
[class.!hidden]="entityTypeFormGroup.get('config').get('allEntities').value"
[entityType]="entityTypeFormGroup.get('entityType').value"
required
formControlName="entityIds">
@ -92,18 +92,18 @@
</mat-expansion-panel>
</div>
<div *ngIf="!entityTypesFormGroupArray().length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">version-control.no-entities-to-export-prompt</span>
<span translate
class="tb-prompt flex justify-center items-center">version-control.no-entities-to-export-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"
type="button"
[disabled]="!addEnabled()"
(click)="addEntityType()">
<span translate>version-control.add-entity-type</span>
</button>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-raised-button color="primary"
type="button"
[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.
-->
<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>
<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;
let $index = index; last as isLast;"
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
class="flex flex-row justify-start items-center" [class.pb-2]="!isLast">
<mat-expansion-panel class="entity-type-config flex-1" [class.load]="loading" [formGroup]="entityTypeFormGroup"
[expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
<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>
<div fxLayout="row" fxFlex fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<div>{{ entityTypeText(entityTypeFormGroup) }}</div>
</div>
</mat-panel-title>
<span fxFlex></span>
<span class="flex-1"></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button"
(click)="removeEntityType($index)"
@ -40,19 +40,19 @@
</button>
</div>
</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>
<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
fxFlex
class="flex-1"
showLabel
formControlName="entityType"
required
[filterAllowedEntityTypes]="false"
[allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
</tb-entity-type-select>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" formGroupName="config">
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4 xs:gap-2" formGroupName="config">
<div class="flex-1 flex flex-col">
<mat-checkbox #removeOtherEntitiesCheckbox
formControlName="removeOtherEntities"
(change)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup)">
@ -62,7 +62,7 @@
{{ 'version-control.find-existing-entity-by-name' | translate }}
</mat-checkbox>
</div>
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
{{ 'version-control.load-credentials' | translate }}
</mat-checkbox>
@ -79,18 +79,18 @@
</mat-expansion-panel>
</div>
<div *ngIf="!entityTypesFormGroupArray().length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">version-control.no-entities-to-restore-prompt</span>
<span translate
class="tb-prompt flex justify-center items-center">version-control.no-entities-to-restore-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"
type="button"
[disabled]="!addEnabled()"
(click)="addEntityType()">
<span translate>version-control.add-entity-type</span>
</button>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-raised-button color="primary"
type="button"
[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$">
<mat-toolbar>
<h2>{{ 'version-control.create-entity-version' | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
</mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="isLoading$ | async">
</mat-progress-bar>
<form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
<fieldset [disabled]="isLoading$ | async">
<div fxFlex fxLayout="column">
<div class="flex-1 flex flex-col">
<tb-branch-autocomplete
required
formControlName="branch">
</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>
<input required matInput formControlName="versionName">
<mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
@ -50,7 +50,7 @@
</div>
</fieldset>
</form>
<div fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="flex justify-end items-center gap-2">
<button mat-button color="primary"
type="button"
[disabled]="(isLoading$ | async)"
@ -69,7 +69,7 @@
<section *ngIf="(versionCreateResult$ | async)?.done || resultMessage; else progress">
<section *ngIf="resultMessage">
<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"
type="button"
[disabled]="(isLoading$ | async)"
@ -80,7 +80,7 @@
</section>
</section>
<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">
<span translate>version-control.creating-version</span>
<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.
-->
<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)"
[ngStyle]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}"
fxLayout="column">
[style]="isFullscreen || !contentReady ? {} : {height: preferredDiffHeight}">
<mat-toolbar *ngIf="contentReady">
<h2>{{ 'version-control.diff-entity-with-version' | translate: {versionName} }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
matTooltip="{{'version-control.previous-difference' | translate}}"
matTooltipPosition="below"
@ -54,14 +53,14 @@
<mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
</button>
</mat-toolbar>
<div fxLayout="row" *ngIf="contentReady">
<div class="version-title" fxFlex>{{ 'version-control.current' | translate }}</div>
<div class="flex flex-row" *ngIf="contentReady">
<div class="version-title flex-1">{{ 'version-control.current' | translate }}</div>
<div style="width: 58px;"></div>
<div class="version-title" fxFlex>{{ versionIdContent() }}</div>
<div class="version-title flex-1">{{ versionIdContent() }}</div>
</div>
<mat-spinner *ngIf="!contentReady" mode="indeterminate" diameter="80"></mat-spinner>
<div fxFlex [fxShow]="contentReady" class="diff-viewer" #diffViewer></div>
<div class="bottom-panel" *ngIf="contentReady" fxLayoutAlign="end center" fxLayoutGap="8px">
<div [class.!hidden]="!contentReady" class="diff-viewer flex-1" #diffViewer></div>
<div class="bottom-panel flex justify-end items-center gap-2" *ngIf="contentReady">
<button mat-button color="primary"
type="button"
[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$">
<mat-toolbar *ngIf="entityDataInfo">
<h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
</mat-toolbar>
<mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
*ngIf="entityDataInfo && (isLoading$ | async)">
@ -26,7 +26,7 @@
<mat-spinner *ngIf="!entityDataInfo" mode="indeterminate" diameter="80"></mat-spinner>
<form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
<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;">
{{ 'version-control.load-credentials' | translate }}
</mat-checkbox>
@ -39,7 +39,7 @@
</div>
</fieldset>
</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"
type="button"
[disabled]="(isLoading$ | async)"
@ -58,7 +58,7 @@
<section *ngIf="(versionLoadResult$ | async)?.done || errorMessage; else progress">
<section *ngIf="errorMessage">
<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"
type="button"
[disabled]="(isLoading$ | async)"
@ -69,7 +69,7 @@
</section>
</section>
<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">
<span translate>version-control.restoring-entity-version</span>
<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.
-->
<div class="mat-padding tb-entity-table tb-absolute-fill" [ngClass]="{'tb-popover-mode': popoverComponent}">
<div fxFlex fxLayout="column" class="tb-entity-table-content" [ngClass]="{'tb-outlined-border': !popoverComponent}">
<mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="!textSearchMode">
<div class="mat-padding tb-entity-table tb-absolute-fill" [class.tb-popover-mode]="popoverComponent">
<div class="tb-entity-table-content flex-1 flex flex-col" [class.tb-outlined-border]="!popoverComponent">
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
<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>
<tb-branch-autocomplete
#branchAutocompleteComponent
@ -31,8 +31,8 @@
(ngModelChange)="branchChanged($event)">
</tb-branch-autocomplete>
</div>
<span fxFlex></span>
<div fxLayout="row" fxLayoutAlign="center center" fxLayout.xs="column" fxLayoutAlign.xs="center end">
<span class="flex-1"></span>
<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"
#createVersionButton
[disabled]="(isLoading$ | async) || (isReadOnly | async)"
@ -47,7 +47,7 @@
<mat-icon>update</mat-icon>
{{'version-control.create-entities-version' | translate }}
</button>
<div fxLayout="row">
<div class="flex flex-row">
<button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
matTooltip="{{ 'action.refresh' | translate }}"
matTooltipPosition="above">
@ -64,14 +64,14 @@
</div>
</div>
</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">
<button mat-icon-button
matTooltip="{{ 'action.search' | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
</button>
<mat-form-field fxFlex>
<mat-form-field class="flex-1">
<mat-label>&nbsp;</mat-label>
<input #searchInput matInput
[formControl]="textSearch"
@ -84,7 +84,7 @@
</button>
</div>
</mat-toolbar>
<div fxFlex class="table-container">
<div class="table-container flex-1">
<table mat-table [dataSource]="dataSource"
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
<ng-container matColumnDef="timestamp">
@ -124,11 +124,11 @@
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<mat-header-cell *matHeaderCellDef [ngStyle]="singleEntityMode ? {minWidth: '80px', maxWidth: '80px', width: '80px'} :
{minWidth: '40px', maxWidth: '40px', width: '40px'}">
<mat-header-cell *matHeaderCellDef [class.min-w-20]="singleEntityMode" [class.max-w-20]="singleEntityMode" [class.w-20]="singleEntityMode"
[class.min-w-10]="!singleEntityMode" [class.max-w-10]="!singleEntityMode" [class.w-10]="!singleEntityMode">
</mat-header-cell>
<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"
matTooltip="{{ 'version-control.compare-with-current' | translate }}"
matTooltipPosition="above"
@ -154,18 +154,16 @@
</mat-cell>
</ng-container>
<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>
<span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
fxLayoutAlign="center center"
class="no-data-found" translate>{{
<span [class.!hidden]="(isLoading$ | async) || (dataSource.isEmpty() | async) === false || dataSource.dataLoading"
class="no-data-found flex justify-center items-center" translate>{{
singleEntityMode
? 'version-control.no-entity-versions-text'
: 'version-control.no-versions-text'
}}</span>
<span [fxShow]="dataSource.dataLoading"
fxLayoutAlign="center center"
class="no-data-found">{{ 'common.loading' | translate }}</span>
<span [class.!hidden]="!dataSource.dataLoading"
class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
</div>
<mat-divider></mat-divider>
<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>
</fieldset>
</form>
<div fxLayoutAlign="end center" fxLayoutGap="8px">
<div class="flex justify-end items-center gap-2">
<button mat-button color="primary"
type="button"
[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;">
<mat-card appearance="outlined" class="repository-settings"
[ngClass]="{'settings-card': !detailsMode}"
[ngStyle]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
[class.settings-card]="!detailsMode"
[style]="popoverComponent ? {boxShadow: 'none', maxWidth: '100%', minWidth: '100%', width: '800px'} : {}">
<mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.repository-settings</span>
</mat-card-title>
<span fxFlex></span>
<span class="flex-1"></span>
<div tb-help="repositorySettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="!hideLoadingBar && isLoading$ | async">
</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;">
<form [formGroup]="repositorySettingsForm" #formDirective="ngForm" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async">
@ -43,7 +43,7 @@
<mat-label translate>admin.default-branch</mat-label>
<input matInput formControlName="defaultBranch">
</mat-form-field>
<div fxLayout="column">
<div class="flex flex-col">
<mat-checkbox formControlName="readOnly">
{{ 'admin.repository-read-only' | translate }}
</mat-checkbox>
@ -53,7 +53,7 @@
</div>
<fieldset [disabled]="isLoading$ | async" class="fields-group">
<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-select required formControlName="authMethod">
<mat-option *ngFor="let method of repositoryAuthMethods" [value]="method">
@ -61,8 +61,8 @@
</mat-option>
</mat-select>
</mat-form-field>
<section [fxShow]="repositorySettingsForm.get('authMethod').value === repositoryAuthMethod.USERNAME_PASSWORD" fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<section [class.!hidden]="repositorySettingsForm.get('authMethod').value !== repositoryAuthMethod.USERNAME_PASSWORD" class="flex flex-col">
<mat-form-field class="mat-block flex-1">
<mat-label translate>common.username</mat-label>
<input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
autocomplete="new-username"/>
@ -79,7 +79,7 @@
<mat-hint [innerHTML] = "'admin.auth-method-username-password-hint' | translate"></mat-hint>
</mat-form-field>
</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"
required
formControlName="privateKey"
@ -99,12 +99,12 @@
</mat-form-field>
</section>
</fieldset>
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
<button mat-raised-button color="warn" type="button" [fxShow]="settings !== null"
<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" [class.!hidden]="!settings"
[disabled]="(isLoading$ | async)" (click)="delete(formDirective)">
{{'action.delete' | translate}}
</button>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-raised-button type="button"
[disabled]="(isLoading$ | async) || repositorySettingsForm.invalid" (click)="checkAccess()">
{{'admin.check-access' | translate}}

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

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