From fcef854b87f121817e5335b4410e5baaa0a937e5 Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@mailbox.org>
Date: Thu, 3 Apr 2025 16:37:33 +0200
Subject: [PATCH] Move condition editor from it's own tab into a box above the
tab row
---
css/rulesAssistant/conditionEditor.css | 6 ++---
css/rulesAssistant/raLists.css | 6 ++++-
src/js/rulesAssistantOptions.js | 32 +++++++++++++++-----------
3 files changed, 26 insertions(+), 18 deletions(-)
diff --git a/css/rulesAssistant/conditionEditor.css b/css/rulesAssistant/conditionEditor.css
index c7c71c98196..89153be51e3 100644
--- a/css/rulesAssistant/conditionEditor.css
+++ b/css/rulesAssistant/conditionEditor.css
@@ -28,7 +28,7 @@
display: inline-block;
border-radius: 8px;
border: 2px solid var(--button-border-color);
- background-color: var(--background-lighter);
+ background-color: var(--background-default);
padding: 4px;
margin: 4px;
}
@@ -133,8 +133,8 @@
}
.condition-switch {
- margin-top: 1em;
- margin-bottom: 1em;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
}
.condition-custom {
diff --git a/css/rulesAssistant/raLists.css b/css/rulesAssistant/raLists.css
index 7a68b4ac9cf..5973f925091 100644
--- a/css/rulesAssistant/raLists.css
+++ b/css/rulesAssistant/raLists.css
@@ -31,13 +31,17 @@
margin: 0.25em;
}
-.rajs-rule-selector {
+.rajs-box {
border: 2px solid var(--button-border-color);
background: var(--background-lighter);
padding: 0.5em;
margin-bottom: 1em;
}
+.rajs-box h2 {
+ margin-top: 0;
+}
+
.current-rule-name {
font-weight: bold;
font-size: 1.5em;
diff --git a/src/js/rulesAssistantOptions.js b/src/js/rulesAssistantOptions.js
index 610b0373837..9c4fe5b2feb 100644
--- a/src/js/rulesAssistantOptions.js
+++ b/src/js/rulesAssistantOptions.js
@@ -229,20 +229,13 @@ App.RA.options = (function() {
}
class Tab extends Element {
- /**
- * @param {string} [customCssClass]
- */
- constructor(customCssClass = null) {
+ constructor() {
super();
- if (customCssClass === null) {
- this.tabContent_.classList.add("ra-container");
- } else if (customCssClass !== "") {
- this.tabContent_.classList.add(customCssClass);
- }
}
render() {
this.tabContent_ = document.createElement("div");
+ this.tabContent_.classList.add("ra-container");
return this.tabContent_;
}
@@ -253,6 +246,14 @@ App.RA.options = (function() {
}
}
+ class HeaderElement extends Element {
+ /**
+ * @param {string} header
+ */
+ constructor(header) {
+ super(App.UI.DOM.makeElement("h2", header));
+ }
+ }
class NoteElement extends Element {
/**
@@ -1236,9 +1237,9 @@ App.RA.options = (function() {
if (V.defaultRules.length === 0) {
return;
}
+ this.appendChild(new ActivationConditionContainer());
const tabBar = new App.UI.Tabs.TabBar("ra");
- tabBar.addTab("Activation Condition", "condition", (new ConditionEditorTab()).element);
tabBar.addTab("Appearance", "appearance", (new AppearanceTab()).element);
tabBar.addTab("Cosmetic", "cosmetic", (new CosmeticTab()).element);
tabBar.addTab("Body Mod", "body-mod", (new BodyModTab()).element);
@@ -1273,7 +1274,7 @@ App.RA.options = (function() {
class RuleSelectorContainer extends Element {
constructor() {
const div = document.createElement("div");
- div.classList.add("rajs-rule-selector");
+ div.classList.add("rajs-box");
super(div);
if (V.defaultRules.length === 0) {
const paragraph = document.createElement("div");
@@ -1412,10 +1413,13 @@ App.RA.options = (function() {
}
}
- class ConditionEditorTab extends Tab {
+ class ActivationConditionContainer extends Element {
constructor() {
- super("");
- this.appendChild(new NoteElement("Control which slaves this rule will be applied to."));
+ const div = document.createElement("div");
+ div.classList.add("rajs-box");
+ super(div);
+ this.appendChild(new HeaderElement("Activation Condition"));
+ this.appendChild(new NoteElement("Controls which slaves this rule will be applied to."));
this.appendChild(new ConditionBuilder());
this.appendChild(new SpecificInclusionExclusion());
this.appendChild(new ApplyRuleOnce());
--
GitLab