mod menu wip

assets/launcher.rml

@@ -47,6 +47,10 @@
 							<div class="menu-list-item__bullet">•</div>
 							<div class="menu-list-item__label">Setup controls</div>
 						</button>
+						<button onclick="open_mod_menu" class="menu-list-item menu-list-item--right">
+							<div class="menu-list-item__bullet">•</div>
+							<div class="menu-list-item__label">Mods</div>
+						</button>
 						<button onclick="open_settings" class="menu-list-item menu-list-item--right">
 							<div class="menu-list-item__bullet">•</div>
 							<div class="menu-list-item__label">Settings</div>

assets/scss/styles/components/ModMenu.scss

@@ -1,5 +1,5 @@
 .mod-menu {
-    display: flex;
+    display: none;
     position: absolute;
     top: 0;
     right: 0;
@@ -11,6 +11,10 @@
     padding: space($page-margin);
     background-color: $color-modal-overlay;
 
+    &--open {
+        display: flex;
+    }
+
     &__modal-wrapper {
         display: flex;
         position: relative;
@@ -85,3 +89,26 @@
         background-color: $color-bg-overlay;
     }
 }
+
+.mod-menu-mod {
+    display: flex;
+    position: relative;
+    flex: 1 1 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: auto;
+    padding: space(16);
+    border-bottom-width: $border-width-thickness;
+    border-color: $color-border;
+    background-color: $color-bg-overlay;
+
+    &:last-child {
+        border-bottom-width: 0;
+    }
+
+    &__label {
+        @extend %label-lg;
+    }
+}

src/ui/elements/ElementModMenu.cpp

@@ -6,6 +6,11 @@
 
 namespace recompui {
 
+static const std::string mod_menu_id = "mod-menu";
+static const std::string mod_menu_button_id = "mod-menu__button";
+static const std::string mod_menu__close_button_id = "mod-menu__close-button";
+static const std::string mod_menu_mod_id_base = "mod-menu__mod"; // + index
+
 static const BEM mod_menu_bem("mod-menu");
 
 static const std::string cls_base = mod_menu_bem.get_block(); 
@@ -22,19 +27,83 @@ static Rml::Element *add_div_with_class(Rml::ElementDocument *doc, Rml::Element
     return el;
 }
 
+const std::string get_mod_nav_up_id(int index) {
+    if (index == 0) {
+        return "#" + mod_menu_button_id;
+    } else {
+        return "#" + mod_menu_mod_id_base + std::to_string(index - 1);
+    }
+}
+const std::string get_mod_nav_down_id(int index, size_t num_mods) {
+    if (index == num_mods - 1) {
+        return "#" + mod_menu_button_id;
+    } else {
+        return "#" + mod_menu_mod_id_base + std::to_string(index + 1);
+    }
+}
+
+// treated as its own class root
+static const BEM mod_menu_mod("mod-menu-mod");
+static Rml::Element *add_mod_menu_mod(
+    Rml::ElementDocument *doc,
+    Rml::Element *parent_el,
+    recomp::mods::ModDetails &mod,
+    int index,
+    size_t num_mods
+) {
+    Rml::Element *mod_el = parent_el->AppendChild(doc->CreateElement("label"));
+
+    mod_el->SetClass(mod_menu_mod.get_block(), true);
+    // mod_el->SetProperty("nav-up", get_mod_nav_up_id(index));
+    // mod_el->SetProperty("nav-down", get_mod_nav_down_id(index, num_mods));
+    // mod_el->SetId(mod_menu_mod_id_base + std::to_string(index));
+
+    {
+        auto span = mod_el->AppendChild(doc->CreateElement("span"));
+        span->SetInnerRML(mod.mod_id);
+        span->SetClass(mod_menu_mod.el("label"), true);
+
+        auto toggle = add_icon_button(doc, mod_el, "icons/Plus.svg", ButtonVariant::Primary);
+        toggle->SetProperty("nav-up", get_mod_nav_up_id(index));
+        toggle->SetProperty("nav-down", get_mod_nav_down_id(index, num_mods));
+        toggle->SetProperty("nav-left", "none");
+        toggle->SetProperty("nav-right", "none");
+        toggle->SetId(mod_menu_mod_id_base + std::to_string(index));
+    }
+
+    return mod_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);
+    SetId(mod_menu_id);
+
+    std::vector<recomp::mods::ModDetails> mods = recomp::mods::get_mod_details("mm");
+    size_t num_mods = mods.size();
 
     {
         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);
+                auto button = add_button(doc, header_el, "Refresh", ButtonVariant::Primary);
-                add_icon_button(doc, header_el, "icons/X.svg", ButtonVariant::Tertiary);
+                button->SetId(mod_menu_button_id);
+                const std::string below_item = num_mods > 0 ? "#" + mod_menu_mod_id_base + "0" : "#" + mod_menu_button_id;
+                const std::string above_item = num_mods > 0 ? "#" + mod_menu_mod_id_base + std::to_string(num_mods - 1) : "#" + mod_menu_button_id;
+                button->SetProperty("nav-down", below_item);
+                button->SetProperty("nav-up", above_item);
+                button->SetProperty("nav-left", "#" + mod_menu__close_button_id);
+                button->SetProperty("nav-right", "#" + mod_menu__close_button_id);
+
+                auto close_button = add_icon_button(doc, header_el, "icons/X.svg", ButtonVariant::Tertiary);
+                close_button->SetId(mod_menu__close_button_id);
+                close_button->SetProperty("nav-down", below_item);
+                close_button->SetProperty("nav-up", above_item);
+                close_button->SetProperty("nav-left", "#" + mod_menu_button_id);
+                close_button->SetProperty("nav-right", "#" + mod_menu_button_id);
             }
 
             Rml::Element *body_el = add_div_with_class(doc, modal_wrapper_el, cls_modal_body);
