Skip to content

Commit

Permalink
feat(html): add colorPicker sizing and adaptive rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@inikolova
inikolova committed Dec 21, 2024
1 parent 9a06d68 commit 23472e2
Show file tree
Hide file tree
Showing 11 changed files with 249 additions and 47 deletions.
19 changes: 16 additions & 3 deletions packages/html/src/color-preview/color-preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,33 @@
import { classNames } from '../misc';
import { classNames, Size, optionClassNames } from '../misc';
import { Icon } from '../icon';

export const COLORPREVIEW_CLASSNAME = `k-color-preview`;

const states = [];

const options = {};
const options = {
size: [ Size.small, Size.medium, Size.large ]
};

export type KendoColorPreviewOptions = {
size?: (typeof options.size)[number] | null;
};

export type KendoColorPreviewProps = {
export type KendoColorPreviewProps = KendoColorPreviewOptions & {
color?: string;
iconName?: string;
};

const defaultOptions = {
size: Size.medium
}

export const ColorPreview = (
props: KendoColorPreviewProps &
React.HTMLAttributes<HTMLSpanElement>
) => {
const {
size = defaultOptions.size,
color,
iconName,
...other
Expand All @@ -33,6 +44,7 @@ export const ColorPreview = (
'k-icon-color-preview': iconName,
'k-no-color': !color
},
optionClassNames(COLORPREVIEW_CLASSNAME, {size})
)}
>
{iconName && (
Expand All @@ -49,5 +61,6 @@ export const ColorPreview = (
ColorPreview.states = states;
ColorPreview.options = options;
ColorPreview.className = COLORPREVIEW_CLASSNAME;
ColorPreview.defaultOptions = defaultOptions;

export default ColorPreview;
36 changes: 24 additions & 12 deletions packages/html/src/coloreditor/color-editor.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { classNames, stateClassNames, States } from '../misc';
import { classNames, stateClassNames, States, Size, optionClassNames } from '../misc';
import { ActionButtons } from '../action-buttons';
import { Button } from '../button';
import { ButtonGroup } from '../button-group';
Expand All @@ -13,9 +13,15 @@ const states = [
States.focus
];

const options = {};
const options = {
size: [ Size.small, Size.medium, Size.large ],
};

export type KendoColorEditorOptions = {
size?: (typeof options.size)[number] | null;
};

export type KendoColorEditorProps = {
export type KendoColorEditorProps = KendoColorEditorOptions & {
view?: 'gradient' | 'palette';
color?: string;
currentColor?: string;
Expand All @@ -24,14 +30,17 @@ export type KendoColorEditorProps = {
group?: boolean;
palette?: Array<string> | any;
actionButtons?: boolean;
canvasOrientation?: 'horizontal' | 'vertical';
};

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

const defaultOptions = {
size: Size.medium,
view: 'gradient',
palette: PALETTEPRESETS.office,
actionButtons: true,
canvasOrientation: 'horizontal'
} as const;

export const ColorEditor = (
Expand All @@ -40,6 +49,7 @@ export const ColorEditor = (
React.HTMLAttributes<HTMLDivElement>
) => {
const {
size = defaultOptions.size,
view = defaultOptions.view,
palette = defaultOptions.palette,
color,
Expand All @@ -49,39 +59,41 @@ export const ColorEditor = (
dir,
group,
actionButtons = defaultOptions.actionButtons,
canvasOrientation = defaultOptions.canvasOrientation,
} = props;

return (
<div className={classNames(
props.className,
'k-flatcolorpicker',
COLOREDITOR_CLASSNAME,
stateClassNames(COLOREDITOR_CLASSNAME, { focus })
stateClassNames(COLOREDITOR_CLASSNAME, { focus }),
optionClassNames(COLOREDITOR_CLASSNAME, { size })
)} dir={dir}>
<div className="k-coloreditor-header k-hstack">
<div className="k-coloreditor-header-actions k-hstack">
{ group &&
<ButtonGroup fillMode="flat">
<Button className="k-group-start" fillMode="flat" icon="droplet-slider" selected={ view === 'gradient' }></Button>
<Button className="k-group-end" fillMode="flat" icon="palette" selected={ view === 'palette' }></Button>
<Button className="k-group-start" size={size} fillMode="flat" icon="droplet-slider" selected={ view === 'gradient' }></Button>
<Button className="k-group-end" size={size} fillMode="flat" icon="palette" selected={ view === 'palette' }></Button>
</ButtonGroup>
}
</div>
<div className="k-spacer"></div>
<div className="k-coloreditor-header-actions k-hstack">
<Button fillMode="flat" icon="droplet-slash"></Button>
<Button fillMode="flat" icon="droplet-slash" size={size}></Button>
<div className="k-coloreditor-preview k-vstack">
<ColorPreview className="k-coloreditor-preview-color" color={color} />
<ColorPreview className="k-coloreditor-current-color" color={currentColor} />
<ColorPreview className="k-coloreditor-preview-color" color={color} size={size} />
<ColorPreview className="k-coloreditor-current-color" color={currentColor} size={size} />
</div>
</div>
</div>
<div className="k-coloreditor-views k-vstack">
{ view === 'gradient' ? <ColorGradient focus={focusView} /> : <ColorPalette palette={palette}/> }
{ view === 'gradient' ? <ColorGradient focus={focusView} size={size} canvasOrientation={canvasOrientation} /> : <ColorPalette palette={palette} /> }
</div>
{actionButtons && <ActionButtons className="k-coloreditor-footer" alignment="end" >
<Button className="k-coloreditor-cancel">Cancel</Button>
<Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
<Button className="k-coloreditor-cancel" size={size}>Cancel</Button>
<Button themeColor="primary" size={size} className="k-coloreditor-apply">Apply</Button>
</ActionButtons>}
</div>
);
Expand Down
46 changes: 46 additions & 0 deletions packages/html/src/coloreditor/tests/coloreditor-sizes.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { ColorEditor, ColorEditorGroup, ColorEditorPaletteGroup } from '../../coloreditor';


const styles = `
#test-area {
grid-template-columns: 1fr 1fr 2fr;
}
.k-hue-slider {
--kendo-slider-start: 0;
--kendo-slider-end: 0;
}
.k-alpha-slider {
--kendo-slider-start: 0;
--kendo-slider-end: 100;
}
`;

export default () =>(
<>
<style>{styles}</style>
<div id="test-area" className="k-d-grid k-gap-2">
{
ColorEditor.options.size.map((size => (
<>
<div>
<div>{size}</div>
<ColorEditorGroup color="rgba(0,0,0, 0.5)" size={size} orientation="vertical"/>
</div>
</>
)))
}

{
ColorEditor.options.size.map((size => (
<>
<div>
<div>{size}</div>
<ColorEditorPaletteGroup color="rgba(0,0,0, 0.5)" size={size} />
</div>
</>
)))
}
</div>
</>
);
90 changes: 66 additions & 24 deletions packages/html/src/colorgradient/color-gradient.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { classNames, stateClassNames, States } from '../misc';
import { SliderGradientVertical } from '../slider';
import { classNames, stateClassNames, States, Size, optionClassNames } from '../misc';
import { SliderGradientVertical, SliderGradient } from '../slider';
import { ColorInput } from './color-input';
import { ColorContrast } from './color-contrast';

Expand All @@ -12,9 +12,15 @@ const states = [
States.disabled,
];

const options = {};
const options = {
size: [ Size.small, Size.medium, Size.large ]
};

export type KendoColorGradientOptions = {
size?: (typeof options.size)[number] | null;
};

export type KendoColorGradientProps = {
export type KendoColorGradientProps = KendoColorGradientOptions & {
mode?: 'rgba' | 'rgb' | 'hsva' | 'hsv' | 'hex';
dir?: 'ltr' | 'rtl';
contrast?: boolean;
Expand All @@ -23,18 +29,23 @@ export type KendoColorGradientProps = {
gradientStyle?: React.CSSProperties;
dragHandleStyle?: React.CSSProperties;
alphaStyle?: React.CSSProperties;
alphaStyleHorizontal?: React.CSSProperties;
canvasOrientation?: 'horizontal' | 'vertical';
};

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

const defaultOptions = {
size: Size.medium,
mode: 'rgba',
readonly: false,
disabled: false,
contrast: false,
gradientStyle: { background: "rgb(255, 0, 0 )" },
dragHandleStyle: { top: "50px", left: "73px" },
alphaStyle: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }
alphaStyle: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" },
alphaStyleHorizontal: { background: "linear-gradient(to right, transparent, rgb(255, 0, 0))" },
canvasOrientation: 'horizontal'
};

export const ColorGradient = (
Expand All @@ -43,18 +54,21 @@ export const ColorGradient = (
React.HTMLAttributes<HTMLDivElement>
) => {
const {
size = defaultOptions.size,
mode = defaultOptions.mode,
readonly = defaultOptions.readonly,
disabled = defaultOptions.disabled,
gradientStyle = defaultOptions.gradientStyle,
dragHandleStyle = defaultOptions.dragHandleStyle,
alphaStyle = defaultOptions.alphaStyle,
alphaStyleHorizontal = defaultOptions.alphaStyleHorizontal,
contrast = defaultOptions.contrast,
dir,
hover,
focus,
hoverHandle,
focusHandle,
canvasOrientation = defaultOptions.canvasOrientation,
} = props;

return (
Expand All @@ -66,29 +80,57 @@ export const ColorGradient = (
focus,
readonly,
disabled
})
}),
optionClassNames(COLOR_GRADIENT_CLASSNAME, {size})
)} dir={dir}>
<div className="k-colorgradient-canvas k-hstack">
<div className="k-hsv-rectangle" style={gradientStyle}>
<div className="k-hsv-gradient">
<div className={classNames(
'k-hsv-draghandle',
'k-draghandle',
{
'k-hover': hoverHandle,
'k-focus': focusHandle
}
)} style={dragHandleStyle} ></div>
{
!canvasOrientation || canvasOrientation === 'horizontal' &&
<div className="k-colorgradient-canvas k-hstack">
<div className="k-hsv-rectangle" style={gradientStyle}>
<div className="k-hsv-gradient">
<div className={classNames(
'k-hsv-draghandle',
'k-draghandle',
{
'k-hover': hoverHandle,
'k-focus': focusHandle
}
)} style={dragHandleStyle} ></div>
</div>
</div>
<div className="k-hsv-controls k-hstack">
<SliderGradientVertical className="k-hue-slider" hover={hoverHandle} focus={focusHandle} />
{
mode !== 'rgb' && mode !== 'hsv' && <SliderGradientVertical className="k-alpha-slider" hover={hoverHandle} focus={focusHandle} trackStyle={alphaStyle}/>
}
</div>
</div>
<div className="k-hsv-controls k-hstack">
<SliderGradientVertical className="k-hue-slider" hover={hoverHandle} focus={focusHandle} />
{
mode !== 'rgb' && mode !== 'hsv' && <SliderGradientVertical className="k-alpha-slider" hover={hoverHandle} focus={focusHandle} trackStyle={alphaStyle}/>
}
}
{
canvasOrientation === 'vertical' &&
<div className="k-colorgradient-canvas k-vstack">
<div className="k-hsv-rectangle" style={gradientStyle}>
<div className="k-hsv-gradient">
<div className={classNames(
'k-hsv-draghandle',
'k-draghandle',
{
'k-hover': hoverHandle,
'k-focus': focusHandle
}
)} style={dragHandleStyle} ></div>
</div>
</div>
<div className="k-hsv-controls k-vstack">
<SliderGradient className="k-hue-slider" hover={hoverHandle} focus={focusHandle} />
{
mode !== 'rgb' && mode !== 'hsv' && <SliderGradient className="k-alpha-slider" hover={hoverHandle} focus={focusHandle} trackStyle={alphaStyleHorizontal}/>
}
</div>
</div>
</div>
<ColorInput mode={props.mode} />
}

<ColorInput mode={props.mode} size={size}/>
{ contrast && <ColorContrast /> }
</div>
);
Expand Down
Loading

0 comments on commit 23472e2

Please sign in to comment.