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

UI: Refactoring segmented button

pull/12142/head
Artem Dzhereleiko 2 years ago
parent
244bb8cd1e
commit
68bc840dbd
14 changed files with 56 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      application/src/main/data/json/system/widget_bundles/buttons.json
  2. 2
      application/src/main/data/json/system/widget_bundles/control_widgets.json
  3. 16
      application/src/main/data/json/system/widget_types/two_segment_button.json
  4. 24
      ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
  5. 2
      ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts
  6. 2
      ui-ngx/src/app/modules/home/components/widget/lib/button/segmented-button-widget.models.ts
  7. 0
      ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.html
  8. 0
      ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.scss
  9. 8
      ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.ts
  10. 22
      ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
  11. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts
  12. 6
      ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
  13. 4
      ui-ngx/src/app/shared/shared.module.ts
  14. 22
      ui-ngx/src/assets/locale/locale.constant-en_US.json

2
application/src/main/data/json/system/widget_bundles/buttons.json
View File

@ -11,7 +11,7 @@
"action_button",
"command_button",
"toggle_button",
"segmented_button",
"two_segment_button",
"power_button"
]
}

2
application/src/main/data/json/system/widget_bundles/control_widgets.json
View File

@ -11,7 +11,7 @@
"single_switch",
"command_button",
"toggle_button",
"segmented_button",
"two_segment_button",
"power_button",
"slider",
"control_widgets.switch_control",

16
application/src/main/data/json/system/widget_types/segmented_button.json → application/src/main/data/json/system/widget_types/two_segment_button.json
View File

File diff suppressed because one or more lines are too long

24
ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.html
View File

