various_widgets: add visibility test, minor refactoring

This commit is contained in:
Aleksander
2025-11-15 00:00:41 +01:00
parent 3daee83838
commit 5ce745d2b9
11 changed files with 182 additions and 94 deletions

View File

@@ -1,31 +1,40 @@
<layout>
<elements>
<rectangle
width="1000" height="1000" min_width="1000" min_height="500"
gap="4" flex_direction="column"
color="#444444ee"
overflow_y="scroll">
<label text="Raw text" color="#FFFFFF" />
<label translation="TESTBED.HELLO_WORLD" color="#FFFFFF" />
<macro name="rect"
color="#000000aa"
round="4" border="2"
border_color="#ffffffaa"
flex_direction="column"
gap="4"
padding="8"
align_self="baseline"
align_items="baseline" />
<div margin_left="16" gap="8" flex_direction="column">
<elements>
<rectangle position="absolute" width="100%" height="100%" color="#1e3a3eee" />
<div
margin="16"
gap="4"
flex_direction="column"
overflow_y="scroll">
<rectangle macro="rect">
<label text="Raw text" color="#FFFFFF" />
<label translation="TESTBED.HELLO_WORLD" color="#FFFFFF" />
</rectangle>
<rectangle macro="rect">
<label id="label_current_option" text="Click any of these buttons" size="20" weight="bold" />
<Button id="button_popup" text="Show pop-up" width="200" height="32" color="#777777" />
<div gap="4">
<Button id="button_red" text="Red button" width="150" height="32" color="#FF0000" tooltip="I'm at the top" tooltip_side="top" />
<Button id="button_aqua" text="Aqua button" width="150" height="32" color="#00FFFF" tooltip="I'm at the bottom" tooltip_side="bottom" />
<Button id="button_yellow" text="Yellow button" width="150" height="32" color="#FFFF00" tooltip="TESTBED.HELLO_WORLD" tooltip_side="right" />
</div>
<Button id="button_click_me" text="Click me" width="128" height="24" color="#FFFFFF" />
<div gap="8" align_items="center">
<CheckBox id="cb_first" text="I'm a checkbox!" />
<CheckBox text="and me too!" />
<CheckBox text="i'm tall" box_size="32" />
<CheckBox text="i'm checked by default" checked="1" />
<div gap="4">
<Button id="button_click_me" text="Click me" width="128" height="24" color="#FFFFFF" />
<Button id="button_popup" text="Show pop-up" width="200" height="32" color="#777777" />
</div>
<label text="custom attrib test, you should see size rectangles below, each of them in R, G and B (if TESTBED is not set)" />
<label text="custom attrib test" />
<div flex_direction="row" gap="8">
<label text="lighter:" />
@@ -39,13 +48,29 @@
<rectangle _my_custom="green" _mult="0.5" width="16" height="16" />
<rectangle _my_custom="blue" _mult="0.5" width="16" height="16" />
</div>
</div>
</rectangle>
<div flex_direction="row" gap="16">
<rectangle macro="rect">
<label text="visibility test" weight="bold" />
<CheckBox id="cb_visible" height="24" text="visible" />
<div id="div_visibility" flex_direction="column" gap="8" margin_top="8" align_items="baseline" display="none">
<Button text="button" width="128" height="24" />
<Button text="button" width="128" height="24" />
<Button text="button" width="128" height="24" />
<CheckBox height="32" text="foobar" />
<Slider width="200" height="24" min_value="42" max_value="2137" value="100" />
</div>
</rectangle>
<rectangle macro="rect" flex_direction="row" gap="16">
<CheckBox id="cb_first" text="I'm a checkbox!" />
<CheckBox text="and me too!" />
<CheckBox text="i'm checked by default" checked="1" />
</rectangle>
<rectangle macro="rect" flex_direction="row" align_items="start">
<div flex_direction="column" gap="8">
<rectangle width="128" height="2" />
<label text="height 16" />
<rectangle width="128" height="2" />
<label text="height 16" weight="bold" />
<label text="range 0-100 value 25" />
<Slider width="200" height="16" min_value="0" max_value="100" value="25" />
@@ -57,10 +82,10 @@
<Slider width="200" height="16" min_value="-10" max_value="42" value="0" />
</div>
<rectangle color="#ffffff44" width="2" height="100%" margin_left="4" margin_right="4" />
<div flex_direction="column" gap="8">
<rectangle width="128" height="2" />
<label text="height 24" />
<rectangle width="128" height="2" />
<label text="height 24" weight="bold" />
<label text="range 0-100 value 25" />
<Slider width="200" height="24" min_value="0" max_value="100" value="25" />
@@ -71,22 +96,7 @@
<label text="range -10-42 value 0" />
<Slider width="200" height="24" min_value="-10" max_value="42" value="0" />
</div>
<div flex_direction="column" gap="8">
<rectangle width="128" height="2" />
<label text="height 32" />
<rectangle width="128" height="2" />
<label text="range 0-100 value 25" />
<Slider width="200" height="32" min_value="0" max_value="100" value="25" />
<label text="range 10-20 value 15" />
<Slider width="200" height="32" min_value="10" max_value="20" value="15" />
<label text="range -10-42 value 0" />
<Slider width="200" height="32" min_value="-10" max_value="42" value="0" />
</div>
</div>
</rectangle>
</rectangle>
</div>
</elements>
</layout>

View File

@@ -18,6 +18,7 @@ use wgui::{
i18n::Translation,
layout::{Layout, LayoutParams, RcLayout, Widget},
parser::{Fetchable, ParseDocumentExtra, ParseDocumentParams, ParserState},
taffy,
widget::{label::WidgetLabel, rectangle::WidgetRectangle},
windowing::{WguiWindow, WguiWindowParams},
};
@@ -118,6 +119,24 @@ impl TestbedGeneric {
},
)?;
let cb_visible = state.fetch_component_as::<ComponentCheckbox>("cb_visible")?;
let div_visibility = state.fetch_widget(&layout.state, "div_visibility")?;
cb_visible.on_toggle(Box::new(move |common, evt| {
let mut style = common
.state
.get_widget_style(div_visibility.id)
.unwrap()
.clone();
style.display = if evt.checked {
taffy::Display::Flex
} else {
taffy::Display::None
};
common.alterables.set_style(div_visibility.id, style);
Ok(())
}));
let label_cur_option = state.fetch_widget(&layout.state, "label_current_option")?;
let button_click_me = state.fetch_component_as::<ComponentButton>("button_click_me")?;