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

package/src/imageeditor/imageeditor-toolbar.tsx

@@ -1,7 +1,7 @@
 import { KendoToolbarProps, Toolbar, ToolbarItem, ToolbarSeparator } from '../toolbar';
 import { classNames } from '../misc';
 import { Button } from '../button';
-import { DropdownList } from '../dropdownlist';
+import { Autocomplete } from '../autocomplete';
 
 export const IMAGEEDITORTOOLBAR_CLASSNAME = `k-imageeditor-toolbar`;
 
@@ -13,24 +13,24 @@ export type KendoImageEditorToolbarProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
 };
 
-const defaultToolbarItems = [
-    <Button key="toolbar-button-1" icon="upload" aria-label="Upload"></Button>,
-    <Button key="toolbar-button-2" disabled icon="download" aria-label="Download"></Button>,
+// Shared toolbar preset for tool templates that have an active image/history (undo, redo and zoom enabled)
+export const imageEditorToolbarItems = [
+    <Button fillMode="flat" key="toolbar-button-1" icon="image-add" aria-label="Image Add"></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>,
+    <Button fillMode="flat" key="toolbar-button-2" icon="undo" aria-label="Undo"></Button>,
+    <Button fillMode="flat" key="toolbar-button-3" icon="redo" aria-label="Redo"></Button>,
     <ToolbarSeparator key="toolbar-separator-2"></ToolbarSeparator>,
-    <Button key="toolbar-button-5" disabled icon="crop" aria-label="Crop"></Button>,
-    <Button key="toolbar-button-6" disabled icon="image-resize" aria-label="Resize"></Button>,
-    <Button key="toolbar-button-7" disabled icon="zoom-in" aria-label="Zoom in"></Button>,
-    <Button key="toolbar-button-8" disabled icon="zoom-out" aria-label="Zoom out"></Button>,
+    <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">
-        <DropdownList disabled value="Zoom options" aria-label="Zoom options" />
-    </ToolbarItem>
+        <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>
 ];
 
 const defaultOptions = {
-    toolbarItems: defaultToolbarItems
+    toolbarItems: imageEditorToolbarItems
 };
 
 export const ImageEditorToolbar = (
@@ -50,6 +50,7 @@ export const ImageEditorToolbar = (
                 props.className,
                 IMAGEEDITORTOOLBAR_CLASSNAME,
             )}
+            fillMode="flat"
         >
             {toolbarItems}
         </Toolbar>

package/src/imageeditor/imageeditor.spec.tsx

@@ -1,5 +1,8 @@
 import { classNames } from '../misc';
 import { ImageEditorToolbar } from './imageeditor-toolbar';
+import { ImageEditorSidebar } from './imageeditor-sidebar';
+import { Overlay } from '../overlay';
+import { Loader } from '../loader';
 
 import { KendoComponent } from '../_types/component';
 import { IMAGEEDITOR_FOLDER_NAME, IMAGEEDITOR_MODULE_NAME } from './constants';
@@ -12,7 +15,14 @@ const options = {};
 export type KendoImageEditorProps = {
     toolbarItems?: React.JSX.Element | React.JSX.Element[];
     actionPane?: React.JSX.Element | React.JSX.Element[];
+    sidebarItems?: React.JSX.Element | React.JSX.Element[];
+    placeholder?: React.JSX.Element;
     contentHeight?: string;
+    exporting?: boolean;
+    /** Renders the mobile layout: canvas, then the pane and sidebar docked at the bottom. */
+    adaptive?: boolean;
+    sidebarScrollable?: boolean;
+    sidebarScrollingPosition?: 'start' | 'end' | 'both';
 };
 
 const defaultOptions = {};
@@ -20,11 +30,13 @@ const defaultOptions = {};
 /**
  * @aria {role="img"} Indicates the canvas role as an image. Applicable when an image is loaded.
  * @aria {aria-label|aria-labelledby} Provides an accessible name for the canvas by describing the image content. Applicable when an image is loaded.
+ * @aria {role="status"} Announces the busy overlay shown while `exporting` is true.
  * @ux {Canvas} Renders the image on an editable canvas.
  * @ux {Crop} A crop tool lets the user select and apply a cropping region.
  * @ux {Pan and zoom} The canvas can be panned by dragging and zoomed with the mouse wheel.
  * @ux {Undo / Redo} All edit operations can be undone and redone.
  * @ux {Export} The edited image can be saved or downloaded.
+ * @ux {Exporting} While `exporting` is true, a busy overlay covers the editor and interaction is blocked.
  */
 export const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttributes<HTMLDivElement>> = (
     props: KendoImageEditorProps &
@@ -33,33 +45,60 @@ export const ImageEditor: KendoComponent<KendoImageEditorProps & React.HTMLAttri
     const {
         toolbarItems,
         actionPane,
+        sidebarItems,
+        placeholder,
         contentHeight,
+        exporting,
+        adaptive,
+        sidebarScrollable,
+        sidebarScrollingPosition,
         children,
         ...other
     } = props;
 
+    const canvasContainer = (
+        <div className="k-imageeditor-canvas-container">
+            {placeholder ?? (
+                <div className="k-imageeditor-canvas">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+
+    const pane = actionPane &&
+        <div className="k-imageeditor-action-pane">{actionPane}</div>;
+
+    const sidebar = <ImageEditorSidebar sidebarItems={sidebarItems} scrollable={sidebarScrollable} scrollingPosition={sidebarScrollingPosition} />;
+
     return (
         <div
             {...other}
             className={classNames(
                 props.className,
-                IMAGEEDITOR_CLASSNAME
+                IMAGEEDITOR_CLASSNAME,
+                { [`${IMAGEEDITOR_CLASSNAME}-adaptive`]: adaptive }
             )}>
             <div className="k-imageeditor-header">
                 <ImageEditorToolbar toolbarItems={toolbarItems} />
             </div>
 
             <div className="k-imageeditor-content" style={{ height: contentHeight }}>
-                <div className="k-imageeditor-canvas-container">
-                    <div className="k-imageeditor-canvas">
-                        {children}
-                    </div>
-                </div>
-
-                {actionPane &&
-                <div className="k-imageeditor-action-pane">{actionPane}</div>
+                {adaptive
+                    ? <>{canvasContainer}{pane}{sidebar}</>
+                    : <>{sidebar}{pane}{canvasContainer}</>
                 }
             </div>
+
+            {exporting &&
+            <div className="k-loader-container k-loader-top" role="status" aria-live="polite" aria-label="Exporting">
+                <Overlay className="k-loader-container-overlay" />
+                <div className="k-loader-container-inner k-loader-container-panel">
+                    <Loader animation="pulsing" themeColor="base" size="medium" aria-label="Exporting" />
+                    <div className="k-loader-container-label">Exporting</div>
+                </div>
+            </div>
+            }
         </div>
     );
 };
@@ -72,10 +111,37 @@ ImageEditor.moduleName = IMAGEEDITOR_MODULE_NAME;
 ImageEditor.folderName = IMAGEEDITOR_FOLDER_NAME;
 
 /**
- * @keyboard {Tab} Focuses next focusable element (the ToolBar or an input/button on the Edit pane).
- * @keyboard {Shift + Tab} Focuses previous focusable element.
- * @keyboard {Control + Z} Undo the last modification performed on the image.
- * @keyboard {Control + Y} Redo a modification performed on the image.
+ * @keyboard {Alt/Opt(Mac) + Number} Focuses the component.
+ * @keyboard {Tab} Focuses the next focusable item.
+ * @keyboard {Shift + Tab} Focuses the previous focusable item.
+ * @keyboard {Enter} Presses the focused button.
+ * @keyboard {Space} Presses the focused button.
+ * @keyboard {Control/Cmd(Mac) + Z} Undo the operation.
+ * @keyboard {Control/Cmd(Mac) + Y} Redo the operation.
+ * @keyboard {Escape} Deselect / Cancel operation.
+ * @keyboard {Delete} Delete selected element.
+ * @keyboard {Control/Cmd(Mac) + Plus} Zooms in on the image. Conflicts with the browser zoom in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Minus} Zooms out from the image. Conflicts with the browser zoom out in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + O} Opens the image browser to import a new image. Conflicts with the Open File dialog in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + D} Duplicates the selected element. Conflicts with Bookmark Page in all browsers; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Shift + S} Exports the image. Conflicts with the Firefox Screenshot tool; requires `preventDefault` when the component is focused.
+ * @keyboard {Shift + 1} Fit to screen.
+ * @keyboard {Shift + 0} Zoom to 100%.
+ * @keyboard {Control/Cmd(Mac) + F3} Moves keyboard focus directly to the Side Panel.
+ * @keyboard {R} Inserts a rectangle shape and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {O} Inserts an oval shape and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {L} Inserts a line shape and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {T} Inserts a text box with a typing cursor and selects it. The Floating Toolbar appears, but the side panel remains closed.
+ * @keyboard {ArrowLeft} Moves the selected object left.
+ * @keyboard {ArrowRight} Moves the selected object right.
+ * @keyboard {ArrowUp} Moves the selected object up.
+ * @keyboard {ArrowDown} Moves the selected object down.
+ * @keyboard {Control/Cmd(Mac) + B} Bolds the text. Conflicts with the Firefox Bookmarks Sidebar; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + I} Italicizes the text. Conflicts with Firefox Page Info; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + U} Underlines the text. Conflicts with View Source in Chrome, Firefox, and Edge; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Shift + L} Left-aligns the text.
+ * @keyboard {Control/Cmd(Mac) + Shift + E} Center-aligns the text. Conflicts with Firefox Search in Tabs; requires `preventDefault` when the component is focused.
+ * @keyboard {Control/Cmd(Mac) + Shift + R} Right-aligns the text. Conflicts with Hard Refresh in all browsers; requires `preventDefault` when the component is focused.
  *
  * @see https://pauljadam.com/demos/canvas.html HTML Canvas Accessibility
  */

package/src/imageeditor/index.ts

@@ -1,5 +1,24 @@
 export * from './imageeditor.spec';
 export * from './imageeditor-toolbar';
+export * from './imageeditor-sidebar';
+export * from './imageeditor-placeholder';
+export * from './imageeditor-pane';
+export * from './imageeditor-option-preview';
+export * from './imageeditor-option-list';
+export * from './imageeditor-preview-thumbnail';
+export * from './imageeditor-resize-handles';
 export * from './templates/imageeditor-normal';
 export * from './templates/imageeditor-resize';
+export * from './templates/imageeditor-rotate';
 export * from './templates/imageeditor-crop';
+export * from './templates/imageeditor-disabled';
+export * from './templates/imageeditor-insert-text';
+export * from './templates/imageeditor-insert-shape';
+export * from './templates/imageeditor-insert-line';
+export * from './templates/imageeditor-blur';
+export * from './templates/imageeditor-pixelate';
+export * from './templates/imageeditor-filters';
+export * from './templates/imageeditor-adjustments';
+export * from './templates/imageeditor-frames';
+export * from './templates/imageeditor-shadow';
+

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

@@ -0,0 +1,88 @@
+import { ImageEditor, ImageEditorPane } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { Form, FormField } from "../../form";
+import { Slider } from "../../slider";
+
+const adjustmentsSidebarItems = [
+    <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" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" selected 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 AdjustmentSlider = ({ id, label, value, min = 0, max = 100 }: { id: string; label: string; value: number; min?: number; max?: number }) => (
+    <FormField
+        label={label}
+        editorId={id}
+        editor={
+            <div className="k-imageeditor-adjustment-editor">
+                <Slider
+                    className="k-imageeditor-adjustment-slider"
+                    aria-label={label}
+                    showButtons={false}
+                    showTicks={false}
+                    value={value}
+                    min={min}
+                    max={max}
+                    style={{ "--kendo-slider-start": min < 0 ? 0 : min, "--kendo-slider-end": value } as React.CSSProperties}
+                />
+                <NumericTextbox
+                    id={id}
+                    style={{ width: "80px", flex: "none" }}
+                    showClearButton={false}
+                    showSpinButton={false}
+                    value={String(value)}
+                />
+            </div>
+        }
+    />
+);
+
+export const ImageEditorAdjustments = ({
+    brightness = 0,
+    contrast = 0,
+    saturation = 0,
+    hue = 0,
+    exposure = 0,
+    blur = 24,
+    opacity = 24,
+    ...props
+}: any) => (
+    <ImageEditor
+        sidebarItems={adjustmentsSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Adjustments" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <AdjustmentSlider id="adjustments-brightness" label="Brightness" value={brightness} min={-100} max={100} />
+                    <AdjustmentSlider id="adjustments-contrast" label="Contrast" value={contrast} min={-100} max={100} />
+                    <AdjustmentSlider id="adjustments-saturation" label="Saturation" value={saturation} min={-100} max={100} />
+                    <AdjustmentSlider id="adjustments-hue" label="Hue" value={hue} min={-100} max={100} />
+                    <AdjustmentSlider id="adjustments-exposure" label="Exposure" value={exposure} min={-100} max={100} />
+                    <AdjustmentSlider id="adjustments-blur" label="Blur" value={blur} />
+                    <AdjustmentSlider id="adjustments-opacity" label="Opacity" value={opacity} />
+                </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>
+            </>
+        }
+        {...props} />
+);

package/src/imageeditor/templates/imageeditor-blur.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 blurSidebarItems = [
+    <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 ImageEditorBlur = ({ shape = "rectangular", intensity = 16, ...props }: any) => (
+    <ImageEditor
+        sidebarItems={blurSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Blur" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Redaction Tool" style={{ flexShrink: 0 }}>
+                    <SegmentedControlButton icon="blur" selected>Blur</SegmentedControlButton>
+                    <SegmentedControlButton icon="grid">Pixelate</SegmentedControlButton>
+                </SegmentedControl>
+
+                <Form tag="div">
+                    <FormField
+                        label="Marquee Tool Shape"
+                        editor={
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="blur-shape-rectangular" name="blur-shape" checked={shape === "rectangular"}>Rectangular</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="blur-shape-elliptical" name="blur-shape" checked={shape === "elliptical"}>Elliptical</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                            </RadioGroup>
+                        }
+                    />
+                    <FormField
+                        label="Blur Intensity"
+                        editorId="blur-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="Blur Intensity"
+                                    showButtons={false}
+                                    showTicks={false}
+                                    value={intensity}
+                                    min={0}
+                                    max={100}
+                                />
+                                <NumericTextbox
+                                    id="blur-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", filter: "blur(8px)" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ borderStyle: "dashed" }}></div>
+                </div>
+            </>
+        }
+        {...props} />
+);

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

@@ -1,70 +1,81 @@
-import { ImageEditor } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, 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 { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
-import { ToolbarSeparator, ToolbarItem } from "../../toolbar";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { RadioGroup, RadioItem, RadioButtonWithLabelAfter } from "../../radio";
+
+const cropSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" selected 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 ImageEditorCrop = (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={cropSidebarItems}
         actionPane={
-            <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
+            <ImageEditorPane title="Crop" 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="Crop Image" cols={2} gutters={{cols: "8px"}}>
-                    <FormField
-                        colSpan="2"
-                        label="Aspect Ratio:"
-                        editor={ <DropdownList value="Original ratio" aria-label="Aspect ratio" /> }
-                    />
+                <Form tag="div">
                     <FormField
-                        colSpan="2"
-                        label="Orientation:"
+                        label="Orientation"
                         editor={
-                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched>
-                                <SegmentedControlButton selected>Portrait</SegmentedControlButton>
-                                <SegmentedControlButton>Landscape</SegmentedControlButton>
-                            </SegmentedControl>
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="crop-orientation-landscape" name="crop-orientation" checked>Landscape</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonWithLabelAfter id="crop-orientation-portrait" name="crop-orientation">Portrait</RadioButtonWithLabelAfter>
+                                </RadioItem>
+                            </RadioGroup>
                         }
                     />
                     <FormField
-                        colSpan="1"
-                        label="Width:"
-                        editorId="crop-width"
-                        editor={ <NumericTextbox id="crop-width" showClearButton={false} value="61" /> }
-                    />
-                    <FormField
-                        colSpan="1"
-                        label="Height:"
-                        editorId="crop-height"
-                        editor={ <NumericTextbox id="crop-height" showClearButton={false} value="68" /> }
-                    />
-                   <FormField
-                        colSpan="2"
-                        editor={ <CheckboxWithLabelAfter id="crop-lock">Lock aspect ratio</CheckboxWithLabelAfter> }
+                        label="Aspect Ratio"
+                        editor={
+                            <ImageEditorOptionList scrollable scrollableEnd>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">Original</span></ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">1:1</span></ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">3:2</span></ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">4:3</span></ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">5:4</span></ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">7:5</span></ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">16:9</span></ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview><span className="k-imageeditor-option-label">Custom</span></ImageEditorOptionPreview>
+                            </ImageEditorOptionList>
+                        }
                     />
-                </Fieldset>
-            </FormNormal>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "8px" }}>
+                        <FormField
+                            label="Width"
+                            editorId="crop-width"
+                            editor={ <NumericTextbox id="crop-width" showClearButton={false} value="400" prefix={<Icon icon="arrows-left-right" />} /> }
+                        />
+                        <FormField
+                            label="Height"
+                            editorId="crop-height"
+                            editor={ <NumericTextbox id="crop-height" showClearButton={false} value="360" prefix={<Icon icon="arrows-top-bottom" />} /> }
+                        />
+                    </Fieldset>
+                    <FormField editor={ <CheckboxWithLabelAfter id="crop-lock" checked>Lock Aspect Ratio</CheckboxWithLabelAfter> } />
+                </Form>
+            </ImageEditorPane>
         }
 
         children={
@@ -72,17 +83,11 @@ export const ImageEditorCrop = (props: any) => (
                 <canvas width="61" height="68" role="img" aria-label="Image being edited"></canvas>
                 <div className="k-imageeditor-crop-overlay">
                     <div className="k-imageeditor-crop" style={{ width: "61px", height: "68px" }}>
-                        <span className="k-resize-handle k-resize-nw"></span>
-                        <span className="k-resize-handle k-resize-n"></span>
-                        <span className="k-resize-handle k-resize-ne"></span>
-                        <span className="k-resize-handle k-resize-w"></span>
-                        <span className="k-resize-handle k-resize-e"></span>
-                        <span className="k-resize-handle k-resize-sw"></span>
-                        <span className="k-resize-handle k-resize-s"></span>
-                        <span className="k-resize-handle k-resize-se"></span>
+                        <ImageEditorResizeHandles variant="crop" grid />
                     </div>
                 </div>
             </>
         }
         {...props} />
 );
+

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

@@ -0,0 +1,45 @@
+import { ImageEditor } from "..";
+import { ToolbarItem, ToolbarSeparator } from "../../toolbar";
+import { Button } from "../../button";
+import { Autocomplete } from "../../autocomplete";
+
+const disabledToolbarItems = [
+    <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" disabled icon="download" aria-label="Download"></Button>,
+    <div className="k-spacer" key="toolbar-spacer"></div>,
+    <Button fillMode="flat" key="toolbar-button-5" disabled icon="zoom-in" aria-label="Zoom In"></Button>,
+    <ToolbarItem key="toolbar-item-1">
+        <Autocomplete fillMode="flat" disabled value="Fit" aria-label="Zoom options" />
+    </ToolbarItem>,
+    <Button fillMode="flat" key="toolbar-button-6" disabled icon="zoom-out" aria-label="Zoom Out"></Button>
+];
+
+const disabledSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" disabled icon="image-resize" aria-label="Resize" />,
+    <Button fillMode="flat" key="sidebar-button-2" disabled icon="crop" aria-label="Crop" />,
+    <Button fillMode="flat" key="sidebar-button-3" disabled icon="rotate" aria-label="Rotate" />,
+    <div className="k-separator" key="sidebar-separator-1" />,
+    <Button fillMode="flat" key="sidebar-button-4" disabled icon="free-text" aria-label="Text" />,
+    <Button fillMode="flat" key="sidebar-button-5" disabled icon="shapes" aria-label="Shapes" />,
+    <div className="k-separator" key="sidebar-separator-2" />,
+    <Button fillMode="flat" key="sidebar-button-6" disabled icon="drop-half-pixelated" aria-label="Blur" />,
+    <Button fillMode="flat" key="sidebar-button-7" disabled icon="sliders-horizontal" aria-label="Adjustments" />,
+    <Button fillMode="flat" key="sidebar-button-8" disabled icon="circles-three-intersecting" aria-label="Filters" />,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" disabled icon="frame-corners" aria-label="Frame" />,
+    <Button fillMode="flat" key="sidebar-button-10" disabled icon="circle-half-tilted" aria-label="Shadow" />
+];
+
+// Non-editable state (Empty, Loading, Error): only the upload action is available,
+// sidebar tools and the rest of the toolbar are disabled.
+export const ImageEditorDisabled = (props: any) => (
+    <ImageEditor
+        toolbarItems={disabledToolbarItems}
+        sidebarItems={disabledSidebarItems}
+        {...props}
+    />
+);