mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +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 { .mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: 13px;
font-weight: 600; 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; const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
function ctrlShortcutLabel(key) {
return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
}
function cloneSelection(selection) { function cloneSelection(selection) {
return { return {
anchorNode: selection.anchorNode, anchorNode: selection.anchorNode,
@ -470,10 +474,15 @@ export default class BasicMessageEditor extends React.Component {
}); });
const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar'); const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
const shortcuts = {
bold: ctrlShortcutLabel("B"),
italics: ctrlShortcutLabel("I"),
quote: ctrlShortcutLabel(">"),
};
return (<div className={classes}> return (<div className={classes}>
{ autoComplete } { autoComplete }
<MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} /> <MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
<div <div
className="mx_BasicMessageComposer_input" className="mx_BasicMessageComposer_input"
contentEditable="true" 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 { export default class MessageComposerFormatBar extends React.PureComponent {
static propTypes = { static propTypes = {
onAction: PropTypes.func.isRequired, onAction: PropTypes.func.isRequired,
shortcuts: PropTypes.object.isRequired,
} }
render() { render() {
return (<div className="mx_MessageComposerFormatBar" ref={ref => this._formatBarRef = ref}> return (<div className="mx_MessageComposerFormatBar" ref={ref => this._formatBarRef = ref}>
<FormatButton label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" /> <FormatButton shortcut={this.props.shortcuts.bold} 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.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("Strikethrough")} onClick={() => this.props.onAction("strikethrough")} icon="Strikethrough" />
<FormatButton label={_t("Code block")} onClick={() => this.props.onAction("code")} icon="Code" /> <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>); </div>);
} }
@ -66,13 +67,21 @@ class FormatButton extends React.PureComponent {
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
shortcut: PropTypes.string,
} }
render() { render() {
const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip'); const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; 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 = ( const tooltipContent = (
<div className="mx_MessageComposerFormatBar_buttonTooltip">{this.props.label}</div> <div className="mx_MessageComposerFormatBar_buttonTooltip">
<div>{this.props.label}</div>
{shortcut}
</div>
); );
return ( return (