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

UI: Remove flexLayout in mobile center

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-10-24 16:28:14 +03:00
parent acb4f3edb7
commit 714152ce91
14 changed files with 40 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-dialog.component.html
View File

@ -18,7 +18,7 @@
<form (ngSubmit)="save()" style="width: 850px;max-height: 100vh;display: grid;grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;"> <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh;display: grid;grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;">
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ 'mobile.add-application' | translate }}</h2> <h2>{{ 'mobile.add-application' | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="mobileApplication"></div> <div tb-help="mobileApplication"></div>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
@ -29,10 +29,10 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div *ngIf="!(isLoading$ | async)"></div> <div *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content style="padding: 0"> <div mat-dialog-content class="!p-0">
<tb-mobile-app #mobileAppComponent></tb-mobile-app> <tb-mobile-app #mobileAppComponent></tb-mobile-app>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="justify-end">
<button mat-button color="primary" <button mat-button color="primary"
type="button" type="button"
cdkFocusInitial cdkFocusInitial

8
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.html
View File

@ -15,14 +15,12 @@
limitations under the License. limitations under the License.
--> -->
<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start center"> <div class="flex flex-full items-center justify-between">
<section fxHide fxShow.gt-xs class="tb-entity-title-container"> <section class="flex items-center xs:!hidden">
<div tbTruncateWithTooltip translate>mobile.applications</div> <div tbTruncateWithTooltip translate>mobile.applications</div>
<div tb-help="mobileApplication"></div> <div tb-help="mobileApplication"></div>
</section> </section>
<button mat-stroked-button color="primary" (click)="createMobile($event)"> <button mat-stroked-button color="primary" (click)="createMobile($event)">
<div fxLayout="row" fxLayoutAlign="start center"> <mat-icon>add</mat-icon>{{ 'mobile.add-application' | translate }}
<mat-icon>add</mat-icon>{{ 'mobile.add-application' | translate }}
</div>
</button> </button>
</div> </div>

5
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.scss
View File

@ -15,9 +15,4 @@
*/ */
:host{ :host{
width: 100000px; width: 100000px;
.tb-entity-title-container {
display: flex;
align-items: center;
}
} }

14
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<section class="mat-padding" [formGroup]="entityForm" fxLayout="column"> <section class="mat-padding flex flex-col" [formGroup]="entityForm">
<mat-form-field appearance="outline" subscriptSizing="dynamic"> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label translate>mobile.mobile-package</mat-label> <mat-label translate>mobile.mobile-package</mat-label>
<input matInput required formControlName="pkgName"> <input matInput required formControlName="pkgName">
@ -82,9 +82,9 @@
</mat-form-field> </mat-form-field>
<section class="tb-form-panel stroked no-padding-bottom" formGroupName="versionInfo" style="margin-bottom: 21px;"> <section class="tb-form-panel stroked no-padding-bottom" formGroupName="versionInfo" style="margin-bottom: 21px;">
<div class="tb-form-panel-title" translate>mobile.version-information</div> <div class="tb-form-panel-title" translate>mobile.version-information</div>
<section fxLayout="column"> <section class="flex flex-col">
<section fxLayout="row" fxLayoutAlign="start start"> <section class="flex flex-row">
<mat-form-field fxFlex appearance="outline"> <mat-form-field class="flex-1" appearance="outline">
<mat-label translate>mobile.min-version</mat-label> <mat-label translate>mobile.min-version</mat-label>
<input matInput formControlName="minVersion"> <input matInput formControlName="minVersion">
</mat-form-field> </mat-form-field>
@ -98,8 +98,8 @@
<tb-icon>mdi:text-box-edit</tb-icon> <tb-icon>mdi:text-box-edit</tb-icon>
</button> </button>
</section> </section>
<section fxLayout="row" fxLayoutAlign="start start"> <section class="flex flex-row">
<mat-form-field fxFlex appearance="outline"> <mat-form-field class="flex-1" appearance="outline">
<mat-label translate>mobile.latest-version</mat-label> <mat-label translate>mobile.latest-version</mat-label>
<input matInput formControlName="latestVersion"> <input matInput formControlName="latestVersion">
</mat-form-field> </mat-form-field>
@ -117,7 +117,7 @@
</section> </section>
<section class="tb-form-panel stroked no-padding-bottom" formGroupName="storeInfo"> <section class="tb-form-panel stroked no-padding-bottom" formGroupName="storeInfo">
<div class="tb-form-panel-title" translate>mobile.store-information</div> <div class="tb-form-panel-title" translate>mobile.store-information</div>
<section fxLayout="column"> <section class="flex flex-col">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>{{ <mat-label>{{
(entityForm.get('platformType').value === PlatformType.ANDROID ? 'mobile.google-play-link' : 'mobile.app-store-link') | translate (entityForm.get('platformType').value === PlatformType.ANDROID ? 'mobile.google-play-link' : 'mobile.app-store-link') | translate

7
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/add-mobile-page-dialog.component.html
View File

@ -15,20 +15,19 @@
limitations under the License. limitations under the License.
--> -->
<mat-toolbar color="primary"> <mat-toolbar color="primary" class="justify-between">
<h2 translate>mobile.add-specific-page</h2> <h2 translate>mobile.add-specific-page</h2>
<span fxFlex></span>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
type="button"> type="button">
<mat-icon class="material-icons">close</mat-icon> <mat-icon class="material-icons">close</mat-icon>
</button> </button>
</mat-toolbar> </mat-toolbar>
<div mat-dialog-content fxLayout="column"> <div mat-dialog-content>
<tb-mobile-page-item [formControl]="customMobilePage"> <tb-mobile-page-item [formControl]="customMobilePage">
</tb-mobile-page-item> </tb-mobile-page-item>
</div> </div>
<div mat-dialog-actions fxLayoutAlign="end center"> <div mat-dialog-actions class="justify-end">
<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/pages/mobile/bundes/layout/custom-mobile-page.component.html
View File

@ -21,13 +21,13 @@
{{ 'mobile.visible' | translate }} {{ 'mobile.visible' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center"> <div class="flex items-center justify-center gap-2">
<tb-material-icon-select asBoxInput <tb-material-icon-select asBoxInput
required required
color="#305680" color="#305680"
formControlName="icon"> formControlName="icon">
</tb-material-icon-select> </tb-material-icon-select>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>mobile.page-name</mat-label> <mat-label translate>mobile.page-name</mat-label>
<input required matInput formControlName="label"> <input required matInput formControlName="label">
</mat-form-field> </mat-form-field>
@ -41,7 +41,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.DASHBOARD"> <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.DASHBOARD">
<tb-dashboard-autocomplete fxFlex <tb-dashboard-autocomplete class="flex-1"
formControlName="dashboardId" formControlName="dashboardId"
required required
label="{{ 'dashboard.dashboard' | translate }}" label="{{ 'dashboard.dashboard' | translate }}"
@ -54,13 +54,13 @@
></tb-dashboard-autocomplete> ></tb-dashboard-autocomplete>
</ng-container> </ng-container>
<ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.WEB_VIEW"> <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.WEB_VIEW">
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>mobile.url</mat-label> <mat-label translate>mobile.url</mat-label>
<input required matInput formControlName="url"> <input required matInput formControlName="url">
</mat-form-field> </mat-form-field>
</ng-container> </ng-container>
<ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.CUSTOM"> <ng-container *ngIf="customMobilePageForm.get('type').value === MobilePageType.CUSTOM">
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
<mat-label translate>mobile.path</mat-label> <mat-label translate>mobile.path</mat-label>
<input required matInput formControlName="path"> <input required matInput formControlName="path">
</mat-form-field> </mat-form-field>

4
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.html
View File

@ -35,12 +35,12 @@
{{ 'mobile.visible' | translate }} {{ 'mobile.visible' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center center"> <div class="flex items-center justify-center gap-2">
<tb-material-icon-select asBoxInput <tb-material-icon-select asBoxInput
color="#305680" color="#305680"
formControlName="icon"> formControlName="icon">
</tb-material-icon-select> </tb-material-icon-select>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" floatLabel="always"> <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic" floatLabel="always">
<mat-label translate>mobile.page-name</mat-label> <mat-label translate>mobile.page-name</mat-label>
<input matInput formControlName="label" placeholder="{{ defaultItemName }}"> <input matInput formControlName="label" placeholder="{{ defaultItemName }}">
</mat-form-field> </mat-form-field>

16
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-layout.component.html
View File

@ -16,21 +16,19 @@
--> -->
<div class="mobile-layout-container"> <div class="mobile-layout-container">
<div class="header"> <div class="header flex items-center gap-2">
<div class="title-section"> <div class="title-section">
<span tbTruncateWithTooltip class="title-container" translate>mobile.pages</span> <span tbTruncateWithTooltip class="title-container" translate>mobile.pages</span>
</div> </div>
<span fxFlex></span> <span class="flex-1"></span>
<button *ngIf="!readonly" class="tb-mobile-layout-button" <button *ngIf="!readonly" class="tb-mobile-layout-button lt-lg:!hidden"
fxHide.lt-lg
mat-stroked-button mat-stroked-button
color="primary" color="primary"
(click)="hideAll()"> (click)="hideAll()">
<tb-icon matButtonIcon>visibility_off</tb-icon> <tb-icon matButtonIcon>visibility_off</tb-icon>
<div tbTruncateWithTooltip>{{ 'mobile.hide-all-pages' | translate }}</div> <div tbTruncateWithTooltip>{{ 'mobile.hide-all-pages' | translate }}</div>
</button> </button>
<button *ngIf="!readonly" class="tb-mobile-layout-button" <button *ngIf="!readonly" class="tb-mobile-layout-button lt-lg:!hidden"
fxHide.lt-lg
mat-stroked-button mat-stroked-button
color="primary" color="primary"
(click)="resetToDefault()"> (click)="resetToDefault()">
@ -38,20 +36,18 @@
<div tbTruncateWithTooltip>{{ 'mobile.reset-to-default-pages' | translate }}</div> <div tbTruncateWithTooltip>{{ 'mobile.reset-to-default-pages' | translate }}</div>
</button> </button>
<button *ngIf="!readonly" <button *ngIf="!readonly"
fxHide.gt-md
type="button" type="button"
mat-stroked-button mat-stroked-button
class="tb-box-button" class="tb-box-button gt-md:!hidden"
matTooltip="{{ 'mobile.hide-all-pages' | translate }}" matTooltip="{{ 'mobile.hide-all-pages' | translate }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="hideAll()"> (click)="hideAll()">
<tb-icon color="primary" matButtonIcon>visibility_off</tb-icon> <tb-icon color="primary" matButtonIcon>visibility_off</tb-icon>
</button> </button>
<button *ngIf="!readonly" <button *ngIf="!readonly"
fxHide.gt-md
type="button" type="button"
mat-stroked-button mat-stroked-button
class="tb-box-button" class="tb-box-button gt-md:!hidden"
matTooltip="{{ 'mobile.reset-to-default-pages' | translate }}" matTooltip="{{ 'mobile.reset-to-default-pages' | translate }}"
matTooltipPosition="above" matTooltipPosition="above"
(click)="resetToDefault()"> (click)="resetToDefault()">

6
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-layout.component.scss
View File

@ -23,12 +23,6 @@
flex-direction: column; flex-direction: column;
.header { .header {
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
.title-section { .title-section {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

6
ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.html
View File

@ -31,8 +31,8 @@
<div tbTruncateWithTooltip> {{ itemName }} </div> <div tbTruncateWithTooltip> {{ itemName }} </div>
</div> </div>
</div> </div>
<div fxHide.xs class="tb-mobile-page-item-input-block"> <div class="tb-mobile-page-item-input-block xs:!hidden">
<mat-form-field class="flex tb-suffix-absolute" appearance="outline" subscriptSizing="dynamic"> <mat-form-field class="tb-suffix-absolute flex" appearance="outline" subscriptSizing="dynamic">
<input matInput [required]="isCustomMenuItem" formControlName="label" placeholder="{{ itemNamePlaceholder }}"> <input matInput [required]="isCustomMenuItem" formControlName="label" placeholder="{{ itemNamePlaceholder }}">
<mat-icon matSuffix <mat-icon matSuffix
matTooltipPosition="above" matTooltipPosition="above"
@ -44,7 +44,7 @@
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="isCustomMenuItem" <mat-form-field *ngIf="isCustomMenuItem"
class="flex tb-mobile-page-item-info" appearance="outline" subscriptSizing="dynamic"> class="tb-mobile-page-item-info flex" appearance="outline" subscriptSizing="dynamic">
<input matInput readonly [placeholder]="itemInfo"> <input matInput readonly [placeholder]="itemInfo">
</mat-form-field> </mat-form-field>
</div> </div>

8
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.html
View File

@ -17,7 +17,7 @@
--> -->
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<h2>{{ dialogTitle | translate }}</h2> <h2>{{ dialogTitle | translate }}</h2>
<span fxFlex></span> <span class="flex-1"></span>
<div tb-help="ruleNotifications"></div> <div tb-help="ruleNotifications"></div>
<button mat-icon-button <button mat-icon-button
(click)="cancel()" (click)="cancel()"
@ -28,7 +28,7 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div *ngIf="!(isLoading$ | async)"></div> <div *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content ngStyle.xs="padding: 0;"> <div mat-dialog-content class="xs:!p-0">
<mat-horizontal-stepper [linear]="true" labelPosition="end" #addMobileBundle [orientation]="(stepperOrientation | async)" <mat-horizontal-stepper [linear]="true" labelPosition="end" #addMobileBundle [orientation]="(stepperOrientation | async)"
(selectionChange)="changeStep($event)"> (selectionChange)="changeStep($event)">
<ng-template matStepperIcon="edit"> <ng-template matStepperIcon="edit">
@ -99,10 +99,10 @@
</mat-step> </mat-step>
</mat-horizontal-stepper> </mat-horizontal-stepper>
</div> </div>
<div mat-dialog-actions fxLayout="row"> <div mat-dialog-actions>
<button mat-stroked-button *ngIf="selectedIndex > 0" <button mat-stroked-button *ngIf="selectedIndex > 0"
(click)="backStep()">{{ 'action.back' | translate }}</button> (click)="backStep()">{{ 'action.back' | translate }}</button>
<span fxFlex></span> <span class="flex-1"></span>
<button mat-raised-button <button mat-raised-button
color="primary" color="primary"
(click)="nextStep()">{{ nextStepLabel() | translate }}</button> (click)="nextStep()">{{ nextStepLabel() | translate }}</button>

8
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.html
View File

@ -15,14 +15,12 @@
limitations under the License. limitations under the License.
--> -->
<div fxFlex="100" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutAlign.xs="start center"> <div class="flex flex-full items-center justify-between">
<section fxHide fxShow.gt-xs class="tb-entity-title-container"> <section class="flex items-center xs:!hidden">
<div tbTruncateWithTooltip translate>mobile.bundles</div> <div tbTruncateWithTooltip translate>mobile.bundles</div>
<div tb-help="oauth2Settings"></div> <div tb-help="oauth2Settings"></div>
</section> </section>
<button mat-stroked-button color="primary" (click)="createBundle($event)"> <button mat-stroked-button color="primary" (click)="createBundle($event)">
<div fxLayout="row" fxLayoutAlign="start center"> <mat-icon>add</mat-icon>{{ 'mobile.add-bundle' | translate }}
<mat-icon>add</mat-icon>{{ 'mobile.add-bundle' | translate }}
</div>
</button> </button>
</div> </div>

5
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.scss
View File

@ -15,9 +15,4 @@
*/ */
:host{ :host{
width: 100000px; width: 100000px;
.tb-entity-title-container {
display: flex;
align-items: center;
}
} }

2
ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html
View File

@ -37,7 +37,7 @@
<div class="tb-form-row column-xs" *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value"> <div class="tb-form-row column-xs" *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value">
<div class="fixed-title-width-230">{{ 'mobile.bundle' | translate }}</div> <div class="fixed-title-width-230">{{ 'mobile.bundle' | translate }}</div>
<tb-entity-autocomplete <tb-entity-autocomplete
fxFlex class="flex-1"
useFullEntityId useFullEntityId
appearance="outline" appearance="outline"
subscriptSizing="dynamic" subscriptSizing="dynamic"