@@ -43,10 +112,10 @@ ElementModMenu::ElementModMenu(const Rml::String& tag) : Rml::Element(tag)
                 {
                     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");
+                        int i = 0;
                         for (auto& mod : mods) {
-                            Rml::Element *mod_el = list_el_scroll->AppendChild(doc->CreateElement("div"));
+                            add_mod_menu_mod(doc, list_el_scroll, mod, i, num_mods);
-                            mod_el->SetInnerRML(mod.mod_id);
+                            i++;
                         }
                     } // list_el_scroll
                 } // list_el
@@ -62,5 +131,18 @@ ElementModMenu::~ElementModMenu()
 {
 }
 
+void ElementModMenu::open_menu() {
+    SetClass(mod_menu_bem.mod("open"), true);
+    auto button = GetElementById(mod_menu_button_id);
+    if (button != nullptr) {
+        button->Focus();
+    }
+}
+
+ElementModMenu *get_mod_menu(Rml::ElementDocument *doc) {
+    return (ElementModMenu *)doc->GetElementById(mod_menu_id);
+}
+
+
 
 } // namespace Rml

src/ui/elements/ElementModMenu.h

@@ -9,7 +9,11 @@ class ElementModMenu : public Rml::Element {
 public:
 	ElementModMenu(const Rml::String& tag);
 	virtual ~ElementModMenu();
+
+	void open_menu();
 };
 
+ElementModMenu *get_mod_menu(Rml::ElementDocument *doc);
+
 } // namespace recompui
 #endif

src/ui/ui_launcher.cpp

@@ -1,4 +1,5 @@
 #include "recomp_ui.h"
+#include "ui_elements.h"
 #include "zelda_config.h"
 #include "librecomp/game.hpp"
 #include "ultramodern/ultramodern.hpp"
@@ -87,6 +88,18 @@ public:
 				recompui::set_config_submenu(recompui::ConfigSubmenu::Controls);
 			}
 		);
+		recompui::register_event(listener, "open_mod_menu",
+			[](const std::string& param, Rml::Event& event) {
+				auto el = event.GetCurrentElement();
+				if (el != nullptr) {
+					auto doc = el->GetOwnerDocument();
+					auto mod_menu = recompui::get_mod_menu(doc);
+					if (mod_menu != nullptr) {
+						mod_menu->open_menu();
+					}
+				}
+			}
+		);
         recompui::register_event(listener, "open_settings",
 			[](const std::string& param, Rml::Event& event) {
                 recompui::set_current_menu(recompui::Menu::Config);