create modal for keyboard shortcuts

This commit is contained in:
Duarte Dias 2021-02-09 20:01:08 +00:00 committed by Nazar Kanaev
parent d89ae3a2bc
commit 28ad0345f3
3 changed files with 66 additions and 0 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

After

Width:  |  Height:  |  Size: 365 B

View File

@ -94,6 +94,11 @@
<span class="icon mr-1">{% inline "upload.svg" %}</span> <span class="icon mr-1">{% inline "upload.svg" %}</span>
Export Export
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button @click="showSettings('shortcuts')">
<span class="icon mr-1">{% inline "help-circle.svg" %}</span>
Shortcuts
</b-dropdown-item-button>
<b-dropdown-divider v-if="authenticated"></b-dropdown-divider> <b-dropdown-divider v-if="authenticated"></b-dropdown-divider>
<b-dropdown-item-button v-if="authenticated" @click="logout()"> <b-dropdown-item-button v-if="authenticated" @click="logout()">
<span class="icon mr-1">{% inline "log-out.svg" %}</span> <span class="icon mr-1">{% inline "log-out.svg" %}</span>
@ -379,6 +384,65 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="settings=='shortcuts'">
<p class="cursor-default"><b>Keyboard shortuts (case-sensitive)</b></p>
<div>
<b-table-simple striped bordered responsive>
<b-thead>
<b-tr>
<b-th>Key</b-th>
<b-th>Action</b-th>
</b-tr>
</b-thead>
<b-tbody>
<b-tr>
<b-td>r</b-td>
<b-td>toggle item as read / unread</b-td>
</b-tr>
<b-tr>
<b-td>R</b-td>
<b-td>mark all items as read</b-td>
</b-tr>
<b-tr>
<b-td>s</b-td>
<b-td>star / unstar item</b-td>
</b-tr>
<b-tr>
<b-td>?</b-td>
<b-td>focus the search bar</b-td>
</b-tr>
<b-tr>
<b-td>A</b-td>
<b-td>view All items</b-td>
</b-tr>
<b-tr>
<b-td>U</b-td>
<b-td>view Unread items</b-td>
</b-tr>
<b-tr>
<b-td>S</b-td>
<b-td>view Starred items</b-td>
</b-tr>
<b-tr>
<b-td>j</b-td>
<b-td>go to next feed item</b-td>
</b-tr>
<b-tr>
<b-td>k</b-td>
<b-td>go to previous feed item</b-td>
</b-tr>
<b-tr>
<b-td>l</b-td>
<b-td>go to next feed</b-td>
</b-tr>
<b-tr>
<b-td>h</b-td>
<b-td>go to previous feed</b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</div>
</div>
</div> </div>
</div> </div>
<!-- polyfill --> <!-- polyfill -->

View File

@ -86,6 +86,7 @@ const shortcutFunctions = {
}, },
} }
// If you edit, make sure you update README.md and the help modal
const keybindings = { const keybindings = {
"r": shortcutFunctions.toggleItemRead, "r": shortcutFunctions.toggleItemRead,
"R": shortcutFunctions.markAllRead, "R": shortcutFunctions.markAllRead,