@progress/kendo-themes-html 14.5.1-dev.6 → 14.5.1-dev.8

package/src/imageeditor/templates/imageeditor-insert-shape.tsx

@@ -0,0 +1,195 @@
+import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, ImageEditorResizeHandles } from "..";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Combobox } from "../../combobox";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
+import { FloatingToolbar } from "../../floating-toolbar/floating-toolbar.spec";
+
+const insertShapeSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" selected aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+const shapeTypes = [
+    { label: "Square", icon: "checkbox" },
+    { label: "Rectangle", icon: "rectangle-shape" },
+    { label: "Circle", icon: "circle-shape" },
+    { label: "Oval", icon: "oval-shape" },
+    { label: "Triangle", icon: "kpi-status-hold" },
+    { label: "Star", icon: "star" },
+    { label: "Heart", icon: "heart" },
+    { label: "Diamond", icon: "kpi-status-deny" },
+    { label: "Hexagon", icon: "hexagon-shape" },
+    { label: "Pentagon", icon: "pentagon-shape" },
+    { label: "Arrow", icon: "arrow-right" }
+];
+
+export const ImageEditorInsertShape = (props: any) => (
+    <ImageEditor
+        sidebarItems={insertShapeSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Shapes and Lines" actions={
+                <>
+                    <Button>Remove</Button>
+                    <Button themeColor="primary">Insert</Button>
+                </>
+            }>
+                <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                    <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
+                    <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
+                </SegmentedControl>
+
+                <Form tag="div">
+                    <FormField
+                        label="Type"
+                        editor={
+                            <ImageEditorOptionList scrollable scrollableEnd>
+                                {shapeTypes.map((shape) => (
+                                    <ImageEditorOptionPreview key={shape.label} selected={shape.label === "Circle"}>
+                                        <div className="k-imageeditor-option-content">
+                                            <Icon icon={shape.icon} />
+                                            <span className="k-imageeditor-option-label">{shape.label}</span>
+                                        </div>
+                                    </ImageEditorOptionPreview>
+                                ))}
+                            </ImageEditorOptionList>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Stroke Color"
+                            editor={ <ColorPicker id="shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
+                        />
+                        <FormField
+                            label="Stroke Width"
+                            editorId="shape-stroke-width"
+                            editor={ <NumericTextbox id="shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
+                        />
+                    </Fieldset>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Fill Color"
+                            editor={ <ColorPicker id="shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
+                        />
+                        <FormField
+                            label="Text Color"
+                            editor={ <ColorPicker id="shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Font Family"
+                        editorId="shape-font-family"
+                        editor={ <Combobox id="shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Font Size"
+                            editorId="shape-font-size"
+                            editor={ <NumericTextbox id="shape-font-size" showSpinButton={false} value="24" prefix={<Icon icon="font-size" />} /> }
+                        />
+                        <FormField
+                            label="Alignment"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
+                                    <Button icon="align-center" selected aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Format"
+                        editor={
+                            <div className="k-imageeditor-controls">
+                                <Button icon="bold" aria-label="Bold"></Button>
+                                <Button icon="italic" aria-label="Italic"></Button>
+                                <Button icon="underline" aria-label="Underline"></Button>
+                                <Button icon="strikethrough" aria-label="Strikethrough"></Button>
+                                <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
+                                <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
+                            </div>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Align Horizontal"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
+                                    <Button icon="align-items-center" aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                        <FormField
+                            label="Align Vertical"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
+                                    <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
+                                    <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-resize" style={{ width: "165px", height: "54px", top: "140px", left: "165px" }}>
+                    <div style={{
+                        width: "100%",
+                        height: "100%",
+                        borderRadius: "50%",
+                        background: "#eae382",
+                        border: "2px solid #b0e855",
+                        boxSizing: "border-box"
+                    }}>
+                        <p style={{
+                            margin: 0,
+                            width: "100%",
+                            height: "100%",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontFamily: "'Trebuchet MS', sans-serif",
+                            fontSize: "16px",
+                            lineHeight: 1,
+                            color: "#4a4500",
+                            whiteSpace: "nowrap"
+                        }}>Shape text</p>
+                    </div>
+                    <ImageEditorResizeHandles variant="mixed" />
+                    <FloatingToolbar fillMode="flat" resizable offset={{ top: "62px", left: "0" }}>
+                        <Button fillMode="flat" icon="copy" aria-label="Duplicate"></Button>
+                        <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                        <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                        <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                        <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+                    </FloatingToolbar>
+                </div>
+            </>
+        }
+        {...props} />
+);
+
+export default ImageEditorInsertShape;

package/src/imageeditor/templates/imageeditor-insert-text.tsx

@@ -0,0 +1,143 @@
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles } from "..";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Combobox } from "../../combobox";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { FloatingToolbar } from "../../floating-toolbar/floating-toolbar.spec";
+
+const insertTextSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" selected aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+export const ImageEditorInsertText = (props: any) => (
+    <ImageEditor
+        sidebarItems={insertTextSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Text" actions={
+                <>
+                    <Button>Remove</Button>
+                    <Button themeColor="primary">Insert</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <FormField
+                        label="Font Family"
+                        editorId="text-font-family"
+                        editor={ <Combobox id="text-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Font Size"
+                            editorId="text-font-size"
+                            editor={ <NumericTextbox id="text-font-size" showSpinButton={false} value="70" prefix={<Icon icon="font-size" />} /> }
+                        />
+                        <FormField
+                            label="Alignment"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
+                                    <Button icon="align-center" selected aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                    <FormField
+                        label="Format"
+                        editor={
+                            <div className="k-imageeditor-controls">
+                                <Button icon="bold" aria-label="Bold"></Button>
+                                <Button icon="italic" aria-label="Italic"></Button>
+                                <Button icon="underline" aria-label="Underline"></Button>
+                                <Button icon="strikethrough" aria-label="Strikethrough"></Button>
+                                <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
+                                <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
+                            </div>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Fill Color"
+                            editor={ <ColorPicker id="text-fill-color" value="#f5e93d" valueIconName="foreground-color" aria-label="Fill Color" /> }
+                        />
+                        <FormField
+                            label="Text Opacity"
+                            editor={ <NumericTextbox id="text-opacity" showSpinButton={false} value="70%" prefix={<Icon icon="transparency" />} aria-label="Text Opacity" /> }
+                        />
+                    </Fieldset>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Align Horizontal"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
+                                    <Button icon="align-items-center" aria-label="Align Center"></Button>
+                                    <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                        <FormField
+                            label="Align Vertical"
+                            editor={
+                                <ButtonGroup>
+                                    <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
+                                    <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
+                                    <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
+                                </ButtonGroup>
+                            }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-resize" style={{ width: "270px", height: "64px", top: "122px", left: "112px" }}>
+                    <p style={{
+                        margin: 0,
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontFamily: "'Trebuchet MS', sans-serif",
+                        fontWeight: "bold",
+                        fontSize: "38px",
+                        lineHeight: 1,
+                        color: "#f5e93d",
+                        opacity: 0.7,
+                        textTransform: "uppercase",
+                        whiteSpace: "nowrap"
+                    }}>Text Example</p>
+                    <ImageEditorResizeHandles variant="mixed" />
+                    <FloatingToolbar fillMode="flat" offset={{ top: "72px", left: "0" }}>
+                        <Button fillMode="flat" icon="copy" aria-label="Duplicate"></Button>
+                        <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                        <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                        <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                        <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+                    </FloatingToolbar>
+                </div>
+            </>
+        }
+        {...props} />
+);
+
+export default ImageEditorInsertText;

package/src/imageeditor/templates/imageeditor-normal.tsx

@@ -1,5 +1,24 @@
 import { ImageEditor } from "..";
+import { Button } from "../../button";
+import { Autocomplete } from "../../autocomplete";
+import { ToolbarItem, ToolbarSeparator } from "../../toolbar";
+
+// Freshly-loaded image: no edit history yet, so undo/redo are disabled
+const normalToolbarItems = [
+    <Button fillMode="flat" key="toolbar-button-1" icon="image-add" aria-label="Image Add"></Button>,
+    <ToolbarSeparator key="toolbar-separator-1"></ToolbarSeparator>,
+    <Button fillMode="flat" key="toolbar-button-2" disabled icon="undo" aria-label="Undo"></Button>,
+    <Button fillMode="flat" key="toolbar-button-3" disabled icon="redo" aria-label="Redo"></Button>,
+    <ToolbarSeparator key="toolbar-separator-2"></ToolbarSeparator>,
+    <Button fillMode="flat" key="toolbar-button-4" icon="download" aria-label="Download"></Button>,
+    <div className="k-spacer" key="toolbar-spacer"></div>,
+     <Button fillMode="flat" key="toolbar-button-5" icon="zoom-in" aria-label="Zoom In"></Button>,
+    <ToolbarItem key="toolbar-item-1">
+        <Autocomplete fillMode="flat" value="Fit" aria-label="Zoom options" />
+    </ToolbarItem>,
+     <Button fillMode="flat" key="toolbar-button-6" icon="zoom-out" aria-label="Zoom Out"></Button>
+];
 
 export const ImageEditorNormal = (props: any) => (
-    <ImageEditor {...props} />
+    <ImageEditor toolbarItems={normalToolbarItems} {...props} />
 );

package/src/imageeditor/templates/imageeditor-pixelate.tsx

@@ -0,0 +1,92 @@
+import { ImageEditor, ImageEditorPane } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { Form, FormField } from "../../form";
+import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from "../../radio";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
+import { Slider } from "../../slider";
+
+
+const pixelateSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" selected aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+export const ImageEditorPixelate = ({ shape = "rectangular", intensity = 24, ...props }: any) => (
+    <ImageEditor
+        sidebarItems={pixelateSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Pixelate" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched aria-label="Redaction Tool" style={{ flexShrink: 0 }}>
+                    <SegmentedControlButton icon="blur">Blur</SegmentedControlButton>
+                    <SegmentedControlButton icon="grid" selected>Pixelate</SegmentedControlButton>
+                </SegmentedControl>
+
+                <Form tag="div">
+                    <FormField
+                        label="Marquee Tool Shape"
+                        editor={
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="pixelate-shape-rectangular" name="pixelate-shape" checked={shape === "rectangular"}>Rectangular</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="pixelate-shape-elliptical" name="pixelate-shape" checked={shape === "elliptical"}>Elliptical</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                            </RadioGroup>
+                        }
+                    />
+                    <FormField
+                        label="Pixelate Intensity"
+                        editorId="pixelate-intensity"
+                        editor={
+                            <div className="k-imageeditor-field-row">
+                                <Slider
+                                    style={{ flex: 1, "--kendo-slider-start": 0, "--kendo-slider-end": intensity } as React.CSSProperties}
+                                    aria-label="Pixelate Intensity"
+                                    showButtons={false}
+                                    showTicks={false}
+                                    value={intensity}
+                                    min={0}
+                                    max={100}
+                                />
+                                <NumericTextbox
+                                    id="pixelate-intensity"
+                                    style={{ width: "80px", flex: "none" }}
+                                    showClearButton={false}
+                                    showSpinButton={false}
+                                    value={String(intensity)}
+                                />
+                            </div>
+                        }
+                    />
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ borderStyle: "dashed" }}></div>
+                </div>
+            </>
+        }
+        {...props} />
+);

package/src/imageeditor/templates/imageeditor-resize.tsx

@@ -1,68 +1,86 @@
-import { ImageEditor } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles } from "..";
 import { Button } from "../../button";
 import { CheckboxWithLabelAfter } from "../../checkbox";
-import { DropdownList } from "../../dropdownlist";
-import { FormNormal, Fieldset, FormField } from "../../form";
 import { NumericTextbox } from "../../numerictextbox";
-import { ToolbarSeparator, ToolbarItem } from "../../toolbar";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from "../../radio";
+import { Tooltip } from "../../tooltip";
+
+const resizeSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" selected aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
 
 export const ImageEditorResize = (props: any) => (
     <ImageEditor
-        toolbarItems={[
-            <Button key="toolbar-button-1" icon="upload" aria-label="Upload"></Button>,
-            <Button key="toolbar-button-2" icon="download" aria-label="Download"></Button>,
-            <ToolbarSeparator key="toolbar-separator-1"></ToolbarSeparator>,
-            <Button key="toolbar-button-3" disabled icon="undo" aria-label="Undo"></Button>,
-            <Button key="toolbar-button-4" disabled icon="redo" aria-label="Redo"></Button>,
-            <ToolbarSeparator key="toolbar-separator-2"></ToolbarSeparator>,
-            <Button key="toolbar-button-5" icon="crop" aria-label="Crop"></Button>,
-            <Button key="toolbar-button-6" icon="image-resize" aria-label="Resize"></Button>,
-            <Button key="toolbar-button-7" icon="zoom-in" aria-label="Zoom in"></Button>,
-            <Button key="toolbar-button-8" icon="zoom-out" aria-label="Zoom out"></Button>,
-            <ToolbarItem key="toolbar-item-1">
-                <DropdownList value="Zoom options" aria-label="Zoom options" />
-            </ToolbarItem>
-        ]}
+        sidebarItems={resizeSidebarItems}
         actionPane={
-            <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
+            <ImageEditorPane title="Resize" actions={
                 <>
-                    <Button themeColor="primary" icon="check">Confirm</Button>
-                    <Button icon="cancel">Cancel</Button>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
                 </>
             }>
-                <Fieldset layout="grid" legend="Resize Image" cols={2} gutters={{cols: "8px"}}>
-                    <FormField
-                        colSpan="1"
-                        label="Width:"
-                        editorId="resize-width"
-                        editor={ <NumericTextbox id="resize-width" showClearButton={false} value="61" /> }
-                    />
-                    <FormField
-                        colSpan="1"
-                        label="&nbsp;"
-                        editor={ <DropdownList value="Pixels" aria-label="Width unit" /> }
-                    />
-                    <FormField
-                        colSpan="1"
-                        label="Height:"
-                        editorId="resize-height"
-                        editor={ <NumericTextbox id="resize-height" showClearButton={false} value="68" /> }
-                    />
-                    <FormField
-                        colSpan="1"
-                        label="&nbsp;"
-                        editor={ <DropdownList value="Pixels" aria-label="Height unit" /> }
-                    />
+                <Form tag="div">
                     <FormField
-                        colSpan="2"
-                        editor={ <CheckboxWithLabelAfter id="resize-lock">Lock aspect ratio</CheckboxWithLabelAfter> }
+                        label="Scale Unit"
+                        editor={
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="resize-scale-unit-pixel" name="resize-scale-unit" checked>Pixel</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="resize-scale-unit-percentage" name="resize-scale-unit">Percentage</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                            </RadioGroup>
+                        }
                     />
-                </Fieldset>
-            </FormNormal>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "8px" }}>
+                        <FormField
+                            label="Width"
+                            editorId="resize-width"
+                            editor={ <NumericTextbox id="resize-width" showClearButton={false} value="494" prefix={<Icon icon="arrows-left-right" />} /> }
+                        />
+                        <FormField
+                            label="Height"
+                            editorId="resize-height"
+                            editor={ <NumericTextbox id="resize-height" showClearButton={false} value="307" prefix={<Icon icon="arrows-top-bottom" />} /> }
+                        />
+                    </Fieldset>
+                    <FormField editor={ <CheckboxWithLabelAfter id="resize-lock" checked>Lock Aspect Ratio</CheckboxWithLabelAfter> } />
+                </Form>
+            </ImageEditorPane>
         }
 
         children={
-            <canvas width="61" height="68" role="img" aria-label="Image being edited"></canvas>
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-resize">
+                    <ImageEditorResizeHandles variant="mixed" />
+                </div>
+                <Tooltip
+                    themeColor="inverse"
+                    style={{ position: "absolute", insetBlockEnd: "-52px", insetInlineEnd: "0" }}
+                    content={
+                        <>
+                            <div>W: 494</div>
+                            <div>H: 307</div>
+                        </>
+                    }
+                ></Tooltip>
+            </>
         }
         {...props} />
 );