Internal: Updated css, circle crop and slider

Author: Humanaice

packages/volto-image-editor/news/+package.internal

@@ -0,0 +1 @@
+Changed the CSS to facilitate future modifications, with variables and new icons. @humanaice

packages/volto-image-editor/news/+slider.internal

@@ -0,0 +1 @@
+Updated Slider to make it more simple and intuitive. @humanaice

packages/volto-image-editor/news/8.internal

@@ -0,0 +1 @@
+Fixed circle crop. @humanaice

packages/volto-image-editor/src/components/ImageEditor/Editor/ImageEditor.scss

@@ -1,56 +1,67 @@
 @import '~react-advanced-cropper/dist/style.css';
+@import '../../../theme/variables';
 @import '../../../theme/constants';
 
 .image-editor {
   width: 100%;
-  border: solid 1px #2b2a30;
-  color: $theme-color;
+  color: $settings-header-color;
+
   &__preview {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: $image-editor-spacing-xl;
+    left: $image-editor-spacing-xl;
     width: 45px;
     height: 45px;
-    border: solid 1px #2b2a30;
-    border-radius: 50%;
-    background: black;
+    border: solid 1px $image-editor-border-color;
+    border-radius: $image-editor-border-radius-circle;
+    background: $settings-header-bg;
   }
+
   &__cropper {
     position: relative;
     display: flex;
     height: 500px;
     max-height: 100vh;
     align-items: center;
     justify-content: center;
-    background: #0f0e13;
+    background: $color-gray-dark;
   }
+
   &__slider {
     position: absolute;
-    bottom: 20px;
+    bottom: $image-editor-spacing-xl;
     left: 50%;
     width: 100%;
     transform: translateX(-50%);
   }
+
   &__cropper-overlay {
-    transition: 0.5s;
+    transition: $image-editor-transition-slow;
+
     &--faded {
-      color: rgba(black, 0.9);
+      color: $image-editor-bg-overlay;
     }
   }
+
   &__service {
     position: absolute;
     left: -100%;
     pointer-events: none;
   }
+
   &__reset-button {
     position: absolute;
-    top: 20px;
-    right: 20px;
-    background: rgba(white, 0.1);
+    top: $image-editor-spacing-xl;
+    right: $image-editor-spacing-xl;
+    background: $editor-button-bg;
+    color: $editor-button-color;
+
     &:hover {
-      background: rgba(white, 0.2);
-      fill: $theme-color;
+      background: $editor-button-bg-hover;
+      color: $editor-button-color-hover;
+      fill: $editor-button-color-hover;
     }
+
     &--hidden {
       opacity: 0;
       visibility: hidden;

packages/volto-image-editor/src/components/ImageEditor/Editor/ImageEditor.tsx

@@ -121,12 +121,35 @@ const ImageEditor = ({ src, onImageSave, onCancel }) => {
       if (canvas) {
         let finalCanvas = canvas;
 
+        if (imageSettings.stencilType === 'circle') {
+          const circleCanvas = document.createElement('canvas');
+          const ctx = circleCanvas.getContext('2d');
+
+          if (ctx) {
+            circleCanvas.width = canvas.width;
+            circleCanvas.height = canvas.height;
+
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const radius = Math.min(canvas.width, canvas.height) / 2;
+
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+            ctx.closePath();
+            ctx.clip();
+
+            ctx.drawImage(canvas, 0, 0);
+
+            finalCanvas = circleCanvas;
+          }
+        }
+
         if (imageSettings.maxWidth || imageSettings.maxHeight) {
           const tempCanvas = document.createElement('canvas');
           const ctx = tempCanvas.getContext('2d');
 
           if (ctx) {
-            let { width, height } = canvas;
+            let { width, height } = finalCanvas;
 
             if (imageSettings.maxWidth && width > imageSettings.maxWidth) {
               const ratio = imageSettings.maxWidth / width;
@@ -144,7 +167,7 @@ const ImageEditor = ({ src, onImageSave, onCancel }) => {
 
             tempCanvas.width = width;
             tempCanvas.height = height;
-            ctx.drawImage(canvas, 0, 0, width, height);
+            ctx.drawImage(finalCanvas, 0, 0, width, height);
             finalCanvas = tempCanvas;
           }
         }

packages/volto-image-editor/src/components/ImageEditor/Wrapper/ImageEditorWrapper.scss

@@ -1,8 +1,11 @@
+@import '../../../theme/variables';
+
 .react-aria-ModalOverlay {
   .react-aria-Modal.image-cropper-modal {
     max-width: 70vw;
     border: 0;
-    background-color: black;
+    background-color: $settings-header-bg;
+
     .react-aria-Dialog {
       display: flex;
       align-items: center;

packages/volto-image-editor/src/components/ImageEditor/components/Button/Button.scss

@@ -1,30 +1,57 @@
+@import '../../../../theme/variables';
 @import '../../../../theme/mixins';
 
 .image-editor-button {
   display: flex;
-  width: 46px;
-  height: 46px;
+  width: $image-editor-button-size-desktop;
+  height: $image-editor-button-size-desktop;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: none;
-  border-radius: 50%;
-  background: transparent;
-  color: currentColor;
+  border-radius: $image-editor-button-border-radius;
+  background: $nav-button-bg;
+  color: $nav-button-color;
   cursor: pointer;
-  fill: #88888b;
+  fill: $nav-button-color;
   outline: none;
-  transition: 0.5s;
-  &--active {
-    background: rgba(white, 0.03);
-    fill: currentColor;
-  }
+  transition: $image-editor-transition-slow;
+
   &:hover,
   &:focus {
-    background: rgba(white, 0.03);
+    background: $nav-button-bg-hover;
+    color: $nav-button-color-hover;
+    fill: $nav-button-color-hover;
+  }
+
+  &--active,
+  &--active:hover,
+  &--active:focus {
+    background: $nav-button-bg-active;
+    color: $nav-button-color-active;
+    fill: $nav-button-color-active;
+  }
+
+  &--close {
+    color: $nav-button-close-color;
+    fill: $nav-button-close-color;
   }
+
+  &--editor {
+    background: $editor-button-bg;
+    color: $editor-button-color;
+    fill: $editor-button-color;
+
+    &:hover,
+    &:focus {
+      background: $editor-button-bg-hover;
+      color: $editor-button-color-hover;
+      fill: $editor-button-color-hover;
+    }
+  }
+
   @include small-mobile() {
-    width: 32px;
-    height: 32px;
+    width: $image-editor-button-size-mobile;
+    height: $image-editor-button-size-mobile;
   }
 }

packages/volto-image-editor/src/components/ImageEditor/components/Navigation/Navigation.scss

@@ -1,38 +1,60 @@
+@import '../../../../theme/variables';
 @import '../../../../theme/mixins';
 
 .image-editor-navigation {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
-  border-top: solid 1px #2b2a30;
-  background: #1b1a21;
+  padding: $image-editor-spacing-lg;
+  border-top: solid 1px $image-editor-border-color;
+  background: $settings-header-bg;
+
   &__button {
     &--disabled {
       cursor: not-allowed;
-      opacity: 0.4;
+      opacity: $image-editor-opacity-disabled;
       pointer-events: none;
     }
   }
 
   &__reset-rotation {
-    border-left: 1px solid rgba(white, 0.1);
-    margin-left: 12px;
+    margin-left: $image-editor-spacing-md;
   }
+
   &__buttons {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: $image-editor-spacing-sm;
+
+    svg {
+      width: $image-editor-icon-size-desktop;
+      height: $image-editor-icon-size-desktop;
+    }
+
+    @include small-mobile() {
+      svg {
+        width: $image-editor-icon-size-mobile;
+        height: $image-editor-icon-size-mobile;
+      }
+    }
   }
+
+  &__action-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $image-editor-spacing-xl;
+  }
+
   &__upload-input {
     display: none;
   }
 
   @include small-mobile() {
-    padding-right: 8px;
-    padding-left: 8px;
+    padding-right: $image-editor-spacing-sm;
+    padding-left: $image-editor-spacing-sm;
   }
 }

packages/volto-image-editor/src/components/ImageEditor/components/Navigation/Navigation.tsx

@@ -139,15 +139,17 @@ export const Navigation: FC<Props> = ({
           <HueIcon />
         </Button>
       </div>
-      <Button
-        className={'image-editor-navigation__button cancel'}
-        onClick={onCancel}
-      >
-        <CancelIcon />
-      </Button>
-      <Button className={'image-editor-navigation__button'} onClick={onSave}>
-        <SaveIcon />
-      </Button>
+      <div className="image-editor-navigation__action-buttons">
+        <Button
+          className={'image-editor-navigation__button cancel'}
+          onClick={onCancel}
+        >
+          <CancelIcon />
+        </Button>
+        <Button className={'image-editor-navigation__button'} onClick={onSave}>
+          <SaveIcon />
+        </Button>
+      </div>
     </div>
   );
 };