Skip to content

Commit 63d31ce

Browse files
inikolovaTeyaVes
inikolova
authored and
TeyaVes
committed
feat(html): add colorPicker sizing and adaptive rendering
1 parent 202e78d commit 63d31ce

11 files changed

Lines changed: 231 additions & 42 deletions

File tree

‎packages/html/src/color-preview/color-preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const ColorPreview = (
3232
{
3333
'k-icon-color-preview': iconName,
3434
'k-no-color': !color
35-
},
35+
}
3636
)}
3737
>
3838
{iconName && (

‎packages/html/src/coloreditor/color-editor.spec.tsx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { classNames, stateClassNames, States } from '../misc';
1+
import { classNames, stateClassNames, States, Size, optionClassNames } from '../misc';
22
import { ActionButtons } from '../action-buttons';
33
import { Button } from '../button';
44
import { ButtonGroup } from '../button-group';
@@ -13,9 +13,15 @@ const states = [
1313
States.focus
1414
];
1515

16-
const options = {};
16+
const options = {
17+
size: [ Size.small, Size.medium, Size.large ],
18+
};
19+
20+
export type KendoColorEditorOptions = {
21+
size?: (typeof options.size)[number] | null;
22+
};
1723

18-
export type KendoColorEditorProps = {
24+
export type KendoColorEditorProps = KendoColorEditorOptions & {
1925
view?: 'gradient' | 'palette';
2026
color?: string;
2127
currentColor?: string;
@@ -24,14 +30,17 @@ export type KendoColorEditorProps = {
2430
group?: boolean;
2531
palette?: Array<string> | any;
2632
actionButtons?: boolean;
33+
canvasOrientation?: 'horizontal' | 'vertical';
2734
};
2835

2936
export type KendoColorEditorState = { [K in (typeof states)[number]]?: boolean };
3037

3138
const defaultOptions = {
39+
size: Size.medium,
3240
view: 'gradient',
3341
palette: PALETTEPRESETS.office,
3442
actionButtons: true,
43+
canvasOrientation: 'horizontal'
3544
} as const;
3645

3746
export const ColorEditor = (
@@ -40,6 +49,7 @@ export const ColorEditor = (
4049
React.HTMLAttributes<HTMLDivElement>
4150
) => {
4251
const {
52+
size = defaultOptions.size,
4353
view = defaultOptions.view,
4454
palette = defaultOptions.palette,
4555
color,
@@ -49,39 +59,41 @@ export const ColorEditor = (
4959
dir,
5060
group,
5161
actionButtons = defaultOptions.actionButtons,
62+
canvasOrientation = defaultOptions.canvasOrientation,
5263
} = props;
5364

5465
return (
5566
<div className={classNames(
5667
props.className,
5768
'k-flatcolorpicker',
5869
COLOREDITOR_CLASSNAME,
59-
stateClassNames(COLOREDITOR_CLASSNAME, { focus })
70+
optionClassNames(COLOREDITOR_CLASSNAME, { size }),
71+
stateClassNames(COLOREDITOR_CLASSNAME, { focus }),
6072
)} dir={dir}>
6173
<div className="k-coloreditor-header k-hstack">
6274
<div className="k-coloreditor-header-actions k-hstack">
6375
{ group &&
6476
<ButtonGroup fillMode="flat">
65-
<Button className="k-group-start" fillMode="flat" icon="droplet-slider" selected={ view === 'gradient' }></Button>
66-
<Button className="k-group-end" fillMode="flat" icon="palette" selected={ view === 'palette' }></Button>
77+
<Button className="k-group-start" size={size} fillMode="flat" icon="droplet-slider" selected={ view === 'gradient' }></Button>
78+
<Button className="k-group-end" size={size} fillMode="flat" icon="palette" selected={ view === 'palette' }></Button>
6779
</ButtonGroup>
6880
}
6981
</div>
7082
<div className="k-spacer"></div>
7183
<div className="k-coloreditor-header-actions k-hstack">
72-
<Button fillMode="flat" icon="droplet-slash"></Button>
84+
<Button fillMode="flat" icon="droplet-slash" size={size}></Button>
7385
<div className="k-coloreditor-preview k-vstack">
7486
<ColorPreview className="k-coloreditor-preview-color" color={color} />
7587
<ColorPreview className="k-coloreditor-current-color" color={currentColor} />
7688
</div>
7789
</div>
7890
</div>
7991
<div className="k-coloreditor-views k-vstack">
80-
{ view === 'gradient' ? <ColorGradient focus={focusView} /> : <ColorPalette palette={palette}/> }
92+
{ view === 'gradient' ? <ColorGradient focus={focusView} size={size} canvasOrientation={canvasOrientation} /> : <ColorPalette palette={palette} /> }
8193
</div>
8294
{actionButtons && <ActionButtons className="k-coloreditor-footer" alignment="end" >
83-
<Button className="k-coloreditor-cancel">Cancel</Button>
84-
<Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
95+
<Button className="k-coloreditor-cancel" size={size}>Cancel</Button>
96+
<Button themeColor="primary" size={size} className="k-coloreditor-apply">Apply</Button>
8597
</ActionButtons>}
8698
</div>
8799
);

‎packages/html/src/coloreditor/tests/coloreditor-sizes.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { ColorEditor, ColorEditorGroup, ColorEditorPaletteGroup } from '../../coloreditor';
2+
3+
4+
const styles = `
5+
#test-area {
6+
grid-template-columns: 1fr 1fr 2fr;
7+
}
8+
9+
.k-hue-slider {
10+
--kendo-slider-start: 0;
11+
--kendo-slider-end: 0;
12+
}
13+
.k-alpha-slider {
14+
--kendo-slider-start: 0;
15+
--kendo-slider-end: 100;
16+
}
17+
`;
18+
19+
export default () =>(
20+
<>
21+
<style>{styles}</style>
22+
<div id="test-area" className="k-d-grid k-gap-2">
23+
{
24+
ColorEditor.options.size.map((size => (
25+
<>
26+
<div>
27+
<div>{size}</div>
28+
<ColorEditorGroup color="rgba(0,0,0, 0.5)" size={size} orientation="vertical"/>
29+
</div>
30+
</>
31+
)))
32+
}
33+
34+
{
35+
ColorEditor.options.size.map((size => (
36+
<>
37+
<div>
38+
<div>{size}</div>
39+
<ColorEditorPaletteGroup color="rgba(0,0,0, 0.5)" size={size} />
40+
</div>
41+
</>
42+
)))
43+
}
44+
</div>
45+
</>
46+
);

‎packages/html/src/colorgradient/color-gradient.spec.tsx‎

Lines changed: 65 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { classNames, stateClassNames, States } from '../misc';
2-
import { SliderGradientVertical } from '../slider';
1+
import { classNames, stateClassNames, States, Size, optionClassNames } from '../misc';
2+
import { SliderGradientVertical, SliderGradient } from '../slider';
33
import { ColorInput } from './color-input';
44
import { ColorContrast } from './color-contrast';
55

@@ -12,9 +12,15 @@ const states = [
1212
States.disabled,
1313
];
1414

15-
const options = {};
15+
const options = {
16+
size: [ Size.small, Size.medium, Size.large ]
17+
};
18+
19+
export type KendoColorGradientOptions = {
20+
size?: (typeof options.size)[number] | null;
21+
};
1622

17-
export type KendoColorGradientProps = {
23+
export type KendoColorGradientProps = KendoColorGradientOptions & {
1824
mode?: 'rgba' | 'rgb' | 'hsva' | 'hsv' | 'hex';
1925
dir?: 'ltr' | 'rtl';
2026
contrast?: boolean;
@@ -23,18 +29,23 @@ export type KendoColorGradientProps = {
2329
gradientStyle?: React.CSSProperties;
2430
dragHandleStyle?: React.CSSProperties;
2531
alphaStyle?: React.CSSProperties;
32+
alphaStyleHorizontal?: React.CSSProperties;
33+
canvasOrientation?: 'horizontal' | 'vertical';
2634
};
2735

2836
export type KendoColorGradientState = { [K in (typeof states)[number]]?: boolean };
2937

3038
const defaultOptions = {
39+
size: Size.medium,
3140
mode: 'rgba',
3241
readonly: false,
3342
disabled: false,
3443
contrast: false,
3544
gradientStyle: { background: "rgb(255, 0, 0 )" },
3645
dragHandleStyle: { top: "50px", left: "73px" },
37-
alphaStyle: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }
46+
alphaStyle: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" },
47+
alphaStyleHorizontal: { background: "linear-gradient(to right, transparent, rgb(255, 0, 0))" },
48+
canvasOrientation: 'horizontal'
3849
};
3950

4051
export const ColorGradient = (
@@ -43,52 +54,83 @@ export const ColorGradient = (
4354
React.HTMLAttributes<HTMLDivElement>
4455
) => {
4556
const {
57+
size = defaultOptions.size,
4658
mode = defaultOptions.mode,
4759
readonly = defaultOptions.readonly,
4860
disabled = defaultOptions.disabled,
4961
gradientStyle = defaultOptions.gradientStyle,
5062
dragHandleStyle = defaultOptions.dragHandleStyle,
5163
alphaStyle = defaultOptions.alphaStyle,
64+
alphaStyleHorizontal = defaultOptions.alphaStyleHorizontal,
5265
contrast = defaultOptions.contrast,
5366
dir,
5467
hover,
5568
focus,
5669
hoverHandle,
5770
focusHandle,
71+
canvasOrientation = defaultOptions.canvasOrientation,
5872
} = props;
5973

6074
return (
6175
<div className={classNames(
6276
props.className,
6377
COLOR_GRADIENT_CLASSNAME,
78+
optionClassNames(COLOR_GRADIENT_CLASSNAME, {size}),
6479
stateClassNames(COLOR_GRADIENT_CLASSNAME, {
6580
hover,
6681
focus,
6782
readonly,
6883
disabled
6984
})
7085
)} dir={dir}>
71-
<div className="k-colorgradient-canvas k-hstack">
72-
<div className="k-hsv-rectangle" style={gradientStyle}>
73-
<div className="k-hsv-gradient">
74-
<div className={classNames(
75-
'k-hsv-draghandle',
76-
'k-draghandle',
77-
{
78-
'k-hover': hoverHandle,
79-
'k-focus': focusHandle
80-
}
81-
)} style={dragHandleStyle} ></div>
86+
{
87+
!canvasOrientation || canvasOrientation === 'horizontal' &&
88+
<div className="k-colorgradient-canvas k-hstack">
89+
<div className="k-hsv-rectangle" style={gradientStyle}>
90+
<div className="k-hsv-gradient">
91+
<div className={classNames(
92+
'k-hsv-draghandle',
93+
'k-draghandle',
94+
{
95+
'k-hover': hoverHandle,
96+
'k-focus': focusHandle
97+
}
98+
)} style={dragHandleStyle} ></div>
99+
</div>
100+
</div>
101+
<div className="k-hsv-controls k-hstack">
102+
<SliderGradientVertical className="k-hue-slider" hover={hoverHandle} focus={focusHandle} />
103+
{
104+
mode !== 'rgb' && mode !== 'hsv' && <SliderGradientVertical className="k-alpha-slider" hover={hoverHandle} focus={focusHandle} trackStyle={alphaStyle}/>
105+
}
82106
</div>
83107
</div>
84-
<div className="k-hsv-controls k-hstack">
85-
<SliderGradientVertical className="k-hue-slider" hover={hoverHandle} focus={focusHandle} />
86-
{
87-
mode !== 'rgb' && mode !== 'hsv' && <SliderGradientVertical className="k-alpha-slider" hover={hoverHandle} focus={focusHandle} trackStyle={alphaStyle}/>
88-
}
108+
}
109+
{
110+
canvasOrientation === 'vertical' &&
111+
<div className="k-colorgradient-canvas k-vstack">
112+
<div className="k-hsv-rectangle" style={gradientStyle}>
113+
<div className="k-hsv-gradient">
114+
<div className={classNames(
115+
'k-hsv-draghandle',
116+
'k-draghandle',
117+
{
118+
'k-hover': hoverHandle,
119+
'k-focus': focusHandle
120+
}
121+
)} style={dragHandleStyle} ></div>
122+
</div>
123+
</div>
124+
<div className="k-hsv-controls k-vstack">
125+
<SliderGradient className="k-hue-slider" hover={hoverHandle} focus={focusHandle} />
126+
{
127+
mode !== 'rgb' && mode !== 'hsv' && <SliderGradient className="k-alpha-slider" hover={hoverHandle} focus={focusHandle} trackStyle={alphaStyleHorizontal}/>
128+
}
129+
</div>
89130
</div>
90-
</div>
91-
<ColorInput mode={props.mode} />
131+
}
132+
133+
<ColorInput mode={props.mode} size={size}/>
92134
{ contrast && <ColorContrast /> }
93135
</div>
94136
);

‎packages/html/src/colorgradient/color-input.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { classNames } from '../misc';
1+
import { classNames, Size } from '../misc';
22
import { Button } from '../button';
33
import { NumericTextbox } from '../numerictextbox';
44
import { Textbox } from '../textbox';
@@ -7,14 +7,18 @@ const COLOR_INPUT_CLASSNAME = 'k-colorgradient-inputs';
77

88
const states = [];
99

10-
const options = {};
10+
const options = {
11+
size: [ Size.small, Size.medium, Size.large ]
12+
};
1113

1214
export type KendoColorInputOptions = {
1315
mode?: 'rgba' | 'rgb' | 'hsva' | 'hsv' | 'hex';
16+
size?: (typeof options.size)[number] | null;
1417
};
1518

1619
const defaultOptions = {
17-
mode: 'rgba'
20+
mode: 'rgba',
21+
size: Size.medium,
1822
};
1923

2024
export const ColorInput = (
@@ -24,29 +28,30 @@ export const ColorInput = (
2428
) => {
2529
const {
2630
mode = defaultOptions.mode,
31+
size,
2732
} = props;
2833

2934
return (
3035
<div className={classNames(COLOR_INPUT_CLASSNAME, 'k-hstack')}>
3136
<div className="k-vstack">
32-
<Button fillMode="flat" icon="caret-alt-expand" className="k-colorgradient-toggle-mode" />
37+
<Button fillMode="flat" icon="caret-alt-expand" className="k-colorgradient-toggle-mode" size={size} />
3338
</div>
3439
{ mode === 'rgba' &&
3540
<>
3641
<div className="k-vstack">
37-
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
42+
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" size={size} />
3843
<label className="k-colorgradient-input-label">R</label>
3944
</div>
4045
<div className="k-vstack">
41-
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
46+
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" size={size} />
4247
<label className="k-colorgradient-input-label">G</label>
4348
</div>
4449
<div className="k-vstack">
45-
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
50+
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" size={size} />
4651
<label className="k-colorgradient-input-label">B</label>
4752
</div>
4853
<div className="k-vstack">
49-
<NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
54+
<NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" size={size} />
5055
<label className="k-colorgradient-input-label">A</label>
5156
</div>
5257
</>

0 commit comments

Comments
 (0)