Skip to content

Commit 7689553

Browse files
d3m1d0vd3m1d0v
committed
feat(YfmTable): update color picker for cell background
1 parent 05df202 commit 7689553

7 files changed

Lines changed: 167 additions & 129 deletions

File tree

‎packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgPalette/CellBgPalette.scss‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,67 @@
1+
$color-map: (
2+
'grey': var(--g-color-base-generic),
3+
'yellow-light': var(--g-color-base-warning-light),
4+
'yellow': var(--g-color-base-warning-medium),
5+
'red-light': var(--g-color-base-danger-light),
6+
'red': var(--g-color-base-danger-medium),
7+
'purple-light': var(--g-color-base-utility-light),
8+
'purple': var(--g-color-base-utility-medium),
9+
'blue-light': var(--g-color-base-info-light),
10+
'blue': var(--g-color-base-info-medium),
11+
'green-light': var(--g-color-base-positive-light),
12+
'green': var(--g-color-base-positive-medium),
13+
);
14+
115
.g-md-yfm-table-cell-bg-palette {
16+
display: grid;
17+
grid-template-columns: repeat(6, auto);
18+
gap: 0;
19+
20+
&__item {
21+
cursor: pointer;
22+
23+
border-radius: var(--g-border-radius-m);
24+
25+
&:hover {
26+
background: var(--g-color-base-generic);
27+
}
28+
}
29+
230
&__swatch {
31+
position: relative;
32+
333
display: block;
434

535
width: 16px;
636
height: 16px;
37+
padding: 0;
38+
39+
cursor: pointer;
740

841
border: 1px solid var(--g-color-line-generic);
942
border-radius: var(--g-border-radius-xs);
43+
background-color: transparent;
1044

11-
&_none {
12-
position: relative;
13-
14-
overflow: hidden;
15-
16-
background-color: transparent;
17-
18-
&::after {
19-
position: absolute;
20-
inset: 0;
21-
22-
content: '';
23-
24-
background: linear-gradient(
25-
to bottom right,
26-
transparent calc(50% - 1px),
27-
var(--g-color-line-danger) calc(50% - 1px),
28-
var(--g-color-line-danger) calc(50% + 1px),
29-
transparent calc(50% + 1px)
30-
);
45+
@each $name, $color in $color-map {
46+
&_color_#{$name} {
47+
border-color: $color;
48+
background-color: $color;
3149
}
3250
}
3351

34-
&_color_info {
35-
background-color: var(--g-color-base-info-medium);
36-
}
37-
38-
&_color_positive {
39-
background-color: var(--g-color-base-positive-medium);
40-
}
41-
42-
&_color_warning {
43-
background-color: var(--g-color-base-warning-medium);
44-
}
45-
46-
&_color_danger {
47-
background-color: var(--g-color-base-danger-medium);
52+
&_none {
53+
background-color: transparent;
4854
}
55+
}
4956

50-
&_color_utility {
51-
background-color: var(--g-color-base-utility-medium);
52-
}
57+
&__check {
58+
position: absolute;
59+
inset: 0;
5360

54-
&_color_misc {
55-
background-color: var(--g-color-base-misc-medium);
56-
}
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
5764

58-
&_color_neutral {
59-
background-color: var(--g-color-base-neutral-medium);
60-
}
65+
color: var(--g-color-text-primary);
6166
}
6267
}

‎packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgPalette/CellBgPalette.tsx‎

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import {useMemo} from 'react';
2-
3-
import {Palette, type PaletteOption} from '@gravity-ui/uikit';
1+
import {Check} from '@gravity-ui/icons';
2+
import {Box, Icon, Tooltip} from '@gravity-ui/uikit';
43

54
import {cn} from 'src/classname';
65
import {i18n} from 'src/i18n/yfm-table';
76

8-
import {CELL_BG_COLORS} from './colors';
7+
import {CELL_BG_SWATCHES} from './colors';
98

109
import './CellBgPalette.scss';
1110

@@ -19,40 +18,47 @@ export type CellBgPaletteProps = {
1918
};
2019

2120
export const CellBgPalette: React.FC<CellBgPaletteProps> = function YfmTableCellBgPalette({
22-
// value,
21+
value,
2322
onSelect,
2423
}) {
25-
const options = useMemo<PaletteOption[]>(
26-
() => [
27-
{
28-
value: NO_COLOR_VALUE,
29-
content: <span className={b('swatch', {none: true})} />,
30-
title: i18n('cells.bg.none'),
31-
},
32-
...CELL_BG_COLORS.map((color) => ({
33-
value: color,
34-
content: <span className={b('swatch', {color})} />,
35-
title: i18n(`cells.bg.${color}`),
36-
})),
37-
],
38-
[],
39-
);
40-
41-
// const paletteValue = useMemo(() => (value ? [value] : [NO_COLOR_VALUE]), [value]);
42-
43-
const handleUpdate = (values: string[]) => {
44-
const selected = values[0] ?? NO_COLOR_VALUE;
45-
onSelect(selected === NO_COLOR_VALUE ? null : selected);
24+
const handleClick = (swatchValue: string) => {
25+
if (swatchValue === value || (swatchValue === NO_COLOR_VALUE && !value)) return;
26+
onSelect(swatchValue === NO_COLOR_VALUE ? null : swatchValue);
4627
};
4728

4829
return (
49-
<Palette
50-
multiple={false}
51-
// value={paletteValue}
52-
options={options}
53-
columns={4}
54-
onUpdate={handleUpdate}
55-
className={b()}
56-
/>
30+
<div className={b()}>
31+
{CELL_BG_SWATCHES.map((swatch, index) => {
32+
const isSelected =
33+
swatch.value === NO_COLOR_VALUE ? !value : swatch.value === value;
34+
const isTopRow = index < CELL_BG_SWATCHES.length / 2;
35+
36+
return (
37+
<Tooltip
38+
key={swatch.value}
39+
openDelay={200}
40+
placement={isTopRow ? 'top' : 'bottom'}
41+
content={i18n(swatch.i18nKey)}
42+
>
43+
<Box className={b('item')} spacing={{p: 1}}>
44+
<button
45+
type="button"
46+
className={b('swatch', {
47+
none: swatch.value === NO_COLOR_VALUE,
48+
color: swatch.value || undefined,
49+
})}
50+
onClick={() => handleClick(swatch.value)}
51+
>
52+
{isSelected && (
53+
<span className={b('check')}>
54+
<Icon data={Check} size={16} />
55+
</span>
56+
)}
57+
</button>
58+
</Box>
59+
</Tooltip>
60+
);
61+
})}
62+
</div>
5763
);
5864
};

‎packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgPalette/colors.ts‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
export const CELL_BG_COLORS = [
2-
'info',
3-
'positive',
4-
'warning',
5-
'danger',
6-
'utility',
7-
'misc',
8-
'neutral',
1+
export const CELL_BG_SWATCHES = [
2+
{value: '', i18nKey: 'cells.bg.none'},
3+
{value: 'yellow-light', i18nKey: 'cells.bg.yellow-light'},
4+
{value: 'red-light', i18nKey: 'cells.bg.red-light'},
5+
{value: 'purple-light', i18nKey: 'cells.bg.purple-light'},
6+
{value: 'blue-light', i18nKey: 'cells.bg.blue-light'},
7+
{value: 'green-light', i18nKey: 'cells.bg.green-light'},
8+
{value: 'grey', i18nKey: 'cells.bg.grey'},
9+
{value: 'yellow', i18nKey: 'cells.bg.yellow'},
10+
{value: 'red', i18nKey: 'cells.bg.red'},
11+
{value: 'purple', i18nKey: 'cells.bg.purple'},
12+
{value: 'blue', i18nKey: 'cells.bg.blue'},
13+
{value: 'green', i18nKey: 'cells.bg.green'},
914
] as const;
1015

11-
export type CellBgColor = (typeof CELL_BG_COLORS)[number];
16+
export type CellBgValue = (typeof CELL_BG_SWATCHES)[number]['value'];

‎packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -95,24 +95,22 @@ export const FloatingMenuControl: React.FC<FloatingMenuControlProps> =
9595
...headerItems,
9696
...(cellBackgroundEnabled && onCellBgChange
9797
? [
98-
[
99-
{
100-
text: i18n('cells.bg'),
101-
qa: `g-md-yfm-table-${type}-cell-bg`,
102-
iconStart: <Icon data={ColorPalette} />,
103-
items: [
104-
{
105-
text: (
106-
<CellBgPalette
107-
value={currentCellBg}
108-
onSelect={onCellBgChange}
109-
/>
110-
),
111-
action: () => {},
112-
},
113-
],
114-
},
115-
],
98+
{
99+
text: i18n('cells.bg'),
100+
qa: `g-md-yfm-table-${type}-cell-bg`,
101+
iconStart: <Icon data={ColorPalette} />,
102+
items: [
103+
{
104+
text: (
105+
<CellBgPalette
106+
value={currentCellBg}
107+
onSelect={onCellBgChange}
108+
/>
109+
),
110+
action: () => {},
111+
},
112+
],
113+
},
116114
]
117115
: []),
118116
[
@@ -158,6 +156,9 @@ export const FloatingMenuControl: React.FC<FloatingMenuControlProps> =
158156
multiple,
159157
canMakeRowHeader,
160158
canUnsetRowHeader,
159+
currentCellBg,
160+
cellBackgroundEnabled,
161+
onCellBgChange,
161162
onMakeRowHeader,
162163
onUnsetRowHeader,
163164
onClearCellsClick,

‎packages/editor/src/i18n/yfm-table/en.json‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@
1212
"cells.clear": "Clear cells",
1313
"cells.bg": "Cell background",
1414
"cells.bg.none": "No color",
15-
"cells.bg.info": "Info",
16-
"cells.bg.positive": "Positive",
17-
"cells.bg.warning": "Warning",
18-
"cells.bg.danger": "Danger",
19-
"cells.bg.utility": "Utility",
20-
"cells.bg.misc": "Misc",
21-
"cells.bg.neutral": "Neutral",
15+
"cells.bg.grey": "Grey",
16+
"cells.bg.yellow-light": "Light yellow",
17+
"cells.bg.yellow": "Yellow",
18+
"cells.bg.red-light": "Light red",
19+
"cells.bg.red": "Red",
20+
"cells.bg.purple-light": "Light purple",
21+
"cells.bg.purple": "Purple",
22+
"cells.bg.blue-light": "Light blue",
23+
"cells.bg.blue": "Blue",
24+
"cells.bg.green-light": "Light green",
25+
"cells.bg.green": "Green",
2226
"table.remove": "Remove table",
2327
"table.menu.cell.align.left": "Align cell content to the left",
2428
"table.menu.cell.align.right": "Align cell content to the right",

‎packages/editor/src/i18n/yfm-table/ru.json‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@
1212
"cells.clear": "Очистить ячейки",
1313
"cells.bg": "Фон ячейки",
1414
"cells.bg.none": "Без цвета",
15-
"cells.bg.info": "Информационный",
16-
"cells.bg.positive": "Позитивный",
17-
"cells.bg.warning": "Предупреждение",
18-
"cells.bg.danger": "Опасность",
19-
"cells.bg.utility": "Утилитарный",
20-
"cells.bg.misc": "Прочий",
21-
"cells.bg.neutral": "Нейтральный",
15+
"cells.bg.grey": "Серый",
16+
"cells.bg.yellow-light": "Светло-жёлтый",
17+
"cells.bg.yellow": "Жёлтый",
18+
"cells.bg.red-light": "Светло-красный",
19+
"cells.bg.red": "Красный",
20+
"cells.bg.purple-light": "Светло-фиолетовый",
21+
"cells.bg.purple": "Фиолетовый",
22+
"cells.bg.blue-light": "Светло-синий",
23+
"cells.bg.blue": "Синий",
24+
"cells.bg.green-light": "Светло-зелёный",
25+
"cells.bg.green": "Зелёный",
2226
"table.remove": "Удалить таблицу",
2327
"table.menu.cell.align.left": "Выровнять контент ячейки по левому краю",
2428
"table.menu.cell.align.right": "Выровнять контент ячейки по правому краю",

‎packages/editor/src/styles/yc-table.scss‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,36 @@
1+
.yfm table th,
12
.yfm table td {
2-
&.cell-bg-info {
3-
background-color: var(--g-color-base-info-medium);
3+
&.cell-bg-grey {
4+
background-color: var(--g-color-base-generic);
45
}
5-
&.cell-bg-positive {
6-
background-color: var(--g-color-base-positive-medium);
6+
&.cell-bg-yellow-light {
7+
background-color: var(--g-color-base-warning-light);
78
}
8-
&.cell-bg-warning {
9+
&.cell-bg-yellow {
910
background-color: var(--g-color-base-warning-medium);
1011
}
11-
&.cell-bg-danger {
12+
&.cell-bg-red-light {
13+
background-color: var(--g-color-base-danger-light);
14+
}
15+
&.cell-bg-red {
1216
background-color: var(--g-color-base-danger-medium);
1317
}
14-
&.cell-bg-utility {
18+
&.cell-bg-purple-light {
19+
background-color: var(--g-color-base-utility-light);
20+
}
21+
&.cell-bg-purple {
1522
background-color: var(--g-color-base-utility-medium);
1623
}
17-
&.cell-bg-misc {
18-
background-color: var(--g-color-base-misc-medium);
24+
&.cell-bg-blue-light {
25+
background-color: var(--g-color-base-info-light);
1926
}
20-
&.cell-bg-neutral {
21-
background-color: var(--g-color-base-neutral-medium);
27+
&.cell-bg-blue {
28+
background-color: var(--g-color-base-info-medium);
29+
}
30+
&.cell-bg-green-light {
31+
background-color: var(--g-color-base-positive-light);
32+
}
33+
&.cell-bg-green {
34+
background-color: var(--g-color-base-positive-medium);
2235
}
2336
}

0 commit comments

Comments
 (0)