Simplify Composer buttons (#7678)

* Render a CollapsibleButton's children (needed by UploadButton)

* Make UploadButton ready to live inside an overflow menu

* Always show overflow menu in composer: main buttons are emoji and attach

* Re-order composer buttons as per design

* Re-word composer button captions to be simple nouns

* Don't rotate More options button when clicked

* Move the composer menu and dialogs 16px in from right

* Reduce shadow on composer More menu

* From review: remove else clause

* From review: take input out of button

* Update test snapshots

* Update snapshots

res/css/structures/_ContextualMenu.scss

@@ -41,7 +41,7 @@ limitations under the License.
 }
 
 .mx_ContextualMenu_right {
-    right: 0;
+    right: 16px;
 }
 
 .mx_ContextualMenu.mx_ContextualMenu_withChevron_right {

res/css/views/rooms/_MessageComposer.scss

@@ -21,7 +21,7 @@ limitations under the License.
     border-top: 1px solid $primary-hairline-color;
     position: relative;
     padding-left: 42px;
-    padding-right: 6px;
+    padding-right: 16px;
 }
 
 .mx_MessageComposer_replaced_wrapper {
@@ -271,11 +271,6 @@ limitations under the License.
     mask-image: url('$(res)/img/image-view/more.svg');
 }
 
-.mx_MessageComposer_closeButtonMenu::before {
-    transform: rotate(90deg);
-    transform-origin: center;
-}
-
 .mx_MessageComposer_sendMessage {
     cursor: pointer;
     position: relative;
@@ -417,4 +412,6 @@ limitations under the License.
     min-width: 150px;
     width: max-content;
     padding: 5px 10px 5px 0;
+    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
 }

src/components/views/location/LocationButton.tsx

@@ -72,13 +72,11 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition
         },
     );
 
-    // TODO: replace ContextMenuTooltipButton with a unified representation of
-    // the header buttons and the right panel buttons
     return <React.Fragment>
         <CollapsibleButton
             className={className}
             onClick={openMenu}
-            title={_t("Share location")}
+            title={_t("Location")}
         />
 
         { contextMenu }

src/components/views/rooms/CollapsibleButton.tsx

@@ -25,7 +25,7 @@ interface ICollapsibleButtonProps extends ComponentProps<typeof MenuItem> {
     title: string;
 }
 
-export const CollapsibleButton = ({ title, className, ...props }: ICollapsibleButtonProps) => {
+export const CollapsibleButton = ({ title, children, className, ...props }: ICollapsibleButtonProps) => {
     const inOverflowMenu = !!useContext(OverflowMenuContext);
     if (inOverflowMenu) {
         return <MenuItem
@@ -33,10 +33,17 @@ export const CollapsibleButton = ({ title, className, ...props }: ICollapsibleBu
             className={classNames("mx_CallContextMenu_item", className)}
         >
             { title }
+            { children }
         </MenuItem>;
     }
 
-    return <AccessibleTooltipButton {...props} title={title} className={className} />;
+    return <AccessibleTooltipButton
+        {...props}
+        title={title}
+        className={className}
+    >
+        { children }
+    </AccessibleTooltipButton>;
 };
 
 export default CollapsibleButton;

src/components/views/rooms/MessageComposerButtons.tsx

@@ -59,53 +59,47 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
     const matrixClient: MatrixClient = useContext(MatrixClientContext);
     const { room, roomId } = useContext(RoomContext);
 
-    return (
+    if (props.haveRecording) {
-        props.haveRecording
+        return null;
-            ? null
-            : props.narrowMode
-                ? narrowMode(props, room, roomId, matrixClient)
-                : wideMode(props, room, roomId, matrixClient)
-    );
-};
-
-function wideMode(
-    props: IProps,
-    room: Room,
-    roomId: string,
-    matrixClient: MatrixClient,
-): ReactElement {
-    return <>
-        { pollButton(props, room) }
-        { uploadButton(props, roomId) }
-        { showLocationButton(props, room, roomId, matrixClient) }
-        { emojiButton(props) }
-        { showStickersButton(props) }
-        { voiceRecordingButton(props) }
-    </>;
     }
 
-function narrowMode(
+    let mainButtons: ReactElement[];
-    props: IProps,
+    let moreButtons: ReactElement[];
-    room: Room,
+    if (props.narrowMode) {
-    roomId: string,
+        mainButtons = [
-    matrixClient: MatrixClient,
+            emojiButton(props),
-): ReactElement {
+        ];
+        moreButtons = [
+            uploadButton(props, roomId),
+            showStickersButton(props),
+            voiceRecordingButton(props),
+            pollButton(room),
+            showLocationButton(props, room, roomId, matrixClient),
+        ];
+    } else {
+        mainButtons = [
+            emojiButton(props),
+            uploadButton(props, roomId),
+        ];
+        moreButtons = [
+            showStickersButton(props),
+            voiceRecordingButton(props),
+            pollButton(room),
+            showLocationButton(props, room, roomId, matrixClient),
+        ];
+    }
+
+    mainButtons = mainButtons.filter((x: ReactElement) => x);
+    moreButtons = moreButtons.filter((x: ReactElement) => x);
+
     const moreOptionsClasses = classNames({
         mx_MessageComposer_button: true,
         mx_MessageComposer_buttonMenu: true,
         mx_MessageComposer_closeButtonMenu: props.isMenuOpen,
     });
 
-    const moreButtons = [
-        pollButton(props, room),
-        showLocationButton(props, room, roomId, matrixClient),
-        emojiButton(props),
-        showStickersButton(props),
-        voiceRecordingButton(props),
-    ].filter(x => x);
-
     return <>
-        { uploadButton(props, roomId) }
+        { mainButtons }
         <AccessibleTooltipButton
             className={moreOptionsClasses}
             onClick={props.toggleButtonMenu}
@@ -123,7 +117,7 @@ function narrowMode(
             </ContextMenu>
         ) }
     </>;
-}
+};
 
 function emojiButton(props: IProps): ReactElement {
     return <EmojiButton
@@ -174,7 +168,7 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) =>
         <CollapsibleButton
             className={className}
             onClick={openMenu}
