mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

show keyboard shortcuts in format button tooltip

Browse source
This commit is contained in:
Bruno Windels 2019-09-05 15:09:37 +02:00
parent bdcea6f21e
commit 06143ba7a1
3 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/rooms/_MessageComposerFormatBar.scss
View file

@ -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;
}
}

11
src/components/views/rooms/BasicMessageComposer.js
View file

@ -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 (<div className={classes}>
{ autoComplete }
<MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} />
<MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
<div
className="mx_BasicMessageComposer_input"
contentEditable="true"

17
src/components/views/rooms/MessageComposerFormatBar.js
View file

@ -23,15 +23,16 @@ import sdk from '../../../index';
export default class MessageComposerFormatBar extends React.PureComponent {
static propTypes = {
onAction: PropTypes.func.isRequired,
shortcuts: PropTypes.object.isRequired,
}
render() {
return (<div className="mx_MessageComposerFormatBar" ref={ref => this._formatBarRef = ref}>
<FormatButton label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" />
<FormatButton label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" />
<FormatButton shortcut={this.props.shortcuts.bold} label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" />
<FormatButton shortcut={this.props.shortcuts.italics} label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" />
<FormatButton label={_t("Strikethrough")} onClick={() => this.props.onAction("strikethrough")} icon="Strikethrough" />
<FormatButton label={_t("Code block")} onClick={() => this.props.onAction("code")} icon="Code" />
<FormatButton label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" />
<FormatButton shortcut={this.props.shortcuts.quote} label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" />
</div>);
}
@ -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 = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
}
const tooltipContent = (
<div className="mx_MessageComposerFormatBar_buttonTooltip">{this.props.label}</div>
<div className="mx_MessageComposerFormatBar_buttonTooltip">
<div>{this.props.label}</div>
{shortcut}
</div>
);
return (