fix: finished version notif dialog

assets/translations/README.md

@@ -6,15 +6,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 | Locale | Translated keys | Based on |
 | ------ | --------------- | :------: |
-| [`en_US`](./en_US.json) | 130 (default locale) |  |
-| [`de_DE`](./de_DE.json) | 🚫 `125/130` (96.2%) | ─ |
-| [`en_UK`](./en_UK.json) | ✅ `130/130` (100.0%) | `en_US` |
-| [`es_ES`](./es_ES.json) | 🚫 `125/130` (96.2%) | ─ |
-| [`fr_FR`](./fr_FR.json) | 🚫 `125/130` (96.2%) | ─ |
-| [`hi_IN`](./hi_IN.json) | 🚫 `125/130` (96.2%) | ─ |
-| [`ja_JA`](./ja_JA.json) | 🚫 `125/130` (96.2%) | ─ |
-| [`pt_BR`](./pt_BR.json) | 🚫 `125/130` (96.2%) | ─ |
-| [`zh_CN`](./zh_CN.json) | 🚫 `125/130` (96.2%) | ─ |
+| [`en_US`](./en_US.json) | 133 (default locale) |  |
+| [`de_DE`](./de_DE.json) | 🚫 `125/133` (94.0%) | ─ |
+| [`en_UK`](./en_UK.json) | ✅ `133/133` (100.0%) | `en_US` |
+| [`es_ES`](./es_ES.json) | 🚫 `125/133` (94.0%) | ─ |
+| [`fr_FR`](./fr_FR.json) | 🚫 `125/133` (94.0%) | ─ |
+| [`hi_IN`](./hi_IN.json) | 🚫 `125/133` (94.0%) | ─ |
+| [`ja_JA`](./ja_JA.json) | 🚫 `125/133` (94.0%) | ─ |
+| [`pt_BR`](./pt_BR.json) | 🚫 `125/133` (94.0%) | ─ |
+| [`zh_CN`](./zh_CN.json) | 🚫 `125/133` (94.0%) | ─ |
 
 <br>
 
