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

UI: Widget button color calculations improvements. Improve color picker panel overflow.

Browse Source
This commit is contained in:
Igor Kulikov 2024-02-02 18:27:54 +02:00
parent d7b4565618
commit ba600a8bd8
5 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts
View File

@ -521,7 +521,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, OnChange
this.popoverService.hidePopover(trigger); this.popoverService.hidePopover(trigger);
} else { } else {
const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer, const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer,
this.viewContainerRef, ColorPickerPanelComponent, 'left', true, null, this.viewContainerRef, ColorPickerPanelComponent, ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
{ {
color: key.color color: key.color
}, },

8
ui-ngx/src/app/shared/components/button/widget-button.component.scss
View File

@ -28,19 +28,19 @@ $boxShadowColorEnabled: var(--tb-widget-button-box-shadow-color-enabled, $defaul
$mainColorHovered: var(--tb-widget-button-main-color-hovered, $defaultMainColor); $mainColorHovered: var(--tb-widget-button-main-color-hovered, $defaultMainColor);
$backgroundColorHovered: var(--tb-widget-button-background-color-hovered, $defaultBackgroundColor); $backgroundColorHovered: var(--tb-widget-button-background-color-hovered, $defaultBackgroundColor);
$boxShadowColorHovered: var(--tb-widget-button-box-shadow-color-hovered, $defaultBoxShadowColor); $boxShadowColorHovered: var(--tb-widget-button-box-shadow-color-hovered, $defaultBoxShadowColor);
$mainColorHoveredFilled: var(--tb-widget-button-main-color-hovered-filled, #263BD7); // main.darken(6) $mainColorHoveredFilled: var(--tb-widget-button-main-color-hovered-filled, #3347db); // main.darken(6)
$mainColorPressed: var(--tb-widget-button-main-color-pressed, $defaultMainColor); $mainColorPressed: var(--tb-widget-button-main-color-pressed, $defaultMainColor);
$backgroundColorPressed: var(--tb-widget-button-background-color-pressed, $defaultBackgroundColor); $backgroundColorPressed: var(--tb-widget-button-background-color-pressed, $defaultBackgroundColor);
$boxShadowColorPressed: var(--tb-widget-button-box-shadow-color-pressed, $defaultBoxShadowColor); $boxShadowColorPressed: var(--tb-widget-button-box-shadow-color-pressed, $defaultBoxShadowColor);
$mainColorPressedFilled: var(--tb-widget-button-main-color-pressed-filled, #2234BD); // main.darken(12) $mainColorPressedFilled: var(--tb-widget-button-main-color-pressed-filled, #273cd9); // main.darken(12)
$mainColorPressedRipple: var(--tb-widget-button-main-color-pressed-ripple, rgba(63, 82, 221, 0.1)); // Alpha(Main, 0.1) $mainColorPressedRipple: var(--tb-widget-button-main-color-pressed-ripple, rgba(63, 82, 221, 0.1)); // Alpha(Main, 0.1)
$mainColorPressedRippleFilled: var(--tb-widget-button-main-color-pressed-ripple-filled, #1D2DA3); // main.darken(18) $mainColorPressedRippleFilled: var(--tb-widget-button-main-color-pressed-ripple-filled, #2439cd); // main.darken(18)
$mainColorActivated: var(--tb-widget-button-main-color-activated, $defaultMainColor); $mainColorActivated: var(--tb-widget-button-main-color-activated, $defaultMainColor);
$backgroundColorActivated: var(--tb-widget-button-background-color-activated, $defaultBackgroundColor); $backgroundColorActivated: var(--tb-widget-button-background-color-activated, $defaultBackgroundColor);
$boxShadowColorActivated: var(--tb-widget-button-box-shadow-color-activated, $defaultBoxShadowColor); $boxShadowColorActivated: var(--tb-widget-button-box-shadow-color-activated, $defaultBoxShadowColor);
$mainColorActivatedFilled: var(--tb-widget-button-main-color-activated-filled, #2234BD); // main.darken(12) $mainColorActivatedFilled: var(--tb-widget-button-main-color-activated-filled, #273cd9); // main.darken(12)
$mainColorDisabled: var(--tb-widget-button-main-color-disabled, $defaultMainColorDisabled); $mainColorDisabled: var(--tb-widget-button-main-color-disabled, $defaultMainColorDisabled);
$backgroundColorDisabled: var(--tb-widget-button-background-color-disabled, $defaultBackgroundColorDisabled); $backgroundColorDisabled: var(--tb-widget-button-background-color-disabled, $defaultBackgroundColorDisabled);

22
ui-ngx/src/app/shared/components/button/widget-button.models.ts
View File

@ -20,6 +20,11 @@ import tinycolor from 'tinycolor2';
const defaultMainColor = '#3F52DD'; const defaultMainColor = '#3F52DD';
const defaultBackgroundColor = '#FFFFFF'; const defaultBackgroundColor = '#FFFFFF';
const hoveredFilledDarkenAmount = 6;
const pressedFilledDarkenAmount = 12;
const activatedFilledDarkenAmount = 12;
const pressedRippleFilledDarkenAmount = 18;
export const defaultMainColorDisabled = 'rgba(0, 0, 0, 0.38)'; export const defaultMainColorDisabled = 'rgba(0, 0, 0, 0.38)';
export const defaultBackgroundColorDisabled = 'rgba(0, 0, 0, 0.03)'; export const defaultBackgroundColorDisabled = 'rgba(0, 0, 0, 0.03)';
@ -181,7 +186,7 @@ class HoveredButtonStateCssGenerator extends ButtonStateCssGenerator {
} }
protected generateAdditionalStateCss(mainColor: string): string { protected generateAdditionalStateCss(mainColor: string): string {
const mainColorHoveredFilled = darkenColor(mainColor, 6); const mainColorHoveredFilled = darkenColor(mainColor, hoveredFilledDarkenAmount);
return `--tb-widget-button-main-color-hovered-filled: ${mainColorHoveredFilled};`; return `--tb-widget-button-main-color-hovered-filled: ${mainColorHoveredFilled};`;
} }
} }
@ -193,10 +198,10 @@ class PressedButtonStateCssGenerator extends ButtonStateCssGenerator {
} }
protected generateAdditionalStateCss(mainColor: string): string { protected generateAdditionalStateCss(mainColor: string): string {
const mainColorPressedFilled = darkenColor(mainColor, 12); const mainColorPressedFilled = darkenColor(mainColor, pressedFilledDarkenAmount);
const mainColorInstance = tinycolor(mainColor); const mainColorInstance = tinycolor(mainColor);
const mainColorPressedRipple = mainColorInstance.setAlpha(mainColorInstance.getAlpha() * 0.1).toRgbString(); const mainColorPressedRipple = mainColorInstance.setAlpha(mainColorInstance.getAlpha() * 0.1).toRgbString();
const mainColorPressedRippleFilled = darkenColor(mainColor, 18); const mainColorPressedRippleFilled = darkenColor(mainColor, pressedRippleFilledDarkenAmount);
return `--tb-widget-button-main-color-pressed-filled: ${mainColorPressedFilled};\n`+ return `--tb-widget-button-main-color-pressed-filled: ${mainColorPressedFilled};\n`+
`--tb-widget-button-main-color-pressed-ripple: ${mainColorPressedRipple};\n`+ `--tb-widget-button-main-color-pressed-ripple: ${mainColorPressedRipple};\n`+
`--tb-widget-button-main-color-pressed-ripple-filled: ${mainColorPressedRippleFilled};`; `--tb-widget-button-main-color-pressed-ripple-filled: ${mainColorPressedRippleFilled};`;
@ -210,7 +215,7 @@ class ActivatedButtonStateCssGenerator extends ButtonStateCssGenerator {
} }
protected generateAdditionalStateCss(mainColor: string): string { protected generateAdditionalStateCss(mainColor: string): string {
const mainColorActivatedFilled = darkenColor(mainColor, 12); const mainColorActivatedFilled = darkenColor(mainColor, activatedFilledDarkenAmount);
return `--tb-widget-button-main-color-activated-filled: ${mainColorActivatedFilled};`; return `--tb-widget-button-main-color-activated-filled: ${mainColorActivatedFilled};`;
} }
} }
@ -255,5 +260,12 @@ export const generateWidgetButtonAppearanceCss = (appearance: WidgetButtonAppear
const darkenColor = (inputColor: string, amount: number): string => { const darkenColor = (inputColor: string, amount: number): string => {
const input = tinycolor(inputColor); const input = tinycolor(inputColor);
return input.darken(amount).toRgbString(); const brightness = input.getBrightness() / 255;
let ratio: number;
if (brightness >= 0.4 && brightness <= 0.5) {
ratio = brightness + 0.2;
} else {
ratio = Math.max(0.1, Math.log10(brightness * 8));
}
return input.darken(ratio * amount).toRgbString();
}; };

2
ui-ngx/src/app/shared/components/color-input.component.ts
View File

@ -189,7 +189,7 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
this.popoverService.hidePopover(trigger); this.popoverService.hidePopover(trigger);
} else { } else {
const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer, const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer,
this.viewContainerRef, ColorPickerPanelComponent, 'left', true, null, this.viewContainerRef, ColorPickerPanelComponent, ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
{ {
color: this.colorFormGroup.get('color').value, color: this.colorFormGroup.get('color').value,
colorClearButton: this.colorClearButton colorClearButton: this.colorClearButton

2
ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss
View File

@ -18,9 +18,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
overflow: auto;
.saturation-component { .saturation-component {
height: 238px; height: 238px;
min-height: 80px;
border-radius: 8px; border-radius: 8px;
} }