12 Jan 2024 |
kirillsemyonkin | * im not sure if i block any events, but i have pointer-events: initial; when its open actually, and i have this small thing to do the click-outside-to-close | 21:26:36 |
kirillsemyonkin | Download image.png | 21:27:16 |
kirillsemyonkin | Download image.png | 21:27:17 |
kirillsemyonkin | and, well, this to be sure that it doesnt close when i click inside window | 21:27:17 |
kirillsemyonkin | also ignore slightly weird html! syntax, its yew-alt-html | 21:27:28 |
kirillsemyonkin | kek | 21:27:29 |
kirillsemyonkin | the use_style! is #stylist | 21:27:38 |
kirillsemyonkin | * the use_style! is #stylist, you dont have to use it, but i recommend it since it makes me not run to a .css | 21:27:56 |
kirillsemyonkin | * the use_style! is #stylist, you dont have to use it, but i recommend it since it makes me not run to a .css and make its very close to the component itself | 21:28:05 |
kirillsemyonkin | * the use_style! is #stylist, you dont have to use it, but i recommend it since it makes me not run to a .css and make its very close to the component itself, many people praise tailwind for it for example | 21:28:15 |
dementeddddd | i see, i prefer to separate styling from the code tho but lemme see | 21:34:29 |
dementeddddd | oh yea | 21:34:38 |
dementeddddd | initial does fix it | 21:34:40 |
dementeddddd | hovering and clicking | 21:34:44 |
dementeddddd | now just scrolling | 21:34:49 |
dementeddddd | i think id have to put overflow: hidden on body | 21:35:15 |
kirillsemyonkin | but you might want to do it only when modal is open | 21:35:32 |
dementeddddd | well yes | 21:35:39 |
dementeddddd | how do i do that from that function | 21:35:42 |
kirillsemyonkin | no clue actually, it would be either using web_sys to set style on body(), or using Global from #stylist | 21:36:20 |
dementeddddd | i have a callback of that button click in my App | 21:36:58 |
dementeddddd | i could set a variable from within there | 21:37:06 |
dementeddddd | but | 21:37:07 |
dementeddddd | that would be on buy click, not when a modal is open | 21:37:16 |
dementeddddd | could i pass a reference to the modal to the callback | 21:37:46 |
dementeddddd | would that be a good idea | 21:37:51 |
kirillsemyonkin | i didnt understand really kek if you are still talking about overflow:hidden, i would do it from ModalProvider/ModalHandle | 21:39:44 |
dementeddddd | how do i set that on body from there tho | 21:40:14 |
dementeddddd | it would be perfect to do it from the show and hide functions | 21:41:51 |
kirillsemyonkin | for the second solution, inside ModalProvider , you just add a
let css = css! {
body {
overflow: ${if *visible { "hidden" } else { "initial" }};
}
};
<Global { css } />
for the first solution, inside show /hide , you would do something like
use gloo_utils::body;
body().style().set_property("overflow", ...).unwrap(); | 21:44:22 |