🐛 Fix a view in charge to set the Login dimesions according to the screen aspect-ratio

This commit is contained in:
2024-04-22 14:55:20 +02:00
parent 6172167ea8
commit fcf3d92cf9
9 changed files with 279 additions and 206 deletions

View File

@@ -20,8 +20,6 @@ use super::modal::{Modal, Severity};
use super::spinner::Spinner;
use super::text_input::{PasswordInputState, PasswordTextInput, TextInput, TextInputState};
use super::wallpaper::Wallpaper;
include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
use style::{
@@ -613,7 +611,7 @@ pub fn Login() -> Element {
let avatar = match &*random_avatar_future.read_unchecked() {
Some(svg) => Some(rsx! {
div {
class: ClassName::LOGIN_FORM_PHOTO_CONTENT,
class: ClassName::LOGIN_AVATAR_CONTENT,
dangerous_inner_html: svg.as_str(),
}
}),
@@ -639,7 +637,6 @@ pub fn Login() -> Element {
to_owned![handlers];
move |_| {
handlers.reset_handlers();
if *current_process.read() == Process::Registration {
@@ -713,13 +710,13 @@ pub fn Login() -> Element {
}
};
let mut form_classes: [&str; 2] = [ClassName::LOGIN_FORM, ""];
let mut password_classes: [&str; 2] = [ClassName::LOGIN_FORM_PASSWORD, ""];
let mut confirm_password_classes: [&str; 2] = [ClassName::LOGIN_FORM_CONFIRM_PASSWORD, ""];
let mut classes: [&str; 2] = [ClassName::LOGIN, ""];
let mut password_classes: [&str; 2] = [ClassName::LOGIN_PASSWORD, ""];
let mut confirm_password_classes: [&str; 2] = [ClassName::LOGIN_CONFIRM_PASSWORD, ""];
match *current_process.read() {
Process::Registration => {
form_classes[1] = ClassName::REGISTER;
classes[1] = ClassName::REGISTER;
password_classes[1] = ClassName::SHOW;
confirm_password_classes[1] = ClassName::SHOW;
@@ -743,92 +740,86 @@ pub fn Login() -> Element {
.as_ref()
.map(|modal_config| rsx!({ generate_modal(modal_config, on_modal_confirm) }));
let form_classes_str = form_classes.join(" ");
let classes_str = classes.join(" ");
let password_classes_str = password_classes.join(" ");
let confirm_password_classes_str = confirm_password_classes.join(" ");
rsx! {
style { {STYLE_SHEET} },
Wallpaper {},
div {
class: ClassName::LOGIN,
class: "{classes_str}",
div {
class: "{form_classes_str}",
class: ClassName::LOGIN_AVATAR,
div {
class: ClassName::LOGIN_FORM_PHOTO,
onclick: move |_| {
random_avatar_future.restart()
},
{avatar},
onclick: move |_| {
random_avatar_future.restart()
},
div {
class: ClassName::LOGIN_FORM_HOMESERVER,
TextInput {
placeholder: "Homeserver URL",
value: "{homeserver_url}",
state: homeserver_url_state,
oninput: on_input![data, homeserver_url],
},
{avatar},
},
div {
class: ClassName::LOGIN_HOMESERVER,
TextInput {
placeholder: "Homeserver URL",
value: "{homeserver_url}",
state: homeserver_url_state,
oninput: on_input![data, homeserver_url],
},
},
div {
class: ClassName::LOGIN_ID,
TextInput {
placeholder: "{id_placeholder}",
value: "{id}",
state: id_state,
oninput: on_input![data, id],
},
},
div {
class: "{password_classes_str}",
PasswordTextInput {
placeholder: "Password",
value: "{password}",
state: password_state,
oninput: on_input![data, password],
},
div {
class: ClassName::LOGIN_FORM_ID,
TextInput {
placeholder: "{id_placeholder}",
value: "{id}",
state: id_state,
oninput: on_input![data, id],
},
},
div {
class: "{confirm_password_classes_str}",
PasswordTextInput {
placeholder: "Confirm Password",
value: "{confirm_password}",
state: confirm_password_state,
oninput: on_input![data, confirm_password],
}
},
div {
class: ClassName::LOGIN_SPINNER,
Spinner {
animate: *spinner_animated.read(),
},
},
div {
class: "{password_classes_str}",
PasswordTextInput {
placeholder: "Password",
value: "{password}",
state: password_state,
oninput: on_input![data, password],
},
div {
class: ClassName::LOGIN_REGISTER_BUTTON,
RegisterButton {
onclick: on_clicked_register,
},
},
div {
class: "{confirm_password_classes_str}",
PasswordTextInput {
placeholder: "Confirm Password",
value: "{confirm_password}",
state: confirm_password_state,
oninput: on_input![data, confirm_password],
}
},
div {
class: ClassName::LOGIN_FORM_SPINNER,
Spinner {
animate: *spinner_animated.read(),
},
},
div {
class: ClassName::LOGIN_FORM_REGISTER_BUTTON,
RegisterButton {
onclick: on_clicked_register,
},
},
div {
class: ClassName::LOGIN_FORM_LOGIN_BUTTON,
LoginButton {
focus: true,
onclick: on_clicked_login,
},
div {
class: ClassName::LOGIN_LOGIN_BUTTON,
LoginButton {
focus: true,
onclick: on_clicked_login,
},
},
},