From bbf66a001136cb6240b06b86085891678fce08f7 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 7 Sep 2021 17:10:09 +0100 Subject: [PATCH] Make label clickable on narrow mode context menu --- res/css/views/rooms/_MessageComposer.scss | 22 ++++++-- .../elements/AccessibleTooltipButton.tsx | 4 +- .../views/rooms/MessageComposer.tsx | 52 +++++++++++-------- src/i18n/strings/en_EN.json | 6 +-- 4 files changed, 53 insertions(+), 31 deletions(-) diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 26db5dbafe..faa3171d67 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -186,11 +186,14 @@ limitations under the License. } .mx_MessageComposer_button { + --size: 26px; position: relative; margin-right: 6px; cursor: pointer; - height: 26px; - width: 26px; + height: var(--size); + line-height: var(--size); + width: auto; + padding-left: calc(var(--size) + 5px); border-radius: 100%; &::before { @@ -207,8 +210,21 @@ limitations under the License. mask-position: center; } + &::after { + content: ''; + position: absolute; + left: 0; + top: 0; + z-index: 0; + width: var(--size); + height: var(--size); + border-radius: 50%; + } + &:hover { - background: rgba($accent-color, 0.1); + &::after { + background: rgba($accent-color, 0.1); + } &::before { background-color: $accent-color; diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index 8ac41ad1a2..d2a4801a2d 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -25,6 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; interface ITooltipProps extends React.ComponentProps { title: string; tooltip?: React.ReactNode; + label?: React.ReactNode; tooltipClassName?: string; forceHide?: boolean; yOffset?: number; @@ -84,7 +85,8 @@ export default class AccessibleTooltipButton extends React.PureComponent { children } - { tip } + { this.props.label } + { (tooltip || title) && tip } ); } diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 49acb13592..6372ecc1f5 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -81,7 +81,13 @@ function SendButton(props: ISendButtonProps) { ); } -const EmojiButton = ({ addEmoji, menuPosition }) => { +interface IEmojiButtonProps { + addEmoji: (unicode: string) => boolean; + menuPosition: any; // TODO: Types + narrowMode: boolean; +} + +const EmojiButton: React.FC = ({ addEmoji, menuPosition, narrowMode }) => { const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); let contextMenu; @@ -103,12 +109,11 @@ const EmojiButton = ({ addEmoji, menuPosition }) => { // TODO: replace ContextMenuTooltipButton with a unified representation of // the header buttons and the right panel buttons return - { contextMenu } @@ -364,11 +369,12 @@ export default class MessageComposer extends React.Component { } }; - private addEmoji(emoji: string) { + private addEmoji(emoji: string): boolean { dis.dispatch({ action: Action.ComposerInsert, text: emoji, }); + return true; } private sendMessage = async () => { @@ -424,32 +430,34 @@ export default class MessageComposer extends React.Component { }; private renderButtons(menuPosition): JSX.Element | JSX.Element[] { - const buttons = new Map(); + const buttons: JSX.Element[] = []; if (!this.state.haveRecording) { - buttons.set( - _t("Send a file"), + buttons.push( , ); - buttons.set( - _t("Add emoji"), - , + buttons.push( + , ); } if (this.shouldShowStickerPicker()) { - buttons.set( - _t("Send a sticker"), + let title; + if (!this.state.narrowMode) { + title = this.state.showStickers ? _t("Hide Stickers") : _t("Show Stickers"); + } + + buttons.push( this.showStickers(!this.state.showStickers)} - title={this.state.showStickers ? _t("Hide Stickers") : _t("Show Stickers")} + title={title} + label={this.state.narrowMode && _t("Send a sticker")} />, ); } if (!this.state.haveRecording && !this.state.narrowMode) { - buttons.set( - _t("Send a voice message"), + buttons.push( this.voiceRecordingButton?.onRecordStartEndClick()} @@ -458,9 +466,8 @@ export default class MessageComposer extends React.Component { ); } - const buttonsArray = Array.from(buttons.values()); if (!this.state.narrowMode) { - return buttonsArray; + return buttons; } else { const classnames = classNames({ mx_MessageComposer_button: true, @@ -469,7 +476,7 @@ export default class MessageComposer extends React.Component { }); return <> - { buttonsArray[0] } + { buttons[0] } { menuWidth={150} wrapperClassName="mx_MessageComposer_Menu" > - { Array.from(buttons).slice(1).map(([label, button]) => ( - + { buttons.slice(1).map((button, index) => ( + { button } - { label } )) } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b4b1071013..1200042f2f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1559,6 +1559,7 @@ "%(userName)s (power %(powerLevelNumber)s)": "%(userName)s (power %(powerLevelNumber)s)", "Send message": "Send message", "Emoji picker": "Emoji picker", + "Send an emoji": "Send an emoji", "Upload file": "Upload file", "Reply to encrypted thread…": "Reply to encrypted thread…", "Reply to thread…": "Reply to thread…", @@ -1566,12 +1567,9 @@ "Send a reply…": "Send a reply…", "Send an encrypted message…": "Send an encrypted message…", "Send a message…": "Send a message…", - "Send a file": "Send a file", - "Add emoji": "Add emoji", - "Send a sticker": "Send a sticker", "Hide Stickers": "Hide Stickers", "Show Stickers": "Show Stickers", - "Send a voice message": "Send a voice message", + "Send an sticker": "Send an sticker", "Send voice message": "Send voice message", "More options": "More options", "The conversation continues here.": "The conversation continues here.",