mirror of https://github.com/zulip/zulip.git
popovers: Add hotkey hints support via a new handlebar template.
This commit is contained in:
parent
36e709c934
commit
299aa7c39f
|
@ -127,3 +127,14 @@ Handlebars.registerHelper("tooltip_hotkey_hints", (...hotkeys) => {
|
|||
const result = `<span class="tooltip-hotkey-hints">${hotkey_hints}</span>`;
|
||||
return new Handlebars.SafeString(result);
|
||||
});
|
||||
|
||||
Handlebars.registerHelper("popover_hotkey_hints", (...hotkeys) => {
|
||||
hotkeys.pop(); // Handlebars options
|
||||
let hotkey_hints = "";
|
||||
common.adjust_mac_hotkey_hints(hotkeys);
|
||||
for (const hotkey of hotkeys) {
|
||||
hotkey_hints += `<span class="popover-menu-hotkey-hint">${hotkey}</span>`;
|
||||
}
|
||||
const result = `<span class="popover-menu-hotkey-hints">${hotkey_hints}</span>`;
|
||||
return new Handlebars.SafeString(result);
|
||||
});
|
||||
|
|
|
@ -1476,17 +1476,23 @@ ul.popover-menu-outer-list {
|
|||
}
|
||||
}
|
||||
|
||||
.popover-menu-hotkey-hint {
|
||||
color: var(--color-hotkey-hint);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--color-hotkey-hint);
|
||||
.popover-menu-hotkey-hints {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
padding-left: 5px;
|
||||
|
||||
> .popover-menu-hotkey-hint {
|
||||
color: var(--color-hotkey-hint);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--color-hotkey-hint);
|
||||
}
|
||||
}
|
||||
|
||||
#theme-switcher {
|
||||
|
|
|
@ -9,7 +9,8 @@
|
|||
</li>
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a tabindex="0" class="navigate-link-on-enter popover-menu-link" data-overlay-trigger="keyboard-shortcuts">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }} <span class="popover-menu-hotkey-hint">?</span>
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }}
|
||||
{{popover_hotkey_hints "?"}}
|
||||
</a>
|
||||
</li>
|
||||
<li class="link-item popover-menu-inner-list-item hidden-for-spectators">
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<a data-message-id="{{message_id}}" class="respond_button popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-reply" aria-hidden="true"></i>
|
||||
{{t "Quote and reply" }}
|
||||
<span class="hotkey-hint">(>)</span>
|
||||
{{popover_hotkey_hints ">"}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -22,7 +22,7 @@
|
|||
<a data-message-id="{{message_id}}" class="popover_edit_message popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i>
|
||||
{{editability_menu_item}}
|
||||
<span class="hotkey-hint">(e)</span>
|
||||
{{popover_hotkey_hints "E"}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
@ -31,7 +31,7 @@
|
|||
<a data-message-id="{{message_id}}" class="popover_move_message popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-move-alt" aria-hidden="true"></i>
|
||||
{{move_message_menu_item}}
|
||||
<span class="hotkey-hint">(m)</span>
|
||||
{{popover_hotkey_hints "M"}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
@ -53,7 +53,7 @@
|
|||
<a data-message-id="{{message_id}}" class="reaction_button popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-smile" aria-hidden="true"></i>
|
||||
{{t "Add emoji reaction" }}
|
||||
<span class="hotkey-hint">(:)</span>
|
||||
{{popover_hotkey_hints ":"}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -67,7 +67,7 @@
|
|||
<a data-message-id="{{message_id}}" class="mark_as_unread popover-menu-link" tabindex="0">
|
||||
<span class="unread_count">1</span>
|
||||
{{t "Mark as unread from here" }}
|
||||
<span class="hotkey-hint">(U)</span>
|
||||
{{popover_hotkey_hints "Shift" "U"}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
@ -84,7 +84,7 @@
|
|||
<a data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-minus" aria-hidden="true"></i>
|
||||
{{t "Collapse message" }}
|
||||
<span class="hotkey-hint">(–)</span>
|
||||
{{popover_hotkey_hints "-"}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
@ -93,7 +93,7 @@
|
|||
<a data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-plus" aria-hidden="true"></i>
|
||||
{{t "Expand message" }}
|
||||
<span class="hotkey-hint">(–)</span>
|
||||
{{popover_hotkey_hints "-"}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
@ -107,7 +107,7 @@
|
|||
<a data-message-id="{{message_id}}" class="popover_view_source popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-file-code-o" aria-hidden="true"></i>
|
||||
{{view_source_menu_item}}
|
||||
<span class="hotkey-hint">(e)</span>
|
||||
{{popover_hotkey_hints "E"}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
@ -116,7 +116,7 @@
|
|||
<a data-message-id="{{message_id}}" class="view_read_receipts popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-readreceipts" aria-hidden="true"></i>
|
||||
{{t "View read receipts" }}
|
||||
<span class="hotkey-hint">(V)</span>
|
||||
{{popover_hotkey_hints "Shift" "V"}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
|
|
@ -53,3 +53,14 @@ run_test("tooltip_hotkey_hints", () => {
|
|||
const expected_html = `<span class="tooltip-hotkey-hints"><span class="tooltip-hotkey-hint">${args.hotkey_one}</span><span class="tooltip-hotkey-hint">${args.hotkey_two}</span></span>\n`;
|
||||
assert.equal(html, expected_html);
|
||||
});
|
||||
|
||||
run_test("popover_hotkey_hints", () => {
|
||||
const args = {
|
||||
hotkey_one: "Shift",
|
||||
hotkey_two: "V",
|
||||
};
|
||||
|
||||
const html = require("./templates/popover_hotkey_hints.hbs")(args);
|
||||
const expected_html = `<span class="popover-menu-hotkey-hints"><span class="popover-menu-hotkey-hint">${args.hotkey_one}</span><span class="popover-menu-hotkey-hint">${args.hotkey_two}</span></span>\n`;
|
||||
assert.equal(html, expected_html);
|
||||
});
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
{{popover_hotkey_hints hotkey_one hotkey_two}}
|
|
@ -145,6 +145,7 @@ export default (
|
|||
"tr",
|
||||
"rendered_markdown",
|
||||
"tooltip_hotkey_hints",
|
||||
"popover_hotkey_hints",
|
||||
],
|
||||
precompileOptions: {strict: true},
|
||||
preventIndent: true,
|
||||
|
|
Loading…
Reference in New Issue