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

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
         },

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);

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();
 };

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

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;
   }