Change pransparrent font settings

datalens-tech · Nov 19, 2024 · 5be63df · 5be63df
1 parent d777721
commit 5be63df
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 48 deletions.
diff --git a/src/i18n-keysets/dash.palette-background/en.json b/src/i18n-keysets/dash.palette-background/en.json
@@ -1,4 +1,5 @@
 {
+  "tooltip_click-to-select": "Select value",
   "value_default": "Basic",
   "value_transparent": "Transparent"
 }
diff --git a/src/i18n-keysets/dash.palette-background/ru.json b/src/i18n-keysets/dash.palette-background/ru.json
@@ -1,4 +1,5 @@
 {
+  "tooltip_click-to-select": "Выберите значение",
   "value_default": "Базовый",
   "value_transparent": "Прозрачный"
 }
diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
@@ -395,6 +395,7 @@ class DialogChartWidget extends React.PureComponent<
                 tabs: {
                     [tabIndex]: {
                         background: {
+                            enabled: {$set: true},
                             color: {$set: color},
                         },
                     },
@@ -724,12 +725,10 @@ class DialogChartWidget extends React.PureComponent<
                         >
                             {i18n('dash.widget-dialog.edit', 'field_background-enable')}
                         </Checkbox>
-                        {Boolean(background?.enabled) && (
-                            <PaletteBackground
-                                color={background?.color}
-                                onSelect={this.handleBackgroundColorSelected}
-                            />
-                        )}
+                        <PaletteBackground
+                            color={background?.color}
+                            onSelect={this.handleBackgroundColorSelected}
+                        />
                     </Line>
                 )}
                 {enableFilteringSetting && this.renderFilteringCharts()}

diff --git a/src/ui/components/DialogImageWidget/DialogImageWidget.tsx b/src/ui/components/DialogImageWidget/DialogImageWidget.tsx
@@ -162,12 +162,10 @@ export function DialogImageWidget(props: Props) {
                         >
                             {i18n('dash.widget-dialog.edit', 'field_background-enable')}
                         </Checkbox>
-                        {data.background?.enabled && (
-                            <PaletteBackground
-                                color={data.background?.color}
-                                onSelect={(color) => updateData({background: {color}})}
-                            />
-                        )}
+                        <PaletteBackground
+                            color={data.background?.color}
+                            onSelect={(color) => updateData({background: {color, enabled: true}})}
+                        />
                     </Flex>
                 </FormRow>
             </Dialog.Body>

diff --git a/src/ui/components/DialogTextWidget/DialogTextWidget.tsx b/src/ui/components/DialogTextWidget/DialogTextWidget.tsx
@@ -98,12 +98,10 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
                         >
                             {i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
                         </Checkbox>
-                        {Boolean(hasBackground) && (
-                            <PaletteBackground
-                                color={backgroundColor}
-                                onSelect={this.handleHasBackgroundSelected}
-                            />
-                        )}
+                        <PaletteBackground
+                            color={backgroundColor}
+                            onSelect={this.handleHasBackgroundSelected}
+                        />
                     </div>
                 </Dialog.Body>
                 <Dialog.Footer
@@ -149,7 +147,7 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
     };
 
     handleHasBackgroundSelected = (color: string) => {
-        this.setState({backgroundColor: color});
+        this.setState({backgroundColor: color, hasBackground: true});
     };
 }
 

diff --git a/src/ui/components/DialogTitleWidget/DialogTitleWidget.tsx b/src/ui/components/DialogTitleWidget/DialogTitleWidget.tsx
@@ -157,12 +157,10 @@ class DialogTitleWidget extends React.PureComponent<
                         >
                             {i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
                         </Checkbox>
-                        {Boolean(hasBackground) && (
-                            <PaletteBackground
-                                color={backgroundColor}
-                                onSelect={this.handleHasBackgroundSelected}
-                            />
-                        )}
+                        <PaletteBackground
+                            color={backgroundColor}
+                            onSelect={this.handleHasBackgroundSelected}
+                        />
                     </div>
                 </Dialog.Body>
                 <Dialog.Footer
@@ -223,7 +221,7 @@ class DialogTitleWidget extends React.PureComponent<
     };
 
     handleHasBackgroundSelected = (color: string) => {
-        this.setState({backgroundColor: color});
+        this.setState({backgroundColor: color, hasBackground: true});
     };
 }
 

diff --git a/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx b/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {ChartColumn} from '@gravity-ui/icons';
 import type {PaletteOption} from '@gravity-ui/uikit';
-import {ActionTooltip, Icon, Palette, Popover} from '@gravity-ui/uikit';
+import {ActionTooltip, Icon, Palette, Popover, Tooltip} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import {DashCommonQa} from 'shared';
@@ -21,25 +21,29 @@ const PALETTE_HINTS = {
     [CustomPaletteColors.NONE]: i18n('dash.palette-background', 'value_transparent'),
 } as const;
 
-const ColorItem = ({
-    color,
-    isSelected,
-    classNameMod,
-    isPreview,
-    qa,
-}: {
-    color: string;
-    classNameMod?: string;
-    isSelected?: boolean;
-    isPreview?: boolean;
-    qa?: string;
-}) => {
+const ColorItem = React.forwardRef(function ColorItem(
+    {
+        color,
+        isSelected,
+        classNameMod,
+        isPreview,
+        qa,
+    }: {
+        color: string;
+        classNameMod?: string;
+        isSelected?: boolean;
+        isPreview?: boolean;
+        qa?: string;
+    },
+    ref: React.ForwardedRef<HTMLSpanElement>,
+) {
     const isTransparent = color === CustomPaletteColors.NONE;
     const isLikeChartBg = color === CustomPaletteColors.LIKE_CHART;
     const mod = classNameMod ? {[classNameMod]: Boolean(classNameMod)} : {};
 
     return (
         <span
+            ref={ref}
             style={{backgroundColor: isLikeChartBg ? '' : `${color}`}}
             className={b('color-item', {
                 transparent: isTransparent,
@@ -57,7 +61,7 @@ const ColorItem = ({
             )}
         </span>
     );
-};
+});
 
 const colors = [
     'var(--g-color-base-info-light)',
@@ -133,15 +137,18 @@ export const PaletteBackground = (props: PaletteBackgroundProps) => {
     return (
         <Popover
             className={b()}
+            openOnHover={false}
             content={<PaletteList onSelect={handleSelectColor} selectedColor={selectedColor} />}
         >
-            <ColorItem
-                color={selectedColor}
-                isSelected={true}
-                classNameMod={'small'}
-                isPreview={true}
-                qa={DashCommonQa.WidgetSelectBackgroundButton}
-            />
+            <Tooltip content={i18n('dash.palette-background', 'tooltip_click-to-select')}>
+                <ColorItem
+                    color={selectedColor}
+                    isSelected={true}
+                    classNameMod={'small'}
+                    isPreview={true}
+                    qa={DashCommonQa.WidgetSelectBackgroundButton}
+                />
+            </Tooltip>
         </Popover>
     );
 };