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
parent
764019bade
commit
0f9b12f2b8
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user