mirror of https://github.com/zulip/zulip.git
Rearrange keyboard shortcuts dialog so it all fits on one screen.
So that it is, in fact, navigable via keyboard shortcut. It's not the most beautiful way to do this; in the ideal world the layout would be more properly responsive and could fill up the screen for you when you have the room for it. The issue is that the version of Bootstrap we're running doesn't easily allow for variable-sized modals, and the hassle of showing and hiding a div manually didn't seem worth it. The pixel sizes are specified manually as well, in a way that isn't particularly responsive, because of a few competing desires: 1) For them to appear side-by-side when wide enough 2) For them to stack when not wide enough 3) The fact that they're awkwardly between a span2 and a span3, so we can't just use the Bootstrap responsive layout stuff Finally, the diff here is best viewed with -w. (I also swapped the order of Narrowing and Navigation, which unfortunately clutters the diff.) (imported from commit 62cfa7959d48ce515562713eb48f9d9b33c8cc16)
This commit is contained in:
Waseem Daher
parent
67a83e4ef5
commit
f4d5186541
|
|
@ -5,140 +5,105 @@
|
|||
<h3 id="keyboard-shortcuts-label">Keyboard shortcuts</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="accordion" id="hotkeys-accordion">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#hotkeys-accordion" href="#hotkeys-composing">
|
||||
Composing messages
|
||||
</a>
|
||||
</div>
|
||||
<div id="hotkeys-composing" class="accordion-body collapse in">
|
||||
<div class="accordion-inner">
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<tr>
|
||||
<td class="hotkey">c</td>
|
||||
<td class="definition">Compose new stream message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">C</td>
|
||||
<td class="definition">Compose new private message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Enter or r</td>
|
||||
<td class="definition">Respond to message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">R</td>
|
||||
<td class="definition">Respond to author</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey"><Tab> and Enter</td>
|
||||
<td class="definition">Send message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Esc</td>
|
||||
<td class="definition">Cancel compose</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Composing messages</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="hotkey">c</td>
|
||||
<td class="definition">New stream message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">C</td>
|
||||
<td class="definition">New private message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Enter or r</td>
|
||||
<td class="definition">Respond to message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">R</td>
|
||||
<td class="definition">Respond to author</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Tab then Enter</td>
|
||||
<td class="definition">Send message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Esc</td>
|
||||
<td class="definition">Cancel compose</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#hotkeys-accordion" href="#hotkeys-narrowing">
|
||||
Narrowing
|
||||
</a>
|
||||
</div>
|
||||
<div id="hotkeys-narrowing" class="accordion-body collapse">
|
||||
<div class="accordion-inner">
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<tr>
|
||||
<td class="hotkey">s</td>
|
||||
<td class="definition">Narrow by stream</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">S</td>
|
||||
<td class="definition">Narrow by subject</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">v</td>
|
||||
<td class="definition">Narrow to all private messages</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Esc</td>
|
||||
<td class="definition">Return to home view</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Navigation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="hotkey">Down or j</td>
|
||||
<td class="definition">Next message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Up or k</td>
|
||||
<td class="definition">Previous message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">/</td>
|
||||
<td class="definition">Initiate a search</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">PgUp, PgDn</td>
|
||||
<td class="definition">Scroll up or down</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Spacebar</td>
|
||||
<td class="definition">Scroll down</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">End</td>
|
||||
<td class="definition">Last message</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#hotkeys-accordion" href="#hotkeys-scrolling">
|
||||
Navigation
|
||||
</a>
|
||||
</div>
|
||||
<div id="hotkeys-scrolling" class="accordion-body collapse">
|
||||
<div class="accordion-inner">
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<tr>
|
||||
<td class="hotkey">Down or j</td>
|
||||
<td class="definition">Next message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Up or k</td>
|
||||
<td class="definition">Previous message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">/</td>
|
||||
<td class="definition">Initiate a search</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Home</td>
|
||||
<td class="definition">First message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">End</td>
|
||||
<td class="definition">Last message</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Page Up</td>
|
||||
<td class="definition">Scroll up several messages</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Page Down</td>
|
||||
<td class="definition">Scroll down several messages</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Spacebar</td>
|
||||
<td class="definition">Scroll down several messages</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#hotkeys-accordion" href="#hotkeys-misc">
|
||||
Miscellaneous
|
||||
</a>
|
||||
</div>
|
||||
<div id="hotkeys-misc" class="accordion-body collapse">
|
||||
<div class="accordion-inner">
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<tr>
|
||||
<td class="hotkey">?</td>
|
||||
<td class="definition">Open keyboard shortcut help</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Narrowing</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="hotkey">s</td>
|
||||
<td class="definition">Narrow by stream</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">S</td>
|
||||
<td class="definition">Narrow by subject</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">v</td>
|
||||
<td class="definition">Narrow to all private messages</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hotkey">Esc</td>
|
||||
<td class="definition">Return to home view</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="hotkeys_table table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Miscellaneous</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="hotkey">?</td>
|
||||
<td class="definition">Open keyboard shortcut help</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
|
|
|
|||
|
|
@ -549,15 +549,18 @@ table.floating_recipient {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.hotkeys_table {
|
||||
float: left;
|
||||
width: 250px;
|
||||
margin-right: 10px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.hotkeys_table .hotkey {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hotkeys_table .hotkey_heading {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue