mirror of https://github.com/wayvr-org/wayvr.git
dash-frontend: Welcome screen: Improve UX
This commit is contained in:
parent
1742d5f589
commit
951dbbd87f
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -9,5 +9,7 @@
|
|||
|
||||
<label size="20" margin_top="16" text="Let us guide you through your first steps."/>
|
||||
<label size="20" text="Press "Next" button below to get started."/>
|
||||
|
||||
<div height="42"/> <!-- empty space -->
|
||||
</elements>
|
||||
</layout>
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue