Animate overlay open/close

This commit is contained in:
Luke Street
2026-04-30 22:17:48 -06:00
parent 9dc5fed686
commit 32b4c0567a
4 changed files with 35 additions and 14 deletions
+1 -1
+7 -1
View File
@@ -24,8 +24,14 @@ body {
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
decorator: linear-gradient(0deg, #151610F2 0%, #151610CC 60%, #00000000 100%);
decorator: vertical-gradient(#00000000 #151610F2);
padding: 48dp 0 40dp 0;
filter: opacity(0);
transition: filter 0.2s linear-in-out;
}
.overlay-root[open] {
filter: opacity(1);
}
button {
+24 -11
View File
@@ -18,7 +18,7 @@ const Rml::String kDocumentSource = R"RML(
<link type="text/rcss" href="res/rml/overlay.rcss" />
</head>
<body>
<div class="overlay-root">
<div id="root" class="overlay-root">
<div class="overlay">
<div class="header">
<div id="title"></div>
@@ -193,7 +193,7 @@ Overlay::Overlay(OverlayProps props)
add_component<Button>(returnParent,
Button::Props{
.text = "Return",
.onPressed = [this](Rml::Event&) { dismiss(); },
.onPressed = [this](Rml::Event&) { pop_document(); },
}, "footer-button"
);
returnButton.root()->SetClass("return", true);
@@ -208,6 +208,27 @@ Overlay::Overlay(OverlayProps props)
);
resetButton.root()->SetClass("reset", true);
}
// Hide document after transition completion
mRoot = mDocument->GetElementById("root");
listen(mRoot, Rml::EventId::Transitionend, [this](Rml::Event& event) {
if (event.GetTargetElement() == mRoot &&
*mRoot->GetProperty(Rml::PropertyId::Visibility) == Rml::Style::Visibility::Visible &&
mDismissed)
{
Document::hide();
}
});
}
void Overlay::show() {
Document::show();
mRoot->SetAttribute("open", "");
}
void Overlay::hide() {
mRoot->RemoveAttribute("open");
mDismissed = true;
}
void Overlay::update() {
@@ -228,20 +249,12 @@ bool Overlay::focus() {
bool Overlay::handle_nav_command(Rml::Event& event, NavCommand cmd) {
if (cmd == NavCommand::Cancel) {
dismiss();
pop_document();
return true;
}
return Document::handle_nav_command(event, cmd);
}
void Overlay::dismiss() {
if (mDismissed) {
return;
}
mDismissed = true;
pop_document();
}
void Overlay::reset_default() {
set_value(mOption, mValueMin);
}
+3 -1
View File
@@ -56,6 +56,8 @@ class Overlay : public Document {
public:
explicit Overlay(OverlayProps props);
void show() override;
void hide() override;
void update() override;
bool focus() override;
@@ -71,13 +73,13 @@ private:
return ref;
}
void dismiss();
void reset_default();
GraphicsOption mOption;
int mValueMin = 0;
int mValueMax = 0;
std::vector<std::unique_ptr<Component> > mComponents;
Rml::Element* mRoot;
bool mDismissed = false;
};