From d1bca9e4d956d889805d0e4869e84ea07c35d243 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 27 Feb 2021 23:51:20 +0100
Subject: [PATCH] Add visual elements for pinned fields

---
 ts/editor/editor.scss | 12 ++++++++++
 ts/editor/index.ts    | 52 +++++++++++++++++++++++++++++++++++--------
 2 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss
index ac5f6bc2a..2d6b9ee7f 100644
--- a/ts/editor/editor.scss
+++ b/ts/editor/editor.scss
@@ -135,3 +135,15 @@ button.highlighted {
         color: var(--link);
     }
 }
+
+.sticky-icon {
+    color: var(--bs-dark);
+
+    .nightMode & {
+        color: var(--bs-light);
+    }
+
+    &.is-active {
+        color: var(--bs-danger);
+    }
+}
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index 2a8a811a9..9d001b70e 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -211,21 +211,55 @@ export class EditingArea extends HTMLDivElement {
 
 customElements.define("anki-editing-area", EditingArea, { extends: "div" });
 
+export class LabelContainer extends HTMLDivElement {
+    sticky: HTMLSpanElement
+    label: HTMLSpanElement
+
+    constructor() {
+        super();
+        this.className = "d-flex";
+
+        this.sticky = document.createElement("span");
+        this.sticky.className = "bi bi-pin-angle-fill me-1 sticky-icon";
+        this.appendChild(this.sticky);
+
+        this.label = document.createElement("span");
+        this.label.className = "fieldname";
+        this.appendChild(this.label);
+
+        this.toggleSticky = this.toggleSticky.bind(this);
+    }
+
+    connectedCallback(): void {
+        this.sticky.addEventListener("click", this.toggleSticky);
+    }
+
+    disconnectedCallback(): void {
+        this.sticky.removeEventListener("click", this.toggleSticky);
+    }
+
+    initialize(labelName: string): void {
+        this.label.innerText = labelName;
+    }
+
+    toggleSticky(): void {
+        this.sticky.classList.toggle('is-active');
+    }
+}
+
+customElements.define("anki-label-container", LabelContainer, { extends: "div" });
+
 export class EditorField extends HTMLDivElement {
-    labelContainer: HTMLDivElement;
-    label: HTMLSpanElement;
+    labelContainer: LabelContainer;
     editingArea: EditingArea;
 
     constructor() {
         super();
-        this.labelContainer = document.createElement("div");
-        this.labelContainer.className = "fname";
+        this.labelContainer = document.createElement("div", {
+            is: "anki-label-container",
+        }) as LabelContainer;
         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;
@@ -248,7 +282,7 @@ export class EditorField extends HTMLDivElement {
     }
 
     initialize(label: string, color: string, content: string): void {
-        this.label.innerText = label;
+        this.labelContainer.initialize(label);
         this.editingArea.initialize(color, content);
     }