init mod menu + bem class + button presets

CMakeLists.txt

@@ -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

assets/config_menu/controls.rml

@@ -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" />

assets/launcher.rml

@@ -61,6 +61,7 @@
 					<label>v{{version_number}}</label>
 				</div>
 			</div>
+			<recomp-mod-menu />
 		</div>
 	</body>
 </rml>

assets/scss/styles/components/IconButton.scss

@@ -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);
     }
 

assets/scss/styles/components/ModMenu.scss

@@ -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;
+    }
+}

assets/scss/styles/components/_components.scss

@@ -14,3 +14,4 @@
 @import "./Toggle";
 @import "./BottomLeft";
 @import "./Prompt";
+@import "./ModMenu";

include/recomp_ui.h

@@ -8,6 +8,7 @@
 #include "RmlUi/Core.h"
 
 #include "../src/ui/util/hsv.h"
+#include "../src/ui/util/bem.h"
 
 namespace Rml {
 	class ElementDocument;

lib/N64ModernRuntime

@@ -1 +1 @@
-Subproject commit d5c81d0a6bf2e5f36747a095a7a060d7623bbf58
+Subproject commit d6ac7f3f747d6ae383840371520c20e4bf5ef1d4

src/ui/elements/ElementModMenu.cpp

@@ -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

src/ui/elements/ElementModMenu.h

@@ -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

src/ui/elements/presets.cpp

@@ -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

src/ui/elements/presets.h

@@ -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

src/ui/ui_elements.cpp

@@ -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());
     }

src/ui/ui_elements.h

@@ -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();

src/ui/util/bem.h

@@ -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