Improvements to the MyStories row

2022-08-19 14:36:47 -04:00 · 2022-08-19 14:36:47 -04:00 · f7f65de322
commit f7f65de322
parent 6dd6a64d6c
8 changed files with 244 additions and 149 deletions
--- a/stylesheets/components/MyStories.scss
+++ b/stylesheets/components/MyStories.scss
@ -129,3 +129,7 @@
    }
  }
 }
+
+.StoryListItem__button:hover .MyStories__avatar__add-story {
+  border-color: $color-gray-65;
+}
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@ -83,15 +83,6 @@
    position: relative;
    width: 46px;

-    &--add {
-      &::after {
-        content: '';
-        @include color-svg('../images/icons/v2/plus-20.svg', $color-gray-15);
-        height: 18px;
-        width: 18px;
-      }
-    }
-
    &--image {
      @include button-reset;

--- a/ts/components/ContextMenu.tsx
+++ b/ts/components/ContextMenu.tsx
@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only

 import type { KeyboardEvent, ReactNode } from 'react';
-import type { Options } from '@popperjs/core';
+import type { Options, VirtualElement } from '@popperjs/core';
 import FocusTrap from 'focus-trap-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import { noop } from 'lodash';
@ -23,6 +23,7 @@ export type ContextMenuOptionType<T> = {
 };

 export type PropsType<T> = {
+  readonly ariaLabel?: string;
  readonly children?: ReactNode;
  readonly i18n: LocalizerType;
  readonly menuOptions: ReadonlyArray<ContextMenuOptionType<T>>;
@ -37,7 +38,27 @@ export type PropsType<T> = {

 let closeCurrentOpenContextMenu: undefined | (() => unknown);

+// https://popper.js.org/docs/v2/virtual-elements/
+// Generating a virtual element here so that we can make the menu pop up
+// right under the mouse cursor.
+function generateVirtualElement(x: number, y: number): VirtualElement {
+  return {
+    getBoundingClientRect: () => ({
+      bottom: y,
+      height: 0,
+      left: x,
+      right: x,
+      toJSON: () => ({ x, y }),
+      top: y,
+      width: 0,
+      x,
+      y,
+    }),
+  };
+}
+
 export function ContextMenu<T>({
+  ariaLabel,
  children,
  i18n,
  menuOptions,
@ -56,14 +77,21 @@ export function ContextMenu<T>({
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
    null
  );
+
+  const virtualElement = useRef<VirtualElement>(generateVirtualElement(0, 0));
+
  const [referenceElement, setReferenceElement] =
    useState<HTMLButtonElement | null>(null);

-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'top-start',
-    strategy: 'fixed',
-    ...popperOptions,
-  });
+  const { styles, attributes } = usePopper(
+    virtualElement.current,
+    popperElement,
+    {
+      placement: 'top-start',
+      strategy: 'fixed',
+      ...popperOptions,
+    }
+  );

  useEffect(() => {
    if (onMenuShowingChanged) {
@ -129,9 +157,10 @@ export function ContextMenu<T>({
    }
  };

-  const handleClick = (ev: KeyboardEvent | React.MouseEvent) => {
+  const handleClick = (ev: React.MouseEvent) => {
    closeCurrentOpenContextMenu?.();
    closeCurrentOpenContextMenu = () => setIsMenuShowing(false);
+    virtualElement.current = generateVirtualElement(ev.clientX, ev.clientY);
    setIsMenuShowing(true);
    ev.stopPropagation();
    ev.preventDefault();
@ -147,7 +176,7 @@ export function ContextMenu<T>({
      )}
    >
      <button
-        aria-label={i18n('ContextMenu--button')}
+        aria-label={ariaLabel || i18n('ContextMenu--button')}
        className={classNames(
          getClassName('__button'),
          isMenuShowing ? getClassName('__button--active') : undefined
--- a/ts/components/MyStoriesButton.stories.tsx
+++ b/ts/components/MyStoriesButton.stories.tsx
@ -36,6 +36,7 @@ export default {
    onAddStory: { action: true },
    onClick: { action: true },
    queueStoryDownload: { action: true },
+    showToast: { action: true },
  },
 } as Meta;

@ -50,7 +51,7 @@ const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
  await userEvent.click(btnAddStory);
  await expect(args.onAddStory).toHaveBeenCalled();

-  const [btnStory] = canvas.getAllByLabelText('Story');
+  const [btnStory] = canvas.getAllByText('My Stories');
  await userEvent.click(btnStory);
  await expect(args.onClick).toHaveBeenCalled();
 };
--- a/ts/components/MyStoriesButton.tsx
+++ b/ts/components/MyStoriesButton.tsx
@ -5,11 +5,14 @@ import React from 'react';
 import classNames from 'classnames';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import type { StoryViewType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
 import { StoryImage } from './StoryImage';
 import { getAvatarColor } from '../types/Colors';

+import { StoriesAddStoryButton } from './StoriesAddStoryButton';
+
 export type PropsType = {
  hasMultiple: boolean;
  i18n: LocalizerType;
@ -18,6 +21,7 @@ export type PropsType = {
  onAddStory: () => unknown;
  onClick: () => unknown;
  queueStoryDownload: (storyId: string) => unknown;
+  showToast: ShowToastActionCreatorType;
 };

 export const MyStoriesButton = ({
@ -28,6 +32,7 @@ export const MyStoriesButton = ({
  onAddStory,
  onClick,
  queueStoryDownload,
+  showToast,
 }: PropsType): JSX.Element => {
  const {
    acceptedMessageRequest,
@ -40,9 +45,14 @@ export const MyStoriesButton = ({
    title,
  } = me;

-  return (
-    <div className="Stories__my-stories">
-      <div className="StoryListItem__button">
+  if (!newestStory) {
+    return (
+      <StoriesAddStoryButton
+        i18n={i18n}
+        moduleClassName="StoryListItem"
+        onAddStory={onAddStory}
+        showToast={showToast}
+      >
        <div className="MyStories__avatar-container">
          <Avatar
            acceptedMessageRequest={acceptedMessageRequest}
@ -53,7 +63,6 @@ export const MyStoriesButton = ({
            i18n={i18n}
            isMe={Boolean(isMe)}
            name={name}
-            onClick={onAddStory}
            profileName={profileName}
            sharedGroupNames={sharedGroupNames}
            size={AvatarSize.FORTY_EIGHT}
@ -62,74 +71,88 @@ export const MyStoriesButton = ({
          <div
            aria-label={i18n('Stories__add')}
            className="MyStories__avatar__add-story"
-            onClick={ev => {
-              onAddStory();
-              ev.stopPropagation();
-              ev.preventDefault();
-            }}
-            onKeyDown={ev => {
-              if (ev.key === 'Enter') {
-                onAddStory();
-                ev.stopPropagation();
-                ev.preventDefault();
-              }
-            }}
-            role="button"
-            tabIndex={0}
          />
        </div>
-        <div
-          className="StoryListItem__click-container"
-          onClick={onClick}
-          onKeyDown={ev => {
-            if (ev.key === 'Enter') {
-              onClick();
-              ev.stopPropagation();
-              ev.preventDefault();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          <div className="StoryListItem__info">
-            <>
-              <div className="StoryListItem__info--title">
-                {i18n('Stories__mine')}
-              </div>
-              {!newestStory && (
-                <div className="StoryListItem__info--timestamp">
-                  {i18n('Stories__add')}
-                </div>
-              )}
-            </>
-          </div>
+        <div className="StoryListItem__info">
+          <>
+            <div className="StoryListItem__info--title">
+              {i18n('Stories__mine')}
+            </div>
+            <div className="StoryListItem__info--timestamp">
+              {i18n('Stories__add')}
+            </div>
+          </>
+        </div>
+      </StoriesAddStoryButton>
+    );
+  }

+  return (
+    <div className="StoryListItem__button">
+      <div className="MyStories__avatar-container">
+        <StoriesAddStoryButton
+          i18n={i18n}
+          onAddStory={onAddStory}
+          showToast={showToast}
+        >
+          <Avatar
+            acceptedMessageRequest={acceptedMessageRequest}
+            avatarPath={avatarPath}
+            badge={undefined}
+            color={getAvatarColor(color)}
+            conversationType="direct"
+            i18n={i18n}
+            isMe={Boolean(isMe)}
+            name={name}
+            profileName={profileName}
+            sharedGroupNames={sharedGroupNames}
+            size={AvatarSize.FORTY_EIGHT}
+            title={title}
+          />
          <div
-            aria-label={i18n('StoryListItem__label')}
-            className={classNames('StoryListItem__previews', {
-              'StoryListItem__previews--multiple': hasMultiple,
-            })}
-          >
-            {hasMultiple && <div className="StoryListItem__previews--more" />}
-            {newestStory ? (
-              <StoryImage
-                attachment={newestStory.attachment}
-                firstName={i18n('you')}
-                i18n={i18n}
-                isMe
-                isThumbnail
-                label=""
-                moduleClassName="StoryListItem__previews--image"
-                queueStoryDownload={queueStoryDownload}
-                storyId={newestStory.messageId}
-              />
-            ) : (
-              <div
-                aria-label={i18n('Stories__add')}
-                className="StoryListItem__previews--add StoryListItem__previews--image"
-              />
-            )}
-          </div>
+            aria-label={i18n('Stories__add')}
+            className="MyStories__avatar__add-story"
+          />
+        </StoriesAddStoryButton>
+      </div>
+      <div
+        className="StoryListItem__click-container"
+        onClick={onClick}
+        onKeyDown={ev => {
+          if (ev.key === 'Enter') {
+            onClick();
+            ev.stopPropagation();
+            ev.preventDefault();
+          }
+        }}
+        role="button"
+        tabIndex={0}
+      >
+        <div className="StoryListItem__info">
+          <>
+            <div className="StoryListItem__info--title">
+              {i18n('Stories__mine')}
+            </div>
+          </>
+        </div>
+        <div
+          aria-label={i18n('StoryListItem__label')}
+          className={classNames('StoryListItem__previews', {
+            'StoryListItem__previews--multiple': hasMultiple,
+          })}
+        >
+          {hasMultiple && <div className="StoryListItem__previews--more" />}
+          <StoryImage
+            attachment={newestStory.attachment}
+            firstName={i18n('you')}
+            i18n={i18n}
+            isMe
+            isThumbnail
+            label=""
+            moduleClassName="StoryListItem__previews--image"
+            queueStoryDownload={queueStoryDownload}
+            storyId={newestStory.messageId}
+          />
        </div>
      </div>
    </div>
--- a/ts/components/StoriesAddStoryButton.tsx
+++ b/ts/components/StoriesAddStoryButton.tsx
@ -0,0 +1,90 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
+import { ContextMenu } from './ContextMenu';
+import { Theme } from '../util/theme';
+import { ToastType } from '../state/ducks/toast';
+import {
+  isVideoGoodForStories,
+  ReasonVideoNotGood,
+} from '../util/isVideoGoodForStories';
+
+export type PropsType = {
+  children?: ReactNode;
+  i18n: LocalizerType;
+  moduleClassName?: string;
+  onAddStory: (file?: File) => unknown;
+  showToast: ShowToastActionCreatorType;
+};
+
+export const StoriesAddStoryButton = ({
+  children,
+  i18n,
+  moduleClassName,
+  onAddStory,
+  showToast,
+}: PropsType): JSX.Element => {
+  return (
+    <ContextMenu
+      ariaLabel={i18n('Stories__add')}
+      i18n={i18n}
+      menuOptions={[
+        {
+          label: i18n('Stories__add-story--media'),
+          onClick: () => {
+            const input = document.createElement('input');
+            input.accept = 'image/*,video/mp4';
+            input.type = 'file';
+            input.onchange = async () => {
+              const file = input.files ? input.files[0] : undefined;
+
+              if (!file) {
+                return;
+              }
+
+              const result = await isVideoGoodForStories(file);
+
+              if (
+                result === ReasonVideoNotGood.UnsupportedCodec ||
+                result === ReasonVideoNotGood.UnsupportedContainer
+              ) {
+                showToast(ToastType.StoryVideoUnsupported);
+                return;
+              }
+
+              if (result === ReasonVideoNotGood.TooLong) {
+                showToast(ToastType.StoryVideoTooLong);
+                return;
+              }
+
+              if (result !== ReasonVideoNotGood.AllGoodNevermind) {
+                showToast(ToastType.StoryVideoError);
+                return;
+              }
+
+              onAddStory(file);
+            };
+            input.click();
+          },
+        },
+        {
+          label: i18n('Stories__add-story--text'),
+          onClick: () => onAddStory(),
+        },
+      ]}
+      moduleClassName={moduleClassName}
+      popperOptions={{
+        placement: 'bottom',
+        strategy: 'absolute',
+      }}
+      theme={Theme.Dark}
+    >
+      {children}
+    </ContextMenu>
+  );
+};
--- a/ts/components/StoriesPane.tsx
+++ b/ts/components/StoriesPane.tsx
@ -20,14 +20,10 @@ import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import { ContextMenu } from './ContextMenu';
 import { MyStoriesButton } from './MyStoriesButton';
 import { SearchInput } from './SearchInput';
+import { StoriesAddStoryButton } from './StoriesAddStoryButton';
 import { StoryListItem } from './StoryListItem';
 import { Theme } from '../util/theme';
-import { ToastType } from '../state/ducks/toast';
 import { isNotNil } from '../util/isNotNil';
-import {
-  isVideoGoodForStories,
-  ReasonVideoNotGood,
-} from '../util/isVideoGoodForStories';

 const FUSE_OPTIONS: Fuse.IFuseOptions<ConversationStoryType> = {
  getFn: (story, path) => {
@ -126,58 +122,11 @@ export const StoriesPane = ({
        <div className="Stories__pane__header--title">
          {i18n('Stories__title')}
        </div>
-        <ContextMenu
+        <StoriesAddStoryButton
          i18n={i18n}
-          menuOptions={[
-            {
-              label: i18n('Stories__add-story--media'),
-              onClick: () => {
-                const input = document.createElement('input');
-                input.accept = 'image/*,video/mp4';
-                input.type = 'file';
-                input.onchange = async () => {
-                  const file = input.files ? input.files[0] : undefined;
-
-                  if (!file) {
-                    return;
-                  }
-
-                  const result = await isVideoGoodForStories(file);
-
-                  if (
-                    result === ReasonVideoNotGood.UnsupportedCodec ||
-                    result === ReasonVideoNotGood.UnsupportedContainer
-                  ) {
-                    showToast(ToastType.StoryVideoUnsupported);
-                    return;
-                  }
-
-                  if (result === ReasonVideoNotGood.TooLong) {
-                    showToast(ToastType.StoryVideoTooLong);
-                    return;
-                  }
-
-                  if (result !== ReasonVideoNotGood.AllGoodNevermind) {
-                    showToast(ToastType.StoryVideoError);
-                    return;
-                  }
-
-                  onAddStory(file);
-                };
-                input.click();
-              },
-            },
-            {
-              label: i18n('Stories__add-story--text'),
-              onClick: () => onAddStory(),
-            },
-          ]}
          moduleClassName="Stories__pane__add-story"
-          popperOptions={{
-            placement: 'bottom',
-            strategy: 'absolute',
-          }}
-          theme={Theme.Dark}
+          onAddStory={onAddStory}
+          showToast={showToast}
        />
        <ContextMenu
          i18n={i18n}
@ -218,6 +167,7 @@ export const StoriesPane = ({
            onAddStory={onAddStory}
            onClick={onMyStoriesClicked}
            queueStoryDownload={queueStoryDownload}
+            showToast={showToast}
          />
          {renderedStories.map(story => (
            <StoryListItem
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@ -8959,6 +8959,13 @@
    "reasonCategory": "usageTrusted",
    "updated": "2021-07-30T16:57:33.618Z"
  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/ContextMenu.tsx",
+    "line": "  const virtualElement = useRef<VirtualElement>(generateVirtualElement(0, 0));",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-08-19T17:09:38.534Z"
+  },
  {
    "rule": "React-useRef",
    "path": "ts/components/ConversationList.tsx",
@ -9203,13 +9210,6 @@
    "reasonCategory": "usageTrusted",
    "updated": "2021-11-30T10:15:33.662Z"
  },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/TextStoryCreator.tsx",
-    "line": "  const textEditorRef = useRef<HTMLInputElement | null>(null);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2022-06-16T23:23:32.306Z"
-  },
  {
    "rule": "React-useRef",
    "path": "ts/components/StoryImage.tsx",
@ -9252,6 +9252,13 @@
    "reasonCategory": "usageTrusted",
    "updated": "2022-06-16T23:23:32.306Z"
  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/TextStoryCreator.tsx",
+    "line": "  const textEditorRef = useRef<HTMLInputElement | null>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-06-16T23:23:32.306Z"
+  },
  {
    "rule": "React-useRef",
    "path": "ts/components/Tooltip.tsx",