diff --git a/extern/aurora b/extern/aurora index 935756010c..a923cc0db4 160000 --- a/extern/aurora +++ b/extern/aurora @@ -1 +1 @@ -Subproject commit 935756010cbe02c04ce78bc5ccb7185c271040d6 +Subproject commit a923cc0db4a8ee44b7780d7943e7d0a3a6a35167 diff --git a/res/MaterialSymbolsRounded-Regular.ttf b/res/MaterialSymbolsRounded-Regular.ttf new file mode 100644 index 0000000000..782fc0a406 Binary files /dev/null and b/res/MaterialSymbolsRounded-Regular.ttf differ diff --git a/res/rml/tabbing.rcss b/res/rml/tabbing.rcss index e223a4cfad..894316ff5c 100644 --- a/res/rml/tabbing.rcss +++ b/res/rml/tabbing.rcss @@ -1,10 +1,21 @@ tab-bar { display: flex; + position: relative; min-width: 0; overflow: auto hidden; + clip: always; text-transform: uppercase; } +tab-bar scrollbarhorizontal, +tab-bar scrollbarhorizontal sliderarrowdec, +tab-bar scrollbarhorizontal sliderarrowinc, +tab-bar scrollbarhorizontal slidertrack, +tab-bar scrollbarhorizontal sliderbar { + width: 0; + height: 0; +} + tab-bar tab { flex: 0 0 auto; padding: 0 24dp; @@ -31,3 +42,42 @@ tab-bar tab:hover { tab-bar tab:active { decorator: vertical-gradient(#c2a42d10 #c2a42d40); } + +tab-bar[closable] tab-end-spacer { + display: block; + flex: 0 0 64dp; + width: 64dp; + pointer-events: none; +} + +tab-bar[closable] close { + display: block; + position: fixed; + top: 8dp; + right: 8dp; + z-index: 1; + width: 48dp; + height: 48dp; + font-family: "Material Symbols Rounded"; + font-weight: normal; + font-size: 24dp; + line-height: 48dp; + text-align: center; + text-transform: none; + color: rgba(224, 219, 200, 70%); + backdrop-filter: blur(2dp); + border-radius: 6dp; + transition: color background-color 0.12s linear-in-out; + cursor: pointer; +} + +tab-bar[closable] close:hover, +tab-bar[closable] close:focus-visible { + color: #fff; + background-color: rgba(194, 164, 45, 24%); +} + +tab-bar[closable] close:active { + color: #fff; + background-color: rgba(194, 164, 45, 40%); +} diff --git a/src/dusk/ui/popup.cpp b/src/dusk/ui/popup.cpp index 461db91fc6..75658d965d 100644 --- a/src/dusk/ui/popup.cpp +++ b/src/dusk/ui/popup.cpp @@ -31,18 +31,21 @@ const Rml::String kDocumentSource = R"RML( } Popup::Popup() : Document(kDocumentSource), mRoot(mDocument->GetElementById("popup")) { - mTabBar = std::make_unique(mRoot, TabBar::Props{.autoSelect = false}); + mTabBar = std::make_unique(mRoot, TabBar::Props{ + .onClose = [this] { hide(false); }, + .autoSelect = false, + }); mTabBar->add_tab("Settings", [] { push_document(std::make_unique()); }); - mTabBar->add_tab("Warp", [] { - // TODO - }); + // mTabBar->add_tab("Warp", [] { + // // TODO + // }); mTabBar->add_tab("Editor", [] { push_document(std::make_unique()); }); mTabBar->add_tab("Reset", [this] { JUTGamePad::C3ButtonReset::sResetSwitchPushing = true; mTabBar->set_active_tab(-1); hide(false); }); - mTabBar->add_tab("Exit", [] { IsRunning = false; }); + mTabBar->add_tab("Quit", [] { IsRunning = false; }); // Hide document after transition completion listen(mRoot, Rml::EventId::Transitionend, [this](Rml::Event& event) { @@ -106,6 +109,11 @@ void Popup::update_safe_area() noexcept { Rml::PropertyId::PaddingRight, Rml::Property(safeInsets.right, Rml::Unit::PX)); tabBar->SetProperty( Rml::PropertyId::PaddingLeft, Rml::Property(safeInsets.left, Rml::Unit::PX)); + if (auto* close = tabBar->QuerySelector("close")) { + close->SetProperty(Rml::PropertyId::Right, + Rml::Property(safeInsets.right + 8.0f * context->GetDensityIndependentPixelRatio(), + Rml::Unit::PX)); + } } bool Popup::visible() const { diff --git a/src/dusk/ui/tab_bar.cpp b/src/dusk/ui/tab_bar.cpp index 1329d5f205..5d19d22b27 100644 --- a/src/dusk/ui/tab_bar.cpp +++ b/src/dusk/ui/tab_bar.cpp @@ -9,16 +9,78 @@ Rml::Element* createRoot(Rml::Element* parent) { return parent->AppendChild(std::move(elem)); } +int key_modifiers_from_event(const Rml::Event& event) { + int modifiers = 0; + if (event.GetParameter("ctrl_key", 0)) { + modifiers |= Rml::Input::KM_CTRL; + } + if (event.GetParameter("shift_key", 0)) { + modifiers |= Rml::Input::KM_SHIFT; + } + if (event.GetParameter("alt_key", 0)) { + modifiers |= Rml::Input::KM_ALT; + } + if (event.GetParameter("meta_key", 0)) { + modifiers |= Rml::Input::KM_META; + } + if (event.GetParameter("caps_lock_key", 0)) { + modifiers |= Rml::Input::KM_CAPSLOCK; + } + if (event.GetParameter("num_lock_key", 0)) { + modifiers |= Rml::Input::KM_NUMLOCK; + } + if (event.GetParameter("scroll_lock_key", 0)) { + modifiers |= Rml::Input::KM_SCROLLLOCK; + } + return modifiers; +} + } // namespace TabBar::TabBar(Rml::Element* parent, Props props) : FluentComponent(createRoot(parent)), mProps(std::move(props)) { + if (mProps.onClose) { + mRoot->SetAttribute("closable", ""); + auto& closeButton = + add_child