Add a help window within the app

This brings commands and keyboard shortcuts from the website, after a massive overhaul. It comes as part of the big documentation rewrite that I am currently doing.

`kbd` design inspiration from GitHub, `code` design inspiration from Bootstrap.

This help page is accessible from an icon in the sidebar, near the Settings icon.
This commit is contained in:
Jérémie Astori 2017-02-28 02:15:34 -05:00
parent 764019bade
commit 0f9b12f2b8
3 changed files with 408 additions and 4 deletions

View File

@ -57,7 +57,8 @@ a:hover {
}
h1,
h2 {
h2,
h3 {
font: inherit;
line-height: inherit;
margin: 0;
@ -79,6 +80,33 @@ button {
padding: 0;
}
code,
kbd {
font-family: Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
}
code {
font-size: 12px;
padding: 2px 4px;
color: #e74c3c;
background-color: #f9f2f4;
border-radius: 2px;
}
kbd {
display: inline-block;
font-size: 11px;
line-height: 10px;
padding: 3px 5px;
color: #555;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
}
.btn {
border: 2px solid #84ce88;
border-radius: 3px;
@ -185,6 +213,7 @@ button {
#footer .sign-in:before { content: "\f023"; /* http://fontawesome.io/icon/lock/ */ }
#footer .connect:before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
#footer .settings:before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
#footer .help:before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
#footer .sign-out:before { content: "\f011"; /* http://fontawesome.io/icon/power-off/ */ }
#form #cycle-nicks:before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
@ -656,6 +685,12 @@ button {
padding-bottom: 7px;
}
#windows .window h3 {
color: #7f8c8d;
font-size: 18px;
margin: 20px 0 10px;
}
#windows .active {
display: block;
}
@ -1296,6 +1331,27 @@ button {
margin-top: .2em;
}
#help .help-item {
display: table-row;
}
#help .help-item .subject,
#help .help-item .description {
display: table-cell;
padding-bottom: 15px;
}
#help .help-item .subject {
white-space: nowrap;
padding-right: 10px;
min-width: 150px;
}
#help .help-item .description p {
font-size: 14px;
margin-bottom: 0;
}
#form {
background: #eee;
border-top: 1px solid #ddd;
@ -1813,6 +1869,15 @@ button {
#chat .unread-marker {
margin: 0;
}
#help .help-item .subject {
display: inline-block;
padding-bottom: 4px;
}
#help .help-item .description {
display: block;
}
}
::-webkit-scrollbar {

View File

@ -37,6 +37,7 @@
<span class="tooltipped tooltipped-n" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in"></button></span>
<span class="tooltipped tooltipped-n" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network"></button></span>
<span class="tooltipped tooltipped-n" aria-label="Client settings"><button class="icon settings" data-target="#settings" aria-label="Client settings"></button></span>
<span class="tooltipped tooltipped-n" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help"></button></span>
<span class="tooltipped tooltipped-n" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
</footer>
<div id="main">
@ -377,6 +378,337 @@
</div>
</div>
</div>
<div id="help" class="window">
<div class="header">
<button class="lt" aria-label="Toggle channel list"></button>
</div>
<div class="container">
<h1 class="title">Help</h1>
<h2>Keyboard Shortcuts</h2>
<h3>On Windows / Linux</h3>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd></kbd> / <kbd></kbd>
</div>
<div class="description">
<p>Switch to the previous/next window in the channel list</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
</div>
<div class="description">
<p>Clear the current screen</p>
</div>
</div>
<h3>On macOS</h3>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd></kbd> / <kbd></kbd>
</div>
<div class="description">
<p>Switch to the previous/next window in the channel list</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd>K</kbd>
</div>
<div class="description">
<p>Clear the current screen</p>
</div>
</div>
<h2>Commands</h2>
<div class="help-item">
<div class="subject">
<code>/away [message]</code>
</div>
<div class="description">
<p>Mark yourself as away with an optional message.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/back</code>
</div>
<div class="description">
<p>Remove your away status (set with <code>/away</code>).</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/clear</code>
</div>
<div class="description">
<p>Clear the current screen.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/connect host [port]</code>
</div>
<div class="description">
<p>
Connect to a new IRC network. If <code>port</code> starts with
a <code>+</code> sign, the connection will be made secure
using TLS.
</p>
<p>Alias: <code>/server</code></p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/ctcp target cmd [args]</code>
</div>
<div class="description">
<p>
Send a <abbr title="Client-to-client protocol">CTCP</abbr>
request. Read more about this on
<a href="https://en.wikipedia.org/wiki/Client-to-client_protocol">the dedicated Wikipedia article</a>.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/deop nick [...nick]</code>
</div>
<div class="description">
<p>
Remove op (<code>-o</code>) from one or several users in the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/devoice nick [...nick]</code>
</div>
<div class="description">
<p>
Remove voice (<code>-v</code>) from one or several users in
the current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/disconnect [message]</code>
</div>
<div class="description">
<p>
Disconnect from the current network with an
optionally-provided message.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/invite nick [channel]</code>
</div>
<div class="description">
<p>
Invite a user to the specified channel. If
<code>channel</code> is ommitted, user will be invited to the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/join channel</code>
</div>
<div class="description">
<p>Join a channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/kick nick</code>
</div>
<div class="description">
<p>Kick a user from the current channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/list</code>
</div>
<div class="description">
<p>Retrieve a list of available channels on this network.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/me message</code>
</div>
<div class="description">
<p>
Send an action message to the current channel. The Lounge will
display it inline, as if the message was posted in the third
person.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/mode flags [args]</code>
</div>
<div class="description">
<p>
Set the given flags to the current channel if the active
window is a channel, another user if the active window is a
private message window, or yourself if the current window is a
server window.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/msg channel message</code>
</div>
<div class="description">
<p>Send a message to the specified channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/nick newnick</code>
</div>
<div class="description">
<p>Change your nickname on the current network.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/notice channel message</code>
</div>
<div class="description">
<p>Sends a notice message to the specified channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/op nick [...nick]</code>
</div>
<div class="description">
<p>
Give op (<code>+o</code>) to one or several users in the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/part</code>
</div>
<div class="description">
<p>Close the current channel or private message window.</p>
<p>Aliases: <code>/close</code>, <code>/leave</code></p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/query nick</code>
</div>
<div class="description">
<p>Send a private message to the specified user.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/quit [message]</code>
</div>
<div class="description">
<p>
Disconnect from the current network with an optional message.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/raw message</code>
</div>
<div class="description">
<p>Send a raw message to the current IRC network.</p>
<p>Aliases: <code>/quote</code>, <code>/send</code></p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/slap nick</code>
</div>
<div class="description">
<p>Slap someone in the current channel with a trout!</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/topic newtopic</code>
</div>
<div class="description">
<p>Set the topic in the current channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/voice nick [...nick]</code>
</div>
<div class="description">
<p>
Give voice (<code>+v</code>) to one or several users in the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/whois nick</code>
</div>
<div class="description">
<p>
Retrieve information about the given user on the current
network.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -18,6 +18,11 @@ body {
font: 16px Inconsolata-g, monospace;
}
code,
kbd {
font-family: Inconsolata-g, monospace;
}
a,
#chat a {
color: #00ff0e;
@ -28,9 +33,12 @@ a:hover,
color: #3eff48;
}
#windows .window h2 {
#windows .window h2,
#windows .window h3 {
color: #666;
font: regular 14px Lato, sans-serif;
}
#windows .window h2 {
border-bottom: none;
}
@ -39,7 +47,6 @@ a:hover,
}
#sign-in label {
font: 14px Lato, sans-serif;
color: #666;
}