dash-frontend: Welcome screen: Improve UX

This commit is contained in:
Aleksander 2026-06-30 17:26:52 +02:00 committed by galister
parent 1742d5f589
commit 951dbbd87f
6 changed files with 31 additions and 10 deletions

View File

@ -98,11 +98,11 @@
<div
id="content"
flex_direction="column"
padding="16"
gap="8"
width="100%"
height="100%"
>
<!-- padding set at runtime -->
<!-- filled-in at runtime -->
</div>
</div>

View File

@ -4,18 +4,20 @@
</template>
<elements>
<div flex_direction="column" flex_grow="1" gap="16" align_items="center" overflow_y="hidden">
<div position="relative" flex_grow="1">
<!-- Content -->
<div id="content" flex_direction="column" flex_grow="1" align_items="center" justify_content="center" gap="16" overflow_y="scroll" width="100%">
<div position="absolute" id="content" flex_direction="column" flex_grow="1" align_items="center" justify_content="center" gap="16" width="100%" height="100%">
<!-- filled-in at runtime -->
</div>
<!-- Page buttons -->
<div flex_direction="row" gap="8" align_items="center">
<Button id="btn_prev" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_left.svg" />
<div id="pips" gap="4" align_items="center">
<!-- filled-in at runtime -->
<div position="absolute" align_self="end" justify_self="end" width="100%" flex_direction="column" align_items="center" margin_bottom="8">
<div flex_direction="row" gap="8" align_items="center">
<Button id="btn_prev" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_left.svg" />
<div id="pips" gap="4" align_items="center">
<!-- filled-in at runtime -->
</div>
<Button id="btn_next" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_right.svg" />
</div>
<Button id="btn_next" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_right.svg" />
</div>
</div>
</elements>

View File

@ -14,5 +14,5 @@
<macro name="video_overlay_component" looping="1" width="100%" height="auto" max_height="100%" aspect_ratio="1.777777" position="relative"/>
<macro name="video_overlay_content" new_pass="1" position="absolute" width="100%" height="100%"/>
<macro name="video_overlay_content" new_pass="1" position="absolute" width="100%" height="100%" padding_bottom="32"/>
</layout>

View File

@ -9,5 +9,7 @@
<label size="20" margin_top="16" text="Let us guide you through your first steps."/>
<label size="20" text="Press &quot;Next&quot; button below to get started."/>
<div height="42"/> <!-- empty space -->
</elements>
</layout>

View File

@ -5,12 +5,14 @@ use glam::Vec2;
use wgui::{
assets::{AssetPath, AssetProvider},
components::button::ComponentButton,
event::StyleSetRequest,
font_config::WguiFontConfig,
globals::WguiGlobals,
i18n::Translation,
layout::{Layout, LayoutParams, LayoutUpdateParams, LayoutUpdateResult, WidgetID},
layout::{Layout, LayoutParams, LayoutTask, LayoutUpdateParams, LayoutUpdateResult, WidgetID},
parser::{Fetchable, ParseDocumentParams, ParserState},
renderer_vk::text::custom_glyph::CustomGlyphData,
taffy::{self},
task::Tasks,
theme::WguiTheme,
widget::{label::WidgetLabel, rectangle::WidgetRectangle, sprite::WidgetSprite},
@ -392,6 +394,12 @@ impl<T: 'static> Frontend<T> {
let widget_content = self.state.fetch_widget(&self.layout.state, "content")?;
self.layout.remove_children(widget_content.id);
let padding = tab_type.get_preferred_padding();
self.layout.tasks.push(LayoutTask::SetWidgetStyle(
widget_content.id,
StyleSetRequest::Padding(taffy::Rect::length(padding)),
));
let (tab_translation, icon_path) = match tab_type {
TabType::Welcome => ("GETTING_STARTED", "dashboard/welcome.svg"),
TabType::Home => ("HOME_SCREEN", "dashboard/home.svg"),

View File

@ -17,6 +17,15 @@ pub enum TabType {
Welcome,
}
impl TabType {
pub fn get_preferred_padding(&self) -> f32 {
match self {
TabType::Welcome => 0.0,
_ => 16.0,
}
}
}
pub trait Tab<T> {
#[allow(dead_code)]
fn get_type(&self) -> TabType;