Merge pull request #1321 from hgiesel/stickyshortcuts

Sticky shortcuts

ftl/core/editing.ftl

@@ -39,6 +39,7 @@ editing-subscript = Subscript
 editing-superscript = Superscript
 editing-tags = Tags
 editing-to-make-a-cloze-deletion-on = To make a cloze deletion on an existing note, you need to change it to a cloze type first, via 'Notes>Change Note Type'
+editing-toggle-sticky = Toggle sticky
 editing-underline-text = Underline text
 editing-unordered-list = Unordered list
 editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze.

qt/aqt/addcards.py

@@ -58,6 +58,7 @@ class AddCards(QDialog):
 
     def setupEditor(self) -> None:
         self.editor = aqt.editor.Editor(self.mw, self.form.fieldsArea, self, True)
+        self.editor.web.eval("activateStickyShortcuts();")
 
     def setup_choosers(self) -> None:
         defaults = self.col.defaults_for_adding(

qt/aqt/editor.py

@@ -389,6 +389,22 @@ $editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{
             self.currentField = int(num)
             gui_hooks.editor_did_focus_field(self.note, self.currentField)
 
+        elif cmd.startswith("toggleStickyAll"):
+            model = self.note.note_type()
+            flds = model["flds"]
+
+            any_sticky = any([fld["sticky"] for fld in flds])
+            result = []
+            for fld in flds:
+                if not any_sticky or fld["sticky"]:
+                    fld["sticky"] = not fld["sticky"]
+
+                result.append(fld["sticky"])
+
+            update_notetype_legacy(parent=self.mw, notetype=model).run_in_background()
+
+            return result
+
         elif cmd.startswith("toggleSticky"):
             (type, num) = cmd.split(":", 1)
             ord = int(num)

ts/editor/fields.scss

@@ -55,7 +55,7 @@
     cursor: pointer;
 
     &.is-inactive {
-        opacity: 0.1;
+        opacity: 0.2;
     }
 
     &.icon--hover {

ts/editor/index.ts

@@ -28,6 +28,7 @@ export { setNoteId, getNoteId } from "./note-id";
 export { saveNow } from "./change-timer";
 export { wrap, wrapIntoText } from "./wrap";
 export { editorToolbar } from "./toolbar";
+export { activateStickyShortcuts } from "./label-container";
 export { components } from "./Components.svelte";
 
 declare global {
@@ -190,7 +191,7 @@ export function setFormat(cmd: string, arg?: string, nosave = false): void {
     }
 }
 
-const i18n = setupI18n({
+export const i18n = setupI18n({
     modules: [
         ModuleName.EDITING,
         ModuleName.KEYBOARD,

ts/editor/label-container.ts

@@ -1,17 +1,34 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import type { EditorField } from "./editor-field";
+import * as tr from "lib/i18n";
+
+import { registerShortcut } from "lib/shortcuts";
 import { bridgeCommand } from "./lib";
+import { appendInParentheses } from "./helpers";
+import { getCurrentField, forEditorField, i18n } from ".";
 import pinIcon from "./pin-angle.svg";
 
-function removeHoverIcon(evt: Event): void {
+function toggleStickyCurrentField(): void {
-    const icon = evt.currentTarget as HTMLElement;
+    const currentField = getCurrentField();
-    icon.classList.remove("icon--hover");
+
+    if (currentField) {
+        const labelContainer = (currentField.parentElement as EditorField)
+            .labelContainer;
+        labelContainer.toggleSticky();
+    }
 }
 
-function hoverIcon(evt: Event): void {
+function toggleStickyAll(): void {
-    const icon = evt.currentTarget as HTMLElement;
+    bridgeCommand("toggleStickyAll", (values: boolean[]) =>
-    icon.classList.add("icon--hover");
+        forEditorField(values, (field, value) => field.labelContainer.setSticky(value))
+    );
+}
+
+export function activateStickyShortcuts(): void {
+    registerShortcut(toggleStickyCurrentField, "F9");
+    registerShortcut(toggleStickyAll, "Shift+F9");
 }
 
 export class LabelContainer extends HTMLDivElement {
@@ -22,6 +39,10 @@ export class LabelContainer extends HTMLDivElement {
         super();
         this.className = "d-flex justify-content-between";
 
+        i18n.then(() => {
+            this.title = appendInParentheses(tr.editingToggleSticky(), "F9");
+        });
+
         this.label = document.createElement("span");
         this.label.className = "fieldname";
         this.appendChild(this.label);
@@ -32,41 +53,47 @@ export class LabelContainer extends HTMLDivElement {
         this.sticky.hidden = true;
         this.appendChild(this.sticky);
 
+        this.setSticky = this.setSticky.bind(this);
+        this.hoverIcon = this.hoverIcon.bind(this);
+        this.removeHoverIcon = this.removeHoverIcon.bind(this);
         this.toggleSticky = this.toggleSticky.bind(this);
     }
 
     connectedCallback(): void {
         this.sticky.addEventListener("click", this.toggleSticky);
-        this.sticky.addEventListener("mouseenter", hoverIcon);
+        this.sticky.addEventListener("mouseenter", this.hoverIcon);
-        this.sticky.addEventListener("mouseleave", removeHoverIcon);
+        this.sticky.addEventListener("mouseleave", this.removeHoverIcon);
     }
 
     disconnectedCallback(): void {
         this.sticky.removeEventListener("click", this.toggleSticky);
-        this.sticky.removeEventListener("mouseenter", hoverIcon);
+        this.sticky.removeEventListener("mouseenter", this.hoverIcon);
-        this.sticky.removeEventListener("mouseleave", removeHoverIcon);
+        this.sticky.removeEventListener("mouseleave", this.removeHoverIcon);
     }
 
     initialize(labelName: string): void {
         this.label.innerText = labelName;
     }
 
-    setSticky(state: boolean): void {
-        this.sticky.classList.toggle("is-inactive", !state);
-    }
-
     activateSticky(initialState: boolean): void {
         this.setSticky(initialState);
         this.sticky.hidden = false;
     }
 
-    toggleSticky(evt: Event): void {
+    setSticky(state: boolean): void {
-        bridgeCommand(
+        this.sticky.classList.toggle("is-inactive", !state);
-            `toggleSticky:${this.getAttribute("ord")}`,
-            (newState: boolean): void => {
-                this.setSticky(newState);
     }
-        );
+
-        removeHoverIcon(evt);
+    hoverIcon(): void {
+        this.sticky.classList.add("icon--hover");
+    }
+
+    removeHoverIcon(): void {
+        this.sticky.classList.remove("icon--hover");
+    }
+
+    toggleSticky(): void {
+        bridgeCommand(`toggleSticky:${this.getAttribute("ord")}`, this.setSticky);
+        this.removeHoverIcon();
     }
 }