Media editor: add explicit "done" button to tools

stylesheets/components/MediaEditor.scss

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .MediaEditor {
+  $tools-height: 44px;
+
   background: $color-gray-95;
   display: flex;
   flex-direction: column;
@@ -126,7 +128,7 @@
     }
 
     &--space {
-      height: 36px;
+      height: $tools-height;
       margin-bottom: 22px;
     }
   }
@@ -140,62 +142,82 @@
   }
 
   &__tools {
-    align-items: center;
-    display: flex;
-    height: 36px;
-    justify-content: center;
-    margin-bottom: 22px;
-  }
-
-  &__crop-toolbar {
     align-items: center;
     background-color: $color-gray-90;
     border-radius: 10px;
     color: $color-white;
     display: flex;
+    height: $tools-height;
+    justify-content: center;
+    margin-bottom: 22px;
+    padding: 14px 12px;
+
+    &__tool {
+      margin-right: 14px;
+    }
+
+    &__button {
+      @mixin icon($icon) {
+        @include color-svg('../images/icons/v2/#{$icon}', $color-white);
+        opacity: 1;
+        height: 20px;
+        width: 20px;
+        border-radius: 0;
+
+        &::after {
+          display: none;
+        }
+      }
 
-    &--button {
       @include button-reset;
       margin: 0 8px;
       padding: 8px;
-    }
 
-    &--rotate {
+      &--words {
-      @include color-svg(
+        height: auto;
-        '../images/icons/v2/rotate-outline-24.svg',
+        width: auto;
-        $color-white
+        padding: 0 6px;
-      );
+      }
-      height: 20px;
-      width: 20px;
-    }
 
-    &--flip {
+      &--draw-pen {
-      @include color-svg(
+        @include icon('pen-20.svg');
-        '../images/icons/v2/flip-outline-24.svg',
+      }
-        $color-white
+      &--draw-highlighter {
-      );
+        @include icon('pen-highlighter-20.svg');
-      height: 20px;
+      }
-      width: 20px;
+      &--width-thin {
-    }
+        @include icon('pen-light-20.svg');
-
+      }
-    &--locked {
+      &--width-regular {
-      @include color-svg('../images/icons/v2/crop-lock-24.svg', $color-white);
+        @include icon('pen-regular-20.svg');
-      height: 20px;
+      }
-      width: 20px;
+      &--width-medium {
-    }
+        @include icon('pen-medium-20.svg');
-
+      }
-    &--unlocked {
+      &--width-heavy {
-      @include color-svg('../images/icons/v2/crop-unlock-24.svg', $color-white);
+        @include icon('pen-heavy-20.svg');
-      height: 20px;
+      }
-      width: 20px;
+      &--text-regular {
-    }
+        @include icon('text-regular-20.svg');
-
+      }
-    &--reset {
+      &--text-highlight {
-      padding-left: 24px;
+        @include icon('text-highlight-20.svg');
-    }
+      }
-
+      &--text-outline {
-    &--crop {
+        @include icon('text-outline-20.svg');
-      padding-right: 24px;
+      }
+      &--rotate {
+        @include icon('rotate-outline-24.svg');
+      }
+      &--flip {
+        @include icon('flip-outline-24.svg');
+      }
+      &--crop-locked {
+        @include icon('crop-lock-24.svg');
+      }
+      &--crop-unlocked {
+        @include icon('crop-unlock-24.svg');
+      }
     }
   }
 
@@ -216,12 +238,11 @@
     );
     border-radius: 4px;
     height: 8px;
-    margin-right: 7px;
+    margin-left: 7px;
     width: 280px;
   }
 
   &__hue-slider__handle.Slider__handle {
-    background-color: transparent;
     border: 7px solid $color-white;
     margin-top: -7px;
     margin-left: -11px;
@@ -229,65 +250,6 @@
     width: 22px;
   }
 
