add support for font-size #19
Conversation
xxrlzzz
commented
Jan 6, 2023
|
This looks great, but there are some improvements that need to be made in native-core that need to be completed before this can be finished. The layout should depend on the font size. When the font size changes, the layout needs to be updated to reflect that. Using a DashMap to handle font size does not handle these updates. (Try making the font size depend on if the button is focused in the buttons example and see that the text stops being centered) The native-core system handles this automatically when you mark one state as dependent on another. Unfortunately, there is currently no good way of representing a state like the layout that is dependent based on both parent and children states. We could probably patch this into the current system by resolving what states are dirty on a node instead of tree level, but it would requiring splitting the layout state in a way that would make the code less readable. Once DioxusLabs/dioxus#730 is finished it should be much easier to represent this kind of state, and we can make some small changes to this PR to make it work |
|
Thanks for your reply, I see the problem is the lack of mechanism that state dependency for both parent and children from |
|
It should be possible to integrate text size with layout now that #22 has been merged |
|
It seems fn app(cx: Scope) -> Element {
let count = use_state(cx, || 1);
let current_count = 10;
let font_size = if *count.get() > 0 { "32px" } else { "16px" };
let color = if *count.get() > 0 { "green" } else { "red" };
cx.render(rsx! {
div { display: "flex", flex_direction: "column", width: "100%", height: "100%",
div {
display: "flex",
flex_direction: "row",
justify_content: "center",
align_items: "center",
text_align: "center",
width: "100%",
height: "10%",
background_color: "green",
tabindex: "0",
onmouseup: |_| {
count.modify(|c|if *c > 0 {0} else {1} );
},
"grid: {current_count}x{current_count} = {current_count*current_count} tiles - Click to add more"
}
div {
display: "flex",
flex_direction: "column",
justify_content: "center",
align_items: "center",
text_align: "center",
width: "100%",
height: "90%",
font_size: "{font_size}",
color: "{color}",
(0..current_count).map(|y|
rsx! {
div { display: "flex", flex_direction: "row", width: "100%", height: "100%",
(0..current_count).map(|x| {
if (x + y) % 2 == 0 {
rsx! {
div {
border_width: "0px",
width: "100%",
height: "100%",
background_color: "rgb(100, 100, 100)"
}
}
} else {
rsx! {
Button {
color_offset: x * y,
layer: ((x + y) % 3) as u16
}
}
}
})
}
}
)
}
}
})
}If there is any my misunderstood, please let me know. |
|
DioxusLabs/dioxus#953 should fix the issue you described. The font size example |
|
A weird compile error I have reported to |
|
new commit will be #29 |