feat: arrows for sorting buttons

ubiquity · Jan 23, 2024 · 7be70f5 · 7be70f5
1 parent 719afd0
commit 7be70f5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts
@@ -39,9 +39,7 @@ export class SortingManager {
       buttons.appendChild(input);
       buttons.appendChild(label);
 
-      input.addEventListener("click", () => {
-        this._handleSortingClick(input, option);
-      });
+      input.addEventListener("click", () => this._handleSortingClick(input, option));
     });
 
     return buttons;
@@ -70,6 +68,13 @@ export class SortingManager {
     input.setAttribute("data-ordering", ordering);
     this._lastChecked = input.checked ? input : null;
     this._filterTextBox.value = "";
+    input.parentElement?.childNodes.forEach((node) => {
+      if (node instanceof HTMLInputElement) {
+        node.setAttribute("data-ordering", "");
+      }
+    });
+
+    input.setAttribute("data-ordering", ordering);
     fetchAndDisplayPreviews(option as Sorting, { ordering }).catch((error) => console.error(error));
   }
 }
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -591,4 +591,12 @@
   p.organization-name::after {
     content: "/";
   }
+  input[type="radio"][data-ordering="reverse"] + label::after {
+    margin-left: 6px;
+    content: "▲";
+  }
+  input[type="radio"][data-ordering="normal"] + label::after {
+    margin-left: 6px;
+    content: "▼";
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -591,4 +591,12 @@
   p.organization-name::after {
     content: "/";
   }
+  input[type="radio"][data-ordering="reverse"] + label::after {
+    margin-left: 6px;
+    content: "▲";
+  }
+  input[type="radio"][data-ordering="normal"] + label::after {
+    margin-left: 6px;
+    content: "▼";
+  }
 }