-  &__button {
-    @mixin button($svg) {
-      height: 20px;
-      margin: 0 7px;
-      opacity: 1;
-      width: 20px;
-
-      &::after {
-        @include color-svg($svg, $color-white);
-        width: 20px;
-        height: 20px;
-      }
-
-      &:hover {
-        background-color: $color-gray-80;
-      }
-    }
-
-    &__text {
-      @include button('../images/icons/v2/edit-solid-16.svg');
-    }
-
-    &--draw-pen {
-      @include button('../images/icons/v2/pen-20.svg');
-    }
-
-    &--draw-highlighter {
-      @include button('../images/icons/v2/pen-highlighter-20.svg');
-    }
-
-    &--text-regular {
-      @include button('../images/icons/v2/text-regular-20.svg');
-    }
-
-    &--text-highlight {
-      @include button('../images/icons/v2/text-highlight-20.svg');
-    }
-
-    &--text-outline {
-      @include button('../images/icons/v2/text-outline-20.svg');
-    }
-
-    &--width-thin {
-      @include button('../images/icons/v2/pen-light-20.svg');
-    }
-
-    &--width-regular {
-      @include button('../images/icons/v2/pen-regular-20.svg');
-    }
-
-    &--width-medium {
-      @include button('../images/icons/v2/pen-medium-20.svg');
-    }
-
-    &--width-heavy {
-      @include button('../images/icons/v2/pen-heavy-20.svg');
-    }
-  }
-
   &__icon {
     &--draw-pen {
       @include color-svg('../images/icons/v2/pen-20.svg', $color-white);

ts/components/MediaEditor.tsx

@@ -658,18 +658,19 @@ export const MediaEditor = ({
     tooling = (
       <>
         <Slider
+          handleStyle={{ backgroundColor: getHSL(sliderValue) }}
           label={i18n('CustomColorEditor__hue')}
-          moduleClassName="MediaEditor__hue-slider"
+          moduleClassName="MediaEditor__hue-slider MediaEditor__tools__tool"
           onChange={setSliderValue}
           value={sliderValue}
         />
         <ContextMenu
-          buttonClassName={classNames('MediaEditor__button--text', {
+          buttonClassName={classNames('MediaEditor__tools__tool', {
-            'MediaEditor__button--text-regular':
+            'MediaEditor__tools__button--text-regular':
               textStyle === TextStyle.Regular,
-            'MediaEditor__button--text-highlight':
+            'MediaEditor__tools__button--text-highlight':
               textStyle === TextStyle.Highlight,
-            'MediaEditor__button--text-outline':
+            'MediaEditor__tools__button--text-outline':
               textStyle === TextStyle.Outline,
           })}
           i18n={i18n}
@@ -694,21 +695,36 @@ export const MediaEditor = ({
           theme={Theme.Dark}
           value={textStyle}
         />
+        <button
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--words"
+          onClick={() => {
+            setEditMode(undefined);
+
+            const activeObject = fabricCanvas?.getActiveObject();
+            if (activeObject instanceof MediaEditorFabricIText) {
+              activeObject.exitEditing();
+            }
+          }}
+          type="button"
+        >
+          {i18n('done')}
+        </button>
       </>
     );
   } else if (editMode === EditMode.Draw) {
     tooling = (
       <>
         <Slider
+          handleStyle={{ backgroundColor: getHSL(sliderValue) }}
           label={i18n('CustomColorEditor__hue')}
-          moduleClassName="MediaEditor__hue-slider"
+          moduleClassName="MediaEditor__tools__tool MediaEditor__hue-slider"
           onChange={setSliderValue}
           value={sliderValue}
         />
         <ContextMenu
-          buttonClassName={classNames('MediaEditor__button--draw', {
+          buttonClassName={classNames('MediaEditor__tools__tool', {
-            'MediaEditor__button--draw-pen': drawTool === DrawTool.Pen,
+            'MediaEditor__tools__button--draw-pen': drawTool === DrawTool.Pen,
-            'MediaEditor__button--draw-highlighter':
+            'MediaEditor__tools__button--draw-highlighter':
               drawTool === DrawTool.Highlighter,
           })}
           i18n={i18n}
@@ -729,12 +745,15 @@ export const MediaEditor = ({
           value={drawTool}
         />
         <ContextMenu
-          buttonClassName={classNames('MediaEditor__button--width', {
+          buttonClassName={classNames('MediaEditor__tools__tool', {
-            'MediaEditor__button--width-thin': drawWidth === DrawWidth.Thin,
+            'MediaEditor__tools__button--width-thin':
-            'MediaEditor__button--width-regular':
+              drawWidth === DrawWidth.Thin,
+            'MediaEditor__tools__button--width-regular':
               drawWidth === DrawWidth.Regular,
-            'MediaEditor__button--width-medium': drawWidth === DrawWidth.Medium,
+            'MediaEditor__tools__button--width-medium':
-            'MediaEditor__button--width-heavy': drawWidth === DrawWidth.Heavy,
+              drawWidth === DrawWidth.Medium,
+            'MediaEditor__tools__button--width-heavy':
+              drawWidth === DrawWidth.Heavy,
           })}
           i18n={i18n}
           menuOptions={[
@@ -763,6 +782,13 @@ export const MediaEditor = ({
           theme={Theme.Dark}
           value={drawWidth}
         />
+        <button
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--words"
+          onClick={() => setEditMode(undefined)}
+          type="button"
+        >
+          {i18n('done')}
+        </button>
       </>
     );
   } else if (editMode === EditMode.Crop) {
@@ -774,10 +800,9 @@ export const MediaEditor = ({
       imageState.angle !== 0;
 
     tooling = (
-      <div className="MediaEditor__crop-toolbar">
+      <>
         <button
-          aria-label={i18n('MediaEditor__crop--reset')}
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--words"
-          className="MediaEditor__crop-toolbar--button MediaEditor__crop-toolbar--reset"
           disabled={!canReset}
           onClick={async () => {
             if (!fabricCanvas) {
@@ -800,7 +825,7 @@ export const MediaEditor = ({
         </button>
         <button
           aria-label={i18n('MediaEditor__crop--rotate')}
-          className="MediaEditor__crop-toolbar--button MediaEditor__crop-toolbar--rotate"
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--rotate"
           onClick={() => {
             if (!fabricCanvas) {
               return;
@@ -834,7 +859,7 @@ export const MediaEditor = ({
         />
         <button
           aria-label={i18n('MediaEditor__crop--flip')}
-          className="MediaEditor__crop-toolbar--button MediaEditor__crop-toolbar--flip"
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--flip"
           onClick={() => {
             if (!fabricCanvas) {
               return;
@@ -851,10 +876,12 @@ export const MediaEditor = ({
         />
         <button
           aria-label={i18n('MediaEditor__crop--lock')}
-          className={classNames('MediaEditor__crop-toolbar--button', {
+          className={classNames(
-            'MediaEditor__crop-toolbar--locked': cropAspectRatioLock,
+            'MediaEditor__tools__button',
-            'MediaEditor__crop-toolbar--unlocked': !cropAspectRatioLock,
+            `MediaEditor__tools__button--crop-${
-          })}
+              cropAspectRatioLock ? '' : 'un'
+            }locked`
+          )}
           onClick={() => {
             if (fabricCanvas) {
               fabricCanvas.uniformScaling = !cropAspectRatioLock;
@@ -864,8 +891,7 @@ export const MediaEditor = ({
           type="button"
         />
         <button
-          aria-label={i18n('MediaEditor__crop--crop')}
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--words"
-          className="MediaEditor__crop-toolbar--button MediaEditor__crop-toolbar--crop"
           disabled={!canCrop}
           onClick={() => {
             if (!fabricCanvas) {
@@ -920,12 +946,14 @@ export const MediaEditor = ({
               obj.setPositionByOrigin(translatedCenter, 'center', 'center');
               obj.setCoords();
             });
+
+            setEditMode(undefined);
           }}
           type="button"
         >
-          {i18n('MediaEditor__crop--crop')}
+          {i18n('done')}
         </button>
-      </div>
+      </>
     );
   }
 
@@ -1147,7 +1175,7 @@ export const MediaEditor = ({
             theme={Theme.Dark}
             variant={ButtonVariant.Primary}
           >
-            {i18n('done')}
+            {i18n('save')}
           </Button>
         </div>
       </div>