@plone-collective/volto-image-editor 1.0.1 → 1.1.0

package/.changelog.draft

@@ -1,12 +1,7 @@
-## 1.0.1 (2026-03-03)
-
-### Feature
-
-- Added support for lazyload the widget. @sneridagh 
+## 1.1.0 (2026-10-07)
 
 ### Internal
 
-- Fixed Acceptance Tests and added them to main.yml. @humanaice [#23](https://github.com/collective/volto-image-editor/issue/23)
-- Use Volto 19a27. @sneridagh 
+- Updated according to the figma-design and improved styles for usage with the distributions @TimoBroeskamp 
 
 

package/CHANGELOG.md

@@ -8,6 +8,12 @@
 
 <!-- towncrier release notes start -->
 
+## 1.1.0 (2026-10-07)
+
+### Internal
+
+- Updated according to the figma-design and improved styles for usage with the distributions @TimoBroeskamp 
+
 ## 1.0.1 (2026-03-03)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone-collective/volto-image-editor",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "An image editor to be used with Plone and Volto.",
   "main": "src/index.ts",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "react": "18.2.0",
     "react-aria-components": "*",
     "react-dom": "18.2.0",
-    "@plone/types": "2.0.0-alpha.14",
-    "@plone/registry": "3.0.0-alpha.9"
+    "@plone/registry": "3.0.0-alpha.9",
+    "@plone/types": "2.0.0-alpha.14"
   },
   "devDependencies": {
     "@types/node": "^20.2.5",

package/src/components/ImageEditor/Editor/ImageEditor.scss

@@ -2,9 +2,26 @@
 @import '../../../theme/variables';
 @import '../../../theme/constants';
 
+.image-widget .image-widget-cropper {
+  button {
+    padding: 20px 0px;
+    border: none;
+    color: rgba(0, 0, 0, 0.9);
+    text-decoration: underline;
+  }
+}
+
+.ui.grid.image-widget-grid .file-widget-dropzone img {
+  margin-top: 0px;
+}
+
 .image-editor {
+  display: grid;
   width: 100%;
+  height: 100%;
   color: $settings-header-color;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr 80px;
 
   &__preview {
     position: absolute;
@@ -19,7 +36,7 @@
 
   &__cropper {
     position: relative;
-    height: 500px;
+    height: 100%;
     max-height: 100vh;
     background: $color-gray-dark;
 

package/src/components/ImageEditor/Wrapper/ImageEditorWrapper.scss

@@ -1,16 +1,18 @@
 @import '../../../theme/variables';
 
 .react-aria-ModalOverlay {
+  z-index: 150;
   .react-aria-Modal.image-cropper-modal {
-    width: 100%;
-    max-width: $editor-width;
+    width: 70vw;
+    max-width: unset;
+    height: 70vh;
     border: 0;
     background-color: $settings-header-bg;
 
     .react-aria-Dialog {
-      display: flex;
+      width: 100%;
+      height: 100%;
       align-items: center;
-      justify-content: center;
       padding: 0;
     }
   }

package/src/components/ImageEditor/Wrapper/ImageEditorWrapper.tsx

@@ -83,7 +83,7 @@ const ImageEditorWrapper: React.FC<ImageEditorWrapperProps> = ({
     <div className={`image-widget ${className || ''}`}>
       <div className="image-widget-cropper">
         <DialogTrigger>
-          <Button onPress={() => setOpen(true)}>
+          <Button download={false} onPress={() => setOpen(true)}>
             {buttonText || (
               <FormattedMessage id="Edit image" defaultMessage="Edit image" />
             )}

package/src/components/ImageEditor/components/Navigation/Navigation.scss

@@ -5,6 +5,7 @@
   display: flex;
   height: 100%;
   align-items: center;
+  align-self: flex-end;
   justify-content: space-between;
   padding: $image-editor-spacing-lg;
   border-top: solid 1px $image-editor-border-color;

package/src/components/ImageEditor/components/SettingsModal/SettingsModal.scss

@@ -33,14 +33,16 @@
   }
 
   &__content {
-    display: flex;
+    display: grid;
     overflow: hidden;
     width: 100%;
+    height: 100%;
     max-height: 100%;
-    flex-direction: column;
     animation: scaleIn $image-editor-transition-fast ease-out;
     background: $settings-body-bg;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0px 60px rgba(0, 0, 0, 0.5);
+    grid-template-columns: 100%;
+    grid-template-rows: 80px 1fr;
   }
 
   &__header {
@@ -60,7 +62,9 @@
   }
 
   &__close {
-    padding: $image-editor-spacing-xs $image-editor-spacing-sm;
+    display: grid;
+    align-self: center;
+    padding: $image-editor-spacing-sm;
     border: none;
     border-radius: $image-editor-border-radius-sm;
     background: transparent;
@@ -86,7 +90,6 @@
   }
 
   &__label {
-    display: block;
     margin-bottom: $image-editor-spacing-sm;
     color: $settings-body-color;
     font-size: 14px;

package/src/components/ImageEditor/components/SettingsModal/SettingsModal.tsx

@@ -32,6 +32,7 @@ import {
   RectangleStencilIcon,
   CircleStencilIcon,
 } from '@plone-collective/volto-image-editor/icons/StencilIcons';
+import BackSVG from '@plone/volto/icons/back.svg';
 import './SettingsModal.scss';
 
 const messages = defineMessages({
@@ -205,7 +206,12 @@ export const SettingsModal: FC<Props> = ({
                 className="image-editor-settings-modal__close"
                 onClick={onToggle}
               >
-                ✕
+                <Icon size="base">
+                  <svg
+                    {...BackSVG.attributes}
+                    dangerouslySetInnerHTML={{ __html: BackSVG.content }}
+                  />
+                </Icon>
               </Button>
             </div>
 

package/src/components/Widgets/FileWidget.tsx

@@ -150,6 +150,8 @@ const FileWidget = (props) => {
       <Grid className="image-widget-grid">
         <Grid.Row stretched>
           <Grid.Column stretched width={mainColumnWidth}>
+            {isImage && <ImageEditorWrapper value={value} setData={setData} />}
+
             <Dropzone
               onDrop={onDrop}
               {...(props.size ? { maxSize: props.size } : {})}
@@ -225,11 +227,6 @@ const FileWidget = (props) => {
               )}
             </div>
           </Grid.Column>
-          {isImage && (
-            <Grid.Column stretched width="2" className={'image-editor-cta'}>
-              <ImageEditorWrapper value={value} setData={setData} />
-            </Grid.Column>
-          )}
         </Grid.Row>
       </Grid>
     </FormFieldWrapper>

package/src/icons/svg/back.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <polygon fill-rule="evenodd" points="31 17 8.414 17 18.707 6.707 17.293 5.293 4.586 18 17.293 30.707 18.707 29.293 8.414 19 31 19"/>
+</svg>

package/src/theme/variables.scss

@@ -15,7 +15,7 @@ $nav-button-color-hover: $color-black !default;
 $nav-button-bg-active: $color-black !default;
 $nav-button-color-active: $color-white !default;
 
-$nav-button-close-color: $color-red !default;
+$nav-button-close-color: $color-gray-dark !default;
 
 $editor-button-bg: $color-gray-dark !default;
 $editor-button-color: $color-white !default;