@@ -25,86 +25,107 @@ This means you need to manually check against the base translations for missing
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 5 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
 | `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
-| `ignore_for_24h` | `Ignore for 24h` |
+| `reenable_in_config_menu` | `(can be re-enabled in the configuration menu)` |
+| `close_and_ignore_for_24h` | `Close and ignore for 24h` |
+| `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
+| `collapse_release_notes` | `Click to collapse the latest release notes` |
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 5 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
 | `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
-| `ignore_for_24h` | `Ignore for 24h` |
+| `reenable_in_config_menu` | `(can be re-enabled in the configuration menu)` |
+| `close_and_ignore_for_24h` | `Close and ignore for 24h` |
+| `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
+| `collapse_release_notes` | `Click to collapse the latest release notes` |
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 5 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
 | `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
-| `ignore_for_24h` | `Ignore for 24h` |
+| `reenable_in_config_menu` | `(can be re-enabled in the configuration menu)` |
+| `close_and_ignore_for_24h` | `Close and ignore for 24h` |
+| `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
+| `collapse_release_notes` | `Click to collapse the latest release notes` |
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 5 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
 | `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
-| `ignore_for_24h` | `Ignore for 24h` |
+| `reenable_in_config_menu` | `(can be re-enabled in the configuration menu)` |
+| `close_and_ignore_for_24h` | `Close and ignore for 24h` |
+| `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
+| `collapse_release_notes` | `Click to collapse the latest release notes` |
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 5 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
 | `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
-| `ignore_for_24h` | `Ignore for 24h` |
+| `reenable_in_config_menu` | `(can be re-enabled in the configuration menu)` |
+| `close_and_ignore_for_24h` | `Close and ignore for 24h` |
+| `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
+| `collapse_release_notes` | `Click to collapse the latest release notes` |
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 5 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
 | `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
-| `ignore_for_24h` | `Ignore for 24h` |
+| `reenable_in_config_menu` | `(can be re-enabled in the configuration menu)` |
+| `close_and_ignore_for_24h` | `Close and ignore for 24h` |
+| `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
+| `collapse_release_notes` | `Click to collapse the latest release notes` |
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 5 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
 | `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
-| `ignore_for_24h` | `Ignore for 24h` |
+| `reenable_in_config_menu` | `(can be re-enabled in the configuration menu)` |
+| `close_and_ignore_for_24h` | `Close and ignore for 24h` |
+| `close_and_ignore_until_reenabled` | `Close and ignore until re-enabled` |
 | `expand_release_notes` | `Click to expand the latest release notes` |
+| `collapse_release_notes` | `Click to collapse the latest release notes` |
 
 <br></details>

assets/translations/en_US.json

@@ -89,8 +89,11 @@
     "new_version_available": "A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3",
     "open_update_page_install_manually": "Install on %1",
     "disable_update_check": "Disable automatic update checks",
-    "ignore_for_24h": "Ignore for 24h",
+    "reenable_in_config_menu": "(can be re-enabled in the configuration menu)",
+    "close_and_ignore_for_24h": "Close and ignore for 24h",
+    "close_and_ignore_until_reenabled": "Close and ignore until re-enabled",
     "expand_release_notes": "Click to expand the latest release notes",
+    "collapse_release_notes": "Click to collapse the latest release notes",
 
     "feature_category_layout": "Layout",
     "feature_category_songLists": "Song Lists",

src/components/BytmDialog.css

@@ -10,26 +10,6 @@
   --bytm-dialog-border-radius: 10px;
 }
 
-#bytm-cfg-dialog-bg {
-  --bytm-dialog-height-max: 750px;
-  --bytm-dialog-width-max: 1000px;
-}
-
-#bytm-changelog-dialog-bg {
-  --bytm-dialog-height-max: 800px;
-  --bytm-dialog-width-max: 800px;
-}
-
-#bytm-export-dialog-bg, #bytm-import-dialog-bg {
-  --bytm-dialog-height-max: 500px;
-  --bytm-dialog-width-max: 600px;
-}
-
-#bytm-feat-help-dialog-bg {
-  --bytm-dialog-height-max: 400px;
-  --bytm-dialog-width-max: 600px;
-}
-
 .bytm-dialog-bg {
   display: block;
   position: fixed;
@@ -42,13 +22,14 @@
 }
 
 .bytm-dialog {
-  position: fixed;
+  --calc-max-height: calc(min(100vh - 40px, var(--bytm-dialog-height-max)));
+  position: absolute;
   display: flex;
   flex-direction: column;
   width: calc(min(100% - 60px, var(--bytm-dialog-width-max)));
   border-radius: var(--bytm-dialog-border-radius);
   height: auto;
-  max-height: calc(min(100% - 40px, var(--bytm-dialog-height-max)));
+  max-height: var(--calc-max-height);
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -58,7 +39,7 @@
 }
 
 .bytm-dialog-body {
-  font-size: 1.4rem;
+  font-size: 1.5rem;
   padding: 20px;
 }
 
@@ -90,6 +71,15 @@
   padding: 10px 15px;
 }
 
+.bytm-dialog-header-pad {
+  content: " ";
+  min-height: 32px;
+}
+
+.bytm-dialog-header-pad.small {
+  min-height: 24px;
+}
+
 .bytm-dialog-titlecont {
   display: flex;
   align-items: center;

src/components/BytmDialog.ts

@@ -21,7 +21,7 @@ export interface BytmDialogOptions {
   /** Whether the dialog should be destroyed when it's closed - defaults to false */
   destroyOnClose?: boolean;
   /** Whether the menu should have a smaller overall appearance - defaults to false */
-  smallMenu?: boolean;
+  smallDialog?: boolean;
   /** Called to render the body of the dialog */
   renderBody: () => HTMLElement | Promise<HTMLElement>;
   /** Called to render the header of the dialog - leave undefined for a blank header */
@@ -239,7 +239,7 @@ export class BytmDialog extends NanoEmitter<{
 
     const headerWrapperEl = document.createElement("div");
     headerWrapperEl.classList.add("bytm-dialog-header");
-    this.options.smallMenu && headerWrapperEl.classList.add("small");
+    this.options.smallDialog && headerWrapperEl.classList.add("small");
 
     if(header) {
       const headerTitleWrapperEl = document.createElement("div");
@@ -250,13 +250,17 @@ export class BytmDialog extends NanoEmitter<{
       headerTitleWrapperEl.appendChild(header instanceof Promise ? await header : header);
       headerWrapperEl.appendChild(headerTitleWrapperEl);
     }
-    else
-      headerWrapperEl.appendChild(document.createElement("div"));
+    else {
+      // insert element to pad the header height
+      const padEl = document.createElement("div");
+      padEl.classList.add("bytm-dialog-header-pad", this.options.smallDialog ? "small" : "");
+      headerWrapperEl.appendChild(padEl);
+    }
 
     if(this.options.closeBtnEnabled) {
       const closeBtnEl = document.createElement("img");
       closeBtnEl.classList.add("bytm-dialog-close");
-      this.options.smallMenu && closeBtnEl.classList.add("small");
+      this.options.smallDialog && closeBtnEl.classList.add("small");
       closeBtnEl.src = await getResourceUrl("img-close");
       closeBtnEl.role = "button";
       closeBtnEl.tabIndex = 0;
@@ -271,7 +275,7 @@ export class BytmDialog extends NanoEmitter<{
     const menuBodyElem = document.createElement("div");
     menuBodyElem.id = `bytm-${this.id}-dialog-body`;
     menuBodyElem.classList.add("bytm-dialog-body");
-    this.options.smallMenu && menuBodyElem.classList.add("small");
+    this.options.smallDialog && menuBodyElem.classList.add("small");
 
     const body = this.options.renderBody();
 

src/components/toggle.ts

@@ -9,8 +9,8 @@ export interface ToggleProps {
   initialValue?: boolean;
   /** If unspecified, a random ID is generated */
   id?: string;
-  /** Position of the label relative to the toggle */
-  labelPos?: "left" | "right";
+  /** Toggle label off or change position of the label relative to the toggle */
+  labelPos?: "off" | "left" | "right";
 }
 
 /** Creates a simple toggle element */
@@ -26,11 +26,13 @@ export async function createToggle({
   wrapperEl.tabIndex = 0;
   wrapperEl.ariaValueText = t(`toggled_${initialValue ? "on" : "off"}`);
 
-  const labelEl = document.createElement("label");
-  labelEl.classList.add("bytm-toggle-label");
-  labelEl.textContent = t(`toggled_${initialValue ? "on" : "off"}`);
-  if(id)
-    labelEl.htmlFor = `bytm-toggle-${id}`;
+  const labelEl = labelPos !== "off" && document.createElement("label");
+  if(labelEl) {
+    labelEl.classList.add("bytm-toggle-label");
+    labelEl.textContent = t(`toggled_${initialValue ? "on" : "off"}`);
+    if(id)
+      labelEl.htmlFor = `bytm-toggle-${id}`;
+  }
 
   const toggleEl = document.createElement("input");
   toggleEl.classList.add("bytm-toggle");
@@ -45,7 +47,8 @@ export async function createToggle({
     e.stopPropagation();
 
     onChange(toggleEl.checked);
-    labelEl.textContent = wrapperEl.ariaValueText = t(`toggled_${toggleEl.checked ? "on" : "off"}`);
+    if(labelEl)
+      labelEl.textContent = wrapperEl.ariaValueText = t(`toggled_${toggleEl.checked ? "on" : "off"}`);
   };
 
   toggleEl.addEventListener("change", toggleElClicked);
@@ -56,9 +59,9 @@ export async function createToggle({
     }
   });
 
-  labelPos === "left" && wrapperEl.appendChild(labelEl);
+  labelEl && labelPos === "left" && wrapperEl.appendChild(labelEl);
   wrapperEl.appendChild(toggleEl);
-  labelPos === "right" && wrapperEl.appendChild(labelEl);
+  labelEl && labelPos === "right" && wrapperEl.appendChild(labelEl);
 
   return wrapperEl;
 }

src/config.ts

@@ -84,7 +84,7 @@ export async function initConfig() {
   return data;
 }
 
-/** Returns the current feature config from the in-memory cache */
+/** Returns the current feature config from the in-memory cache as a copy */
 export function getFeatures() {
   return cfgMgr.getData();
 }

src/dialogs/dialogs.css

@@ -1,3 +1,23 @@
+#bytm-cfg-dialog-bg {
+  --bytm-dialog-height-max: 750px;
+  --bytm-dialog-width-max: 1000px;
+}
+
+#bytm-changelog-dialog-bg {
+  --bytm-dialog-height-max: 800px;
+  --bytm-dialog-width-max: 800px;
+}
+
+#bytm-export-dialog-bg, #bytm-import-dialog-bg {
+  --bytm-dialog-height-max: 500px;
+  --bytm-dialog-width-max: 600px;
+}
+
+#bytm-feat-help-dialog-bg {
+  --bytm-dialog-height-max: 400px;
+  --bytm-dialog-width-max: 600px;
+}
+
 .bytm-dialog-body p {
   overflow-wrap: break-word;
 }
@@ -16,15 +36,18 @@
 }
 
 #bytm-disable-update-check-wrapper {
-  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  margin-top: 35px;
 }
 
 #bytm-disable-update-check-wrapper label {
-  padding-left: 8px;
+  padding-left: 12px;
 }
 
 #bytm-version-notif-changelog-cont {
-  max-height: 400px;
+  max-height: calc(max(var(--calc-max-height) - 280px, 0px));
   overflow-y: auto;
   margin: 10px 0px;
 }
@@ -32,3 +55,14 @@
 #bytm-version-notif-changelog-details {
   margin-top: 15px;
 }
+
+.bytm-disable-update-check-toggle-label-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.bytm-secondary-label {
+  padding-left: 12px;
+  font-size: 1.3rem;
+}

src/dialogs/versionNotif.ts

@@ -1,6 +1,6 @@
 import { host, scriptInfo } from "../constants";
 import { getChangelogMd, parseMarkdown, t } from "../utils";
-import { BytmDialog } from "../components";
+import { BytmDialog, createToggle } from "../components";
 import { getFeatures, saveFeatures } from "../config";
 import pkg from "../../package.json" assert { type: "json" };
 
@@ -23,10 +23,11 @@ export async function getVersionNotifDialog({
       id: "version-notif",
       maxWidth: 600,
       maxHeight: 800,
+      closeBtnEnabled: false,
       closeOnBgClick: false,
       closeOnEscPress: true,
       destroyOnClose: true,
-      smallMenu: true,
+      smallDialog: true,
       renderBody: () => renderBody({
         latestTag,
         changelogHtml,
@@ -36,13 +37,17 @@ export async function getVersionNotifDialog({
   return verNotifDialog!;
 }
 
-function renderBody({
+let disableUpdateCheck = false;
+
+async function renderBody({
   latestTag,
   changelogHtml,
 }: {
   latestTag: string;
   changelogHtml: string;
 }) {
+  disableUpdateCheck = false;
+
   const hostPlatformNames: Record<typeof host, string> = {
     github: "GitHub",
     greasyfork: "GreasyFork",
@@ -60,9 +65,15 @@ function renderBody({
   changelogDetailsEl.open = false;
 
   const changelogSummaryEl = document.createElement("summary");
+  changelogSummaryEl.role = "button";
+  changelogSummaryEl.tabIndex = 0;
   changelogSummaryEl.ariaLabel = changelogSummaryEl.title = changelogSummaryEl.textContent = t("expand_release_notes");
   changelogDetailsEl.appendChild(changelogSummaryEl);
 
+  changelogDetailsEl.addEventListener("toggle", () => {
+    changelogSummaryEl.ariaLabel = changelogSummaryEl.title = changelogSummaryEl.textContent = changelogDetailsEl.open ? t("collapse_release_notes") : t("expand_release_notes");
+  });
+
   const changelogEl = document.createElement("p");
   changelogEl.id = "bytm-version-notif-changelog-cont";
   changelogEl.classList.add("bytm-markdown-container");
@@ -79,25 +90,41 @@ function renderBody({
   const disableUpdCheckEl = document.createElement("div");
   disableUpdCheckEl.id = "bytm-disable-update-check-wrapper";
 
-  const checkboxEl = document.createElement("input");
-  checkboxEl.type = "checkbox";
-  checkboxEl.id = "bytm-disable-update-check-chkbox";
-  checkboxEl.tabIndex = 0;
-  checkboxEl.checked = false;
+  const disableToggleEl = await createToggle({
+    id: "disable-update-check",
+    initialValue: false,
+    labelPos: "off",
+    onChange(checked) {
+      disableUpdateCheck = checked;
+      if(checked)
+        btnClose.textContent = t("close_and_ignore_until_reenabled");
+      else
+        btnClose.textContent = t("close_and_ignore_for_24h");
+    },
+  });
+
+  const labelWrapperEl = document.createElement("div");
+  labelWrapperEl.classList.add("bytm-disable-update-check-toggle-label-wrapper");
 
   const labelEl = document.createElement("label");
-  labelEl.htmlFor = "bytm-disable-update-check-chkbox";
+  labelEl.htmlFor = "bytm-toggle-disable-update-check";
   labelEl.textContent = t("disable_update_check");
 
-  disableUpdCheckEl.appendChild(checkboxEl);
-  disableUpdCheckEl.appendChild(labelEl);
+  const secondaryLabelEl = document.createElement("span");
+  secondaryLabelEl.classList.add("bytm-secondary-label");
+  secondaryLabelEl.textContent = t("reenable_in_config_menu");
+
+  labelWrapperEl.appendChild(labelEl);
+  labelWrapperEl.appendChild(secondaryLabelEl);
+
+  disableUpdCheckEl.appendChild(disableToggleEl);
+  disableUpdCheckEl.appendChild(labelWrapperEl);
 
   wrapperEl.appendChild(disableUpdCheckEl);
 
   verNotifDialog?.on("close", async () => {
     const config = getFeatures();
-    if(checkboxEl.checked)
-      config.versionCheck = false;
+    config.versionCheck = !disableUpdateCheck;
     await saveFeatures(config);
   });
 
@@ -118,14 +145,7 @@ function renderBody({
   const btnClose = document.createElement("button");
   btnClose.className = "bytm-btn";
   btnClose.tabIndex = 0;
-  btnClose.textContent = t("ignore_for_24h");
-
-  checkboxEl.addEventListener("change", () => {
-    if(checkboxEl.checked)
-      btnClose.textContent = t("close");
-    else
-      btnClose.textContent = t("ignore_for_24h");
-  });
+  btnClose.textContent = t("close_and_ignore_for_24h");
 
   btnClose.addEventListener("click", () => verNotifDialog?.close());
   btnClose.addEventListener("keydown", (e) => e.key === "Enter" && verNotifDialog?.close());