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 (