mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-11-05 22:35:06 +01:00
init mod menu + bem class + button presets
This commit is contained in:
parent
47669a8880
commit
4be4c0f21d
@ -171,6 +171,8 @@ set (SOURCES
|
||||
${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}/src/ui/elements/ElementModMenu.cpp
|
||||
${CMAKE_SOURCE_DIR}/src/ui/elements/presets.cpp
|
||||
|
||||
${CMAKE_SOURCE_DIR}/rsp/aspMain.cpp
|
||||
${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp
|
||||
|
@ -71,7 +71,7 @@
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-event-click="clear_input_bindings(i)"
|
||||
class="icon-button icon-button--danger"
|
||||
class="icon-button icon-button--error"
|
||||
data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
|
||||
>
|
||||
<svg src="icons/Trash.svg" />
|
||||
@ -81,7 +81,7 @@
|
||||
data-event-blur="set_input_row_focus(-1)"
|
||||
data-event-focus="set_input_row_focus(i)"
|
||||
data-event-click="reset_single_input_binding_to_default(i)"
|
||||
class="icon-button icon-button--danger"
|
||||
class="icon-button icon-button--error"
|
||||
data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
|
||||
>
|
||||
<svg src="icons/Reset.svg" />
|
||||
|
@ -61,6 +61,7 @@
|
||||
<label>v{{version_number}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<recomp-mod-menu />
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
|
File diff suppressed because one or more lines are too long
@ -2,7 +2,7 @@
|
||||
|
||||
/*
|
||||
<button
|
||||
class="icon-button icon-button--danger"
|
||||
class="icon-button icon-button--error"
|
||||
>
|
||||
<svg src="icons/Trash.svg" />
|
||||
</button>
|
||||
@ -82,7 +82,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
|
||||
@include create-icon-button-variation($color-success);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
&--error {
|
||||
@include create-icon-button-variation($color-error);
|
||||
}
|
||||
|
||||
|
87
assets/scss/styles/components/ModMenu.scss
Normal file
87
assets/scss/styles/components/ModMenu.scss
Normal file
@ -0,0 +1,87 @@
|
||||
.mod-menu {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: space($page-margin);
|
||||
background-color: $color-modal-overlay;
|
||||
|
||||
&__modal-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: space($base-modal-max-width);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
border-width: $border-width-thickness;
|
||||
border-radius: $border-radius-modal;
|
||||
border-color: $color-border;
|
||||
background: $color-bg-shadow;
|
||||
}
|
||||
|
||||
&__modal-header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: space(16);
|
||||
border-bottom-width: $border-width-thickness;
|
||||
border-top-left-radius: $border-radius-modal;
|
||||
border-top-right-radius: $border-radius-modal;
|
||||
border-bottom-color: $color-border;
|
||||
background-color: $color-bg-overlay;
|
||||
}
|
||||
|
||||
&__modal-body {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom-left-radius: $border-radius-modal;
|
||||
background-color: $color-bg-shadow;
|
||||
}
|
||||
|
||||
&__list-scroll {
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__details {
|
||||
display: block;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
height: 100%;
|
||||
border-bottom-right-radius: $border-radius-modal;
|
||||
background-color: $color-bg-overlay;
|
||||
}
|
||||
}
|
@ -14,3 +14,4 @@
|
||||
@import "./Toggle";
|
||||
@import "./BottomLeft";
|
||||
@import "./Prompt";
|
||||
@import "./ModMenu";
|
||||
|
@ -8,6 +8,7 @@
|
||||
#include "RmlUi/Core.h"
|
||||
|
||||
#include "../src/ui/util/hsv.h"
|
||||
#include "../src/ui/util/bem.h"
|
||||
|
||||
namespace Rml {
|
||||
class ElementDocument;
|
||||
|
66
src/ui/elements/ElementModMenu.cpp
Normal file
66
src/ui/elements/ElementModMenu.cpp
Normal file
@ -0,0 +1,66 @@
|
||||
#include "ElementModMenu.h"
|
||||
#include "presets.h"
|
||||
#include "librecomp/mods.hpp"
|
||||
|
||||
#include <string>
|
||||
|
||||
namespace recompui {
|
||||
|
||||
static const BEM mod_menu_bem("mod-menu");
|
||||
|
||||
static const std::string cls_base = mod_menu_bem.get_block();
|
||||
static const std::string cls_modal_wrapper = mod_menu_bem.el("modal-wrapper");
|
||||
static const std::string cls_modal_header = mod_menu_bem.el("modal-header");
|
||||
static const std::string cls_modal_body = mod_menu_bem.el("modal-body");
|
||||
static const std::string cls_list = mod_menu_bem.el("list");
|
||||
static const std::string cls_list_scroll = mod_menu_bem.el("list-scroll");
|
||||
static const std::string cls_details = mod_menu_bem.el("details");
|
||||
|
||||
static Rml::Element *add_div_with_class(Rml::ElementDocument *doc, Rml::Element *parent_el, const std::string& cls) {
|
||||
Rml::Element *el = parent_el->AppendChild(doc->CreateElement("div"));
|
||||
el->SetClass(cls.c_str(), true);
|
||||
return el;
|
||||
}
|
||||
|
||||
ElementModMenu::ElementModMenu(const Rml::String& tag) : Rml::Element(tag)
|
||||
{
|
||||
SetAttribute("recomp-store-element", true);
|
||||
Rml::ElementDocument *doc = GetOwnerDocument();
|
||||
SetClass(mod_menu_bem.block, true);
|
||||
|
||||
{
|
||||
Rml::Element *modal_wrapper_el = add_div_with_class(doc, this, cls_modal_wrapper);
|
||||
{
|
||||
Rml::Element *header_el = add_div_with_class(doc, modal_wrapper_el, cls_modal_header);
|
||||
{
|
||||
add_button(doc, header_el, "Refresh", ButtonVariant::Primary);
|
||||
add_icon_button(doc, header_el, "icons/X.svg", ButtonVariant::Tertiary);
|
||||
}
|
||||
|
||||
Rml::Element *body_el = add_div_with_class(doc, modal_wrapper_el, cls_modal_body);
|
||||
{
|
||||
Rml::Element *list_el = add_div_with_class(doc, body_el, cls_list);
|
||||
{
|
||||
Rml::Element *list_el_scroll = add_div_with_class(doc, list_el, cls_list_scroll);
|
||||
{
|
||||
std::vector<recomp::mods::ModDetails> mods = recomp::mods::get_mod_details("mm");
|
||||
for (auto& mod : mods) {
|
||||
Rml::Element *mod_el = list_el_scroll->AppendChild(doc->CreateElement("div"));
|
||||
mod_el->SetInnerRML(mod.mod_id);
|
||||
}
|
||||
} // list_el_scroll
|
||||
} // list_el
|
||||
|
||||
Rml::Element *details_el = add_div_with_class(doc, body_el, cls_details);
|
||||
details_el->SetInnerRML("two");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ElementModMenu::~ElementModMenu()
|
||||
{
|
||||
}
|
||||
|
||||
|
||||
} // namespace Rml
|
15
src/ui/elements/ElementModMenu.h
Normal file
15
src/ui/elements/ElementModMenu.h
Normal file
@ -0,0 +1,15 @@
|
||||
#ifndef RECOMPUI_ELEMENT_MOD_MENU_H
|
||||
#define RECOMPUI_ELEMENT_MOD_MENU_H
|
||||
|
||||
#include "common.h"
|
||||
|
||||
namespace recompui {
|
||||
|
||||
class ElementModMenu : public Rml::Element {
|
||||
public:
|
||||
ElementModMenu(const Rml::String& tag);
|
||||
virtual ~ElementModMenu();
|
||||
};
|
||||
|
||||
} // namespace recompui
|
||||
#endif
|
39
src/ui/elements/presets.cpp
Normal file
39
src/ui/elements/presets.cpp
Normal file
@ -0,0 +1,39 @@
|
||||
#include "presets.h"
|
||||
|
||||
namespace recompui {
|
||||
|
||||
static const BEM button_bem("button");
|
||||
Rml::Element *add_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const Rml::String contents, ButtonVariant variant, bool isLarge) {
|
||||
Rml::Element *button = parent_el->AppendChild(doc->CreateElement("button"));
|
||||
|
||||
button->SetClass(button_bem.get_block(), true);
|
||||
|
||||
button->SetClass(button_bem.mod(button_variants.at(variant)), true);
|
||||
if (isLarge) {
|
||||
button->SetClass(button_bem.mod("large"), true);
|
||||
}
|
||||
|
||||
if (contents != "") {
|
||||
button->SetInnerRML(contents);
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
static const BEM icon_button_bem("icon-button");
|
||||
Rml::Element *add_icon_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const std::string &svg_src, ButtonVariant variant) {
|
||||
Rml::Element *button = parent_el->AppendChild(doc->CreateElement("button"));
|
||||
|
||||
button->SetClass(icon_button_bem.get_block(), true);
|
||||
button->SetClass(icon_button_bem.mod(button_variants.at(variant)), true);
|
||||
|
||||
{
|
||||
Rml::Element *icon = button->AppendChild(doc->CreateElement("svg"));
|
||||
icon->SetClass(icon_button_bem.el("icon"), true);
|
||||
icon->SetAttribute("src", svg_src);
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
} // namespace recompui
|
11
src/ui/elements/presets.h
Normal file
11
src/ui/elements/presets.h
Normal file
@ -0,0 +1,11 @@
|
||||
#ifndef RECOMPUI_ELEMENTS_PRESETS
|
||||
#define RECOMPUI_ELEMENTS_PRESETS
|
||||
|
||||
#include "common.h"
|
||||
|
||||
namespace recompui {
|
||||
Rml::Element *add_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const Rml::String contents = "", ButtonVariant variant = ButtonVariant::Primary, bool isLarge = false);
|
||||
Rml::Element *add_icon_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const std::string &svg_src, ButtonVariant variant = ButtonVariant::Tertiary);
|
||||
} // namespace recompui
|
||||
|
||||
#endif
|
@ -19,12 +19,10 @@ static RecompElementConfig custom_elements[] = {
|
||||
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),
|
||||
CUSTOM_ELEMENT("recomp-mod-menu", recompui::ElementModMenu),
|
||||
};
|
||||
|
||||
void recompui::register_custom_elements() {
|
||||
recomp::config::set_config_store_value_and_default("ligma_balls", "hello!", "whats up");
|
||||
recomp::config::set_config_store_default_value("ligma_balls2", "12345");
|
||||
recomp::config::set_config_store_value("ligma_balls3", "hello!");
|
||||
for (auto& element_config : custom_elements) {
|
||||
Rml::Factory::RegisterElementInstancer(element_config.tag, element_config.instancer.get());
|
||||
}
|
||||
|
@ -14,6 +14,7 @@
|
||||
#include "elements/ElementOptionTypeRange.h"
|
||||
#include "elements/ElementOptionTypeTextField.h"
|
||||
#include "elements/ElementDescription.h"
|
||||
#include "elements/ElementModMenu.h"
|
||||
|
||||
namespace recompui {
|
||||
void register_custom_elements();
|
||||
|
33
src/ui/util/bem.h
Normal file
33
src/ui/util/bem.h
Normal file
@ -0,0 +1,33 @@
|
||||
#ifndef RECOMPUI_ELEMENTS_BEM
|
||||
#define RECOMPUI_ELEMENTS_BEM
|
||||
|
||||
#include <string>
|
||||
|
||||
namespace recompui {
|
||||
// BEM base class
|
||||
class BEM {
|
||||
public:
|
||||
std::string block;
|
||||
|
||||
BEM(const std::string &block) : block(block) {}
|
||||
virtual ~BEM() = default;
|
||||
|
||||
const std::string get_block() const {
|
||||
return block;
|
||||
}
|
||||
|
||||
const std::string el(const std::string &element) const {
|
||||
return block + "__" + element;
|
||||
}
|
||||
|
||||
const BEM bem_el(const std::string &element) const {
|
||||
return BEM(el(element));
|
||||
}
|
||||
|
||||
const std::string mod(const std::string &modifier) const {
|
||||
return block + "--" + modifier;
|
||||
}
|
||||
};
|
||||
} // namespace recompui
|
||||
|
||||
#endif
|
Loading…
Reference in New Issue
Block a user