-            title={_t("Add emoji")}
+            title={_t("Emoji")}
         />
 
         { contextMenu }
@@ -219,7 +213,7 @@ class UploadButton extends React.Component<IUploadButtonProps> {
             dis.dispatch({ action: 'require_registration' });
             return;
         }
-        this.uploadInput.current.click();
+        this.uploadInput.current?.click();
     };
 
     private onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -249,12 +243,12 @@ class UploadButton extends React.Component<IUploadButtonProps> {
 
     render() {
         const uploadInputStyle = { display: 'none' };
-        return (
+        return <>
-            <AccessibleTooltipButton
+            <CollapsibleButton
                 className="mx_MessageComposer_button mx_MessageComposer_upload"
                 onClick={this.onUploadClick}
-                title={_t('Upload file')}
+                title={_t('Attachment')}
-            >
+            />
             <input
                 ref={this.uploadInput}
                 type="file"
@@ -262,8 +256,7 @@ class UploadButton extends React.Component<IUploadButtonProps> {
                 multiple
                 onChange={this.onUploadFileInputChange}
             />
-            </AccessibleTooltipButton>
+        </>;
-        );
     }
 }
 
@@ -275,13 +268,7 @@ function showStickersButton(props: IProps): ReactElement {
                 key="controls_stickers"
                 className="mx_MessageComposer_button mx_MessageComposer_stickers"
                 onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
-                title={
+                title={props.isStickerPickerOpen ? _t("Hide stickers") : _t("Sticker")}
-                    props.narrowMode
-                        ? _t("Send a sticker")
-                        : props.isStickerPickerOpen
-                            ? _t("Hide Stickers")
-                            : _t("Show Stickers")
-                }
             />
             : null
     );
@@ -296,12 +283,12 @@ function voiceRecordingButton(props: IProps): ReactElement {
                 key="voice_message_send"
                 className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
                 onClick={props.onRecordStartEndClick}
-                title={_t("Send voice message")}
+                title={_t("Voice Message")}
             />
     );
 }
 
