Connect icons to sticky fields values

qt/aqt/editor.py

@@ -29,6 +29,7 @@ from anki.utils import checksum, isLin, isWin, namedtmp
 from aqt import AnkiQt, colors, gui_hooks
 from aqt.main import ResetReason
 from aqt.qt import *
+from aqt.schema_change_tracker import ChangeTracker
 from aqt.sound import av_player
 from aqt.theme import theme_manager
 from aqt.utils import (
@@ -180,7 +181,7 @@ class Editor:
                 tr(TR.EDITING_SET_FOREGROUND_COLOUR_F7),
                 """
 <span id="forecolor" class="topbut topbut--rounded" style="background: #000"></span>
-"""
+""",
             ),
             self._addButton(
                 None,
@@ -188,7 +189,7 @@ class Editor:
                 tr(TR.EDITING_CHANGE_COLOUR_F8),
                 """
 <span class="topbut topbut--rounded rainbow"></span>
-"""
+""",
             ),
             self._addButton(
                 "text_cloze", "cloze", tr(TR.EDITING_CLOZE_DELETION_CTRLANDSHIFTANDC)
@@ -472,6 +473,16 @@ class Editor:
         else:
             print("uncaught cmd", cmd)
 
+        if cmd.startswith("toggleSticky"):
+            (type, num) = cmd.split(":", 1)
+            ord = int(num)
+
+            fld = self.note.model()["flds"][ord]
+            fld["sticky"] = not fld["sticky"]
+
+            change_tracker = ChangeTracker(self.mw)
+            change_tracker.mark_basic()
+
     def mungeHTML(self, txt: str) -> str:
         return gui_hooks.editor_will_munge_html(txt, self)
 
@@ -520,6 +531,11 @@ class Editor:
             json.dumps(focusTo),
             json.dumps(self.note.id),
         )
+
+        if self.addMode:
+            sticky = [field["sticky"] for field in self.note.model()["flds"]]
+            js += " setSticky(%s);" % json.dumps(sticky)
+
         js = gui_hooks.editor_will_load_note(js, self.note, self)
         self.web.evalWithCallback(js, oncallback)
 

ts/editor/editor.scss

@@ -2,6 +2,7 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 body {
+    color: var(--text-fg);
     background-color: var(--bg-color);
 }
 
@@ -61,7 +62,7 @@ body {
     width: 16px;
     height: 16px;
     margin-top: 4px;
-    vertical-align: -.125em;
+    vertical-align: -0.125em;
 }
 
 .topbut--rounded {

ts/editor/index.ts

@@ -212,8 +212,8 @@ export class EditingArea extends HTMLDivElement {
 customElements.define("anki-editing-area", EditingArea, { extends: "div" });
 
 export class LabelContainer extends HTMLDivElement {
-    sticky: HTMLSpanElement
+    sticky: HTMLSpanElement;
-    label: HTMLSpanElement
+    label: HTMLSpanElement;
 
     constructor() {
         super();
@@ -221,6 +221,7 @@ export class LabelContainer extends HTMLDivElement {
 
         this.sticky = document.createElement("span");
         this.sticky.className = "bi bi-pin-angle-fill me-1 sticky-icon";
+        this.sticky.hidden = true;
         this.appendChild(this.sticky);
 
         this.label = document.createElement("span");
@@ -242,8 +243,15 @@ export class LabelContainer extends HTMLDivElement {
         this.label.innerText = labelName;
     }
 
+    activateSticky(initialState: boolean): void {
+        this.sticky.classList.toggle("is-active", initialState);
+        this.sticky.hidden = false;
+    }
+
     toggleSticky(): void {
-        this.sticky.classList.toggle('is-active');
+        bridgeCommand(`toggleSticky:${this.getAttribute("ord")}`, () => {
+            this.sticky.classList.toggle("is-active");
+        });
     }
 }
 
@@ -278,6 +286,7 @@ export class EditorField extends HTMLDivElement {
         switch (name) {
             case "ord":
                 this.editingArea.setAttribute("ord", newValue);
+                this.labelContainer.setAttribute("ord", newValue);
         }
     }
 
@@ -353,6 +362,12 @@ export function setFonts(fonts: [string, number, boolean][]): void {
     });
 }
 
+export function setSticky(stickies: boolean[]): void {
+    forEditorField(stickies, (field, isSticky) => {
+        field.labelContainer.activateSticky(isSticky);
+    });
+}
+
 export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void {
     document.execCommand(cmd, false, arg);
     if (!nosave) {

ts/sass/_buttons.scss

@@ -7,49 +7,51 @@ $fusion-button-border: #646464;
 $fusion-button-base-bg: #454545;
 
 .isWin {
-  button {
+    button {
-    font-size: 12px;
+        font-size: 12px;
-  }
+    }
 }
 
 .isMac {
-  button {
+    button {
-    font-size: 13px;
+        font-size: 13px;
-  }
+    }
 }
 
 .isLin {
-  button {
+    button {
-    font-size: 14px;
+        font-size: 14px;
 
-    -webkit-appearance: none;
+        -webkit-appearance: none;
-    border-radius: 3px;
+        border-radius: 3px;
-    padding: 5px;
+        padding: 5px;
-    border: 1px solid var(--border);
+        border: 1px solid var(--border);
-  }
+    }
 }
 
 .nightMode {
-  button {
+    button {
-    -webkit-appearance: none;
+        -webkit-appearance: none;
-    color: var(--text-fg);
+        color: var(--text-fg);
 
-    /* match the fusion button gradient */
+        /* match the fusion button gradient */
-    background: linear-gradient(0deg,
+        background: linear-gradient(
+            0deg,
             $fusion-button-gradient-start 0%,
-            $fusion-button-gradient-end 100%);
+            $fusion-button-gradient-end 100%
-    box-shadow: 0 0 3px $fusion-button-outline;
+        );
-    border: 1px solid $fusion-button-border;
+        box-shadow: 0 0 3px $fusion-button-outline;
+        border: 1px solid $fusion-button-border;
 
-    border-radius: 2px;
+        border-radius: 2px;
-    padding: 10px;
+        padding: 10px;
-    padding-top: 3px;
+        padding-top: 3px;
-    padding-bottom: 3px;
+        padding-bottom: 3px;
-  }
+    }
 
-  button:hover {
+    button:hover {
-    background: $fusion-button-hover-bg;
+        background: $fusion-button-hover-bg;
-  }
+    }
 }
 
 /* imitate standard macOS dark mode buttons */

ts/sass/scrollbar.scss

@@ -5,28 +5,28 @@
 @use 'buttons';
 
 @mixin night-mode {
-  &::-webkit-scrollbar {
+    &::-webkit-scrollbar {
-    background: var(--window-bg);
+        background: var(--window-bg);
 
-    &:horizontal {
+        &:horizontal {
-      height: 12px;
+            height: 12px;
+        }
+
+        &:vertical {
+            width: 12px;
+        }
     }
 
-    &:vertical {
+    &::-webkit-scrollbar-thumb {
-      width: 12px;
+        background: buttons.$fusion-button-hover-bg;
-    }
+        border-radius: 8px;
-  }
 
-  &::-webkit-scrollbar-thumb {
+        &:horizontal {
-    background: buttons.$fusion-button-hover-bg;
+            min-width: 50px;
-    border-radius: 8px;
+        }
 
-    &:horizontal {
+        &:vertical {
-      min-width: 50px;
+            min-height: 50px;
+        }
     }
-
-    &:vertical {
-      min-height: 50px;
-    }
-  }
 }