Merge pull request #1046 from hgiesel/sticky

Sticky icons in the editor window

qt/aqt/data/web/css/BUILD.bazel

@@ -32,6 +32,7 @@ filegroup(
         "core.css",
         "css_local",
         "editor",
+        "//qt/aqt/data/web/css/vendor",
     ],
     visibility = ["//qt:__subpackages__"],
 )

qt/aqt/data/web/css/vendor/BUILD.bazel

@@ -0,0 +1,20 @@
+load("//ts:vendor.bzl", "copy_bootstrap_css", "copy_bootstrap_icons")
+
+copy_bootstrap_css(name = "bootstrap")
+
+copy_bootstrap_icons(name = "bootstrap-icons")
+
+files = [
+    "bootstrap",
+    "bootstrap-icons",
+]
+
+directories = []
+
+filegroup(
+    name = "vendor",
+    srcs = glob(["*.css"]) +
+           ["//qt/aqt/data/web/css/vendor:{}".format(file) for file in files] +
+           ["//qt/aqt/data/web/css/vendor/{}".format(dir) for dir in directories],
+    visibility = ["//qt:__subpackages__"],
+)

qt/aqt/data/web/js/vendor/BUILD.bazel

@@ -1,4 +1,11 @@
-load("//ts:vendor.bzl", "copy_css_browser_selector", "copy_jquery", "copy_jquery_ui", "copy_protobufjs")
+load(
+    "//ts:vendor.bzl",
+    "copy_css_browser_selector",
+    "copy_jquery",
+    "copy_jquery_ui",
+    "copy_protobufjs",
+    "copy_bootstrap_js",
+)
 
 copy_jquery(name = "jquery")
 
@@ -8,11 +15,14 @@ copy_protobufjs(name = "protobufjs")
 
 copy_css_browser_selector(name = "css-browser-selector")
 
