From 064bbfe97a9e09730703b7b252aaca15e9743e09 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Fri, 10 Dec 2021 08:41:31 -0600
Subject: [PATCH] Media editor: add explicit "done" button to tools

---
 stylesheets/components/MediaEditor.scss | 176 ++++++++++--------------
 ts/components/MediaEditor.tsx           |  84 +++++++----
 2 files changed, 125 insertions(+), 135 deletions(-)

diff --git a/stylesheets/components/MediaEditor.scss b/stylesheets/components/MediaEditor.scss
index 6bf08f715d0c..34b8749c4444 100644
--- a/stylesheets/components/MediaEditor.scss
+++ b/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 {
-      @include color-svg(
-        '../images/icons/v2/rotate-outline-24.svg',
-        $color-white
-      );
-      height: 20px;
-      width: 20px;
-    }
+      &--words {
+        height: auto;
+        width: auto;
+        padding: 0 6px;
+      }
 
-    &--flip {
-      @include color-svg(
-        '../images/icons/v2/flip-outline-24.svg',
-        $color-white
-      );
-      height: 20px;
-      width: 20px;
-    }
-
-    &--locked {
-      @include color-svg('../images/icons/v2/crop-lock-24.svg', $color-white);
-      height: 20px;
-      width: 20px;
-    }
-
-    &--unlocked {
-      @include color-svg('../images/icons/v2/crop-unlock-24.svg', $color-white);
-      height: 20px;
-      width: 20px;
-    }
-
-    &--reset {
-      padding-left: 24px;
-    }
-
-    &--crop {
-      padding-right: 24px;
+      &--draw-pen {
+        @include icon('pen-20.svg');
+      }
+      &--draw-highlighter {
+        @include icon('pen-highlighter-20.svg');
+      }
+      &--width-thin {
+        @include icon('pen-light-20.svg');
+      }
+      &--width-regular {
+        @include icon('pen-regular-20.svg');
+      }
+      &--width-medium {
+        @include icon('pen-medium-20.svg');
+      }
+      &--width-heavy {
+        @include icon('pen-heavy-20.svg');
+      }
+      &--text-regular {
+        @include icon('text-regular-20.svg');
+      }
+      &--text-highlight {
+        @include icon('text-highlight-20.svg');
+      }
+      &--text-outline {
+        @include icon('text-outline-20.svg');
+      }
+      &--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);
diff --git a/ts/components/MediaEditor.tsx b/ts/components/MediaEditor.tsx
index 64cebbc45c98..fa621bd6f5b0 100644
--- a/ts/components/MediaEditor.tsx
+++ b/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', {
-            'MediaEditor__button--text-regular':
+          buttonClassName={classNames('MediaEditor__tools__tool', {
+            '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', {
-            'MediaEditor__button--draw-pen': drawTool === DrawTool.Pen,
-            'MediaEditor__button--draw-highlighter':
+          buttonClassName={classNames('MediaEditor__tools__tool', {
+            'MediaEditor__tools__button--draw-pen': drawTool === DrawTool.Pen,
+            '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', {
-            'MediaEditor__button--width-thin': drawWidth === DrawWidth.Thin,
-            'MediaEditor__button--width-regular':
+          buttonClassName={classNames('MediaEditor__tools__tool', {
+            'MediaEditor__tools__button--width-thin':
+              drawWidth === DrawWidth.Thin,
+            'MediaEditor__tools__button--width-regular':
               drawWidth === DrawWidth.Regular,
-            'MediaEditor__button--width-medium': drawWidth === DrawWidth.Medium,
-            'MediaEditor__button--width-heavy': drawWidth === DrawWidth.Heavy,
+            'MediaEditor__tools__button--width-medium':
+              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__crop-toolbar--button MediaEditor__crop-toolbar--reset"
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--words"
           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', {
-            'MediaEditor__crop-toolbar--locked': cropAspectRatioLock,
-            'MediaEditor__crop-toolbar--unlocked': !cropAspectRatioLock,
-          })}
+          className={classNames(
+            'MediaEditor__tools__button',
+            `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__crop-toolbar--button MediaEditor__crop-toolbar--crop"
+          className="MediaEditor__tools__tool MediaEditor__tools__button MediaEditor__tools__button--words"
           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>