Add keyboard shortcuts
authorr <r@freesoftwareextremist.com>
Mon, 19 Oct 2020 06:06:41 +0000 (06:06 +0000)
committerr <r@freesoftwareextremist.com>
Mon, 19 Oct 2020 06:06:41 +0000 (06:06 +0000)
static/style.css
templates/about.tmpl
templates/nav.tmpl
templates/notification.tmpl
templates/postform.tmpl

index 0349c2969c99174370433ccdc436e0629f320d54..9c05effd52cfd2d9ec008cf30dc7976e91f7cac2 100644 (file)
@@ -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;
+}
index 1f6fda7deb7520de0d7f35bc3580599f9b292ab7..2b4d636012484f0983185b954ba75e13e561ce0b 100644 (file)
@@ -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>.
        </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}}
 
index 293d210e7a21e8c337d31ebb4f0462e84508a218..f3db9f12990cff6db09a310b6e09c772ff921309 100644 (file)
@@ -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/direct">direct</a>
-                       <a class="nav-link" href="/timeline/local">local</a>
-                       <a class="nav-link" href="/timeline/twkn">twkn</a>
-                       <a class="nav-link" href="/search">search</a>
-                       <a class="nav-link" href="/about">about</a>
+                       <a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a>
+                       <a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a>
+                       <a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a>
+                       <a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a>
+                       <a class="nav-link" href="/search" accesskey="5" title="Search (5)">search</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>
index 6973fa51bcdd42c77b5cc54397128a2cc4f602ff..059268a989ebfeb75f1d76b5a8568ce1f5bf0d3f 100644 (file)
@@ -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>
index 3bb245770d48c5d6fe53193c00a743d6dba78086..ac774860391ee1c945f44ca36a7a3674ba673632 100644 (file)
@@ -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">
+                       <select id="post-format" name="format" accesskey="F" title="Format (F)">
                                {{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}}>
+                       <select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)">
                                <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>
                        </select>
                </span>
                <span class="post-form-field">
-                       <input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on">
-                       <label for="nsfw-checkbox"> Is NSFW </label>
+                       <input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on" accesskey="N" title="NSFW (N)">
+                       <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>
+                       <input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)">
                </span>
        </div>
-       <button type="submit"> Post </button>
+       <button type="submit" accesskey="P" title="Post (P)"> Post </button>
 </form>
 {{end}}