Implement new narrow mode UI

res/css/views/rooms/_MessageComposer.scss

@@ -238,11 +238,11 @@ limitations under the License.
 }
 
 .mx_MessageComposer_buttonMenu::before {
-    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+    mask-image: url('$(res)/img/image-view/more.svg');
 }
 
 .mx_MessageComposer_closeButtonMenu::before {
-    transform: rotate(180deg);
+    transform: rotate(90deg);
     transform-origin: center;
 }
 
@@ -365,3 +365,8 @@ limitations under the License.
         margin-right: 0;
     }
 }
+
+.mx_MessageComposer_Menu .mx_CallContextMenu_item {
+    display: flex;
+    align-items: center;
+}

src/components/views/rooms/MessageComposer.tsx

@@ -33,6 +33,7 @@ import {
     ContextMenuTooltipButton,
     useContextMenu,
     MenuItem,
+    ChevronFace,
 } from "../../structures/ContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
@@ -416,25 +417,32 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     };
 
     private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
-        const buttons = [];
+        const buttons = new Map<string, JSX.Element>();
-
         if (!this.state.haveRecording) {
-            buttons.push(
+            buttons.set(
+                _t("Send File"),
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
+            );
+            buttons.set(
+                _t("Show Emojis"),
                 <EmojiButton key="emoji_button" addEmoji={this.addEmoji} menuPosition={menuPosition} />,
             );
         }
         if (this.shouldShowStickerPicker()) {
-            buttons.push(<AccessibleTooltipButton
+            buttons.set(
-                id='stickersButton'
+                _t("Show Stickers"),
-                key="controls_stickers"
+                <AccessibleTooltipButton
-                className="mx_MessageComposer_button mx_MessageComposer_stickers"
+                    id='stickersButton'
-                onClick={() => this.showStickers(!this.state.showStickers)}
+                    key="controls_stickers"
-                title={this.state.showStickers ? _t("Hide Stickers") : _t("Show Stickers")}
+                    className="mx_MessageComposer_button mx_MessageComposer_stickers"
-            />);
+                    onClick={() => this.showStickers(!this.state.showStickers)}
+                    title={this.state.showStickers ? _t("Hide Stickers") : _t("Show Stickers")}
+                />,
+            );
         }
         if (!this.state.haveRecording && !this.state.narrowMode) {
-            buttons.push(
+            buttons.set(
+                _t("Send voice message"),
                 <AccessibleTooltipButton
                     className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
                     onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
@@ -444,7 +452,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
 
         if (!this.state.narrowMode) {
-            return buttons;
+            return Array.from(buttons.values());
         } else {
             const classnames = classNames({
                 mx_MessageComposer_button: true,
@@ -457,19 +465,23 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 <AccessibleTooltipButton
                     className={classnames}
                     onClick={this.toggleButtonMenu}
-                    title={_t("view more options")}
+                    title={_t("Composer menu")}
+                    tooltip={false}
                 />
                 { this.state.isMenuOpen && (
                     <ContextMenu
                         onFinished={this.toggleButtonMenu}
                         {...menuPosition}
                         menuPaddingRight={10}
-                        menuPaddingTop={16}
+                        menuPaddingTop={5}
-                        menuWidth={50}
+                        menuPaddingBottom={5}
+                        menuWidth={150}
+                        wrapperClassName="mx_MessageComposer_Menu"
                     >
-                        { buttons.slice(1).map((button, index) => (
+                        { Array.from(buttons).slice(1).map(([label, button]) => (
-                            <MenuItem className="mx_CallContextMenu_item" key={index} onClick={this.toggleButtonMenu}>
+                            <MenuItem className="mx_CallContextMenu_item" key={label} onClick={this.toggleButtonMenu}>
                                 { button }
+                                { label }
                             </MenuItem>
                         )) }
                     </ContextMenu>
@@ -568,7 +580,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         });
 
         return (
-            <div className={classes}>
+            <div className={classes} ref={this.ref}>
                 { recordingTooltip }
                 <div className="mx_MessageComposer_wrapper">
                     { this.props.showReplyPreview && (

src/i18n/strings/en_EN.json

@@ -1558,8 +1558,10 @@
     "Send a reply…": "Send a reply…",
     "Send an encrypted message…": "Send an encrypted message…",
     "Send a message…": "Send a message…",
-    "Hide Stickers": "Hide Stickers",
+    "Send File": "Send File",
+    "Show Emojis": "Show Emojis",
     "Show Stickers": "Show Stickers",
+    "Hide Stickers": "Hide Stickers",
     "Send voice message": "Send voice message",
     "view more options": "view more options",
     "The conversation continues here.": "The conversation continues here.",