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,18 +25,25 @@ 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
             {...props}
             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")}
             />
         );
     }

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",
-    "Upload file": "Upload file",
-    "Send a sticker": "Send a sticker",
-    "Hide Stickers": "Hide Stickers",
-    "Show Stickers": "Show Stickers",
+    "Emoji": "Emoji",
+    "Hide stickers": "Hide stickers",
+    "Sticker": "Sticker",
+    "Voice Message": "Voice Message",
     "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",