diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 0b66a490d..92842da1c 100644
--- a/qt/aqt/editor.py
+++ b/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),
"""
-"""
+""",
),
self._addButton(
None,
@@ -188,7 +189,7 @@ class Editor:
tr(TR.EDITING_CHANGE_COLOUR_F8),
"""
-"""
+""",
),
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)
diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss
index 2d6b9ee7f..f7c151420 100644
--- a/ts/editor/editor.scss
+++ b/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 {
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index 9d001b70e..d1d9596de 100644
--- a/ts/editor/index.ts
+++ b/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
- label: HTMLSpanElement
+ sticky: 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) {
diff --git a/ts/sass/_buttons.scss b/ts/sass/_buttons.scss
index 7a6556b38..d0a96de75 100644
--- a/ts/sass/_buttons.scss
+++ b/ts/sass/_buttons.scss
@@ -7,49 +7,51 @@ $fusion-button-border: #646464;
$fusion-button-base-bg: #454545;
.isWin {
- button {
- font-size: 12px;
- }
+ button {
+ font-size: 12px;
+ }
}
.isMac {
- button {
- font-size: 13px;
- }
+ button {
+ font-size: 13px;
+ }
}
.isLin {
- button {
- font-size: 14px;
+ button {
+ font-size: 14px;
- -webkit-appearance: none;
- border-radius: 3px;
- padding: 5px;
- border: 1px solid var(--border);
- }
+ -webkit-appearance: none;
+ border-radius: 3px;
+ padding: 5px;
+ border: 1px solid var(--border);
+ }
}
.nightMode {
- button {
- -webkit-appearance: none;
- color: var(--text-fg);
+ button {
+ -webkit-appearance: none;
+ color: var(--text-fg);
- /* match the fusion button gradient */
- background: linear-gradient(0deg,
+ /* match the fusion button gradient */
+ background: linear-gradient(
+ 0deg,
$fusion-button-gradient-start 0%,
- $fusion-button-gradient-end 100%);
- box-shadow: 0 0 3px $fusion-button-outline;
- border: 1px solid $fusion-button-border;
+ $fusion-button-gradient-end 100%
+ );
+ box-shadow: 0 0 3px $fusion-button-outline;
+ border: 1px solid $fusion-button-border;
- border-radius: 2px;
- padding: 10px;
- padding-top: 3px;
- padding-bottom: 3px;
- }
+ border-radius: 2px;
+ padding: 10px;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ }
- button:hover {
- background: $fusion-button-hover-bg;
- }
+ button:hover {
+ background: $fusion-button-hover-bg;
+ }
}
/* imitate standard macOS dark mode buttons */
diff --git a/ts/sass/scrollbar.scss b/ts/sass/scrollbar.scss
index fe24c769a..714d19b03 100644
--- a/ts/sass/scrollbar.scss
+++ b/ts/sass/scrollbar.scss
@@ -5,28 +5,28 @@
@use 'buttons';
@mixin night-mode {
- &::-webkit-scrollbar {
- background: var(--window-bg);
+ &::-webkit-scrollbar {
+ background: var(--window-bg);
- &:horizontal {
- height: 12px;
+ &:horizontal {
+ height: 12px;
+ }
+
+ &:vertical {
+ width: 12px;
+ }
}
- &:vertical {
- width: 12px;
- }
- }
+ &::-webkit-scrollbar-thumb {
+ background: buttons.$fusion-button-hover-bg;
+ border-radius: 8px;
- &::-webkit-scrollbar-thumb {
- background: buttons.$fusion-button-hover-bg;
- border-radius: 8px;
+ &:horizontal {
+ min-width: 50px;
+ }
- &:horizontal {
- min-width: 50px;
+ &:vertical {
+ min-height: 50px;
+ }
}
-
- &:vertical {
- min-height: 50px;
- }
- }
}