diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss index f56214224d..6e8fc58470 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.scss +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -81,6 +81,13 @@ limitations under the License. .mx_MessageComposerFormatBar_buttonTooltip { white-space: nowrap; - font-size: 12px; + font-size: 13px; font-weight: 600; + min-width: 54px; + text-align: center; + + .mx_MessageComposerFormatBar_tooltipShortcut { + font-size: 9px; + opacity: 0.7; + } } diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index dcb54d6cc2..3d2b96f773 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -41,6 +41,10 @@ const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.sourc const IS_MAC = navigator.platform.indexOf("Mac") !== -1; +function ctrlShortcutLabel(key) { + return (IS_MAC ? "⌘" : "Ctrl") + "+" + key; +} + function cloneSelection(selection) { return { anchorNode: selection.anchorNode, @@ -470,10 +474,15 @@ export default class BasicMessageEditor extends React.Component { }); const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar'); + const shortcuts = { + bold: ctrlShortcutLabel("B"), + italics: ctrlShortcutLabel("I"), + quote: ctrlShortcutLabel(">"), + }; return (
{ autoComplete } - this._formatBarRef = ref} onAction={this._onFormatAction} /> + this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
this._formatBarRef = ref}> - this.props.onAction("bold")} icon="Bold" /> - this.props.onAction("italics")} icon="Italic" /> + this.props.onAction("bold")} icon="Bold" /> + this.props.onAction("italics")} icon="Italic" /> this.props.onAction("strikethrough")} icon="Strikethrough" /> this.props.onAction("code")} icon="Code" /> - this.props.onAction("quote")} icon="Quote" /> + this.props.onAction("quote")} icon="Quote" />
); } @@ -66,13 +67,21 @@ class FormatButton extends React.PureComponent { label: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, icon: PropTypes.string.isRequired, + shortcut: PropTypes.string, } render() { const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip'); const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; + let shortcut; + if (this.props.shortcut) { + shortcut =
{this.props.shortcut}
; + } const tooltipContent = ( -
{this.props.label}
+
+
{this.props.label}
+ {shortcut} +
); return (