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: Add "bubble" style to keys.

Browse Source
This commit is contained in:
YashRE42
2019-03-23 02:32:45 +05:30
committed by Tim Abbott
parent 8a914eb111
commit b8afddbd2a
2 changed files with 95 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
static/styles/informational-overlays.scss
View File

@@ -58,12 +58,44 @@
.hotkeys_table {
table-layout: fixed;
width: 100%;
display: inline-block;
vertical-align: top;
vertical-align: middle;
display: table;
td.definition {
// keeps dividing line at same width for all tables in model.
width: calc(50% - 11px);
text-align: right;
}
.hotkey {
font-weight: normal;
}
.small_hotkey {
font-size: 0.9em !important;
kbd {
font-size: 0.9em;
}
}
kbd {
display: inline-block;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
background-color: hsl(0, 0%, 98%);
color: hsl(0, 0%, 20%);
margin: 0 0.1em;
padding: 0.1em 0.4em;
text-shadow: 0 1px 0 hsl(0, 0%, 100%);
/* Prevent selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
@@ -74,13 +106,13 @@
}
.hotkeys_table td:not(.definition) {
text-align: center;
text-align: left;
white-space: nowrap;
}
.hotkeys_table .hotkey {
font-weight: bold;
}
.hotkeys_table td:not(.definition) :not(kbd) {
font-size: 14px;
}
#keyboard-shortcuts table {
margin-bottom: 10px !important;

114
templates/zerver/app/keyboard_shortcuts.html
View File

@@ -10,47 +10,47 @@
</thead>
<tr>
<td class="definition">{% trans %}Reply to message{% endtrans %}</td>
<td><span class="hotkey">Enter</span> or <span class="hotkey">r</span></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><span class="hotkey">c</span></td>
<td><span class="hotkey"><kbd>c</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}New private message{% endtrans %}</td>
<td><span class="hotkey">x</span></td>
<td><span class="hotkey"><kbd>x</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Cancel compose{% endtrans %}</td>
<td><span class="hotkey">Esc</span> or <span class="hotkey">Ctrl + [</span></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><span class="hotkey">d</span></td>
<td><span class="hotkey"><kbd>d</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next message{% endtrans %}</td>
<td><span class="hotkey">Down</span> or <span class="hotkey">j</span></td>
<td><span class="hotkey"><kbd>Down</kbd> or <kbd>j</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Last message{% endtrans %}</td>
<td><span class="hotkey">End</span> or <span class="hotkey">G</span></td>
<td><span class="hotkey"><kbd>End</kbd> or <kbd>G</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next unread topic{% endtrans %}</td>
<td><span class="hotkey">n</span></td>
<td><span class="hotkey"><kbd>n</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next unread private message{% endtrans %}</td>
<td><span class="hotkey">p</span></td>
<td><span class="hotkey"><kbd>p</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Initiate a search{% endtrans %}</td>
<td><span class="hotkey">Ctrl + k</span> or <span class="hotkey">/</span></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><span class="hotkey">?</span></td>
<td><span class="hotkey"><kbd>?</kbd></span></td>
</tr>
</table>
</div>
@@ -63,39 +63,39 @@
</thead>
<tr>
<td class="definition">{% trans %}Initiate a search{% endtrans %}</td>
<td><span class="hotkey">Ctrl + k</span> or <span class="hotkey">/</span></td>
<td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>k</kbd> or <kbd>/</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Search streams{% endtrans %}</td>
<td><span class="hotkey">q</span></td>
<td><span class="hotkey"><kbd>q</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Search people{% endtrans %}</td>
<td><span class="hotkey">w</span></td>
<td><span class="hotkey"><kbd>w</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Previous message{% endtrans %}</td>
<td><span class="hotkey">Up</span> or <span class="hotkey">k</span></td>
<td><span class="hotkey"><kbd>Up</kbd> or <kbd>k</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Next message{% endtrans %}</td>
<td><span class="hotkey">Down</span> or <span class="hotkey">j</span></td>
<td><span class="hotkey"><kbd>Down</kbd> or <kbd>j</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Scroll up{% endtrans %}</td>
<td><span class="hotkey">PgUp</span> or <span class="hotkey">K</span></td>
<td><span class="hotkey"><kbd>PgUp</kbd> or <kbd>K</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Scroll down{% endtrans %}</td>
<td><span class="hotkey">PgDn</span> or <span class="hotkey">J</span> or <span class="hotkey">Space</span></td>
<td><span class="hotkey"><kbd>PgDn</kbd> or <kbd>J</kbd> or <kbd>Space</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Last message{% endtrans %}</td>
<td><span class="hotkey">End</span> or <span class="hotkey">G</span></td>
<td><span class="hotkey"><kbd>End</kbd> or <kbd>G</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}First message{% endtrans %}</td>
<td><span class="hotkey">Home</span></td>
<td><span class="hotkey"><kbd>Home</kbd></span></td>
</tr>
</table>
</div>
@@ -108,39 +108,39 @@
</thead>
<tr>
<td class="definition">{% trans %}Reply to message{% endtrans %}</td>
<td><span class="hotkey">Enter</span> or <span class="hotkey">r</span></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><span class="hotkey">R</span></td>
<td><span class="hotkey"><kbd>R</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Quote and reply to message{% endtrans %}</td>
<td><span class="hotkey">></span></td>
<td><span class="hotkey"><kbd>></kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}New stream message{% endtrans %}</td>
<td><span class="hotkey">c</span></td>
<td><span class="hotkey"><kbd>c</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}New private message{% endtrans %}</td>
<td><span class="hotkey">x</span></td>
<td><span class="hotkey"><kbd>x</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Compose a reply @-mentioning author{% endtrans %}</td>
<td><span class="hotkey">@</span></td>
<td><span class="hotkey"><kbd>@</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Send message{% endtrans %}</td>
<td><span class="hotkey">Tab then Enter</span> or <span class="hotkey">Ctrl + Enter</span></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><span class="hotkey">Shift + Enter</span></td>
<td><span class="hotkey"><kbd>Shift</kbd> + <kbd>Enter</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Cancel compose{% endtrans %}</td>
<td><span class="hotkey">Esc</span> or <span class="hotkey">Ctrl + [</span></td>
<td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
</tr>
</table>
</div>
@@ -153,35 +153,35 @@
</thead>
<tr>
<td class="definition">{% trans %}Narrow to stream{% endtrans %}</td>
<td><span class="hotkey">s</span></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><span class="hotkey">S</span></td>
<td><span class="hotkey"><kbd>S</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to all private messages{% endtrans %}</td>
<td><span class="hotkey">shift + p</span></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><span class="hotkey">n</span></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><span class="hotkey">p</span></td>
<td><span class="hotkey"><kbd>p</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Cycle between stream narrows{% endtrans %}</td>
<td><span class="hotkey">A</span> or <span class="hotkey">D</span></td>
<td><span class="hotkey"><kbd>A</kbd> or <kbd>D</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to all unmuted messages{% endtrans %}</td>
<td><span class="hotkey">Esc</span> or <span class="hotkey">Ctrl + [</span></td>
<td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Narrow to current compose box recipient{% endtrans %}</td>
<td><span class="hotkey">Ctrl + .</span></td>
<td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>.</kbd></span></td>
</tr>
</table>
</div>
@@ -194,23 +194,23 @@
</thead>
<tr>
<td class="definition">{% trans %}Edit your last message{% endtrans %}</td>
<td><span class="hotkey">Left</span></td>
<td><span class="hotkey"><kbd>Left</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Show message sender's profile{% endtrans %}</td>
<td><span class="hotkey">u</span></td>
<td><span class="hotkey"><kbd>u</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Show images in thread{% endtrans %}</td>
<td><span class="hotkey">v</span></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><span class="hotkey">e</span></td>
<td><span class="hotkey"><kbd>e</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Star selected message{% endtrans %}</td>
<td><span class="hotkey">Ctrl + s</span></td>
<td><span class="hotkey"><kbd>Ctrl</kbd> + <kbd>s</kbd></span></td>
</tr>
<tr>
<td class="definition">
@@ -220,15 +220,15 @@
src="/static/generated/emoji/images/emoji/unicode/1f44d.png"
title=":thumbs_up:"/>
</td>
<td><span class="hotkey">+</span></td>
<td><span class="hotkey"><kbd>+</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Collapse/show selected message{% endtrans %}</td>
<td><span class="hotkey">-</span></td>
<td><span class="hotkey"><kbd>-</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Toggle topic mute{% endtrans %}</td>
<td><span class="hotkey">M</span></td>
<td><span class="hotkey"><kbd>M</kbd></span></td>
</tr>
</table>
</div>
@@ -241,15 +241,15 @@
</thead>
<tr>
<td class="definition">{% trans %}View drafts{% endtrans %}</td>
<td><span class="hotkey">d</span></td>
<td><span class="hotkey"><kbd>d</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Edit selected draft{% endtrans %}</td>
<td><span class="hotkey">Enter</span></td>
<td><span class="hotkey"><kbd>Enter</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Delete selected draft{% endtrans %}</td>
<td><span class="hotkey">Backspace</span></td>
<td><span class="hotkey"><kbd>Backspace</kbd></span></td>
</tr>
</table>
</div>
@@ -262,19 +262,19 @@
</thead>
<tr>
<td class="definition">{% trans %}Toggle the gear menu{% endtrans %}</td>
<td><span class="hotkey">g</span></td>
<td><span class="hotkey"><kbd>g</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Open message menu{% endtrans %}</td>
<td><span class="hotkey">i</span></td>
<td><span class="hotkey"><kbd>i</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Open reactions menu{% endtrans %}</td>
<td><span class="hotkey">:</span></td>
<td><span class="hotkey"><kbd>:</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Show keyboard shortcuts{% endtrans %}</td>
<td><span class="hotkey">?</span></td>
<td><span class="hotkey"><kbd>?</kbd></span></td>
</tr>
</table>
</div>
@@ -287,23 +287,23 @@
</thead>
<tr>
<td class="definition">{% trans %}Scroll through streams{% endtrans %}</td>
<td><span class="hotkey">Up</span> or <span class="hotkey">Down</span></td>
<td><span class="hotkey"><kbd>Up</kbd> or <kbd>Down</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Switch between tabs{% endtrans %}</td>
<td><span class="hotkey">Left</span> or <span class="hotkey">Right</span></td>
<td><span class="hotkey"><kbd>Left</kbd> or <kbd>Right</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}View stream messages{% endtrans %}</td>
<td><span class="hotkey">V</span></td>
<td><span class="hotkey"><kbd>V</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Subscribe to/unsubscribe from selected stream{% endtrans %}</td>
<td><span class="hotkey">S</span></td>
<td><span class="hotkey"><kbd>S</kbd></span></td>
</tr>
<tr>
<td class="definition">{% trans %}Create new stream{% endtrans %}</td>
<td><span class="hotkey">n</span></td>
<td><span class="hotkey"><kbd>n</kbd></span></td>
</tr>
</table>
</div>