From ff842d85ce0a57cf984304aac73346614e1ae4f3 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Mon, 15 Aug 2022 12:07:24 +0300 Subject: [PATCH] UI:6371: Layouts sizing design refactoring --- ...ge-dashboard-layouts-dialog.component.html | 226 +++++++++--------- ...ge-dashboard-layouts-dialog.component.scss | 132 ++++++++++ ...nage-dashboard-layouts-dialog.component.ts | 147 ++++++++++-- .../components/dashboard/layout-button.scss | 3 +- .../assets/locale/locale.constant-en_US.json | 9 +- 5 files changed, 381 insertions(+), 136 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index b5074f63b2..fa61d49b66 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -25,131 +25,139 @@ close -
-
+
+
{{ 'layout.divider' | translate }}
-
-
- - -
-
-
- - -
- - {{ 'layout.left-width' | translate }} - + + + {{ 'layout.percentage-width' | translate }} + + + {{ 'layout.fixed-width' | translate }} + + +
+
+
+ + +
+ - - {{ 'layout.left-width-percentage-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 90 } }} - - - {{ 'layout.value-min-error' | translate: { min: 10 } }} - - - - {{ 'layout.right-width' | translate }} - + +
+
+
+ + +
+ - - {{ 'layout.right-width-percentage-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 90 } }} - - - {{ 'layout.value-min-error' | translate: { min: 10 } }} - - + max="90" + required> + +
-
-
-
- - - - {{ 'layout.left' | translate }} - - - {{ 'layout.right' | translate }} - - +
+
+
+ + + + +
+ +
- - {{ 'layout.layout-fixed-width' | translate }} - - - {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }} - - - {{ 'layout.layout-fixed-width-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 1700 } }} - - - {{ 'layout.value-min-error' | translate: { min: 150 } }} - -
- - - {{ 'layout.percentage-width' | translate }} - - - {{ 'layout.fixed-width' | translate }} - -
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss index 9436529bec..0c4a8da175 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -26,6 +26,93 @@ margin-top: -14px; display: block; } + + .tb-layout-preview { + width: 120%; + background-color: rgba(243,246,251,255); + padding: 35px; + + &-container { + width: 75%; + + button.tb-fixed-layout-button { + background-color: transparent; + color: black; + cursor: pointer; + + &:hover { + background-color: lightgrey; + } + } + + div { + transition-duration: 0.5s; + transition-property: max-width; + position: relative; + + .mat-icon-button { + align-self: end; + } + } + + .tb-layout-preview-element { + position: absolute; + z-index: 99; + + .mat-icon { + font-size: 20px; + width: 20px; + height: 20px; + line-height: 20px; + color: rgba(0, 0, 0, 0.38); + + &:hover { + transform: rotate(180deg); + transition: transform 0.5s; + } + } + } + + &-main { + min-width: 25%; + } + + /* remove arrows from input for Chrome, Safari, Edge, Opera */ + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + /* remove arrows from input for Firefox */ + input[type=number] { + -moz-appearance: textfield; + } + + .tb-layout-preview-input { + margin: 80px 0 0; + color: white; + + input { + border: 1px solid lightslategray; + background-color: transparent; + color: white; + border-radius: 4px; + text-align: center; + outline: none; + width: 37px; + height: 28px; + font-size: 14px; + + &:invalid { + outline: 2px solid red; + border: 1px solid transparent; + background-color: rgba(255, 5, 5, 0.2); + } + } + } + } + } } :host ::ng-deep { @@ -37,4 +124,49 @@ } } } + + .mat-button-toggle-group { + width: 100%; + min-width: 354px; + border: 2px solid rgba(0, 0, 0, 0.06); + + .mat-button-toggle-checked { + background: rgba(0, 0, 0, 0.06); + } + + .mat-button-toggle { + border: none !important; + } + } + + /* Make mat-slider tooltip always visible */ + .mat-slider-thumb-label { + transform: rotate(45deg) !important; + border-radius: 50% 50% 0 !important; + } + + .mat-slider-thumb { + transform: scale(0) !important; + } + + .mat-slider-thumb-label-text { + opacity: 1 !important; + } +} + +::ng-deep { + /* Alarm tooltip with side-to-side movement */ + .tb-layout-error-tooltip-right { + background-color: #b71c1c !important; + margin: 5px 0 0 105px; + width: 160px; + text-align: center; + } + + .tb-layout-error-tooltip-main { + background-color: #b71c1c !important; + margin: 5px 105px 0 0; + width: 160px; + text-align: center; + } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 295b01476f..95a91e24c2 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,25 +14,34 @@ /// limitations under the License. /// -import { Component, Inject, SkipSelf } from '@angular/core'; -import { ErrorStateMatcher } from '@angular/material/core'; -import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; -import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; -import { Router } from '@angular/router'; -import { DialogComponent } from '@app/shared/components/dialog.component'; -import { UtilsService } from '@core/services/utils.service'; -import { TranslateService } from '@ngx-translate/core'; -import { DashboardLayoutId, DashboardStateLayouts, LayoutDimension } from '@app/shared/models/dashboard.models'; -import { deepClone, isDefined } from '@core/utils'; -import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; +import {Component, Inject, SkipSelf, ViewChild} from '@angular/core'; +import {ErrorStateMatcher} from '@angular/material/core'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog'; +import {Store} from '@ngrx/store'; +import {AppState} from '@core/core.state'; +import { + AbstractControl, + FormBuilder, + FormControl, + FormGroup, + FormGroupDirective, + NgForm, + Validators +} from '@angular/forms'; +import {Router} from '@angular/router'; +import {DialogComponent} from '@app/shared/components/dialog.component'; +import {UtilsService} from '@core/services/utils.service'; +import {TranslateService} from '@ngx-translate/core'; +import {DashboardLayoutId, DashboardStateLayouts, LayoutDimension} from '@app/shared/models/dashboard.models'; +import {deepClone, isDefined} from '@core/utils'; +import {DashboardUtilsService} from '@core/services/dashboard-utils.service'; import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; -import { Subscription } from 'rxjs'; +import {LayoutWidthType} from '@home/components/dashboard-page/layout/layout.models'; +import {Subscription} from 'rxjs'; +import {MatTooltip} from "@angular/material/tooltip"; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; @@ -47,6 +56,8 @@ export interface ManageDashboardLayoutsDialogData { export class ManageDashboardLayoutsDialogComponent extends DialogComponent implements ErrorStateMatcher { + @ViewChild('tooltip') tooltip: MatTooltip; + layoutsFormGroup: FormGroup; layouts: DashboardStateLayouts; @@ -70,10 +81,12 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value) )); + this.subscriptions.push( + this.layoutsFormGroup.get('sliderFixed').valueChanges + .subscribe( + (value) => { + this.layoutsFormGroup.get('fixedWidth').patchValue(value) + } + )); this.subscriptions.push( this.layoutsFormGroup.get('leftWidthPercentage').valueChanges .subscribe( (value) => { + this.showTooltip(this.layoutsFormGroup.get('leftWidthPercentage'), LayoutWidthType.PERCENTAGE, 'main'); this.layoutControlChange('rightWidthPercentage', value); } )); @@ -148,9 +171,18 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent { + this.showTooltip(this.layoutsFormGroup.get('rightWidthPercentage'), LayoutWidthType.PERCENTAGE, 'right'); this.layoutControlChange('leftWidthPercentage', value); } )); + this.subscriptions.push( + this.layoutsFormGroup.get('fixedWidth').valueChanges + .subscribe( + (value) => { + this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED, this.layoutsFormGroup.get('fixedLayout').value); + this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false}); + } + )); } ngOnDestroy(): void { @@ -224,13 +256,21 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent