From f60e9b9c9f32e8133b8e63042f08403db3dde7b3 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Wed, 13 Oct 2021 10:05:18 -0700
Subject: [PATCH] Sticker upload affordances, fix 'recent media'

---
 _locales/en/messages.json                     | 8 ++++++++
 sticker-creator/components/StickerFrame.tsx   | 8 +++++++-
 sticker-creator/components/StickerGrid.tsx    | 7 ++++++-
 sticker-creator/elements/DropZone.stories.tsx | 2 +-
 sticker-creator/elements/DropZone.tsx         | 4 +++-
 sticker-creator/elements/LabeledCheckbox.scss | 9 ++++++++-
 ts/views/conversation_view.ts                 | 2 +-
 7 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 9bd0ed990b..013b90414d 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -3047,6 +3047,14 @@
     "message": "Add your stickers",
     "description": "Title for the drop stage of the sticker creator"
   },
+  "StickerCreator--DropStage--removeSticker": {
+    "message": "Remove sticker",
+    "description": "Label for the X button used to remove a staged sticker"
+  },
+  "StickerCreator--DropStage--dragDrop": {
+    "message": "Click or drag/drop a file to add a sticker",
+    "description": "Shown on the + section of the file addition stage of sticker pack creation"
+  },
   "StickerCreator--DropStage--help": {
     "message": "Stickers must be in PNG, APNG, or WebP format with a transparent background and 512x512 pixels. Recommended margin is 16px.",
     "description": "Help text for the drop stage of the sticker creator"
diff --git a/sticker-creator/components/StickerFrame.tsx b/sticker-creator/components/StickerFrame.tsx
index 94d4c178de..45a5362c82 100644
--- a/sticker-creator/components/StickerFrame.tsx
+++ b/sticker-creator/components/StickerFrame.tsx
@@ -202,11 +202,17 @@ export const StickerFrame = React.memo(
                 <div className={styles.guide} />
               ) : null}
               {mode === 'add' && onDrop ? (
-                <DropZone onDrop={onDrop} inner onDragActive={setDragActive} />
+                <DropZone
+                  label={i18n('StickerCreator--DropStage--dragDrop')}
+                  onDrop={onDrop}
+                  inner
+                  onDragActive={setDragActive}
+                />
               ) : null}
               {mode === 'removable' ? (
                 <button
                   type="button"
+                  aria-label={i18n('StickerCreator--DropStage--removeSticker')}
                   className={styles.closeButton}
                   onClick={handleRemove}
                   // Reverse the mouseenter/leave logic for the remove button so
diff --git a/sticker-creator/components/StickerGrid.tsx b/sticker-creator/components/StickerGrid.tsx
index 829e8568ab..cabf196d3c 100644
--- a/sticker-creator/components/StickerGrid.tsx
+++ b/sticker-creator/components/StickerGrid.tsx
@@ -13,6 +13,7 @@ import { Props as StickerFrameProps, StickerFrame } from './StickerFrame';
 import { stickersDuck } from '../store';
 import { DropZone, Props as DropZoneProps } from '../elements/DropZone';
 import { processStickerImage } from '../util/preload';
+import { useI18n } from '../util/i18n';
 
 const queue = new PQueue({ concurrency: 3, timeout: 1000 * 60 * 2 });
 
@@ -44,6 +45,7 @@ export type InnerGridProps = Props & {
 
 const InnerGrid = SortableContainer(
   ({ ids, mode, showGuide }: InnerGridProps) => {
+    const i18n = useI18n();
     const containerClassName = ids.length > 0 ? styles.grid : styles.drop;
     const frameMode = mode === 'add' ? 'removable' : 'pick-emoji';
 
@@ -94,7 +96,10 @@ const InnerGrid = SortableContainer(
             ) : null}
           </>
         ) : (
-          <DropZone onDrop={handleDrop} />
+          <DropZone
+            label={i18n('StickerCreator--DropStage--dragDrop')}
+            onDrop={handleDrop}
+          />
         )}
       </div>
     );
diff --git a/sticker-creator/elements/DropZone.stories.tsx b/sticker-creator/elements/DropZone.stories.tsx
index 5e18dcd283..3d53b91d85 100644
--- a/sticker-creator/elements/DropZone.stories.tsx
+++ b/sticker-creator/elements/DropZone.stories.tsx
@@ -8,5 +8,5 @@ import { action } from '@storybook/addon-actions';
 import { DropZone } from './DropZone';
 
 storiesOf('Sticker Creator/elements', module).add('DropZone', () => {
-  return <DropZone onDrop={action('onDrop')} />;
+  return <DropZone label="This is the label" onDrop={action('onDrop')} />;
 });
diff --git a/sticker-creator/elements/DropZone.tsx b/sticker-creator/elements/DropZone.tsx
index 0060eb1ebd..1baa3242d5 100644
--- a/sticker-creator/elements/DropZone.tsx
+++ b/sticker-creator/elements/DropZone.tsx
@@ -9,6 +9,7 @@ import { useStickerDropzone } from '../util/useStickerDropzone';
 
 export type Props = {
   readonly inner?: boolean;
+  readonly label: string;
   onDrop(files: Array<string>): unknown;
   onDragActive?(active: boolean): unknown;
 };
@@ -26,7 +27,7 @@ const getClassName = ({ inner }: Props, isDragActive: boolean) => {
 };
 
 export const DropZone: React.ComponentType<Props> = props => {
-  const { inner, onDrop, onDragActive } = props;
+  const { inner, label, onDrop, onDragActive } = props;
   const i18n = useI18n();
 
   const handleDrop = React.useCallback(
@@ -50,6 +51,7 @@ export const DropZone: React.ComponentType<Props> = props => {
     <div
       {...getRootProps({ className: getClassName(props, isDragActive) })}
       role="button"
+      area-label={label}
     >
       <input {...getInputProps()} />
       <svg viewBox="0 0 36 36" width="36px" height="36px">
diff --git a/sticker-creator/elements/LabeledCheckbox.scss b/sticker-creator/elements/LabeledCheckbox.scss
index 6243070e04..b61f2d97ec 100644
--- a/sticker-creator/elements/LabeledCheckbox.scss
+++ b/sticker-creator/elements/LabeledCheckbox.scss
@@ -8,6 +8,14 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+
+  padding: 2px;
+
+  // We'd really like to use focus-within-visible or :has(:focus-visible), to ensure that
+  //   this doesn't show when using the mouse, but neither are ready yet!
+  &:focus-within {
+    outline: 2px solid -webkit-focus-ring-color;
+  }
 }
 
 .input {
@@ -48,6 +56,5 @@
 .label {
   margin-left: 6px;
   position: relative;
-  top: 1px;
   user-select: none;
 }
diff --git a/ts/views/conversation_view.ts b/ts/views/conversation_view.ts
index fe2cb90972..42049684ef 100644
--- a/ts/views/conversation_view.ts
+++ b/ts/views/conversation_view.ts
@@ -1870,7 +1870,7 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
   }
 
   showAllMedia(): void {
-    if (this.panels && this.panels.length) {
+    if (document.querySelectorAll('.module-media-gallery').length) {
       return;
     }