-function pollButton(props: IProps, room: Room): ReactElement {
+function pollButton(room: Room): ReactElement {
     return <PollButton key="polls" room={room} />;
 }
 
@@ -311,6 +298,7 @@ interface IPollButtonProps {
 
 class PollButton extends React.PureComponent<IPollButtonProps> {
     static contextType = OverflowMenuContext;
+    public context!: React.ContextType<typeof OverflowMenuContext>;
 
     private onCreateClick = () => {
         this.context?.(); // close overflow menu
@@ -350,7 +338,7 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
             <CollapsibleButton
                 className="mx_MessageComposer_button mx_MessageComposer_poll"
                 onClick={this.onCreateClick}
-                title={_t("Create poll")}
+                title={_t("Poll")}
             />
         );
     }

src/i18n/strings/en_EN.json

@@ -1694,13 +1694,12 @@
     "You do not have permission to post to this room": "You do not have permission to post to this room",
     "%(seconds)ss left": "%(seconds)ss left",
     "Send voice message": "Send voice message",
-    "Add emoji": "Add emoji",
+    "Emoji": "Emoji",
-    "Upload file": "Upload file",
+    "Hide stickers": "Hide stickers",
-    "Send a sticker": "Send a sticker",
+    "Sticker": "Sticker",
-    "Hide Stickers": "Hide Stickers",
+    "Voice Message": "Voice Message",
-    "Show Stickers": "Show Stickers",
     "You do not have permission to start polls in this room.": "You do not have permission to start polls in this room.",
-    "Create poll": "Create poll",
+    "Poll": "Poll",
     "Bold": "Bold",
     "Italics": "Italics",
     "Strikethrough": "Strikethrough",
@@ -2095,7 +2094,6 @@
     "Invalid file%(extra)s": "Invalid file%(extra)s",
     "Error decrypting image": "Error decrypting image",
     "Show image": "Show image",
-    "Sticker": "Sticker",
     "Image": "Image",
     "Join the conference at the top of this room": "Join the conference at the top of this room",
     "Join the conference from the room information card on the right": "Join the conference from the room information card on the right",
@@ -2153,10 +2151,11 @@
     "Submit logs": "Submit logs",
     "Can't load this message": "Can't load this message",
     "toggle event": "toggle event",
-    "Share location": "Share location",
+    "Location": "Location",
     "We couldn’t send your location": "We couldn’t send your location",
     "Element could not send your location. Please try again later.": "Element could not send your location. Please try again later.",
     "Could not fetch location": "Could not fetch location",
+    "Share location": "Share location",
     "Element was denied permission to fetch your location. Please allow location access in your browser settings.": "Element was denied permission to fetch your location. Please allow location access in your browser settings.",
     "Failed to fetch your location. Please try again later.": "Failed to fetch your location. Please try again later.",
     "Timed out trying to fetch your location. Please try again later.": "Timed out trying to fetch your location. Please try again later.",
@@ -2295,6 +2294,7 @@
     "%(oneUser)schanged the server ACLs %(count)s times|one": "%(oneUser)schanged the server ACLs",
     "%(severalUsers)schanged the <a>pinned messages</a> for the room %(count)s times.|other": "%(severalUsers)schanged the <a>pinned messages</a> for the room %(count)s times.",
     "%(oneUser)schanged the <a>pinned messages</a> for the room %(count)s times.|other": "%(oneUser)schanged the <a>pinned messages</a> for the room %(count)s times.",
+    "Create poll": "Create poll",
     "Create Poll": "Create Poll",
     "Failed to post poll": "Failed to post poll",
     "Sorry, the poll you tried to create was not posted.": "Sorry, the poll you tried to create was not posted.",
@@ -3280,7 +3280,6 @@
     "Commands": "Commands",
     "Command Autocomplete": "Command Autocomplete",
     "Community Autocomplete": "Community Autocomplete",
-    "Emoji": "Emoji",
     "Emoji Autocomplete": "Emoji Autocomplete",
     "Notify the whole room": "Notify the whole room",
     "Room Notification": "Room Notification",

test/components/views/rooms/MessageComposerButtons-test.tsx

@@ -34,23 +34,45 @@ const MessageComposerButtons = TestUtils.wrapInMatrixClientContext(
 );
 
 describe("MessageComposerButtons", () => {
-    it("Renders all buttons in wide mode", () => {
+    it("Renders emoji and upload buttons in wide mode", () => {
         const buttons = wrapAndRender(
             <MessageComposerButtons
                 isMenuOpen={false}
                 narrowMode={false}
                 showLocationButton={true}
                 showStickersButton={true}
+                toggleButtonMenu={() => {}}
             />,
         );
 
         expect(buttonLabels(buttons)).toEqual([
-            "Create poll",
+            "Emoji",
-            "Upload file",
+            "Attachment",
-            "Share location",
+            "More options",
-            "Add emoji",
+        ]);
-            "Show Stickers",
+    });
-            "Send voice message",
+
+    it("Renders other buttons in menu in wide mode", () => {
+        const buttons = wrapAndRender(
+            <MessageComposerButtons
+                isMenuOpen={true}
+                narrowMode={false}
+                showLocationButton={true}
+                showStickersButton={true}
+                toggleButtonMenu={() => {}}
+            />,
+        );
+
+        expect(buttonLabels(buttons)).toEqual([
+            "Emoji",
+            "Attachment",
+            "More options",
+            [
+                "Sticker",
+                "Voice Message",
+                "Poll",
+                "Location",
+            ],
         ]);
     });
 
@@ -61,11 +83,12 @@ describe("MessageComposerButtons", () => {
                 narrowMode={true}
                 showLocationButton={true}
                 showStickersButton={true}
+                toggleButtonMenu={() => {}}
             />,
         );
 
         expect(buttonLabels(buttons)).toEqual([
-            "Upload file",
+            "Emoji",
             "More options",
         ]);
     });
@@ -82,13 +105,13 @@ describe("MessageComposerButtons", () => {
         );
 
         expect(buttonLabels(buttons)).toEqual([
-            "Upload file",
+            "Emoji",
             "More options",
             [
-                "Create poll",
+                "Attachment",
-                "Share location",
+                "Sticker",
-                "Add emoji",
+                "Poll",
-                "Send a sticker",
+                "Location",
             ],
         ]);
     });