@ -27,12 +27,12 @@
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.initial-state-hint' | translate}}" translate>widgets.button-state.initial-state</div>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.selected-state-hint' | translate}}" translate>widgets.button-state.selected-state</div>
<tb-get-value-action-settings class="flex-1"
panelTitle="{{ 'widgets.button-state.initial-state' | translate }}"
panelTitle="{{ 'widgets.button-state.selected-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="{{ 'widgets.button-state.left' | translate }}"
falseLabel="{{ 'widgets.button-state.right' | translate }}"
trueLabel="{{ 'widgets.button-state.first' | translate }}"
falseLabel="{{ 'widgets.button-state.second' | translate }}"
stateLabel="{{ 'widgets.button-state.initial' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
@ -41,18 +41,18 @@
</div>
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.button-click-hint' | translate}}" translate>widgets.action-button.left-button-click</div>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.button-click-hint' | translate}}" translate>widgets.action-button.first-button-click</div>
<tb-widget-action-settings class="flex-1"
panelTitle="{{ 'widgets.action-button.left-button-click' | translate }}"
panelTitle="{{ 'widgets.action-button.first-button-click' | translate }}"
[callbacks]="callbacks"
[widgetType]="widgetType"
formControlName="leftButtonClick">
</tb-widget-action-settings>
</div>
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.button-click-hint' | translate}}" translate>widgets.action-button.right-button-click</div>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.button-click-hint' | translate}}" translate>widgets.action-button.second-button-click</div>
<tb-widget-action-settings class="flex-1"
panelTitle="{{ 'widgets.action-button.right-button-click' | translate }}"
panelTitle="{{ 'widgets.action-button.second-button-click' | translate }}"
[callbacks]="callbacks"
[widgetType]="widgetType"
formControlName="rightButtonClick">
@ -110,11 +110,11 @@
<div class="flex flex-row items-center justify-between">
<div class="tb-form-panel-title" translate>widgets.segmented-button.button-appearance</div>
<tb-toggle-select [(ngModel)]="segmentedButtonAppearanceType" [ngModelOptions]="{standalone: true}">
<tb-toggle-option value="left">{{ 'widgets.segmented-button.left' | translate }}</tb-toggle-option>
<tb-toggle-option value="right">{{ 'widgets.segmented-button.right' | translate }}</tb-toggle-option>
<tb-toggle-option value="first">{{ 'widgets.segmented-button.first' | translate }}</tb-toggle-option>
<tb-toggle-option value="second">{{ 'widgets.segmented-button.second' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>
<div class="tb-form-panel no-border no-padding" formGroupName="leftAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'left'">
<div class="tb-form-panel no-border no-padding" formGroupName="leftAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'first'">
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
{{ 'widgets.button.label' | translate }}
@ -145,7 +145,7 @@
</div>
</div>
<div class="tb-form-panel no-border no-padding" formGroupName="rightAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'right'">
<div class="tb-form-panel no-border no-padding" formGroupName="rightAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'second'">
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
{{ 'widgets.button.label' | translate }}

2
ui-ngx/src/app/modules/home/components/widget/config/basic/button/segmented-button-basic-config.component.ts
View File

@ -49,7 +49,7 @@ export class SegmentedButtonBasicConfigComponent extends BasicWidgetConfigCompon
return getTargetDeviceFromDatasources(datasources);
}
segmentedButtonAppearanceType: SegmentedButtonAppearanceType = 'left';
segmentedButtonAppearanceType: SegmentedButtonAppearanceType = 'first';
segmentedButtonColorStylesType: SegmentedButtonColorStylesType = 'selected';
widgetButtonToggleStates = Object.keys(WidgetButtonToggleState) as WidgetButtonToggleState[];

2
ui-ngx/src/app/modules/home/components/widget/lib/button/segmented-button-widget.models.ts
View File

@ -32,7 +32,7 @@ export enum SegmentedButtonLayout {
rounded = 'rounded'
}
export type SegmentedButtonAppearanceType = 'left' | 'right';
export type SegmentedButtonAppearanceType = 'first' | 'second';
export type SegmentedButtonColorStylesType = 'selected' | 'unselected';
export const segmentedButtonLayouts = Object.keys(SegmentedButtonLayout) as SegmentedButtonLayout[];

0
ui-ngx/src/app/modules/home/components/widget/lib/button/segmented-button-widget.component.html → ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.html
View File

0
ui-ngx/src/app/modules/home/components/widget/lib/button/segmented-button-widget.component.scss → ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.scss
View File

8
ui-ngx/src/app/modules/home/components/widget/lib/button/segmented-button-widget.component.ts → ui-ngx/src/app/modules/home/components/widget/lib/button/two-segment-button-widget.component.ts
View File

@ -28,12 +28,12 @@ import { ComponentStyle } from '@shared/models/widget-settings.models';
import { MatButtonToggleChange } from '@angular/material/button-toggle';
@Component({
selector: 'tb-segmented-button-widget',
templateUrl: './segmented-button-widget.component.html',
styleUrls: ['../action/action-widget.scss', './segmented-button-widget.component.scss'],
selector: 'tb-two-segment-button-widget',
templateUrl: './two-segment-button-widget.component.html',
styleUrls: ['../action/action-widget.scss', './two-segment-button-widget.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class SegmentedButtonWidgetComponent extends
export class TwoSegmentButtonWidgetComponent extends
BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy {
settings: SegmentedButtonWidgetSettings;

22
ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.html
View File

@ -19,11 +19,11 @@
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.initial-state-hint' | translate}}" translate>widgets.button-state.initial-state</div>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.selected-state-hint' | translate}}" translate>widgets.button-state.selected-state</div>
<tb-get-value-action-settings class="flex-1"
panelTitle="{{ 'widgets.button-state.initial-state' | translate }}"
panelTitle="{{ 'widgets.button-state.selected-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="{{ 'widgets.button-state.left' | translate }}"
trueLabel="{{ 'widgets.button-state.first' | translate }}"
falseLabel="{{ 'widgets.button-state.right' | translate }}"
stateLabel="{{ 'widgets.button-state.initial' | translate }}"
[aliasController]="aliasController"
@ -33,18 +33,18 @@
</div>
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.left-button-click-hint' | translate}}" translate>widgets.action-button.left-button-click</div>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.first-button-click-hint' | translate}}" translate>widgets.action-button.first-button-click</div>
<tb-widget-action-settings class="flex-1"
panelTitle="{{ 'widgets.action-button.left-button-click' | translate }}"
panelTitle="{{ 'widgets.action-button.first-button-click' | translate }}"
[callbacks]="callbacks"
[widgetType]="widgetType"
formControlName="leftButtonClick">
</tb-widget-action-settings>
</div>
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.right-button-click-hint' | translate}}" translate>widgets.action-button.right-button-click</div>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.right-button-click-hint' | translate}}" translate>widgets.action-button.second-button-click</div>
<tb-widget-action-settings class="flex-1"
panelTitle="{{ 'widgets.action-button.right-button-click' | translate }}"
panelTitle="{{ 'widgets.action-button.second-button-click' | translate }}"
[callbacks]="callbacks"
[widgetType]="widgetType"
formControlName="rightButtonClick">
@ -102,11 +102,11 @@
<div class="flex flex-row items-center justify-between">
<div class="tb-form-panel-title" translate>widgets.segmented-button.button-appearance</div>
<tb-toggle-select [(ngModel)]="segmentedButtonAppearanceType" [ngModelOptions]="{standalone: true}">
<tb-toggle-option value="left">{{ 'widgets.segmented-button.left' | translate }}</tb-toggle-option>
<tb-toggle-option value="right">{{ 'widgets.segmented-button.right' | translate }}</tb-toggle-option>
<tb-toggle-option value="first">{{ 'widgets.segmented-button.first' | translate }}</tb-toggle-option>
<tb-toggle-option value="second">{{ 'widgets.segmented-button.second' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>
<div class="tb-form-panel no-border no-padding" formGroupName="leftAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'left'">
<div class="tb-form-panel no-border no-padding" formGroupName="leftAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'first'">
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
{{ 'widgets.button.label' | translate }}
@ -137,7 +137,7 @@
</div>
</div>
<div class="tb-form-panel no-border no-padding" formGroupName="rightAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'right'">
<div class="tb-form-panel no-border no-padding" formGroupName="rightAppearance" [class.!hidden]="segmentedButtonAppearanceType !== 'second'">
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
{{ 'widgets.button.label' | translate }}

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/button/segmented-button-widget-settings.component.ts
View File

@ -52,7 +52,7 @@ export class SegmentedButtonWidgetSettingsComponent extends WidgetSettingsCompon
return this.segmentedButtonLayoutBorderMap.get(this.segmentedButtonWidgetSettingsForm.get('appearance.layout').value);
}
segmentedButtonAppearanceType: SegmentedButtonAppearanceType = 'left';
segmentedButtonAppearanceType: SegmentedButtonAppearanceType = 'first';
segmentedButtonColorStylesType: SegmentedButtonColorStylesType = 'selected';
widgetButtonToggleStates = Object.keys(WidgetButtonToggleState) as WidgetButtonToggleState[];

6
ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
View File

@ -87,7 +87,7 @@ import {
} from '@home/components/widget/lib/cards/notification-type-filter-panel.component';
import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive';
import { ScadaSymbolWidgetComponent } from '@home/components/widget/lib/scada/scada-symbol-widget.component';
import { SegmentedButtonWidgetComponent } from '@home/components/widget/lib/button/segmented-button-widget.component';
import { TwoSegmentButtonWidgetComponent } from '@home/components/widget/lib/button/two-segment-button-widget.component';
@NgModule({
declarations: [
@ -125,7 +125,7 @@ import { SegmentedButtonWidgetComponent } from '@home/components/widget/lib/butt
BarChartWithLabelsWidgetComponent,
SingleSwitchWidgetComponent,
ActionButtonWidgetComponent,
SegmentedButtonWidgetComponent,
TwoSegmentButtonWidgetComponent,
CommandButtonWidgetComponent,
PowerButtonWidgetComponent,
SliderWidgetComponent,
@ -187,7 +187,7 @@ import { SegmentedButtonWidgetComponent } from '@home/components/widget/lib/butt
BarChartWithLabelsWidgetComponent,
SingleSwitchWidgetComponent,
ActionButtonWidgetComponent,
SegmentedButtonWidgetComponent,
TwoSegmentButtonWidgetComponent,
CommandButtonWidgetComponent,
PowerButtonWidgetComponent,
SliderWidgetComponent,

4
ui-ngx/src/app/shared/shared.module.ts
View File

@ -384,6 +384,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
WidgetsBundleSearchComponent,
CopyButtonComponent,
TogglePasswordComponent,
WidgetButtonToggleComponent,
ProtobufContentComponent,
BranchAutocompleteComponent,
CountryAutocompleteComponent,
@ -420,7 +421,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
EmbedImageDialogComponent,
ImageGalleryDialogComponent,
WidgetButtonComponent,
WidgetButtonToggleComponent,
HexInputComponent,
ScadaSymbolInputComponent
],
@ -642,6 +642,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
WidgetsBundleSearchComponent,
CopyButtonComponent,
TogglePasswordComponent,
WidgetButtonToggleComponent,
ProtobufContentComponent,
BranchAutocompleteComponent,
CountryAutocompleteComponent,
@ -678,7 +679,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
EmbedImageDialogComponent,
ImageGalleryDialogComponent,
WidgetButtonComponent,
WidgetButtonToggleComponent,
ScadaSymbolInputComponent
]
})

