Add keyboard shortcuts

static/style.css

@@ -505,6 +505,22 @@ img.emoji {
 	margin: 8px 0 16px 0;
 }
 
+.keyboard-shortcuts {
+	margin-top: 12px;
+}
+
+.keyboard-shortcuts td {
+	padding: 2px 4px;
+}
+
+kbd {
+	border-radius: 3px;
+	padding: 1px 4px;
+	border: 1px solid #444444;
+	background-color: #eeeeee;
+	font-size: 10pt;
+}
+
 .dark {
 	background-color: #222222;
 	background-image: none;
@@ -548,3 +564,9 @@ img.emoji {
 	background-color: #222222;
 	border-color: #444444;
 }
+
+.dark kbd {
+	background-color: #333333;
+	border-color: #444444;
+	color: #eaeaea;
+}

templates/about.tmpl

@@ -1,7 +1,7 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> About </div>
 
+<div class="page-title"> About </div>
 <div>
 	<p>
 		A web client for <a href="https://pleroma.social" target="_blank">Mastodon Network</a>.
@@ -14,6 +14,88 @@
 	</P>
 </div>
 
+<div class="page-title"> Keyboard shortcuts </div>
+<div>
+	<table class="keyboard-shortcuts">
+		<tr>
+			<td> User profile </td>
+			<td> <kbd>0</kbd> </td>
+		</tr>
+		<tr>
+			<td> Home timeline </td>
+			<td> <kbd>1</kbd> </td>
+		</tr>
+		<tr>
+			<td> Direct timeline </td>
+			<td> <kbd>2</kbd> </td>
+		</tr>
+		<tr>
+			<td> Local timeline </td>
+			<td> <kbd>3</kbd> </td>
+		</tr>
+		<tr>
+			<td> The Whole Known Network </td>
+			<td> <kbd>4</kbd> </td>
+		</tr>
+		<tr>
+			<td> Search </td>
+			<td> <kbd>5</kbd> </td>
+		</tr>
+		<tr>
+			<td> About </td>
+			<td> <kbd>6</kbd> </td>
+		</tr>
+		<tr>
+			<td> Settings </td>
+			<td> <kbd>7</kbd> </td>
+		</tr>
+		<tr>
+			<td> Signout </td>
+			<td> <kbd>8</kbd> </td>
+		</tr>
+		<tr>
+			<td> Emoji list </td>
+			<td> <kbd>L</kbd> </td>
+		</tr>
+		<tr>
+			<td> Edit post </td>
+			<td> <kbd>E</kbd> </td>
+		</tr>
+		<tr>
+			<td> Post format </td>
+			<td> <kbd>F</kbd> </td>
+		</tr>
+		<tr>
+			<td> Post scope </td>
+			<td> <kbd>S</kbd> </td>
+		</tr>
+		<tr>
+			<td> Post NSFW </td>
+			<td> <kbd>N</kbd> </td>
+		</tr>
+		<tr>
+			<td> Post attachments </td>
+			<td> <kbd>A</kbd> </td>
+		</tr>
+		<tr>
+			<td> Submit post </td>
+			<td> <kbd>P</kbd> </td>
+		</tr>
+		<tr>
+			<td> Refresh notifications </td>
+			<td> <kbd>R</kbd> </td>
+		</tr>
+		<tr>
+			<td> Read notifications </td>
+			<td> <kbd>C</kbd> </td>
+		</tr>
+	</table>
+	<p>
+		You can activate the shortcuts by pressing the associated key with your browser's <a href="https://en.wikipedia.org/wiki/Access_key#Access_in_different_browsers" target="_blank">accesskey modifier</a>, 
+		which is generally <kbd>Alt</kbd> + <kbd>Shift</kbd>.
+	</p>
+</div>
+
 {{template "footer.tmpl"}}
 {{end}}
 

templates/nav.tmpl

@@ -2,30 +2,30 @@
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
 <div class="user-info">
 	<div class="user-info-img-container">
-		<a class="img-link" href="/timeline/home" title="home">
+		<a class="img-link" href="/timeline/home" title="Home (1)">
 			<img class="user-info-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" height="64" />
 		</a>
 	</div>
 	<div class="user-info-details-container">
 		<div class="user-info-details-name">
 			<span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span>  
-			<a class="nav-link" href="/user/{{.User.ID}}">
+			<a class="nav-link" href="/user/{{.User.ID}}" accesskey="0" title="User profile (0)">
 				<span class="status-uname"> @{{.User.Acct}} </span>
 			</a>
 		</div>
 		<div class="user-info-details-nav">
-			<a class="nav-link" href="/timeline/home">home</a>
+			<a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a>
-			<a class="nav-link" href="/timeline/direct">direct</a>
+			<a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a>
-			<a class="nav-link" href="/timeline/local">local</a>
+			<a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a>
-			<a class="nav-link" href="/timeline/twkn">twkn</a>
+			<a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a>
-			<a class="nav-link" href="/search">search</a>
+			<a class="nav-link" href="/search" accesskey="5" title="Search (5)">search</a>
-			<a class="nav-link" href="/about">about</a>
+			<a class="nav-link" href="/about" accesskey="6" title="About (6)">about</a>
 		</div>
 		<div>
-			<a class="nav-link" href="/settings" target="_top">settings</a>
+			<a class="nav-link" href="/settings" target="_top" accesskey="7" title="Settings (7)">settings</a>
 			<form class="signout" action="/signout" method="post" target="_top">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="submit" value="signout" class="btn-link nav-link">
+				<input type="submit" value="signout" class="btn-link nav-link" accesskey="8" title="Signout (8)">
 			</form>
 		</div>
 	</div>

templates/notification.tmpl

@@ -7,11 +7,11 @@
 			({{.UnreadCount }})
 		{{end}}
 	</div>
-	<a class="notification-refresh" href="/notifications" target="_self">refresh</a>
+	<a class="notification-refresh" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a>
 	{{if .ReadID}}
 	<form action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
 		<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-		<input type="submit" value="read" class="btn-link">
+		<input type="submit" value="read" class="btn-link" accesskey="C" title="Clear unread notifications (C)">
 	</form>
 	{{end}}
 </div>

templates/postform.tmpl

@@ -7,24 +7,22 @@
 	{{else}}
 	<label for="post-content" class="post-form-title"> New post </label>
 	{{end}}
-	<a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji list">
+	<a class="post-form-emoji-link" href="/emojis" target="_blank" title="Emoji list (L)" accesskey="L">
 		emoji list
 	</a>
 	<div class="post-form-content-container">
-		<textarea id="post-content" name="content" class="post-content" cols="34" rows="5">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
+		<textarea id="post-content" name="content" class="post-content" cols="34" rows="5" accesskey="E" title="Edit post (E)">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
 	</div>
 	<div>
 		{{if gt (len .Formats) 0}}
 		<span class="post-form-field">
-			<label for="post-format"> Format </label>
+			<select id="post-format" name="format" accesskey="F" title="Format (F)">
-			<select id="post-format" name="format">
 				{{range .Formats}} <option value="{{.Type}}">{{.Name}}</option> {{end}}
 			</select>
 		</span>
 		{{end}}
 		<span class="post-form-field">
-			<label for="post-visilibity"> Scope </label>
+			<select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)">
-			<select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}}>
 				<option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option>
 				<option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option>
 				<option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option>
@@ -32,17 +30,16 @@
 			</select>
 		</span>
 		<span class="post-form-field">
-			<input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on">
+			<input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on" accesskey="N" title="NSFW (N)">
-			<label for="nsfw-checkbox"> Is NSFW </label>
+			<label for="nsfw-checkbox"> NSFW </label>
 		</span>
 	</div>
 	<div>
 		<span class="post-form-field">
-			<label for ="post-file-picker"> Attachments </label>
+			<input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)">
-			<input id="post-file-picker" type="file" name="attachments" multiple>
 		</span>
 	</div>
-	<button type="submit"> Post </button>
+	<button type="submit" accesskey="P" title="Post (P)"> Post </button>
 </form>
 {{end}}