keyboard shortcuts options pane

src/public/javascripts/dialogs/options/advanced.js

@@ -3,19 +3,19 @@ import toastService from "../../services/toast.js";
 
 const TPL = `
 <h4 style="margin-top: 0;">Sync</h4>
-<button id="force-full-sync-button" class="btn btn-secondary">Force full sync</button>
+<button id="force-full-sync-button" class="btn">Force full sync</button>
 
 <br/>
 <br/>
 
-<button id="fill-sync-rows-button" class="btn btn-secondary">Fill sync rows</button>
+<button id="fill-sync-rows-button" class="btn">Fill sync rows</button>
 
 <br/>
 <br/>
 
 <h4>Debugging</h4>
 
-<button id="anonymize-button" class="btn btn-secondary">Save anonymized database</button><br/><br/>
+<button id="anonymize-button" class="btn">Save anonymized database</button><br/><br/>
 
 <p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
     for sharing online for debugging purposes without fear of leaking your personal data.</p>
@@ -24,7 +24,7 @@ const TPL = `
 
 <p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
 
-<button id="vacuum-database-button" class="btn btn-secondary">Vacuum database</button>`;
+<button id="vacuum-database-button" class="btn">Vacuum database</button>`;
 
 export default class AdvancedOptions {
     constructor() {

src/public/javascripts/dialogs/options/keyboard_shortcuts.js

@@ -0,0 +1,61 @@
+import server from "../../services/server.js";
+import optionsService from "../../services/options.js";
+
+const TPL = `
+<h4>Keyboard shortcuts</h4>
+
+<div style="overflow: auto; height: 500px;">
+    <table id="keyboard-shortcut-table" cellpadding="10">
+    <thead>
+        <tr>
+            <th>Action name</th>
+            <th>Shortcuts</th>
+            <th>Default shortcuts</th>
+            <th>Description</th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+    </table>
+</div>
+
+<div style="display: flex; justify-content: space-between">
+    <button class="btn btn-primary">Reload app to apply changes</button>
+    
+    <button class="btn">Set all shortcuts to the default</button>
+</div>
+`;
+
+export default class KeyboardShortcutsOptions {
+    constructor() {
+        $("#options-keyboard-shortcuts").html(TPL);
+
+        const $table = $("#keyboard-shortcut-table tbody");
+
+        server.get('keyboard-actions').then(actions => {
+            for (const action of actions) {
+                const $tr = $("<tr>")
+                    .append($("<td>").text(action.actionName))
+                    .append($("<td>").append(
+                        $(`<input type="text" class="form-control">`).val(action.effectiveShortcuts.join(", ")))
+                    )
+                    .append($("<td>").text(action.defaultShortcuts.join(", ")))
+                    .append($("<td>").text(action.description));
+
+                $table.append($tr);
+            }
+        });
+    }
+
+    async save() {
+        const enabledMimeTypes = [];
+
+        this.$mimeTypes.find("input:checked").each(
+            (i, el) => enabledMimeTypes.push($(el).attr("data-mime-type")));
+
+        const opts = { codeNotesMimeTypes: JSON.stringify(enabledMimeTypes) };
+
+        await server.put('options', opts);
+
+        await optionsService.reloadOptions();
+    }
+}

src/public/javascripts/dialogs/options/sync.js

@@ -25,7 +25,7 @@ const TPL = `
     <div style="display: flex; justify-content: space-between;">
         <button class="btn btn-primary">Save</button>
 
-        <button class="btn btn-secondary" type="button" data-help-page="Synchronization">Help</button>
+        <button class="btn" type="button" data-help-page="Synchronization">Help</button>
     </div>
 </form>
 
@@ -35,7 +35,7 @@ const TPL = `
 
 <p>This will test connection and handshake to the sync server. If sync server isn't initialized, this will set it up to sync with local document.</p>
 
-<button id="test-sync-button" class="btn btn-secondary">Test sync</button>`;
+<button id="test-sync-button" class="btn">Test sync</button>`;
 
 export default class SyncOptions {
     constructor() {