From 7488b7a57fb02f2776dd2f36ed7a9a80b4e2745f Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@mailbox.org>
Date: Thu, 28 Apr 2022 20:02:54 +0200
Subject: [PATCH] Improve RA condition editor UI (mainly custom getter)
---
css/rulesAssistant/conditionEditor.css | 9 ++++
js/rulesAssistant/conditionEditor.js | 59 ++++++++++++++------------
2 files changed, 40 insertions(+), 28 deletions(-)
diff --git a/css/rulesAssistant/conditionEditor.css b/css/rulesAssistant/conditionEditor.css
index 49465343054..da364358499 100644
--- a/css/rulesAssistant/conditionEditor.css
+++ b/css/rulesAssistant/conditionEditor.css
@@ -80,6 +80,15 @@
margin-left: 0.2em;
}
+.rule-custom-controls {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.rule-custom-mode {
+ text-align: center;
+}
+
.rule-trash {
border: #F55 1px;
border-radius: 4px;
diff --git a/js/rulesAssistant/conditionEditor.js b/js/rulesAssistant/conditionEditor.js
index 34900917960..b966c943bff 100644
--- a/js/rulesAssistant/conditionEditor.js
+++ b/js/rulesAssistant/conditionEditor.js
@@ -97,7 +97,7 @@ App.RA.Activation.Editor = (function() {
div.append(new RulePartProvider(() => new RuleMapCheck(App.RA.Activation.getterManager.assignmentDefault)).render());
div.append(new RulePartProvider(() => new RuleConstant(0)).render());
div.append(new RulePartProvider(() => new RuleBooleanConstant(true)).render());
- div.append(new RulePartProvider(() => new RuleConstant("string")).render());
+ div.append(new RulePartProvider(() => new RuleConstant("some text")).render());
div.append(new RulePartProvider(() => new RuleCustomCheck("bcontext => false")).render());
div.append(new RulePartTrash().render());
container.append(div);
@@ -857,21 +857,7 @@ App.RA.Activation.Editor = (function() {
render() {
const div = App.UI.DOM.makeElement("div", createDragElement(this), ["rule-part"]);
- const button = document.createElement("button");
- button.append(this._stringMode ? "String" : "Number");
- button.onclick = () => {
- this._stringMode = !this._stringMode;
- if (this._stringMode) {
- this.value = String(this.value);
- } else {
- this.value = Number(this.value);
- if (Number.isNaN(this.value)) {
- this.value = 0;
- }
- }
- refreshEditor();
- };
- div.append(button);
+ div.append(this._stringMode ? " String" : " Number");
div.append(makeTextBoxDragSafe(App.UI.DOM.makeTextBox(this.value, (v) => {
this.value = v;
refreshEditor();
@@ -968,7 +954,34 @@ App.RA.Activation.Editor = (function() {
}
render() {
- const div = App.UI.DOM.makeElement("div", createDragElement(this), ["rule-part"]);
+ const outerDiv = App.UI.DOM.makeElement("div", null, ["rule-part"]);
+ const leftDiv = document.createElement("div");
+ leftDiv.classList.add("rule-custom-controls");
+
+ const upperDiv = document.createElement("div");
+ upperDiv.append(createDragElement(this), " Custom Getter");
+ leftDiv.append(upperDiv);
+
+ const lowerDiv = document.createElement("div");
+ lowerDiv.classList.add("rule-custom-mode");
+ lowerDiv.append("Mode:", this._makeToggleButton());
+ leftDiv.append(lowerDiv);
+
+ outerDiv.append(leftDiv);
+
+ const textArea = document.createElement("textarea");
+ textArea.append(this.check.slice(1));
+ textArea.onchange = ev => {
+ // @ts-ignore
+ this.check = this._expectedType.first() + ev.target.value;
+ refreshEditor();
+ };
+ outerDiv.append(makeTextBoxDragSafe(textArea, this));
+ this._markValidationError(outerDiv);
+ return outerDiv;
+ }
+
+ _makeToggleButton() {
const button = document.createElement("button");
button.append(capFirstChar(this._expectedType));
button.onclick = () => {
@@ -982,17 +995,7 @@ App.RA.Activation.Editor = (function() {
this.check = this._expectedType.first() + this.check.slice(1);
refreshEditor();
};
- div.append(button);
- const textArea = document.createElement("textarea");
- textArea.append(this.check.slice(1));
- textArea.onchange = ev => {
- // @ts-ignore
- this.check = this._expectedType.first() + ev.target.value;
- refreshEditor();
- };
- div.append(makeTextBoxDragSafe(textArea, this));
- this._markValidationError(div);
- return div;
+ return button;
}
validate(errorList) {
--
GitLab