From ba600a8bd88d2ad3fdef71a0065497573909f781 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 2 Feb 2024 18:27:54 +0200 Subject: [PATCH] UI: Widget button color calculations improvements. Improve color picker panel overflow. --- .../widget/config/data-keys.component.ts | 2 +- .../button/widget-button.component.scss | 8 +++---- .../components/button/widget-button.models.ts | 22 ++++++++++++++----- .../components/color-input.component.ts | 2 +- .../color-picker/color-picker.component.scss | 2 ++ 5 files changed, 25 insertions(+), 11 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts index 63647fc604..800c831b67 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts @@ -521,7 +521,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, OnChange this.popoverService.hidePopover(trigger); } else { 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 }, diff --git a/ui-ngx/src/app/shared/components/button/widget-button.component.scss b/ui-ngx/src/app/shared/components/button/widget-button.component.scss index 06c875de7f..546a3bed19 100644 --- a/ui-ngx/src/app/shared/components/button/widget-button.component.scss +++ b/ui-ngx/src/app/shared/components/button/widget-button.component.scss @@ -28,19 +28,19 @@ $boxShadowColorEnabled: var(--tb-widget-button-box-shadow-color-enabled, $defaul $mainColorHovered: var(--tb-widget-button-main-color-hovered, $defaultMainColor); $backgroundColorHovered: var(--tb-widget-button-background-color-hovered, $defaultBackgroundColor); $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); $backgroundColorPressed: var(--tb-widget-button-background-color-pressed, $defaultBackgroundColor); $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) -$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); $backgroundColorActivated: var(--tb-widget-button-background-color-activated, $defaultBackgroundColor); $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); $backgroundColorDisabled: var(--tb-widget-button-background-color-disabled, $defaultBackgroundColorDisabled); diff --git a/ui-ngx/src/app/shared/components/button/widget-button.models.ts b/ui-ngx/src/app/shared/components/button/widget-button.models.ts index 616af28588..34f13864a9 100644 --- a/ui-ngx/src/app/shared/components/button/widget-button.models.ts +++ b/ui-ngx/src/app/shared/components/button/widget-button.models.ts @@ -20,6 +20,11 @@ import tinycolor from 'tinycolor2'; const defaultMainColor = '#3F52DD'; 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 defaultBackgroundColorDisabled = 'rgba(0, 0, 0, 0.03)'; @@ -181,7 +186,7 @@ class HoveredButtonStateCssGenerator extends ButtonStateCssGenerator { } protected generateAdditionalStateCss(mainColor: string): string { - const mainColorHoveredFilled = darkenColor(mainColor, 6); + const mainColorHoveredFilled = darkenColor(mainColor, hoveredFilledDarkenAmount); return `--tb-widget-button-main-color-hovered-filled: ${mainColorHoveredFilled};`; } } @@ -193,10 +198,10 @@ class PressedButtonStateCssGenerator extends ButtonStateCssGenerator { } protected generateAdditionalStateCss(mainColor: string): string { - const mainColorPressedFilled = darkenColor(mainColor, 12); + const mainColorPressedFilled = darkenColor(mainColor, pressedFilledDarkenAmount); const mainColorInstance = tinycolor(mainColor); 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`+ `--tb-widget-button-main-color-pressed-ripple: ${mainColorPressedRipple};\n`+ `--tb-widget-button-main-color-pressed-ripple-filled: ${mainColorPressedRippleFilled};`; @@ -210,7 +215,7 @@ class ActivatedButtonStateCssGenerator extends ButtonStateCssGenerator { } protected generateAdditionalStateCss(mainColor: string): string { - const mainColorActivatedFilled = darkenColor(mainColor, 12); + const mainColorActivatedFilled = darkenColor(mainColor, activatedFilledDarkenAmount); 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 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(); }; diff --git a/ui-ngx/src/app/shared/components/color-input.component.ts b/ui-ngx/src/app/shared/components/color-input.component.ts index 171e8bf7d8..ad772ba861 100644 --- a/ui-ngx/src/app/shared/components/color-input.component.ts +++ b/ui-ngx/src/app/shared/components/color-input.component.ts @@ -189,7 +189,7 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro this.popoverService.hidePopover(trigger); } else { 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, colorClearButton: this.colorClearButton diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss index c55222a7d2..9aca580994 100644 --- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss +++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss @@ -18,9 +18,11 @@ display: flex; flex-direction: column; gap: 32px; + overflow: auto; .saturation-component { height: 238px; + min-height: 80px; border-radius: 8px; }