Added TextField option type

CMakeLists.txt

@@ -169,6 +169,7 @@ set (SOURCES
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeDropdown.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRadioTabs.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRange.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeTextField.cpp
 
     ${CMAKE_SOURCE_DIR}/rsp/aspMain.cpp
     ${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp

assets/scss/styles/components/ConfigOption.scss

@@ -319,7 +319,7 @@
     tab-index: none;
 }
 
-.config-option-dropdown {
+.config-option-dropdown, .config-option-textfield {
     display: flex;
     position: relative;
     flex: 1 1 100%;
@@ -327,28 +327,47 @@
     align-items: center;
     justify-content: flex-start;
     width: auto;
-    max-width: space(500);
     height: auto;
-    padding: space(8) space(12);
+    padding: space(8) space(24) space(8) space(12);
 
     &__select {
+        display: block;
+        height: space(48);
+        padding: space(14);
+        cursor: pointer;
+    }
+
+    &__wrapper {
+        // Cursed guess & check so that this appears to be the same height as the select
+        $extra-space: 2;
+
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+        height: auto;
+        padding: space(0 + $extra-space) 0 space(10 + $extra-space);
+        cursor: text;
+
+        input {
+            width: 100%;
+            height: auto;
+            vertical-align: middle;
+        }
+    }
+
+    &__select, &__wrapper {
         @extend %body;
         @extend %nav-all;
         @include trans-colors-border;
         @include border($color-white-a50);
-        display: block;
         position: relative;
         box-sizing: border-box;
         flex: 1 1 100%;
 
-        align-items: center;
-        justify-content: flex-start;
         width: auto;
-        height: space(48);
-        padding: space(14);
         border-radius: $border-radius-md;
         background-color: $color-white-a5;
-        cursor: pointer;
 
         &:hover, &:focus {
             @include border($color-white-a80);

config_example.cheats.en_us.json

@@ -25,7 +25,8 @@
     "gameplay/movement/always_quickspin:description": "Always <b>quickspin</b> whenever using your <i>sword</i> and in a <i>state</i> where <i>you</i> can <b>quickspin.</b><br /><br />yeah...",
     "gameplay/movement/heart_color": "Hearts color",
     "gameplay/movement/link_size": "Link's Size",
-
+    "gameplay/movement/link_name": "Link's Name",
+    "gameplay/movement/link_name:description": "Change Link's name to something silly!",
     "gameplay/abilities": "Abilities",
     "gameplay/abilities/fd_anywhere": "Fierce Deity Anywhere",
     "gameplay/abilities/permanent_razor_sword": "Permanent Razor Sword",

config_example.cheats.json

@@ -28,7 +28,8 @@
             {
                 "type": "Checkbox",
                 "key": "infinite_health",
-                "default": false
+                "default": false,
+                "onChange": "on_update_health"
             }
         ]
     },
@@ -87,6 +88,12 @@
                         "min": 20,
                         "max": 400,
                         "step": 20
+                    },
+                    {
+                        "type": "TextField",
+                        "key": "link_name",
+                        "default": "George",
+                        "maxlength": 10
                     }
                 ]
             },

src/ui/elements/ElementConfigOption.cpp

@@ -90,6 +90,10 @@ void ElementConfigOption::AddOptionTypeElement() {
             add_option_el<ElementOptionTypeDropdown>(doc, wrapper, "recomp-option-type-dropdown", config_key);
             break;
         }
