Added TextField option type
This commit is contained in:
parent
964604d730
commit
446912d449
|
@ -169,6 +169,7 @@ set (SOURCES
|
||||||
${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeDropdown.cpp
|
${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeDropdown.cpp
|
||||||
${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRadioTabs.cpp
|
${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRadioTabs.cpp
|
||||||
${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRange.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/aspMain.cpp
|
||||||
${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp
|
${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -319,7 +319,7 @@
|
||||||
tab-index: none;
|
tab-index: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-option-dropdown {
|
.config-option-dropdown, .config-option-textfield {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
|
@ -327,28 +327,47 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: space(500);
|
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: space(8) space(12);
|
padding: space(8) space(24) space(8) space(12);
|
||||||
|
|
||||||
&__select {
|
&__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 %body;
|
||||||
@extend %nav-all;
|
@extend %nav-all;
|
||||||
@include trans-colors-border;
|
@include trans-colors-border;
|
||||||
@include border($color-white-a50);
|
@include border($color-white-a50);
|
||||||
display: block;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
width: auto;
|
width: auto;
|
||||||
height: space(48);
|
|
||||||
padding: space(14);
|
|
||||||
border-radius: $border-radius-md;
|
border-radius: $border-radius-md;
|
||||||
background-color: $color-white-a5;
|
background-color: $color-white-a5;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
@include border($color-white-a80);
|
@include border($color-white-a80);
|
||||||
|
|
|
@ -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/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/heart_color": "Hearts color",
|
||||||
"gameplay/movement/link_size": "Link's Size",
|
"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": "Abilities",
|
||||||
"gameplay/abilities/fd_anywhere": "Fierce Deity Anywhere",
|
"gameplay/abilities/fd_anywhere": "Fierce Deity Anywhere",
|
||||||
"gameplay/abilities/permanent_razor_sword": "Permanent Razor Sword",
|
"gameplay/abilities/permanent_razor_sword": "Permanent Razor Sword",
|
||||||
|
|
|
@ -28,7 +28,8 @@
|
||||||
{
|
{
|
||||||
"type": "Checkbox",
|
"type": "Checkbox",
|
||||||
"key": "infinite_health",
|
"key": "infinite_health",
|
||||||
"default": false
|
"default": false,
|
||||||
|
"onChange": "on_update_health"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -87,6 +88,12 @@
|
||||||
"min": 20,
|
"min": 20,
|
||||||
"max": 400,
|
"max": 400,
|
||||||
"step": 20
|
"step": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "TextField",
|
||||||
|
"key": "link_name",
|
||||||
|
"default": "George",
|
||||||
|
"maxlength": 10
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -90,6 +90,10 @@ void ElementConfigOption::AddOptionTypeElement() {
|
||||||
add_option_el<ElementOptionTypeDropdown>(doc, wrapper, "recomp-option-type-dropdown", config_key);
|
add_option_el<ElementOptionTypeDropdown>(doc, wrapper, "recomp-option-type-dropdown", config_key);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case ConfigOptionType::TextField: {
|
||||||
|
add_option_el<ElementOptionTypeTextField>(doc, wrapper, "recomp-option-type-textfield", config_key);
|
||||||
|
break;
|
||||||
|
}
|
||||||
case ConfigOptionType::RadioTabs: {
|
case ConfigOptionType::RadioTabs: {
|
||||||
add_option_el<ElementOptionTypeRadioTabs>(doc, wrapper, "recomp-option-type-radio-tabs", config_key);
|
add_option_el<ElementOptionTypeRadioTabs>(doc, wrapper, "recomp-option-type-radio-tabs", config_key);
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -13,7 +13,7 @@ public:
|
||||||
ElementOptionType(const Rml::String& tag, const std::string& base_class);
|
ElementOptionType(const Rml::String& tag, const std::string& base_class);
|
||||||
virtual ~ElementOptionType();
|
virtual ~ElementOptionType();
|
||||||
|
|
||||||
std::string config_key;
|
std::string config_key;
|
||||||
};
|
};
|
||||||
|
|
||||||
} // namespace recompui
|
} // namespace recompui
|
||||||
|
|
|
@ -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
|
|
@ -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
|
|
@ -15,6 +15,7 @@ static RecompElementConfig custom_elements[] = {
|
||||||
CUSTOM_ELEMENT("recomp-option-type-checkbox", recompui::ElementOptionTypeCheckbox),
|
CUSTOM_ELEMENT("recomp-option-type-checkbox", recompui::ElementOptionTypeCheckbox),
|
||||||
CUSTOM_ELEMENT("recomp-option-type-color", recompui::ElementOptionTypeColor),
|
CUSTOM_ELEMENT("recomp-option-type-color", recompui::ElementOptionTypeColor),
|
||||||
CUSTOM_ELEMENT("recomp-option-type-dropdown", recompui::ElementOptionTypeDropdown),
|
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-radio-tabs", recompui::ElementOptionTypeRadioTabs),
|
||||||
CUSTOM_ELEMENT("recomp-option-type-range", recompui::ElementOptionTypeRange),
|
CUSTOM_ELEMENT("recomp-option-type-range", recompui::ElementOptionTypeRange),
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
#include "elements/ElementOptionTypeDropdown.h"
|
#include "elements/ElementOptionTypeDropdown.h"
|
||||||
#include "elements/ElementOptionTypeRadioTabs.h"
|
#include "elements/ElementOptionTypeRadioTabs.h"
|
||||||
#include "elements/ElementOptionTypeRange.h"
|
#include "elements/ElementOptionTypeRange.h"
|
||||||
|
#include "elements/ElementOptionTypeTextField.h"
|
||||||
#include "elements/ElementDescription.h"
|
#include "elements/ElementDescription.h"
|
||||||
|
|
||||||
namespace recompui {
|
namespace recompui {
|
||||||
|
|
Loading…
Reference in New Issue