From 33bcffe490c3eb68d919b31945c635be37b37ecf Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Mon, 21 Dec 2020 23:56:30 +0100
Subject: [PATCH] Convert wardrobe filter strip to use buttons and
.button-group styling
---
src/interaction/siWardrobe.js | 73 +++++++++++++----------------------
src/interaction/wardrobe.css | 14 +++----
2 files changed, 33 insertions(+), 54 deletions(-)
diff --git a/src/interaction/siWardrobe.js b/src/interaction/siWardrobe.js
index 626e942f10a..33003a8aedc 100644
--- a/src/interaction/siWardrobe.js
+++ b/src/interaction/siWardrobe.js
@@ -40,35 +40,28 @@ App.UI.SlaveInteract.wardrobe = function(slave) {
function filtersDOM() {
const el = document.createElement("div");
- el.classList.add("filter-line");
+ el.classList.add("filter-row");
el.append("Filters: ");
const niceFilters = new Map([
[false, "Nice"],
[true, "Harsh"],
]);
- let linkArray = [];
+ let span = document.createElement("span");
+ span.classList.add("button-group");
for (const [bool, string] of niceFilters) {
+ const button = App.UI.DOM.makeElement("button", string);
if (filters.harsh === bool) {
- linkArray.push(
- App.UI.DOM.disabledLink(
- string,
- ["Currently selected"]
- )
- );
+ button.classList.add("selected", "disabled");
} else {
- linkArray.push(
- App.UI.DOM.link(
- string,
- () => {
- filters.harsh = bool;
- refresh();
- }
- )
- );
+ button.onclick = () => {
+ filters.harsh = bool;
+ refresh();
+ };
}
+ span.append(button);
}
- App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster");
+ el.append(span);
const exposureFilters = new Map([
[0, "Modest"],
@@ -77,41 +70,29 @@ App.UI.SlaveInteract.wardrobe = function(slave) {
[3, "Humiliating"],
[4, "Practically nude"],
]);
- linkArray = [];
+ span = document.createElement("span");
+ span.classList.add("button-group");
for (const [num, string] of exposureFilters) {
+ const button = App.UI.DOM.makeElement("button", string);
if (filters.exposure === num) {
- linkArray.push(
- App.UI.DOM.disabledLink(
- string,
- ["Currently selected"]
- )
- );
+ button.classList.add("selected", "disabled");
} else {
- linkArray.push(
- App.UI.DOM.link(
- string,
- () => {
- filters.exposure = num;
- refresh();
- }
- )
- );
+ button.onclick = () => {
+ filters.exposure = num;
+ refresh();
+ };
}
+ span.append(button);
}
- App.UI.DOM.appendNewElement("span", el, App.UI.DOM.generateLinksStrip(linkArray), "filter-cluster");
+ el.append(span);
// clear filters
- App.UI.DOM.appendNewElement(
- "span",
- el,
- App.UI.DOM.link(
- "Reset Filters",
- () => {
- filters = {};
- refresh();
- }
- ),
- "filter-cluster");
+ const resetButton = App.UI.DOM.makeElement("button", "Reset Filters");
+ resetButton.onclick = () => {
+ filters = {};
+ refresh();
+ };
+ App.UI.DOM.appendNewElement("span", el, resetButton, "button-group");
return el;
}
diff --git a/src/interaction/wardrobe.css b/src/interaction/wardrobe.css
index d857756c3b4..328e67174f1 100644
--- a/src/interaction/wardrobe.css
+++ b/src/interaction/wardrobe.css
@@ -1,9 +1,7 @@
-span.filter-cluster {
- background-color: var(--button-color);
- border: solid 2px var(--button-border-color);
- margin: 6px;
- padding: 1ex 1ex;
-}
-div.filter-line {
+div.filter-row {
line-height: 3em;
-}
\ No newline at end of file
+}
+
+div.filter-row .button-group {
+ margin: 1em;
+}
--
GitLab