+        case ConfigOptionType::TextField: {
+            add_option_el<ElementOptionTypeTextField>(doc, wrapper, "recomp-option-type-textfield", config_key);
+            break;
+        }
         case ConfigOptionType::RadioTabs: {
             add_option_el<ElementOptionTypeRadioTabs>(doc, wrapper, "recomp-option-type-radio-tabs", config_key);
             break;

src/ui/elements/ElementOptionTypeTextField.cpp

@@ -0,0 +1,67 @@
+
+#include "ElementOptionTypeTextField.h"
+
+#include <string>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string input_id = "recomp-textfield"; 
+
+static const std::string cls_base = "config-option-textfield"; 
+static const std::string cls_wrapper = cls_base + "__wrapper"; 
+static const std::string cls_input = cls_base + "__input"; 
+
+ElementOptionTypeTextField::ElementOptionTypeTextField(const Rml::String& tag) : ElementOptionType(tag, cls_base)
+{
+    Rml::Element *wrapper = AppendChild(GetOwnerDocument()->CreateElement("label"));
+    wrapper->SetClass(cls_wrapper, true);
+    Rml::ElementFormControlSelect *input_el = (Rml::ElementFormControlSelect *)wrapper->AppendChild(GetOwnerDocument()->CreateElement("input"));
+    input_el->SetId(input_id);
+    input_el->SetValue("");
+    input_el->AddEventListener(Rml::EventId::Change, this, false);
+    input_el->SetClass(cls_input, true);
+}
+
+Rml::ElementFormControlInput *ElementOptionTypeTextField::get_input()
+{
+    return (Rml::ElementFormControlInput *)GetElementById(input_id);
+}
+
+ElementOptionTypeTextField::~ElementOptionTypeTextField()
+{
+    auto input_el = get_input();
+    RemoveEventListener(Rml::EventId::Change, this, false);
+}
+
+void ElementOptionTypeTextField::init_option(std::string& _config_key) {
+    config_key = _config_key;
+
+    const json& option_json = recomp::config::get_json_from_key(config_key);;
+    auto val = recomp::config::get_config_store_value<std::string>(config_key);
+
+    auto input_el = get_input();
+    input_el->SetValue(val);
+
+    const auto maxlength = recomp::config::get_value_in_json<int>(option_json, "maxlength");
+    input_el->SetAttribute("maxlength", std::to_string(maxlength));
+
+    // RMLUI sadly doesn't support placeholders yet, so this will be a _placeholder_ until thats ready.
+    input_el->SetAttribute("placeholder", recomp::config::get_config_store_value_with_default<std::string>("translations/" + config_key + ":placeholder", ""));
+}
+
+void ElementOptionTypeTextField::ProcessEvent(Rml::Event& event)
+{
+	if (event == Rml::EventId::Change)
+	{
+		if (event.GetPhase() == Rml::EventPhase::Bubble || event.GetPhase() == Rml::EventPhase::Target)
+		{
+            Rml::Element *target = event.GetTargetElement();
+            auto val_variant = target->GetAttribute("value");
+            recomp::config::set_config_store_value(config_key, val_variant->Get<std::string>());
+		}
+	}
+}
+
+} // namespace Rml

src/ui/elements/ElementOptionTypeTextField.h

@@ -0,0 +1,22 @@
+#ifndef RECOMPUI_ELEMENT_OPTION_TYPE_TEXTFIELD_H
+#define RECOMPUI_ELEMENT_OPTION_TYPE_TEXTFIELD_H
+
+#include "common.h"
+#include "ElementOptionType.h"
+
+namespace recompui {
+
+class ElementOptionTypeTextField : public ElementOptionType {
+public:
+	ElementOptionTypeTextField(const Rml::String& tag);
+	virtual ~ElementOptionTypeTextField();
+
+    void init_option(std::string& _config_key);
+protected:
+	void ProcessEvent(Rml::Event& event) override;
+private:
+	Rml::ElementFormControlInput* get_input();
+};
+
+} // namespace recompui
+#endif

src/ui/ui_elements.cpp

@@ -15,6 +15,7 @@ static RecompElementConfig custom_elements[] = {
     CUSTOM_ELEMENT("recomp-option-type-checkbox", recompui::ElementOptionTypeCheckbox),
     CUSTOM_ELEMENT("recomp-option-type-color", recompui::ElementOptionTypeColor),
     CUSTOM_ELEMENT("recomp-option-type-dropdown", recompui::ElementOptionTypeDropdown),
+    CUSTOM_ELEMENT("recomp-option-type-textfield", recompui::ElementOptionTypeTextField),
     CUSTOM_ELEMENT("recomp-option-type-radio-tabs", recompui::ElementOptionTypeRadioTabs),
     CUSTOM_ELEMENT("recomp-option-type-range", recompui::ElementOptionTypeRange),
 };

src/ui/ui_elements.h

@@ -11,6 +11,7 @@
 #include "elements/ElementOptionTypeDropdown.h"
 #include "elements/ElementOptionTypeRadioTabs.h"
 #include "elements/ElementOptionTypeRange.h"
+#include "elements/ElementOptionTypeTextField.h"
 #include "elements/ElementDescription.h"
 
 namespace recompui {