Merge pull request matrix-org#6752 from matrix-org/revert-6682-gsouquet/compact-composer-18533

Revert "Create narrow mode for Composer"

Author: turt2live

res/css/views/rooms/_MessageComposer.scss

@@ -237,15 +237,6 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
 }
 
-.mx_MessageComposer_buttonMenu::before {
-    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;
@@ -365,8 +356,3 @@ limitations under the License.
         margin-right: 0;
     }
 }
-
-.mx_MessageComposer_Menu .mx_CallContextMenu_item {
-    display: flex;
-    align-items: center;
-}

src/components/views/rooms/MessageComposer.tsx

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React, { createRef } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -27,13 +27,7 @@ import { makeRoomPermalink, RoomPermalinkCreator } from '../../../utils/permalin
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
-import {
-    aboveLeftOf,
-    ContextMenu,
-    ContextMenuTooltipButton,
-    useContextMenu,
-    MenuItem,
-} from "../../structures/ContextMenu";
+import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ReplyPreview from "./ReplyPreview";
 import { UIFeature } from "../../../settings/UIFeature";
@@ -51,9 +45,6 @@ import { Action } from "../../../dispatcher/actions";
 import EditorModel from "../../../editor/model";
 import EmojiPicker from '../emojipicker/EmojiPicker';
 import MemberStatusMessageAvatar from "../avatars/MemberStatusMessageAvatar";
-import UIStore, { UI_EVENTS } from '../../../stores/UIStore';
-
-const NARROW_MODE_BREAKPOINT = 500;
 
 interface IComposerAvatarProps {
     me: object;
@@ -80,13 +71,13 @@ function SendButton(props: ISendButtonProps) {
     );
 }
 
-const EmojiButton = ({ addEmoji, menuPosition }) => {
+const EmojiButton = ({ addEmoji }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
     let contextMenu;
     if (menuDisplayed) {
-        const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect());
-        contextMenu = <ContextMenu {...position} onFinished={closeMenu} managed={false}>
+        const buttonRect = button.current.getBoundingClientRect();
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
             <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
         </ContextMenu>;
     }
@@ -205,17 +196,13 @@ interface IState {
     haveRecording: boolean;
     recordingTimeLeftSeconds?: number;
     me?: RoomMember;
-    narrowMode?: boolean;
-    isMenuOpen: boolean;
-    showStickers: boolean;
 }
 
 @replaceableComponent("views.rooms.MessageComposer")
 export default class MessageComposer extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     private messageComposerInput: SendMessageComposer;
     private voiceRecordingButton: VoiceRecordComposerTile;
-    private ref: React.RefObject<HTMLDivElement> = createRef();
 
     static defaultProps = {
         replyInThread: false,
@@ -233,30 +220,15 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             isComposerEmpty: true,
             haveRecording: false,
             recordingTimeLeftSeconds: null, // when set to a number, shows a toast
-            isMenuOpen: false,
-            showStickers: false,
         };
     }
 
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
         this.waitForOwnMember();
-        UIStore.instance.trackElementDimensions("MessageComposer", this.ref.current);
-        UIStore.instance.on("MessageComposer", this.onResize);
     }
 
