Skip to content

Commit

Permalink
feat(html): add color-editor helper
Browse files Browse the repository at this point in the history
  • Loading branch information
@epetrow @Juveniel
epetrow authored and Juveniel committed Apr 21, 2023
1 parent c0c299a commit 367241b
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 444 deletions.
93 changes: 93 additions & 0 deletions packages/html/src/coloreditor/color-editor.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { classNames, stateClassNames, States } from '../utils';
import { ActionButtons } from '../action-buttons';
import { Button } from '../button';
import { ButtonGroup } from '../button-group';
import { ColorGradient } from '../colorgradient';
import { ColorPalette } from '../colorpalette';
import { ColorPreview } from '../color-preview';
import { PALETTEPRESETS } from '../colorpalette/colorpalette-presets';

const COLOREDITOR_CLASSNAME = 'k-coloreditor';

const states = [
States.focus
];

const options = {};

export type KendoColorEditorProps = {
view?: 'gradient' | 'palette';
color?: string;
currentColor?: string;
focusView?: boolean;
dir?: 'ltr' | 'rtl';
group?: boolean;
palette?: Array<string> | any;
};

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

const defaultProps = {
view: 'gradient',
currentColor: 'fuchsia',
palette: PALETTEPRESETS.office
};

export const ColorEditor = (
props: KendoColorEditorProps &
KendoColorEditorState &
React.HTMLAttributes<HTMLDivElement>
) => {
const {
view = defaultProps.view,
color,
currentColor = defaultProps.currentColor,
focus,
focusView,
dir,
group,
palette = defaultProps.palette
} = props;

return (
<div className={classNames(
props.className,
'k-flatcolorpicker',
COLOREDITOR_CLASSNAME,
stateClassNames(COLOREDITOR_CLASSNAME, { focus })
)} dir={dir}>
<div className="k-coloreditor-header k-hstack">
<div className="k-coloreditor-header-actions k-hstack">
{ group &&
<ButtonGroup>
<Button fillMode="flat" icon="droplet-slider" selected={ view === 'gradient' }></Button>
<Button 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>
<div className="k-coloreditor-preview k-vstack">
<ColorPreview className="k-coloreditor-preview-color" color={color} />
<ColorPreview className="k-coloreditor-current-color" color={currentColor} />
</div>
</div>
</div>
<div className="k-coloreditor-views k-vstack">
{ view === 'gradient' ? <ColorGradient focus={focusView} /> : <ColorPalette palette={palette}/> }
</div>
<ActionButtons className="k-coloreditor-footer" alignment="end" >
<Button className="k-coloreditor-cancel">Cancel</Button>
<Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
</ActionButtons>
</div>
);
};

ColorEditor.states = states;
ColorEditor.options = options;
ColorEditor.className = COLOREDITOR_CLASSNAME;
ColorEditor.defaultProps = defaultProps;

export default ColorEditor;
1 change: 1 addition & 0 deletions packages/html/src/coloreditor/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './color-editor.spec';
78 changes: 2 additions & 76 deletions packages/html/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import ReactDOM from 'react-dom/client';
import { ActionButtons } from '../../action-buttons';
import { Button } from '../../button';
import { ColorPreview } from '../../color-preview';
import { NumericTextbox } from '../../numerictextbox';
import { ColorEditor } from '../../coloreditor';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand All @@ -27,78 +24,7 @@ root.render(
<span>Focused Cologradient Inside ColorEditor</span>

<section>
<div className="k-flatcolorpicker k-coloreditor">
<div className="k-coloreditor-header k-hstack">
<div className="k-coloreditor-header-actions k-hstack"></div>
<div className="k-spacer"></div>
<div className="k-coloreditor-header-actions k-hstack">
<Button fillMode="flat" icon="reset-color"></Button>
<div className="k-coloreditor-preview k-vstack">
<ColorPreview className="k-coloreditor-preview-color" />
<ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
</div>
</div>
</div>
<div className="k-coloreditor-views k-vstack">
<div className="k-focus k-colorgradient">
<div className="k-colorgradient-canvas k-hstack">
<div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
<div className="k-hsv-gradient">
<div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
</div>
</div>
<div className="k-hsv-controls k-hstack">
<div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
<div className="k-slider-track-wrap">
<div className="k-slider-track">
<div className="k-slider-selection"></div>
<a className="k-draghandle k-draghandle-end"></a>
</div>
</div>
</div>
<div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
<div className="k-slider-track-wrap">
<div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
<div className="k-slider-selection"></div>
<a className="k-draghandle k-draghandle-end"></a>
</div>
</div>
</div>
</div>
</div>
<div className="k-colorgradient-inputs k-hstack">
<div className="k-vstack">
<Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
<label className="k-colorgradient-input-label">R</label>
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
<label className="k-colorgradient-input-label">G</label>
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
<label className="k-colorgradient-input-label">B</label>
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
<label className="k-colorgradient-input-label">A</label>
</div>
</div>
</div>
</div>

<ActionButtons className="k-coloreditor-footer" alignment="end">
<Button className="k-coloreditor-cancel">Cancel</Button>
<Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
</ActionButtons>
</div>
<ColorEditor focusView />
</section>

</div>
Expand Down
110 changes: 3 additions & 107 deletions packages/html/src/coloreditor/tests/coloreditor-rtl.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import ReactDOM from 'react-dom/client';
import { ActionButtons } from '../../action-buttons';
import { Button } from '../../button';
import { ColorPalette } from '../../colorpalette';
import { ColorPreview } from '../../color-preview';
import { NumericTextbox } from '../../numerictextbox';
import { PALETTEPRESETS } from '../../colorpalette/colorpalette-presets';
import { ColorEditor } from '../../coloreditor';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand All @@ -30,110 +25,11 @@ root.render(
<span>ColorPalette View</span>

<section>
<div className="k-flatcolorpicker k-coloreditor k-rtl">
<div className="k-coloreditor-header k-hstack">
<div className="k-coloreditor-header-actions k-hstack">
<div className="k-button-group">
<Button fillMode="flat" icon="color-canvas" selected></Button>
<Button fillMode="flat" icon="palette"></Button>
</div>
</div>
<div className="k-spacer"></div>
<div className="k-coloreditor-header-actions k-hstack">
<Button fillMode="flat" icon="reset-color"></Button>
<div className="k-coloreditor-preview k-vstack">
<ColorPreview className="k-coloreditor-preview-color" color="rgba(0,0,0, 0.5)" />
<ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
</div>
</div>
</div>
<div className="k-coloreditor-views k-vstack">
<div className="k-colorgradient">
<div className="k-colorgradient-canvas k-hstack">
<div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
<div className="k-hsv-gradient">
<div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
</div>
</div>
<div className="k-hsv-controls k-hstack">
<div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
<div className="k-slider-track-wrap">
<div className="k-slider-track">
<div className="k-slider-selection"></div>
<a className="k-draghandle k-draghandle-end"></a>
</div>
</div>
</div>
<div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
<div className="k-slider-track-wrap">
<div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
<div className="k-slider-selection"></div>
<a className="k-draghandle k-draghandle-end"></a>
</div>
</div>
</div>
</div>
</div>
<div className="k-colorgradient-inputs k-hstack">
<div className="k-vstack">
<Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
<label className="k-colorgradient-input-label">R</label>
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
<label className="k-colorgradient-input-label">G</label>
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
<label className="k-colorgradient-input-label">B</label>
</div>

<div className="k-vstack">
<NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
<label className="k-colorgradient-input-label">A</label>
</div>
</div>
</div>
</div>
<ActionButtons className="k-coloreditor-footer" alignment="end">
<Button className="k-coloreditor-cancel">Cancel</Button>
<Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
</ActionButtons>
</div>
<ColorEditor group color="rgba(0,0,0, 0.5)" dir="rtl" />
</section>

<section>
<div className="k-flatcolorpicker k-coloreditor k-rtl">
<div className="k-coloreditor-header k-hstack">
<div className="k-coloreditor-header-actions k-hstack">
<div className="k-button-group">
<Button fillMode="flat" icon="color-canvas"></Button>
<Button fillMode="flat" icon="palette" selected></Button>
</div>
</div>
<div className="k-spacer"></div>
<div className="k-coloreditor-header-actions k-hstack">
<Button fillMode="flat" icon="reset-color"></Button>
<div className="k-coloreditor-preview k-vstack">
<ColorPreview className="k-coloreditor-preview-color" color="rgba(0,0,0, 0.5)" />
<ColorPreview className="k-coloreditor-current-color" color="fuchsia" />
</div>
</div>
</div>
<div className="k-coloreditor-views k-vstack">
<ColorPalette palette={PALETTEPRESETS.office}></ColorPalette>
</div>
<ActionButtons className="k-coloreditor-footer" alignment="end">
<Button className="k-coloreditor-cancel">Cancel</Button>
<Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
</ActionButtons>
</div>
<ColorEditor group view="palette" color="rgba(0,0,0, 0.5)" dir="rtl" />
</section>

</div>
Expand Down
Loading

0 comments on commit 367241b

Please sign in to comment.