Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

popovers: Add hotkey hints support via a new handlebar template.

This commit is contained in:
Sayam Samal 2024-02-28 16:57:51 +05:30 committed by Tim Abbott
parent 36e709c934
commit 299aa7c39f
7 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/templates.js
View File

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

26
web/styles/popovers.css
View File

@ -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 {

3
web/templates/navbar_help_menu.hbs
View File

@ -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">

18
web/templates/popovers/actions_popover.hbs
View File

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

11
web/tests/templates.test.js
View File

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

1
web/tests/templates/popover_hotkey_hints.hbs Normal file
View File

@ -0,0 +1 @@
{{popover_hotkey_hints hotkey_one hotkey_two}}

1
web/webpack.config.ts
View File

@ -145,6 +145,7 @@ export default (
"tr",
"rendered_markdown",
"tooltip_hotkey_hints",
"popover_hotkey_hints",
],
precompileOptions: {strict: true},
preventIndent: true,