Improve composer visiblity

res/css/_components.scss

@@ -83,6 +83,7 @@
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
 @import "./views/avatars/_WidgetAvatar.scss";
 @import "./views/beta/_BetaCard.scss";
+@import "./views/buttons/_Cancel.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_DeviceContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";

res/css/structures/_RoomView.scss

@@ -30,7 +30,6 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     position: relative;
-
 }
 
 .mx_MainSplit_timeline {

res/css/views/buttons/_Cancel.scss

@@ -0,0 +1,32 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+
+.mx_CancelButton {
+    width: var(--size);
+    height: var(--size);
+
+    box-sizing: border-box;
+    padding: calc(var(--size) / 4);
+    border-radius: 50%;
+
+    line-height: 0;
+    background: $quinary-content;
+
+    svg {
+        width: calc(var(--size) / 2);
+        color: $secondary-content;
+    }
+}

res/css/views/rooms/_MessageComposer.scss

@@ -20,12 +20,25 @@ limitations under the License.
     margin: auto;
     border-top: 1px solid $primary-hairline-color;
     position: relative;
-    display: flex;
-    justify-content: flex-end;
-    align-items: end;
+
+    display: grid;
+    grid-template:
+        "reply    reply"    auto
+        "composer controls" auto
+        / 1fr     auto;
+
+    .mx_ReplyPreview {
+        grid-area: reply;
+    }
 
     .mx_MessageComposer_row {
-        flex: 1;
+        grid-area: composer;
+    }
+
+    .mx_MessageComposer_controls {
+        grid-area: controls;
+        display: flex;
+        align-items: flex-end;
     }
 
     >[role=button] {
@@ -225,6 +238,7 @@ limitations under the License.
     padding-left: var(--size);
     border-radius: 50%;
     margin-right: 6px;
+    margin-bottom: 5px;
 
     &:last-child {
         margin-right: auto;

res/css/views/rooms/_ReplyPreview.scss

@@ -20,43 +20,32 @@ limitations under the License.
     background: $background;
     max-height: 50vh;
     overflow: auto;
+    padding: $spacing-8;
+}
+
+.mx_ReplyPreview_header {
+    display: flex;
+    font-size: $font-12px;
+    color: $secondary-content;
+    position: relative;
 
-    .mx_ReplyPreview_section {
-        border-bottom: 1px solid $primary-hairline-color;
-        display: flex;
-        flex-flow: column;
-        row-gap: $spacing-8;
-        padding: $spacing-8 $spacing-8 0 $spacing-8;
-
-        .mx_ReplyPreview_header {
-            display: flex;
-            justify-content: space-between;
-            column-gap: 8px;
-
-            color: $primary-content;
-            font-weight: 400;
-            opacity: 0.4;
-
-            .mx_ReplyPreview_header_cancel {
-                background-color: $primary-content;
-                mask: url('$(res)/img/cancel.svg');
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: 18px;
-                width: 18px;
-                height: 18px;
-                min-width: 18px;
-                min-height: 18px;
-            }
-        }
+    > svg {
+        width: 1em;
+        vertical-align: middle;
+        margin-right: $spacing-8;
     }
-}
 
-.mx_RoomView_body {
-    .mx_ReplyPreview {
-        // Add box-shadow to the reply preview on the main (left) panel only.
-        // It is not added to the preview on the (right) panel for threads and a chat with a maximized widget.
-        box-shadow: 0px -16px 32px $composer-shadow-color;
-        border-radius: 8px 8px 0 0;
+    .mx_CancelButton {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
     }
 }
+
+.mx_ReplyPreview_header_cancel {
+    position: absolute;
+    right: 0;
+    color: $primary-content;
+    width: 18px;
+}

src/components/views/buttons/Cancel.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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 from "react";
+import classnames from "classnames";
+
+import AccessibleButton, { IProps } from "../elements/AccessibleButton";
+import { Icon as CancelIcon } from "../../../../res/img/cancel.svg";
+
+export default function CancelButton(props: IProps) {
+    const classNames = classnames("mx_CancelButton", props.className ?? "");
+    const vars = {
+        "--size": `${props.size}px`,
+    } as React.CSSProperties;
+
+    return <AccessibleButton
+        {...props}
+        className={classNames}
+        style={vars}
+    >
+        <CancelIcon />
+    </AccessibleButton>;
+}
+
+CancelButton.defaultProps = {
+    size: "16",
+};

src/components/views/elements/AccessibleButton.tsx

@@ -41,7 +41,7 @@ type AccessibleButtonKind = | 'primary'
  * onClick:  (required) Event handler for button activation. Should be
  *           implemented exactly like a normal onClick handler.
  */
-interface IProps extends React.InputHTMLAttributes<Element> {
+export interface IProps extends React.InputHTMLAttributes<Element> {
     inputRef?: React.Ref<Element>;
     element?: keyof ReactHTML;
     // The kind of button, similar to how Bootstrap works.

src/components/views/messages/DisambiguatedProfile.tsx

@@ -28,9 +28,14 @@ interface IProps {
     onClick?(): void;
     colored?: boolean;
     emphasizeDisplayName?: boolean;
+    as?: string;
 }
 
 export default class DisambiguatedProfile extends React.Component<IProps> {
+    public static defaultProps = {
+        as: "div",
+    };
+
     render() {
         const { fallbackName, member, colored, emphasizeDisplayName, onClick } = this.props;
         const rawDisplayName = member?.rawDisplayName || fallbackName;
@@ -57,13 +62,14 @@ export default class DisambiguatedProfile extends React.Component<IProps> {
             [colorClass]: true,
         });
 
-        return (
-            <div className="mx_DisambiguatedProfile" onClick={onClick}>
-                <span className={displayNameClasses} dir="auto">
-                    { rawDisplayName }
-                </span>
-                { mxidElement }
-            </div>
-        );
+        return React.createElement(this.props.as, {
+            className: "mx_DisambiguatedProfile",
+            onClick,
+        }, [
+            <span className={displayNameClasses} dir="auto" key="displayNameClasses">
+                { rawDisplayName }
+            </span>,
+            mxidElement,
+        ]);
     }
 }

src/components/views/messages/SenderProfile.tsx

@@ -27,12 +27,17 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
+    as?: string;
 }
 
 export default class SenderProfile extends React.PureComponent<IProps> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
+    public static defaultProps = {
+        as: "div",
+    };
+
     render() {
         const { mxEvent, onClick } = this.props;
         const msgtype = mxEvent.getContent().msgtype;
@@ -60,6 +65,7 @@ export default class SenderProfile extends React.PureComponent<IProps> {
                         member={member}
                         colored={true}
                         emphasizeDisplayName={true}
+                        as={this.props.as}
                     />
                 );
             } }

src/components/views/rooms/MessageComposer.tsx

@@ -458,43 +458,45 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                     <div className="mx_MessageComposer_row">
                         { controls }
                     </div>
-                    { canSendMessages && <VoiceRecordComposerTile
-                        key="controls_voice_record"
-                        ref={this.voiceRecordingButton}
-                        room={this.props.room} /> }
-                    { canSendMessages && <MessageComposerButtons
-                        addEmoji={this.addEmoji}
-                        haveRecording={this.state.haveRecording}
-                        isMenuOpen={this.state.isMenuOpen}
-                        isStickerPickerOpen={this.state.isStickerPickerOpen}
-                        menuPosition={menuPosition}
-                        relation={this.props.relation}
-                        onRecordStartEndClick={() => {
-                            this.voiceRecordingButton.current?.onRecordStartEndClick();
-                            if (this.context.narrow) {
-                                this.toggleButtonMenu();
-                            }
-                        }}
-                        setStickerPickerOpen={this.setStickerPickerOpen}
-                        showLocationButton={!window.electron}
-                        showPollsButton={this.state.showPollsButton}
-                        showStickersButton={this.state.showStickersButton}
-                        toggleButtonMenu={this.toggleButtonMenu}
-                    /> }
-                    <CSSTransition
-                        in={showSendButton}
-                        classNames="mx_MessageComposer_sendMessageWrapper"
-                        addEndListener={() => {}}
-                    >
-                        <div className='mx_MessageComposer_sendMessageWrapper'>
-                            <SendButton
-                                key="controls_send"
-                                onClick={this.sendMessage}
-                                title={this.state.haveRecording ? _t("Send voice message") : undefined}
-                                aria-hidden={!showSendButton}
-                            />
-                        </div>
-                    </CSSTransition>
+                    <div className="mx_MessageComposer_controls">
+                        { canSendMessages && <VoiceRecordComposerTile
+                            key="controls_voice_record"
+                            ref={this.voiceRecordingButton}
+                            room={this.props.room} /> }
+                        { canSendMessages && <MessageComposerButtons
+                            addEmoji={this.addEmoji}
+                            haveRecording={this.state.haveRecording}
+                            isMenuOpen={this.state.isMenuOpen}
+                            isStickerPickerOpen={this.state.isStickerPickerOpen}
+                            menuPosition={menuPosition}
+                            relation={this.props.relation}
+                            onRecordStartEndClick={() => {
+                                this.voiceRecordingButton.current?.onRecordStartEndClick();
+                                if (this.context.narrow) {
+                                    this.toggleButtonMenu();
+                                }
+                            }}
+                            setStickerPickerOpen={this.setStickerPickerOpen}
+                            showLocationButton={!window.electron}
+                            showPollsButton={this.state.showPollsButton}
+                            showStickersButton={this.state.showStickersButton}
+                            toggleButtonMenu={this.toggleButtonMenu}
+                        /> }
+                        <CSSTransition
+                            in={showSendButton}
+                            classNames="mx_MessageComposer_sendMessageWrapper"
+                            addEndListener={() => {}}
+                        >
+                            <div className='mx_MessageComposer_sendMessageWrapper'>
+                                <SendButton
+                                    key="controls_send"
+                                    onClick={this.sendMessage}
+                                    title={this.state.haveRecording ? _t("Send voice message") : undefined}
+                                    aria-hidden={!showSendButton}
+                                />
+                            </div>
+                        </CSSTransition>
+                    </div>
                 </div>
             </div>
         );