From 8593ab3c4c42df471853bd8a06b7477eda2a4b7b Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sun, 28 Feb 2021 01:17:42 +0100 Subject: [PATCH] Connect icons to sticky fields values --- qt/aqt/editor.py | 20 ++++++++++++-- ts/editor/editor.scss | 3 ++- ts/editor/index.ts | 21 ++++++++++++--- ts/sass/_buttons.scss | 60 ++++++++++++++++++++++-------------------- ts/sass/scrollbar.scss | 36 ++++++++++++------------- 5 files changed, 87 insertions(+), 53 deletions(-) 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; - } - } }