22
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -5622,10 +5622,10 @@
"behavior": "Behavior",
"on-click": "On click",
"on-click-hint": "Action triggered when the button is clicked",
"left-button-click": "Left button click",
"left-button-click-hint": "Action while pressing on left button.",
"right-button-click": "Right button click",
"right-button-click-hint": "Action while pressing on right button.",
"first-button-click": "First button click",
"first-button-click-hint": "Action while pressing on first button.",
"second-button-click": "Second button click",
"second-button-click-hint": "Action while pressing on second button.",
"button-click-hint": "Action while pressing on widget."
},
"command-button": {
@ -5677,8 +5677,8 @@
"layout-rounded": "Rounded",
"card-border": "Card border",
"button-appearance": "Button appearance",
"left": "Left",
"right": "Right",
"first": "First",
"second": "Second",
"color-styles": "Color styles",
"selected": "Selected",
"unselected": "Unselected"
@ -5710,16 +5710,16 @@
"activated-state-hint": "Configure condition under which the button is active.",
"disabled-state": "Disabled state",
"disabled-state-hint": "Configure condition under which the button is disabled.",
"initial-state": "Initial button",
"initial-state-hint": "Action to get the initial state of the component",
"selected-state": "Select button",
"selected-state-hint": "Configure condition under which the button is select.",
"enabled": "Enabled",
"hovered": "Hovered",
"pressed": "Pressed",
"activated": "Activated",
"disabled": "Disabled",
"initial": "Left button",
"left": "Left",
"right": "Right"
"initial": "First button",
"first": "First",
"second": "Second"
},
"background": {
"background": "Background",

Write Preview
Loading…
Cancel
Save