From aed38de228f4a115a997fd343ceaebdf87c47979 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 28 Jan 2021 19:13:39 +0100
Subject: [PATCH] Fix dupes, but also make sticky, and centered to draw more
 attention

---
 qt/aqt/data/web/css/editor.scss | 28 +++++++++++++++++++++++-----
 qt/aqt/data/web/js/editor.ts    | 28 +++++++++++++++-------------
 qt/aqt/editor.py                | 19 ++++++++-----------
 3 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/qt/aqt/data/web/css/editor.scss b/qt/aqt/data/web/css/editor.scss
index d9e90e1d6..96cb770e6 100644
--- a/qt/aqt/data/web/css/editor.scss
+++ b/qt/aqt/data/web/css/editor.scss
@@ -1,6 +1,10 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
+html {
+    background: var(--bg-color);
+}
+
 #fields {
     display: flex;
     flex-direction: column;
@@ -22,6 +26,10 @@
 .field {
     border: 1px solid var(--border);
     background: var(--frame-bg);
+
+    &.dupe {
+        background: var(--flag1-bg);
+    }
 }
 
 .fname {
@@ -46,6 +54,8 @@ body {
     top: 0;
     left: 0;
     padding: 2px;
+
+    background: var(--bg-color);
 }
 
 .topbuts > * {
@@ -113,12 +123,20 @@ button.highlighted {
     }
 }
 
-.dupe {
-    background: var(--flag1-bg);
-}
+#dupes {
+    position: sticky;
+    bottom: 0;
 
-#dupes a {
-    color: var(--link);
+    text-align: center;
+    background-color: var(--bg-color);
+
+    &.is-inactive {
+        display: none;
+    }
+
+    a {
+        color: var(--link);
+    }
 }
 
 .drawing {
diff --git a/qt/aqt/data/web/js/editor.ts b/qt/aqt/data/web/js/editor.ts
index 47ac209a2..8955c21d9 100644
--- a/qt/aqt/data/web/js/editor.ts
+++ b/qt/aqt/data/web/js/editor.ts
@@ -559,12 +559,15 @@ function adjustFieldAmount(amount: number): void {
     }
 }
 
-function forField<T>(values: T[], func: (value: T, field: EditorField, index: number) => void): void {
+function forField<T>(
+    values: T[],
+    func: (value: T, field: EditorField, index: number) => void
+): void {
     const fieldContainer = document.getElementById("fields");
     const fields = [...fieldContainer.children] as EditorField[];
 
     for (const [index, field] of fields.entries()) {
-        func(values[index], field, index)
+        func(values[index], field, index);
     }
 }
 
@@ -576,13 +579,20 @@ function setFields(fields: [string, string][]): void {
         .getPropertyValue("--text-fg");
 
     adjustFieldAmount(fields.length);
-    forField(fields, ([name, fieldContent], field, index) => field.initialize(index, name, color, fieldContent));
+    forField(fields, ([name, fieldContent], field, index) =>
+        field.initialize(index, name, color, fieldContent)
+    );
 
     maybeDisableButtons();
 }
 
-function setBackgrounds(cols: "dupe"[]) {
-    forField(cols, (value, field) => field.classList.toggle("dupe", value === "dupe"));
+function setBackgrounds(cols: ("dupe" | "")[]) {
+    forField(cols, (value, field) =>
+        field.editingContainer.classList.toggle("dupe", value === "dupe")
+    );
+    document
+        .querySelector("#dupes")
+        .classList.toggle("is-inactive", !cols.includes("dupe"));
 }
 
 function setFonts(fonts: [string, number, boolean][]): void {
@@ -595,14 +605,6 @@ function setNoteId(id: number): void {
     currentNoteId = id;
 }
 
-function showDupes(): void {
-    $("#dupes").show();
-}
-
-function hideDupes(): void {
-    $("#dupes").hide();
-}
-
 let pasteHTML = function (
     html: string,
     internal: boolean,
diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 4335b97bb..f99296143 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -73,8 +73,9 @@ audio = (
 
 _html = """
 <style>
-html { background: %s; }
-#topbutsOuter { background: %s; }
+:root {
+    --bg-color: %s;
+}
 </style>
 <div>
     <div id="topbutsOuter">
@@ -82,11 +83,9 @@ html { background: %s; }
     </div>
     <div id="fields">
     </div>
-</div>
-<div id="dupes" style="display:none;">
-    <a href="#" onclick="pycmd('dupes');return false;">
-%s
-    </a>
+    <div id="dupes" class="is-inactive">
+        <a href="#" onclick="pycmd('dupes');return false;">%s</a>
+    </div>
 </div>
 """
 
@@ -219,7 +218,7 @@ class Editor:
         bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
-            _html % (bgcol, bgcol, topbuts, tr(TR.EDITING_SHOW_DUPLICATES)),
+            _html % (bgcol, topbuts, tr(TR.EDITING_SHOW_DUPLICATES)),
             css=["css/editor.css"],
             js=["js/vendor/jquery.min.js", "js/editor.js"],
             context=self,
@@ -534,9 +533,7 @@ class Editor:
         err = self.note.dupeOrEmpty()
         if err == 2:
             cols[0] = "dupe"
-            self.web.eval("showDupes();")
-        else:
-            self.web.eval("hideDupes();")
+
         self.web.eval("setBackgrounds(%s);" % json.dumps(cols))
 
     def showDupes(self):