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

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 (
-        props.haveRecording
-            ? null
-            : props.narrowMode
-                ? narrowMode(props, room, roomId, matrixClient)
-                : wideMode(props, room, roomId, matrixClient)
-    );
-};
+    if (props.haveRecording) {
+        return null;
+    }
 
-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) }
-    </>;
-}
+    let mainButtons: ReactElement[];
+    let moreButtons: ReactElement[];
+    if (props.narrowMode) {
+        mainButtons = [
+            emojiButton(props),
+        ];
+        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);
 
-function narrowMode(
-    props: IProps,
-    room: Room,
-    roomId: string,
-    matrixClient: MatrixClient,
-): ReactElement {
     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,21 +243,20 @@ class UploadButton extends React.Component<IUploadButtonProps> {
 
     render() {
         const uploadInputStyle = { display: 'none' };
-        return (
-            <AccessibleTooltipButton
+        return <>
+            <CollapsibleButton
                 className="mx_MessageComposer_button mx_MessageComposer_upload"
                 onClick={this.onUploadClick}
-                title={_t('Upload file')}
-            >
-                <input
-                    ref={this.uploadInput}
-                    type="file"
-                    style={uploadInputStyle}
-                    multiple
-                    onChange={this.onUploadFileInputChange}
-                />
-            </AccessibleTooltipButton>
-        );
+                title={_t('Attachment')}
+            />
+            <input
+                ref={this.uploadInput}
+                type="file"
+                style={uploadInputStyle}
+                multiple
+                onChange={this.onUploadFileInputChange}
+            />
+        </>;
     }
 }
 
@@ -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={
-                    props.narrowMode
-                        ? _t("Send a sticker")
-                        : props.isStickerPickerOpen
-                            ? _t("Hide Stickers")
-                            : _t("Show Stickers")
-                }
+                title={props.isStickerPickerOpen ? _t("Hide stickers") : _t("Sticker")}
             />
             : 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")}
             />
         );
     }