+copy_bootstrap_js(name = "bootstrap")
+
 files = [
     "jquery",
     "jquery-ui",
     "protobufjs",
     "css-browser-selector",
+    "bootstrap",
 ]
 
 directories = [

qt/aqt/editor.py

@@ -179,19 +179,16 @@ class Editor:
                 "colour",
                 tr(TR.EDITING_SET_FOREGROUND_COLOUR_F7),
                 """
-<div id="forecolor"
+<span id="forecolor" class="topbut rounded" style="background: #000"></span>
-     style="display: inline-block; background: #000; border-radius: 5px;"
+""",
-     class="topbut"
->""",
             ),
             self._addButton(
                 None,
                 "changeCol",
                 tr(TR.EDITING_CHANGE_COLOUR_F8),
                 """
-<div style="display: inline-block; border-radius: 5px;"
+<span class="topbut rounded rainbow"></span>
-     class="topbut rainbow"
+""",
->""",
             ),
             self._addButton(
                 "text_cloze", "cloze", tr(TR.EDITING_CLOZE_DELETION_CTRLANDSHIFTANDC)
@@ -222,8 +219,16 @@ class Editor:
         # then load page
         self.web.stdHtml(
             _html % (bgcol, topbuts, tr(TR.EDITING_SHOW_DUPLICATES)),
-            css=["css/editor.css"],
+            css=[
-            js=["js/vendor/jquery.min.js", "js/editor.js"],
+                "css/vendor/bootstrap.min.css",
+                "css/vendor/bootstrap-icons.css",
+                "css/editor.css",
+            ],
+            js=[
+                "js/vendor/jquery.min.js",
+                "js/vendor/bootstrap.bundle.min.js",
+                "js/editor.js",
+            ],
             context=self,
         )
         self.web.eval("preventButtonFocus();")
@@ -310,11 +315,11 @@ class Editor:
                 iconstr = self.resourceToData(icon)
             else:
                 iconstr = f"/_anki/imgs/{icon}.png"
-            imgelm = f"""<img class=topbut src="{iconstr}">"""
+            imgelm = f"""<img class="topbut" src="{iconstr}">"""
         else:
             imgelm = ""
         if label or not imgelm:
-            labelelm = f"""<span class=blabel>{label or cmd}</span>"""
+            labelelm = label or cmd
         else:
             labelelm = ""
         if id:
@@ -329,7 +334,7 @@ class Editor:
         if rightside:
             class_ = "linkb"
         else:
-            class_ = ""
+            class_ = "rounded"
         if not disables:
             class_ += " perm"
         return """<button tabindex=-1
@@ -424,10 +429,11 @@ class Editor:
     # JS->Python bridge
     ######################################################################
 
-    def onBridgeCmd(self, cmd: str) -> None:
+    def onBridgeCmd(self, cmd: str) -> Any:
         if not self.note:
             # shutdown
             return
+
         # focus lost or key/button pressed?
         if cmd.startswith("blur") or cmd.startswith("key"):
             (type, ord_str, nid_str, txt) = cmd.split(":", 3)
@@ -457,13 +463,26 @@ class Editor:
             else:
                 gui_hooks.editor_did_fire_typing_timer(self.note)
                 self.checkValid()
+
         # focused into field?
         elif cmd.startswith("focus"):
             (type, num) = cmd.split(":", 1)
             self.currentField = int(num)
             gui_hooks.editor_did_focus_field(self.note, self.currentField)
+
+        elif cmd.startswith("toggleSticky"):
+            (type, num) = cmd.split(":", 1)
+            ord = int(num)
+
+            fld = self.note.model()["flds"][ord]
+            new_state = not fld["sticky"]
+            fld["sticky"] = new_state
+
+            return new_state
+
         elif cmd in self._links:
             self._links[cmd](self)
+
         else:
             print("uncaught cmd", cmd)
 
@@ -515,6 +534,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/changeTimer.ts

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-import type { EditingArea } from ".";
+import type { EditingArea } from "./editingArea";
 
 import { getCurrentField } from ".";
 import { bridgeCommand } from "./lib";

ts/editor/editable.ts

@@ -0,0 +1,36 @@
+import { nodeIsInline } from "./helpers";
+
+function containsInlineContent(field: Element): boolean {
+    if (field.childNodes.length === 0) {
+        // for now, for all practical purposes, empty fields are in block mode
+        return false;
+    }
+
+    for (const child of field.children) {
+        if (!nodeIsInline(child)) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export class Editable extends HTMLElement {
+    set fieldHTML(content: string) {
+        this.innerHTML = content;
+
+        if (containsInlineContent(this)) {
+            this.appendChild(document.createElement("br"));
+        }
+    }
+
+    get fieldHTML(): string {
+        return containsInlineContent(this) && this.innerHTML.endsWith("<br>")
+            ? this.innerHTML.slice(0, -4) // trim trailing <br>
+            : this.innerHTML;
+    }
+
+    connectedCallback() {
+        this.setAttribute("contenteditable", "");
+    }
+}

ts/editor/editingArea.ts

@@ -0,0 +1,114 @@
+import type { Editable } from "./editable";
+
+import { bridgeCommand } from "./lib";
+import { onInput, onKey, onKeyUp } from "./inputHandlers";
+import { onFocus, onBlur } from "./focusHandlers";
+import { updateButtonState } from "./toolbar";
+
+function onPaste(evt: ClipboardEvent): void {
+    bridgeCommand("paste");
+    evt.preventDefault();
+}
+
+function onCutOrCopy(): void {
+    bridgeCommand("cutOrCopy");
+}
+
+export class EditingArea extends HTMLDivElement {
+    editable: Editable;
+    baseStyle: HTMLStyleElement;
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.className = "field";
+
+        const rootStyle = document.createElement("link");
+        rootStyle.setAttribute("rel", "stylesheet");
+        rootStyle.setAttribute("href", "./_anki/css/editable.css");
+        this.shadowRoot!.appendChild(rootStyle);
+
+        this.baseStyle = document.createElement("style");
+        this.baseStyle.setAttribute("rel", "stylesheet");
+        this.shadowRoot!.appendChild(this.baseStyle);
+
+        this.editable = document.createElement("anki-editable") as Editable;
+        this.shadowRoot!.appendChild(this.editable);
+    }
+
+    get ord(): number {
+        return Number(this.getAttribute("ord"));
+    }
+
+    set fieldHTML(content: string) {
+        this.editable.fieldHTML = content;
+    }
+
+    get fieldHTML(): string {
+        return this.editable.fieldHTML;
+    }
+
+    connectedCallback(): void {
+        this.addEventListener("keydown", onKey);
+        this.addEventListener("keyup", onKeyUp);
+        this.addEventListener("input", onInput);
+        this.addEventListener("focus", onFocus);
+        this.addEventListener("blur", onBlur);
+        this.addEventListener("paste", onPaste);
+        this.addEventListener("copy", onCutOrCopy);
+        this.addEventListener("oncut", onCutOrCopy);
+        this.addEventListener("mouseup", updateButtonState);
+
+        const baseStyleSheet = this.baseStyle.sheet as CSSStyleSheet;
+        baseStyleSheet.insertRule("anki-editable {}", 0);
+    }
+
+    disconnectedCallback(): void {
+        this.removeEventListener("keydown", onKey);
+        this.removeEventListener("keyup", onKeyUp);
+        this.removeEventListener("input", onInput);
+        this.removeEventListener("focus", onFocus);
+        this.removeEventListener("blur", onBlur);
+        this.removeEventListener("paste", onPaste);
+        this.removeEventListener("copy", onCutOrCopy);
+        this.removeEventListener("oncut", onCutOrCopy);
+        this.removeEventListener("mouseup", updateButtonState);
+    }
+
+    initialize(color: string, content: string): void {
+        this.setBaseColor(color);
+        this.editable.fieldHTML = content;
+    }
+
+    setBaseColor(color: string): void {
+        const styleSheet = this.baseStyle.sheet as CSSStyleSheet;
+        const firstRule = styleSheet.cssRules[0] as CSSStyleRule;
+        firstRule.style.color = color;
+    }
+
+    setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
+        const styleSheet = this.baseStyle.sheet as CSSStyleSheet;
+        const firstRule = styleSheet.cssRules[0] as CSSStyleRule;
+        firstRule.style.fontFamily = fontFamily;
+        firstRule.style.fontSize = fontSize;
+        firstRule.style.direction = direction;
+    }
+
+    isRightToLeft(): boolean {
+        const styleSheet = this.baseStyle.sheet as CSSStyleSheet;
+        const firstRule = styleSheet.cssRules[0] as CSSStyleRule;
+        return firstRule.style.direction === "rtl";
+    }
+
+    getSelection(): Selection {
+        return this.shadowRoot!.getSelection()!;
+    }
+
+    focusEditable(): void {
+        this.editable.focus();
+    }
+
+    blurEditable(): void {
+        this.editable.blur();
+    }
+}

ts/editor/editor.scss

@@ -1,27 +1,15 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-html {
+body {
-    background: var(--bg-color);
+    color: var(--text-fg);
+    background-color: var(--bg-color);
 }
 
 #fields {
     display: flex;
     flex-direction: column;
     margin: 5px;
-
-    & > *,
-    & > * > * {
-        margin: 1px 0;
-
-        &:first-child {
-            margin-top: 0;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
 }
 
 .field {
@@ -38,10 +26,6 @@ html {
     padding: 0;
 }
 
-body {
-    margin: 0;
-}
-
 #topbutsOuter {
     display: flex;
     flex-wrap: wrap;
@@ -54,6 +38,7 @@ body {
     padding: 2px;
 
     background: var(--bg-color);
+    font-size: 13px;
 }
 
 .topbuts {
@@ -73,9 +58,11 @@ body {
 }
 
 .topbut {
+    display: inline-block;
     width: 16px;
     height: 16px;
     margin-top: 4px;
+    vertical-align: -0.125em;
 }
 
 .rainbow {
@@ -122,10 +109,11 @@ button.highlighted {
 
     #topbutsright & {
         border-bottom: 3px solid black;
-    }
+        border-radius: 3px;
 
-    .nightMode #topbutsright & {
+        .nightMode & {
-        border-bottom: 3px solid white;
+            border-bottom-color: white;
+        }
     }
 }
 
@@ -144,3 +132,16 @@ button.highlighted {
         color: var(--link);
     }
 }
+
+.icon {
+    cursor: pointer;
+    color: var(--text-fg);
+
+    &.is-inactive::before {
+        opacity: 0.1;
+    }
+
+    &.icon--hover::before {
+        opacity: 0.5;
+    }
+}

ts/editor/editorField.ts

@@ -0,0 +1,45 @@
+import type { EditingArea } from "./editingArea";
+import type { LabelContainer } from "./labelContainer";
+
+export class EditorField extends HTMLDivElement {
+    labelContainer: LabelContainer;
+    editingArea: EditingArea;
+
+    constructor() {
+        super();
+        this.labelContainer = document.createElement("div", {
+            is: "anki-label-container",
+        }) as LabelContainer;
+        this.appendChild(this.labelContainer);
+
+        this.editingArea = document.createElement("div", {
+            is: "anki-editing-area",
+        }) as EditingArea;
+        this.appendChild(this.editingArea);
+    }
+
+    static get observedAttributes(): string[] {
+        return ["ord"];
+    }
+
+    set ord(n: number) {
+        this.setAttribute("ord", String(n));
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
+        switch (name) {
+            case "ord":
+                this.editingArea.setAttribute("ord", newValue);
+                this.labelContainer.setAttribute("ord", newValue);
+        }
+    }
+
+    initialize(label: string, color: string, content: string): void {
+        this.labelContainer.initialize(label);
+        this.editingArea.initialize(color, content);
+    }
+
+    setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
+        this.editingArea.setBaseStyling(fontFamily, fontSize, direction);
+    }
+}

ts/editor/focusHandlers.ts

@@ -1,11 +1,11 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-import type { EditingArea } from ".";
+import type { EditingArea } from "./editingArea";
 
+import { saveField } from "./changeTimer";
 import { bridgeCommand } from "./lib";
 import { enableButtons, disableButtons } from "./toolbar";
-import { saveField } from "./changeTimer";
 
 export function onFocus(evt: FocusEvent): void {
     const currentField = evt.currentTarget as EditingArea;

ts/editor/helpers.ts

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-import type { EditingArea } from ".";
+import type { EditingArea } from "./editingArea";
 
 export function nodeIsElement(node: Node): node is Element {
     return node.nodeType === Node.ELEMENT_NODE;

ts/editor/index.ts

@@ -1,13 +1,15 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-import { nodeIsInline, caretToEnd } from "./helpers";
+import { caretToEnd } from "./helpers";
-import { bridgeCommand } from "./lib";
 import { saveField } from "./changeTimer";
 import { filterHTML } from "./htmlFilter";
 import { updateButtonState } from "./toolbar";
-import { onInput, onKey, onKeyUp } from "./inputHandlers";
+
-import { onFocus, onBlur } from "./focusHandlers";
+import { EditorField } from "./editorField";
+import { LabelContainer } from "./labelContainer";
+import { EditingArea } from "./editingArea";
+import { Editable } from "./editable";
 
 export { setNoteId, getNoteId } from "./noteId";
 export { preventButtonFocus, toggleEditorButton, setFGButton } from "./toolbar";
@@ -23,6 +25,11 @@ declare global {
     }
 }
 
+customElements.define("anki-editable", Editable);
+customElements.define("anki-editing-area", EditingArea, { extends: "div" });
+customElements.define("anki-label-container", LabelContainer, { extends: "div" });
+customElements.define("anki-editor-field", EditorField, { extends: "div" });
+
 export function getCurrentField(): EditingArea | null {
     return document.activeElement instanceof EditingArea
         ? document.activeElement
@@ -63,202 +70,6 @@ export function pasteHTML(
     }
 }
 
-function onPaste(evt: ClipboardEvent): void {
-    bridgeCommand("paste");
-    evt.preventDefault();
-}
-
-function onCutOrCopy(): boolean {
-    bridgeCommand("cutOrCopy");
-    return true;
-}
-
-function containsInlineContent(field: Element): boolean {
-    if (field.childNodes.length === 0) {
-        // for now, for all practical purposes, empty fields are in block mode
-        return false;
-    }
-
-    for (const child of field.children) {
-        if (!nodeIsInline(child)) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-class Editable extends HTMLElement {
-    set fieldHTML(content: string) {
-        this.innerHTML = content;
-
-        if (containsInlineContent(this)) {
-            this.appendChild(document.createElement("br"));
-        }
-    }
-
-    get fieldHTML(): string {
-        return containsInlineContent(this) && this.innerHTML.endsWith("<br>")
-            ? this.innerHTML.slice(0, -4) // trim trailing <br>
-            : this.innerHTML;
-    }
-
-    connectedCallback() {
-        this.setAttribute("contenteditable", "");
-    }
-}
-
-customElements.define("anki-editable", Editable);
-
-export class EditingArea extends HTMLDivElement {
-    editable: Editable;
-    baseStyle: HTMLStyleElement;
-
-    constructor() {
-        super();
-        this.attachShadow({ mode: "open" });
-        this.className = "field";
-
-        const rootStyle = document.createElement("link");
-        rootStyle.setAttribute("rel", "stylesheet");
-        rootStyle.setAttribute("href", "./_anki/css/editable.css");
-        this.shadowRoot!.appendChild(rootStyle);
-
-        this.baseStyle = document.createElement("style");
-        this.baseStyle.setAttribute("rel", "stylesheet");
-        this.shadowRoot!.appendChild(this.baseStyle);
-
-        this.editable = document.createElement("anki-editable") as Editable;
-        this.shadowRoot!.appendChild(this.editable);
-    }
-
-    get ord(): number {
-        return Number(this.getAttribute("ord"));
-    }
-
-    set fieldHTML(content: string) {
-        this.editable.fieldHTML = content;
-    }
-
-    get fieldHTML(): string {
-        return this.editable.fieldHTML;
-    }
-
-    connectedCallback(): void {
-        this.addEventListener("keydown", onKey);
-        this.addEventListener("keyup", onKeyUp);
-        this.addEventListener("input", onInput);
-        this.addEventListener("focus", onFocus);
-        this.addEventListener("blur", onBlur);
-        this.addEventListener("paste", onPaste);
-        this.addEventListener("copy", onCutOrCopy);
-        this.addEventListener("oncut", onCutOrCopy);
-        this.addEventListener("mouseup", updateButtonState);
-
-        const baseStyleSheet = this.baseStyle.sheet as CSSStyleSheet;
-        baseStyleSheet.insertRule("anki-editable {}", 0);
-    }
-
-    disconnectedCallback(): void {
-        this.removeEventListener("keydown", onKey);
-        this.removeEventListener("keyup", onKeyUp);
-        this.removeEventListener("input", onInput);
-        this.removeEventListener("focus", onFocus);
-        this.removeEventListener("blur", onBlur);
-        this.removeEventListener("paste", onPaste);
-        this.removeEventListener("copy", onCutOrCopy);
-        this.removeEventListener("oncut", onCutOrCopy);
-        this.removeEventListener("mouseup", updateButtonState);
-    }
-
-    initialize(color: string, content: string): void {
-        this.setBaseColor(color);
-        this.editable.fieldHTML = content;
-    }
-
-    setBaseColor(color: string): void {
-        const styleSheet = this.baseStyle.sheet as CSSStyleSheet;
-        const firstRule = styleSheet.cssRules[0] as CSSStyleRule;
-        firstRule.style.color = color;
-    }
-
-    setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
-        const styleSheet = this.baseStyle.sheet as CSSStyleSheet;
-        const firstRule = styleSheet.cssRules[0] as CSSStyleRule;
-        firstRule.style.fontFamily = fontFamily;
-        firstRule.style.fontSize = fontSize;
-        firstRule.style.direction = direction;
-    }
-
-    isRightToLeft(): boolean {
-        const styleSheet = this.baseStyle.sheet as CSSStyleSheet;
-        const firstRule = styleSheet.cssRules[0] as CSSStyleRule;
-        return firstRule.style.direction === "rtl";
-    }
-
-    getSelection(): Selection {
-        return this.shadowRoot!.getSelection()!;
-    }
-
-    focusEditable(): void {
-        this.editable.focus();
-    }
-
-    blurEditable(): void {
-        this.editable.blur();
-    }
-}
-
-customElements.define("anki-editing-area", EditingArea, { extends: "div" });
-
-export class EditorField extends HTMLDivElement {
-    labelContainer: HTMLDivElement;
-    label: HTMLSpanElement;
-    editingArea: EditingArea;
-
-    constructor() {
-        super();
-        this.labelContainer = document.createElement("div");
-        this.labelContainer.className = "fname";
-        this.appendChild(this.labelContainer);
-
-        this.label = document.createElement("span");
-        this.label.className = "fieldname";
-        this.labelContainer.appendChild(this.label);
-
-        this.editingArea = document.createElement("div", {
-            is: "anki-editing-area",
-        }) as EditingArea;
-        this.appendChild(this.editingArea);
-    }
-
-    static get observedAttributes(): string[] {
-        return ["ord"];
-    }
-
-    set ord(n: number) {
-        this.setAttribute("ord", String(n));
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
-        switch (name) {
-            case "ord":
-                this.editingArea.setAttribute("ord", newValue);
-        }
-    }
-
-    initialize(label: string, color: string, content: string): void {
-        this.label.innerText = label;
-        this.editingArea.initialize(color, content);
-    }
-
-    setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
-        this.editingArea.setBaseStyling(fontFamily, fontSize, direction);
-    }
-}
-
-customElements.define("anki-editor-field", EditorField, { extends: "div" });
-
 function adjustFieldAmount(amount: number): void {
     const fieldsContainer = document.getElementById("fields")!;
 
@@ -304,7 +115,7 @@ export function setFields(fields: [string, string][]): void {
     );
 }
 
-export function setBackgrounds(cols: ("dupe" | "")[]) {
+export function setBackgrounds(cols: ("dupe" | "")[]): void {
     forEditorField(cols, (field, value) =>
         field.editingArea.classList.toggle("dupe", value === "dupe")
     );
@@ -319,6 +130,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/editor/inputHandlers.ts

@@ -1,7 +1,7 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-import { EditingArea } from ".";
+import { EditingArea } from "./editingArea";
 import { caretToEnd, nodeIsElement } from "./helpers";
 import { triggerChangeTimer } from "./changeTimer";
 import { updateButtonState } from "./toolbar";

ts/editor/labelContainer.ts

@@ -0,0 +1,67 @@
+import { bridgeCommand } from "./lib";
+
+function removeHoverIcon(evt: Event): void {
+    const icon = evt.currentTarget as HTMLElement;
+    icon.classList.remove("icon--hover");
+}
+
+function hoverIcon(evt: Event): void {
+    const icon = evt.currentTarget as HTMLElement;
+    icon.classList.add("icon--hover");
+}
+
+export class LabelContainer extends HTMLDivElement {
+    sticky: HTMLSpanElement;
+    label: HTMLSpanElement;
+
+    constructor() {
+        super();
+        this.className = "d-flex justify-content-between";
+
+        this.label = document.createElement("span");
+        this.label.className = "fieldname";
+        this.appendChild(this.label);
+
+        this.sticky = document.createElement("span");
+        this.sticky.className = "bi me-1 bi-pin-angle icon";
+        this.sticky.hidden = true;
+        this.appendChild(this.sticky);
+
+        this.toggleSticky = this.toggleSticky.bind(this);
+    }
+
+    connectedCallback(): void {
+        this.sticky.addEventListener("click", this.toggleSticky);
+        this.sticky.addEventListener("mouseenter", hoverIcon);
+        this.sticky.addEventListener("mouseleave", removeHoverIcon);
+    }
+
+    disconnectedCallback(): void {
+        this.sticky.removeEventListener("click", this.toggleSticky);
+        this.sticky.removeEventListener("mouseenter", hoverIcon);
+        this.sticky.removeEventListener("mouseleave", 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 {
+        bridgeCommand(
+            `toggleSticky:${this.getAttribute("ord")}`,
+            (newState: boolean): void => {
+                this.setSticky(newState);
+            }
+        );
+        removeHoverIcon(evt);
+    }
+}

ts/licenses.json

@@ -99,6 +99,21 @@
         "path": "node_modules/protobufjs/node_modules/@types/node",
         "licenseFile": "node_modules/protobufjs/node_modules/@types/node/LICENSE"
     },
+    "bootstrap-icons@1.4.0": {
+        "licenses": "MIT",
+        "repository": "https://github.com/twbs/icons",
+        "publisher": "mdo",
+        "path": "node_modules/bootstrap-icons",
+        "licenseFile": "node_modules/bootstrap-icons/LICENSE.md"
+    },
+    "bootstrap@5.0.0-beta2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/twbs/bootstrap",
+        "publisher": "The Bootstrap Authors",
+        "url": "https://github.com/twbs/bootstrap/graphs/contributors",
+        "path": "node_modules/bootstrap",
+        "licenseFile": "node_modules/bootstrap/LICENSE"
+    },
     "commander@2.20.3": {
         "licenses": "MIT",
         "repository": "https://github.com/tj/commander.js",

ts/package.json

@@ -50,6 +50,8 @@
     },
     "dependencies": {
         "@fluent/bundle": "^0.15.1",
+        "bootstrap": "^5.0.0-beta2",
+        "bootstrap-icons": "^1.4.0",
         "css-browser-selector": "^0.6.5",
         "d3": "^6.5.0",
         "intl-pluralrules": "^1.2.2",

ts/sass/_buttons.scss

@@ -35,9 +35,11 @@ $fusion-button-base-bg: #454545;
         color: var(--text-fg);
 
         /* 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;
 

ts/vendor.bzl

@@ -94,3 +94,38 @@ def copy_css_browser_selector(name = "css-browser-selector", visibility = ["//vi
         ],
         visibility = visibility,
     )
+
+def copy_bootstrap_js(name = "bootstrap-js", visibility = ["//visibility:public"]):
+    vendor_js_lib(
+        name = name,
+        pkg = _pkg_from_name(name),
+        include = [
+            "dist/js/bootstrap.bundle.min.js",
+        ],
+        strip_prefix = "dist/js/",
+        visibility = visibility,
+    )
+
+def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:public"]):
+    vendor_js_lib(
+        name = name,
+        pkg = _pkg_from_name(name),
+        include = [
+            "dist/css/bootstrap.min.css",
+        ],
+        strip_prefix = "dist/css/",
+        visibility = visibility,
+    )
+
+def copy_bootstrap_icons(name = "bootstrap-icons", visibility = ["//visibility:public"]):
+    vendor_js_lib(
+        name = name,
+        pkg = _pkg_from_name(name),
+        include = [
+            "font/bootstrap-icons.css",
+            "font/fonts/bootstrap-icons.woff",
+            "font/fonts/bootstrap-icons.woff2",
+        ],
+        strip_prefix = "font/",
+        visibility = visibility,
+    )

ts/yarn.lock

@@ -699,6 +699,16 @@ bluebird@^3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+bootstrap-icons@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.4.0.tgz#ea08e2c8bc1535576ad267312cca9ee84ea73343"
+  integrity sha512-EynaOv/G/X/sQgPUqkdLJoxPrWk73wwsVjVR3cDNYO0jMS58poq7DOC2CraBWlBt1AberEmt0blfw4ony2/ZIg==
+
+bootstrap@^5.0.0-beta2:
+  version "5.0.0-beta2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta2.tgz#ab1504a12807fa58e5e41408e35fcea42461e84b"
+  integrity sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"