-    private onResize = (type: UI_EVENTS, entry: ResizeObserverEntry) => {
-        if (type === UI_EVENTS.Resize) {
-            const narrowMode = entry.contentRect.width <= NARROW_MODE_BREAKPOINT;
-            this.setState({
-                narrowMode,
-                isMenuOpen: !narrowMode ? false : this.state.isMenuOpen,
-                showStickers: false,
-            });
-        }
-    };
-
     private onAction = (payload: ActionPayload) => {
         if (payload.action === 'reply_to_event') {
             // add a timeout for the reply preview to be rendered, so
@@ -291,8 +263,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
         VoiceRecordingStore.instance.off(UPDATE_EVENT, this.onVoiceStoreUpdate);
         dis.unregister(this.dispatcherRef);
-        UIStore.instance.stopTrackingElementDimensions("MessageComposer");
-        UIStore.instance.removeListener("MessageComposer", this.onResize);
     }
 
     private onRoomStateEvents = (ev, state) => {
@@ -399,96 +369,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
     };
 
-    private shouldShowStickerPicker = (): boolean => {
-        return SettingsStore.getValue(UIFeature.Widgets)
-        && SettingsStore.getValue("MessageComposerInput.showStickersButton")
-        && !this.state.haveRecording;
-    };
-
-    private showStickers = (showStickers: boolean) => {
-        this.setState({ showStickers });
-    };
-
-    private toggleButtonMenu = (): void => {
-        this.setState({
-            isMenuOpen: !this.state.isMenuOpen,
-        });
-    };
-
-    private renderButtons(menuPosition): JSX.Element | JSX.Element[] {
-        const buttons = new Map<string, JSX.Element>();
-        if (!this.state.haveRecording) {
-            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.set(
-                _t("Show Stickers"),
-                <AccessibleTooltipButton
-                    id='stickersButton'
-                    key="controls_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.set(
-                _t("Send voice message"),
-                <AccessibleTooltipButton
-                    className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
-                    onClick={() => this.voiceRecordingButton?.onRecordStartEndClick()}
-                    title={_t("Send voice message")}
-                />,
-            );
-        }
-
-        if (!this.state.narrowMode) {
-            return Array.from(buttons.values());
-        } else {
-            const classnames = classNames({
-                mx_MessageComposer_button: true,
-                mx_MessageComposer_buttonMenu: true,
-                mx_MessageComposer_closeButtonMenu: this.state.isMenuOpen,
-            });
-
-            return <>
-                { buttons[0] }
-                <AccessibleTooltipButton
-                    className={classnames}
-                    onClick={this.toggleButtonMenu}
-                    title={_t("Composer menu")}
-                    tooltip={false}
-                />
-                { this.state.isMenuOpen && (
-                    <ContextMenu
-                        onFinished={this.toggleButtonMenu}
-                        {...menuPosition}
-                        menuPaddingRight={10}
-                        menuPaddingTop={5}
-                        menuPaddingBottom={5}
-                        menuWidth={150}
-                        wrapperClassName="mx_MessageComposer_Menu"
-                    >
-                        { Array.from(buttons).slice(1).map(([label, button]) => (
-                            <MenuItem className="mx_CallContextMenu_item" key={label} onClick={this.toggleButtonMenu}>
-                                { button }
-                                { label }
-                            </MenuItem>
-                        )) }
-                    </ContextMenu>
-                ) }
-            </>;
-        }
-    }
-
     render() {
         const controls = [
             this.state.me && !this.props.compact ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
@@ -497,12 +377,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 null,
         ];
 
-        let menuPosition;
-        if (this.ref.current) {
-            const contentRect = this.ref.current.getBoundingClientRect();
-            menuPosition = aboveLeftOf(contentRect);
-        }
-
         if (!this.state.tombstone && this.state.canSendMessages) {
             controls.push(
                 <SendMessageComposer
@@ -518,10 +392,33 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 />,
             );
 
+            if (!this.state.haveRecording) {
+                controls.push(
+                    <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
+                    <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
+                );
+            }
+
+            if (SettingsStore.getValue(UIFeature.Widgets) &&
+                SettingsStore.getValue("MessageComposerInput.showStickersButton") &&
+                !this.state.haveRecording) {
+                controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
+            }
+
             controls.push(<VoiceRecordComposerTile
                 key="controls_voice_record"
                 ref={c => this.voiceRecordingButton = c}
                 room={this.props.room} />);
+
+            if (!this.state.isComposerEmpty || this.state.haveRecording) {
+                controls.push(
+                    <SendButton
+                        key="controls_send"
+                        onClick={this.sendMessage}
+                        title={this.state.haveRecording ? _t("Send voice message") : undefined}
+                    />,
+                );
+            }
         } else if (this.state.tombstone) {
             const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
 
@@ -562,15 +459,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 yOffset={-50}
             />;
         }
-        controls.push(
-            <Stickerpicker
-                room={this.props.room}
-                showStickers={this.state.showStickers}
-                setShowStickers={this.showStickers}
-                menuPosition={menuPosition} />,
-        );
-
-        const showSendButton = !this.state.isComposerEmpty || this.state.haveRecording;
 
         const classes = classNames({
             "mx_MessageComposer": true,
@@ -579,22 +467,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         });
 
         return (
-            <div className={classes} ref={this.ref}>
+            <div className={classes}>
                 { recordingTooltip }
                 <div className="mx_MessageComposer_wrapper">
                     { this.props.showReplyPreview && (
                         <ReplyPreview permalinkCreator={this.props.permalinkCreator} />
                     ) }
                     <div className="mx_MessageComposer_row">
                         { controls }
-                        { this.renderButtons(menuPosition) }
-                        { showSendButton && (
-                            <SendButton
-                                key="controls_send"
-                                onClick={this.sendMessage}
-                                title={this.state.haveRecording ? _t("Send voice message") : undefined}
-                            />
-                        ) }
                     </div>
                 </div>
             </div>