paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

info_overlay: Render keyboard shortcuts using info_overlay.

Browse Source 
This commits ports the `keyboard_shortcuts.html` file from
using the Django template to handlebars, essentially creating
a new file as `keyboard_shortcuts.hbs` within /static/templates
which is then rendered using info_overlays.js.

Fixes part of #18792.
This commit is contained in:
aryanshridhar
2021-06-23 21:36:10 +05:30
committed by Tim Abbott
parent 8c1ae1161b
commit 942f4372f0
5 changed files with 81 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/js/info_overlay.js
View File

@@ -1,5 +1,6 @@
import $ from "jquery";
import render_keyboard_shortcut from "../templates/keyboard_shortcuts.hbs";
import render_markdown_help from "../templates/markdown_help.hbs";
import * as browser_history from "./browser_history";
@@ -164,6 +165,9 @@ export function set_up_toggler() {
});
$(".informational-overlays .overlay-body").append($markdown_help);
const $keyboard_shortcuts = $(render_keyboard_shortcut());
$(".informational-overlays .overlay-body").append($keyboard_shortcuts);
const opts = {
selected: 0,
child_wants_focus: true,

142
templates/zerver/app/keyboard_shortcuts.html → static/templates/keyboard_shortcuts.hbs
View File

@@ -1,59 +1,59 @@
<div class="overlay-modal" id="keyboard-shortcuts" tabindex="-1" role="dialog"
aria-label="{{ _('Keyboard shortcuts') }}">
aria-label="{{t 'Keyboard shortcuts' }}">
<div class="modal-body" data-simplebar data-simplebar-auto-hide="false">
<div>
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("The basics") }}</th>
<th colspan="2">{{t "The basics" }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}Reply to message{% endtrans %}</td>
<td class="definition">{{t 'Reply to message' }}</td>
<td><span class="hotkey"><kbd>Enter</kbd> or <kbd>R</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}New stream message{% endtrans %}</td>
<td class="definition">{{t 'New stream message' }}</td>
<td><span class="hotkey"><kbd>C</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}New private message{% endtrans %}</td>
<td class="definition">{{t 'New private message' }}</td>
<td><span class="hotkey"><kbd>X</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Cancel compose{% endtrans %}</td>
<td class="definition">{{t 'Cancel compose' }}</td>
<td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}View drafts{% endtrans %}</td>
<td class="definition">{{t 'View drafts' }}</td>
<td><span class="hotkey"><kbd>D</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next message{% endtrans %}</td>
<td class="definition">{{t 'Next message' }}</td>
<td><span class="hotkey"><kbd class="arrow-key">↓</kbd> or <kbd>J</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Last message{% endtrans %}</td>
<td class="definition">{{t 'Last message' }}</td>
<td><span class="hotkey"><kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next unread topic{% endtrans %}</td>
<td class="definition">{{t 'Next unread topic' }}</td>
<td><span class="hotkey"><kbd>N</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next unread private message{% endtrans %}</td>
<td class="definition">{{t 'Next unread private message' }}</td>
<td><span class="hotkey"><kbd>P</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Initiate a search{% endtrans %}</td>
<td class="definition">{{t 'Initiate a search' }}</td>
<td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>K</kbd> or <kbd>/</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Show keyboard shortcuts{% endtrans %}</td>
<td class="definition">{{t 'Show keyboard shortcuts' }}</td>
<td><span class="hotkey"><kbd>?</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Go to default view{% endtrans %}</td>
<td class="definition">{{t 'Go to default view' }}</td>
<td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
</tr>
</table>
@@ -62,43 +62,43 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("Navigation") }}</th>
<th colspan="2">{{t 'Navigation' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}Initiate a search{% endtrans %}</td>
<td class="definition">{{t 'Initiate a search' }}</td>
<td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>K</kbd> or <kbd>/</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Filter streams{% endtrans %}</td>
<td class="definition">{{t 'Filter streams' }}</td>
<td><span class="hotkey"><kbd>Q</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Search people{% endtrans %}</td>
<td class="definition">{{t 'Search people' }}</td>
<td><span class="hotkey"><kbd>W</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Previous message{% endtrans %}</td>
<td class="definition">{{t 'Previous message' }}</td>
<td><span class="hotkey"><kbd class="arrow-key">↑</kbd> or <kbd>K</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next message{% endtrans %}</td>
<td class="definition">{{t 'Next message' }}</td>
<td><span class="hotkey"><kbd class="arrow-key">↓</kbd> or <kbd>J</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Scroll up{% endtrans %}</td>
<td class="definition">{{t 'Scroll up' }}</td>
<td><span class="hotkey"><kbd>PgUp</kbd> or <kbd>Shift</kbd> + <kbd>K</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Scroll down{% endtrans %}</td>
<td class="definition">{{t 'Scroll down' }}</td>
<td><span class="hotkey"><kbd>PgDn</kbd> or <kbd>Shift</kbd> + <kbd>J</kbd> or <kbd>Space</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Last message{% endtrans %}</td>
<td class="definition">{{t 'Last message' }}</td>
<td><span class="hotkey"><kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}First message{% endtrans %}</td>
<td class="definition">{{t 'First message' }}</td>
<td><span class="hotkey"><kbd>Home</kbd></span></td>
</tr>
</table>
@@ -107,43 +107,43 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{% trans %}Composing messages{% endtrans %}</th>
<th colspan="2">{{t 'Composing messages' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}Reply to message{% endtrans %}</td>
<td class="definition">{{t 'Reply to message' }}</td>
<td><span class="hotkey"><kbd>Enter</kbd> or <kbd>R</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Reply to author{% endtrans %}</td>
<td class="definition">{{t 'Reply to author' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>R</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Quote and reply to message{% endtrans %}</td>
<td class="definition">{{t 'Quote and reply to message' }}</td>
<td><span class="hotkey"><kbd>></kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}New stream message{% endtrans %}</td>
<td class="definition">{{t 'New stream message' }}</td>
<td><span class="hotkey"><kbd>C</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}New private message{% endtrans %}</td>
<td class="definition">{{t 'New private message' }}</td>
<td><span class="hotkey"><kbd>X</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Compose a reply @-mentioning author{% endtrans %}</td>
<td class="definition">{{t 'Compose a reply @-mentioning author' }}</td>
<td><span class="hotkey"><kbd>@</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Send message{% endtrans %}</td>
<td class="definition">{{t 'Send message' }}</td>
<td><span class="hotkey"><span class="small_hotkey"><kbd>Tab</kbd> then <kbd>Enter</kbd> or <kbd>Ctrl</kbd> + <kbd>Enter</kbd></span></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Insert new line{% endtrans %}</td>
<td class="definition">{{t 'Insert new line' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>Enter</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Cancel compose{% endtrans %}</td>
<td class="definition">{{t 'Cancel compose' }}</td>
<td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
</tr>
</table>
@@ -152,39 +152,39 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("Narrowing") }}</th>
<th colspan="2">{{t 'Narrowing' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}Narrow to stream{% endtrans %}</td>
<td class="definition">{{t 'Narrow to stream' }}</td>
<td><span class="hotkey"><kbd>S</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to topic or PM conversation{% endtrans %}</td>
<td class="definition">{{t 'Narrow to topic or PM conversation' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>S</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to all private messages{% endtrans %}</td>
<td class="definition">{{t 'Narrow to all private messages' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>P</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to next unread topic{% endtrans %}</td>
<td class="definition">{{t 'Narrow to next unread topic' }}</td>
<td><span class="hotkey"><kbd>N</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to next unread private message{% endtrans %}</td>
<td class="definition">{{t 'Narrow to next unread private message' }}</td>
<td><span class="hotkey"><kbd>P</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Cycle between stream narrows{% endtrans %}</td>
<td class="definition">{{t 'Cycle between stream narrows' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>A</kbd> or <kbd>Shift</kbd> + <kbd>D</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to all unmuted messages{% endtrans %}</td>
<td class="definition">{{t 'Narrow to all unmuted messages' }}</td>
<td><span class="hotkey"><kbd>A</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to current compose box recipient{% endtrans %}</td>
<td class="definition">{{t 'Narrow to current compose box recipient' }}</td>
<td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>.</kbd></span></td>
</tr>
</table>
@@ -193,32 +193,32 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("Message actions") }}</th>
<th colspan="2">{{t 'Message actions' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}Edit your last message{% endtrans %}</td>
<td class="definition">{{t 'Edit your last message' }}</td>
<td><span class="hotkey"><kbd class="arrow-key">←</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Show message sender's profile{% endtrans %}</td>
<td class="definition">{{t "Show message sender's profile" }}</td>
<td><span class="hotkey"><kbd>U</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Show images in thread{% endtrans %}</td>
<td class="definition">{{t 'Show images in thread' }}</td>
<td><span class="hotkey"><kbd>V</kbd></span></td>
</tr>
<tr id="edit-message-hotkey-help">
<td class="definition">{% trans %}Edit selected message{% endtrans %}</td>
<td class="definition">{{t 'Edit selected message' }}</td>
<td><span class="hotkey"><kbd>E</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Star selected message{% endtrans %}</td>
<td class="definition">{{t 'Star selected message' }}</td>
<td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>S</kbd></span></td>
</tr>
<tr>
<td class="definition">
{% trans %}React to selected message with{% endtrans %}
{{t 'React to selected message with' }}
<img alt=":thumbs_up:"
class="emoji"
src="/static/generated/emoji/images/emoji/unicode/1f44d.png"
@@ -227,11 +227,11 @@
<td><span class="hotkey"><kbd>+</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Collapse/show selected message{% endtrans %}</td>
<td class="definition">{{t 'Collapse/show selected message' }}</td>
<td><span class="hotkey"><kbd>-</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Toggle topic mute{% endtrans %}</td>
<td class="definition">{{t 'Toggle topic mute' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>M</kbd></span></td>
</tr>
</table>
@@ -240,15 +240,15 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("Recent topics") }}</th>
<th colspan="2">{{t 'Recent topics' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}View recent topics{% endtrans %}</td>
<td class="definition">{{t 'View recent topics' }}</td>
<td><span class="hotkey"><kbd>T</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Filter topics{% endtrans %}</td>
<td class="definition">{{t 'Filter topics' }}</td>
<td><span class="hotkey"><kbd>T</kbd></span></td>
</tr>
</table>
@@ -257,19 +257,19 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("Drafts") }}</th>
<th colspan="2">{{t 'Drafts' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}View drafts{% endtrans %}</td>
<td class="definition">{{t 'View drafts' }}</td>
<td><span class="hotkey"><kbd>D</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Edit selected draft{% endtrans %}</td>
<td class="definition">{{t 'Edit selected draft' }}</td>
<td><span class="hotkey"><kbd>Enter</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Delete selected draft{% endtrans %}</td>
<td class="definition">{{t 'Delete selected draft' }}</td>
<td><span class="hotkey"><kbd>Backspace</kbd></span></td>
</tr>
</table>
@@ -278,23 +278,23 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("Menus") }}</th>
<th colspan="2">{{t 'Menus' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}Toggle the gear menu{% endtrans %}</td>
<td class="definition">{{t 'Toggle the gear menu' }}</td>
<td><span class="hotkey"><kbd>G</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Open message menu{% endtrans %}</td>
<td class="definition">{{t 'Open message menu' }}</td>
<td><span class="hotkey"><kbd>I</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Open reactions menu{% endtrans %}</td>
<td class="definition">{{t 'Open reactions menu' }}</td>
<td><span class="hotkey"><kbd>:</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Show keyboard shortcuts{% endtrans %}</td>
<td class="definition">{{t 'Show keyboard shortcuts' }}</td>
<td><span class="hotkey"><kbd>?</kbd></span></td>
</tr>
</table>
@@ -303,32 +303,32 @@
<table class="hotkeys_table table table-striped table-bordered table-condensed">
<thead>
<tr>
<th colspan="2">{{ _("Streams settings") }}</th>
<th colspan="2">{{t 'Streams settings' }}</th>
</tr>
</thead>
<tr>
<td class="definition">{% trans %}Scroll through streams{% endtrans %}</td>
<td class="definition">{{t 'Scroll through streams' }}</td>
<td><span class="hotkey"><kbd class="arrow-key">↑</kbd> or <kbd class="arrow-key">↓</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Switch between tabs{% endtrans %}</td>
<td class="definition">{{t 'Switch between tabs' }}</td>
<td><span class="hotkey"><kbd class="arrow-key">←</kbd> or <kbd class="arrow-key">→</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}View stream messages{% endtrans %}</td>
<td class="definition">{{t 'View stream messages' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>V</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Subscribe to/unsubscribe from selected stream{% endtrans %}</td>
<td class="definition">{{t 'Subscribe to/unsubscribe from selected stream' }}</td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>S</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Create new stream{% endtrans %}</td>
<td class="definition">{{t 'Create new stream' }}</td>
<td><span class="hotkey"><kbd>N</kbd></span></td>
</tr>
</table>
</div>
<hr />
<a href="/help/keyboard-shortcuts" target="_blank" rel="noopener noreferrer">{% trans %}Detailed keyboard shortcuts documentation{% endtrans %}</a>
<a href="/help/keyboard-shortcuts" target="_blank" rel="noopener noreferrer">{{t 'Detailed keyboard shortcuts documentation' }}</a>
</div>
</div>

1
templates/zerver/app/index.html
View File

@@ -140,7 +140,6 @@
<button class="button no-style exit">&times;</button>
</div>
<div class="overlay-body">
{% include "zerver/app/keyboard_shortcuts.html" %}
{% include "zerver/app/search_operators.html" %}
</div>
</div>

9
tools/linter_lib/custom_check.py
View File

@@ -633,9 +633,12 @@ html_rules: List["Rule"] = [
{
"pattern": r"""\Walt=["'][^{"']""",
"description": "alt argument should be enclosed by _() or it should be an empty string.",
"exclude": {
"static/templates/settings/display_settings.hbs",
"templates/zerver/app/keyboard_shortcuts.html",
"exclude_line": {
(
# Emoji should not be tagged for translation.
"static/templates/keyboard_shortcuts.hbs",
'<img alt=":thumbs_up:"',
),
},
"good_lines": ['<img src="{{source_url}}" alt="{{ _(name) }}" />', '<img alg="" />'],
"bad_lines": ['<img alt="Foo Image" />'],

2
zerver/tests/test_home.py
View File

@@ -256,8 +256,6 @@ class HomeTest(ZulipTestCase):
"Exclude messages with topic",
"Keyboard shortcuts",
"Loading...",
"Narrow to topic",
"Next message",
"Filter streams",
# Verify that the app styles get included
"app-stubentry.js",