From 0f9b12f2b8d547657f193881605ba88c81dab60e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Tue, 28 Feb 2017 02:15:34 -0500 Subject: [PATCH] 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. --- client/css/style.css | 67 +++++++- client/index.html | 332 +++++++++++++++++++++++++++++++++++++++ client/themes/crypto.css | 13 +- 3 files changed, 408 insertions(+), 4 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 11ccccd0..b3293a87 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -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 { diff --git a/client/index.html b/client/index.html index de9311d7..82f9d0d6 100644 --- a/client/index.html +++ b/client/index.html @@ -37,6 +37,7 @@ +
@@ -377,6 +378,337 @@
+ +
+
+ +
+
+

Help

+ +

Keyboard Shortcuts

+ +

On Windows / Linux

+ +
+
+ Ctrl + ↑ / ↓ +
+
+

Switch to the previous/next window in the channel list

+
+
+ +
+
+ Ctrl + Shift + L +
+
+

Clear the current screen

+
+
+ +

On macOS

+ +
+
+ ⌘ + ↑ / ↓ +
+
+

Switch to the previous/next window in the channel list

+
+
+ +
+
+ ⌘ + K +
+
+

Clear the current screen

+
+
+ +

Commands

+ +
+
+ /away [message] +
+
+

Mark yourself as away with an optional message.

+
+
+ +
+
+ /back +
+
+

Remove your away status (set with /away).

+
+
+ +
+
+ /clear +
+
+

Clear the current screen.

+
+
+ +
+
+ /connect host [port] +
+
+

+ Connect to a new IRC network. If port starts with + a + sign, the connection will be made secure + using TLS. +

+

Alias: /server

+
+
+ +
+
+ /ctcp target cmd [args] +
+
+

+ Send a CTCP + request. Read more about this on + the dedicated Wikipedia article. +

+
+
+ +
+
+ /deop nick [...nick] +
+
+

+ Remove op (-o) from one or several users in the + current channel. +

+
+
+ +
+
+ /devoice nick [...nick] +
+
+

+ Remove voice (-v) from one or several users in + the current channel. +

+
+
+ +
+
+ /disconnect [message] +
+
+

+ Disconnect from the current network with an + optionally-provided message. +

+
+
+ +
+
+ /invite nick [channel] +
+
+

+ Invite a user to the specified channel. If + channel is ommitted, user will be invited to the + current channel. +

+
+
+ +
+
+ /join channel +
+
+

Join a channel.

+
+
+ +
+
+ /kick nick +
+
+

Kick a user from the current channel.

+
+
+ +
+
+ /list +
+
+

Retrieve a list of available channels on this network.

+
+
+ +
+
+ /me message +
+
+

+ Send an action message to the current channel. The Lounge will + display it inline, as if the message was posted in the third + person. +

+
+
+ +
+
+ /mode flags [args] +
+
+

+ 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. +

+
+
+ +
+
+ /msg channel message +
+
+

Send a message to the specified channel.

+
+
+ +
+
+ /nick newnick +
+
+

Change your nickname on the current network.

+
+
+ +
+
+ /notice channel message +
+
+

Sends a notice message to the specified channel.

+
+
+ +
+
+ /op nick [...nick] +
+
+

+ Give op (+o) to one or several users in the + current channel. +

+
+
+ +
+
+ /part +
+
+

Close the current channel or private message window.

+

Aliases: /close, /leave

+
+
+ +
+
+ /query nick +
+
+

Send a private message to the specified user.

+
+
+ +
+
+ /quit [message] +
+
+

+ Disconnect from the current network with an optional message. +

+
+
+ +
+
+ /raw message +
+
+

Send a raw message to the current IRC network.

+

Aliases: /quote, /send

+
+
+ +
+
+ /slap nick +
+
+

Slap someone in the current channel with a trout!

+
+
+ +
+
+ /topic newtopic +
+
+

Set the topic in the current channel.

+
+
+ +
+
+ /voice nick [...nick] +
+
+

+ Give voice (+v) to one or several users in the + current channel. +

+
+
+ +
+
+ /whois nick +
+
+

+ Retrieve information about the given user on the current + network. +

+
+
+
+
diff --git a/client/themes/crypto.css b/client/themes/crypto.css index 07515ae6..96df390f 100644 --- a/client/themes/crypto.css +++ b/client/themes/crypto.css @@ -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; }