Change transparent font settings (#1823)

src/i18n-keysets/dash.dialogs-common.edit/en.json

@@ -1,3 +1,4 @@
 {
-  "button_back": "Back"
+  "button_back": "Back",
+  "title_widget-settings": "Widget settings"
 }

src/i18n-keysets/dash.dialogs-common.edit/ru.json

@@ -1,3 +1,4 @@
 {
-  "button_back": "Назад"
+  "button_back": "Назад",
+  "title_widget-settings": "Настройки виджета"
 }

src/i18n-keysets/dash.palette-background/en.json

@@ -1,4 +1,5 @@
 {
+  "tooltip_click-to-select": "Select value",
   "value_default": "Basic",
   "value_transparent": "Transparent"
 }

src/i18n-keysets/dash.palette-background/ru.json

@@ -1,4 +1,5 @@
 {
+  "tooltip_click-to-select": "Выберите значение",
   "value_default": "Базовый",
   "value_transparent": "Прозрачный"
 }

src/i18n-keysets/dash.title-dialog.edit/en.json

@@ -4,6 +4,7 @@
   "button_save": "Save",
   "context_fill-title": "Enter title",
   "field_show-in-toc": "Display in contents",
+  "label_size": "Size",
   "label_title": "Title",
   "toast_required-field": "The field cannot be empty",
   "value_default": "Title"

src/i18n-keysets/dash.title-dialog.edit/ru.json

@@ -4,6 +4,7 @@
   "button_save": "Сохранить",
   "context_fill-title": "Введите заголовок",
   "field_show-in-toc": "Отображать в оглавлении",
+  "label_size": "Размер",
   "label_title": "Заголовок",
   "toast_required-field": "Поле должно быть заполнено",
   "value_default": "Заголовок"

src/shared/types/dash.ts

@@ -121,7 +121,6 @@ export type DashTabItem =
 
 type BackgroundSettings = {
     color: string;
-    enabled: boolean;
 };
 
 export interface DashTabItemBase {

src/shared/types/utility-types.ts

@@ -40,3 +40,5 @@ export type NonNullableBy<T, K extends keyof T> = Omit<T, K> & NoUndefinedField<
 type ObjectKeys<T extends object> = `${Exclude<keyof T, symbol>}`;
 
 export const objectKeys = Object.keys as <T extends object>(value: T) => Array<ObjectKeys<T>>;
+
+export type ValueOf<T extends object> = T[keyof T];

src/ui/components/DashKit/plugins/Image/Image.tsx

@@ -4,6 +4,7 @@ import type {Plugin, PluginWidgetProps} from '@gravity-ui/dashkit';
 import block from 'bem-cn-lite';
 import type {DashTabItemImage} from 'shared';
 import {DashTabItemType} from 'shared';
+import {CustomPaletteColors} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
 import {getPreparedWrapSettings} from '../../utils';
@@ -31,7 +32,7 @@ function PluginImage(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
         w: null,
     };
     const backgroundEnabled = Boolean(
-        background?.enabled && background?.color && background?.color !== 'transparent',
+        background?.color && background?.color !== CustomPaletteColors.NONE,
     );
     const {classMod, style} = React.useMemo(() => {
         return getPreparedWrapSettings(backgroundEnabled, background?.color);

src/ui/components/DashKit/plugins/Text/Text.tsx

@@ -12,6 +12,7 @@ import {
 } from 'ui/components/DashKit/utils';
 import {YFM_MARKDOWN_CLASSNAME} from 'ui/constants/yfm';
 import {usePrevious} from 'ui/hooks';
+import {CustomPaletteColors} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
 import {YfmWrapper} from '../../../YfmWrapper/YfmWrapper';
@@ -149,9 +150,7 @@ const textPlugin = {
         const data = props.data as DashTabItemText['data'];
 
         const showBgColor = Boolean(
-            data.background?.enabled &&
-                data.background?.color &&
-                data.background?.color !== 'transparent',
+            data.background?.color && data.background?.color !== CustomPaletteColors.NONE,
         );
 
         const {classMod, style} = getPreparedWrapSettings(showBgColor, data.background?.color);
@@ -186,7 +185,6 @@ const textPlugin = {
             currentLayout.w,
             classMod,
             data.background?.color,
-            data.background?.enabled,
         ]);
 
         /**

src/ui/components/DashKit/plugins/Title/Title.tsx

@@ -13,6 +13,7 @@ import {
     adjustWidgetLayout as dashkitAdjustWidgetLayout,
     getPreparedWrapSettings,
 } from 'ui/components/DashKit/utils';
+import {CustomPaletteColors} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
 import {RendererWrapper} from '../RendererWrapper/RendererWrapper';
@@ -95,9 +96,7 @@ const titlePlugin: PluginTitle = {
         const content = <DashKitPluginTitle {...props} ref={forwardedRef} />;
 
         const showBgColor = Boolean(
-            data.background?.enabled &&
-                data.background?.color &&
-                data.background?.color !== 'transparent',
+            data.background?.color && data.background?.color !== CustomPaletteColors.NONE,
         );
 
         const {classMod, style} = getPreparedWrapSettings(showBgColor, data.background?.color);
@@ -119,7 +118,6 @@ const titlePlugin: PluginTitle = {
             currentLayout.w,
             classMod,
             data.background?.color,
-            data.background?.enabled,
             data.size,
             data.text,
         ]);
@@ -159,7 +157,6 @@ const titlePlugin: PluginTitle = {
             currentLayout.w,
             data.text,
             data.size,
-            data.background?.enabled,
             calculateAnchor,
             showAnchor,
         ]);

src/ui/components/DialogChartWidget/DialogChartWidget.scss

@@ -40,21 +40,23 @@
         flex-direction: column;
     }
 
-    &__help-tooltip {
-        line-height: 16px;
-        margin-left: 5px;
-    }
-
     &__navigation-input-container {
         display: grid;
         grid-auto-rows: 40px;
         align-items: center;
     }
 
-    &__textarea-wrapper {
-        display: flex;
+    &__textarea {
         height: 80px;
-        padding: 6px 0;
+        width: 330px;
+    }
+
+    &__row {
+        margin-bottom: var(--g-spacing-2);
+    }
+
+    &__checkbox {
+        margin-block-start: var(--g-spacing-2);
     }
 
     .widget-item-dialog__line {
@@ -82,12 +84,6 @@
         align-items: center;
     }
 
-    &__input {
-        width: 330px;
-        margin-right: 10px;
-        display: inline-flex;
-    }
-
     &__add-param-button {
         margin-left: 175px;
     }
@@ -116,17 +112,6 @@
         }
     }
 
-    &__caption {
-        &_inactive {
-            opacity: 0.3;
-        }
-    }
-
-    &__caption-text {
-        position: relative;
-        top: 1px;
-    }
-
     &__error {
         color: var(--g-color-text-danger);
         padding: 10px;