impr(settings): optimise preset section for keyboard navigation

frontend/src/styles/popups.scss

@@ -1573,7 +1573,8 @@
   }
 }
 
-#tagsEdit form {
+#tagsEdit form,
+#presetEdit form {
   display: grid;
   gap: 1rem;
 }

frontend/src/ts/pages/settings.ts

@@ -824,16 +824,14 @@ function refreshPresetsSettingsSection(): void {
     const presetsEl = $(".pageSettings .section.presets .presetsList").empty();
     DB.getSnapshot()?.presets?.forEach((preset: MonkeyTypes.Preset) => {
       presetsEl.append(`
-      <div class="buttons preset" id="${preset._id}">
-        <div class="button presetButton">
-          <div class="title">${preset.display}</div>
-        </div>
-        <div class="editButton button">
+      <div class="buttons preset" data-id="${preset._id}" data-name="${preset.name}" data-display="${preset.display}">
+        <button class="presetButton">${preset.display}</button>
+        <button class="editButton">
           <i class="fas fa-pen fa-fw"></i>
-        </div>
-        <div class="removeButton button">
+        </button>
+        <button class="removeButton">
           <i class="fas fa-trash fa-fw"></i>
-        </div>
+        </button>
       </div>
       
       `);
@@ -1032,7 +1030,7 @@ $(".pageSettings .section.tags").on(
   ".tagsList .tag .tagButton",
   (e) => {
     const target = e.currentTarget;
-    const tagid = $(target).parent(".tag").attr("id") as string;
+    const tagid = $(target).parent(".tag").attr("data-id") as string;
     TagController.toggle(tagid);
     $(target).toggleClass("active");
   }
@@ -1043,7 +1041,7 @@ $(".pageSettings .section.presets").on(
   ".presetsList .preset .presetButton",
   (e) => {
     const target = e.currentTarget;
-    const presetid = $(target).parent(".preset").attr("id") as string;
+    const presetid = $(target).parent(".preset").attr("data-id") as string;
     console.log("Applying Preset");
     configEventDisabled = true;
     PresetController.apply(presetid);

frontend/src/ts/popups/edit-preset-popup.ts

@@ -22,7 +22,7 @@ export function show(action: string, id?: string, name?: string): void {
   if (action === "add") {
     $("#presetWrapper #presetEdit").attr("action", "add");
     $("#presetWrapper #presetEdit .title").html("Add new preset");
-    $("#presetWrapper #presetEdit .button").html(`add`);
+    $("#presetWrapper #presetEdit button").html(`add`);
     $("#presetWrapper #presetEdit input.text").val("");
     $("#presetWrapper #presetEdit input.text").removeClass("hidden");
     $("#presetWrapper #presetEdit label").addClass("hidden");
@@ -30,7 +30,7 @@ export function show(action: string, id?: string, name?: string): void {
     $("#presetWrapper #presetEdit").attr("action", "edit");
     $("#presetWrapper #presetEdit").attr("presetid", id);
     $("#presetWrapper #presetEdit .title").html("Edit preset");
-    $("#presetWrapper #presetEdit .button").html(`save`);
+    $("#presetWrapper #presetEdit button").html(`save`);
     $("#presetWrapper #presetEdit input.text").val(name);
     $("#presetWrapper #presetEdit input.text").removeClass("hidden");
     $("#presetWrapper #presetEdit label input").prop("checked", false);
@@ -39,7 +39,7 @@ export function show(action: string, id?: string, name?: string): void {
     $("#presetWrapper #presetEdit").attr("action", "remove");
     $("#presetWrapper #presetEdit").attr("presetid", id);
     $("#presetWrapper #presetEdit .title").html("Delete preset " + name);
-    $("#presetWrapper #presetEdit .button").html("Delete");
+    $("#presetWrapper #presetEdit button").html("Delete");
     $("#presetWrapper #presetEdit input.text").addClass("hidden");
     $("#presetWrapper #presetEdit label").addClass("hidden");
   }
@@ -50,7 +50,12 @@ export function show(action: string, id?: string, name?: string): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 125, () => {
-        $("#presetWrapper #presetEdit input").trigger("focus");
+        const input = $("#presetWrapper #presetEdit input");
+        if (!input.hasClass("hidden")) {
+          $("#presetWrapper #presetEdit input").trigger("focus");
+        } else {
+          $("#presetWrapper").trigger("focus");
+        }
       });
   }
 }
@@ -169,30 +174,32 @@ $("#presetWrapper").on("click", (e) => {
   }
 });
 
-$("#presetWrapper #presetEdit .button").on("click", () => {
+$("#presetWrapper #presetEdit form").on("submit", (e) => {
+  e.preventDefault();
   apply();
 });
 
-$("#presetWrapper #presetEdit input").on("keypress", (e) => {
-  if (e.key === "Enter") {
-    apply();
-  }
-});
-
 $(".pageSettings .section.presets").on("click", ".addPresetButton", () => {
   show("add");
 });
 
 $(".pageSettings .section.presets").on("click", ".editButton", (e) => {
-  const presetid = $(e.currentTarget).parent(".preset").attr("id");
-  const name = $(e.currentTarget).siblings(".button").children(".title").text();
+  const presetid = $(e.currentTarget).parent(".preset").attr("data-id");
+  const name = $(e.currentTarget).parent(".preset").attr("data-display");
   show("edit", presetid, name);
 });
 
 $(".pageSettings .section.presets").on("click", ".removeButton", (e) => {
-  const presetid = $(e.currentTarget).parent(".preset").attr("id");
-  const name = $(e.currentTarget).siblings(".button").children(".title").text();
+  const presetid = $(e.currentTarget).parent(".preset").attr("data-id");
+  const name = $(e.currentTarget).parent(".preset").attr("data-display");
   show("remove", presetid, name);
 });
 
+$(document).on("keydown", (event) => {
+  if (event.key === "Escape" && isPopupVisible(wrapperId)) {
+    hide();
+    event.preventDefault();
+  }
+});
+
 Skeleton.save(wrapperId);

frontend/static/html/pages/settings.html

@@ -106,20 +106,8 @@
         edit your preset if you make any changes - they don't save on their own.
       </div>
       <div class="presetsListAndButton">
-        <div class="presetsList">
-          <div class="buttons preset" id="0">
-            <div class="presetButton button">
-              <div class="title">staggered</div>
-            </div>
-            <div class="editButton button">
-              <i class="fas fa-pen"></i>
-            </div>
-            <div class="removeButton button">
-              <i class="fas fa-trash"></i>
-            </div>
-          </div>
-        </div>
-        <div class="button addPresetButton fullWidth">add preset</div>
+        <div class="presetsList"></div>
+        <button class="addPresetButton fullWidth">add preset</button>
       </div>
     </div>
     <div class="section">

frontend/static/html/popups.html

@@ -817,15 +817,17 @@
     <div class="button confirmButton"><i class="fas fa-check"></i></div>
   </div>
 </div>
-<div id="presetWrapper" class="popupWrapper hidden">
+<div id="presetWrapper" class="popupWrapper hidden" tabindex="-1">
   <div id="presetEdit" action="" presetid="">
-    <div class="title"></div>
-    <input type="text" class="text" title="presets" />
-    <label class="checkbox">
-      <input type="checkbox" />
-      Change preset to current settings
-    </label>
-    <div class="button"><i class="fas fa-plus"></i></div>
+    <form>
+      <div class="title"></div>
+      <input type="text" class="text" title="presets" />
+      <label class="checkbox">
+        <input type="checkbox" />
+        Change preset to current settings
+      </label>
+      <button type="submit">add</button>
+    </form>
   </div>
 </div>
 <div id="shareCustomThemeWrapper" class="popupWrapper hidden">