Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve login screen: allow scrolling, better layout #308

Merged
merged 1 commit into from
Dec 30, 2024
+78 −39
Merged

Improve login screen: allow scrolling, better layout #308

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 78 additions & 39 deletions src/login/login_screen.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
use std::ops::Not;

use makepad_widgets::*;
use matrix_sdk::ruma::{api::client::session::get_login_types::v3::IdentityProvider, UserId};
use matrix_sdk::ruma::api::client::session::get_login_types::v3::IdentityProvider;

use crate::sliding_sync::{submit_async_request, LoginByPassword, LoginRequest, MatrixRequest};

Expand All @@ -10,6 +10,7 @@ live_design! {
use link::shaders::*;
use link::widgets::*;

use crate::shared::helpers::*;
use crate::shared::styles::*;
use crate::shared::icon_button::*;

Expand Down Expand Up @@ -106,16 +107,18 @@ live_design! {
width: Fit,
height: Fit,
cursor: Hand,
visible: false,
padding: 10.0,
visible: true,
padding: 10,
// margin: 10,
margin: { left: 15.5, right: 15.5, top: 10, bottom: 10}
draw_bg: {
border_width: 1.0,
border_width: 0.5,
border_color: (#6c6c6c),
color: (COLOR_PRIMARY)
}
}
SsoImage = <Image> {
width: 21, height: 21
width: 30, height: 30,
draw_bg:{
uniform mask: 0.0
fn pixel(self) -> vec4 {
Expand All @@ -127,7 +130,7 @@ live_design! {
}
}

pub LoginScreen = {{LoginScreen}} {
pub LoginScreen = {{LoginScreen}}<ScrollXYView> {
width: Fill, height: Fill
show_bg: true,
draw_bg: {
Expand Down Expand Up @@ -173,39 +176,63 @@ live_design! {
empty_message: "Password"
draw_text: { text_style: { is_secret: true } }
}

<View> {
width: Fit, height: Fit,
width: 250, height: Fit,
align: {x: 0.5}
flow: Right,
homeserver_input = <LoginTextInput> {
width: 220, height: 40
margin: {bottom: -10}
empty_message: "matrix.org"
draw_text: {
text_style: <TITLE_TEXT>{font_size: 9.0}
<View> {
width: 215, height: Fit,
flow: Down,

homeserver_input = <LoginTextInput> {
width: 215, height: 30,
empty_message: "matrix.org"
draw_text: {
text_style: <TITLE_TEXT>{font_size: 10.0}
}
}

<View> {
width: 215,
height: Fit,
flow: Right,
padding: {top: 3, left: 2, right: 2}
spacing: 0.0,
align: {x: 0.5, y: 0.5} // center horizontally and vertically

left_line = <LineH> {
draw_bg: { color: #C8C8C8 }
}

<Label> {
width: Fit, height: Fit
draw_text: {
color: #8C8C8C
text_style: <REGULAR_TEXT>{font_size: 9}
}
text: "Homeserver URL (optional)"
}

right_line = <LineH> {
draw_bg: { color: #C8C8C8 }
}
}

}
sso_search_button = <RobrixIconButton> {
width: 25, height: 25,
margin: {top: 5, left: 5 }
width: 28, height: 28,
margin: { left: 5, top: 1}
draw_icon: {
svg_file: (ICON_SEARCH)
}
icon_walk: {width: 16, height: 16, margin: {left: -2, right: -1} }
}
}

<Label> {
width: Fit, height: Fit
draw_text: {
color: #x8c8c8c
text_style: <REGULAR_TEXT>{font_size: 9}
}
text: "Homeserver (optional)"
}

login_button = <RobrixIconButton> {
width: 250, height: 40
margin: {top: 15}
margin: {top: 5, bottom: 10}
draw_bg: {
color: (COLOR_SELECTED_PRIMARY)
}
Expand All @@ -216,10 +243,24 @@ live_design! {
text: "Login"
}

left_line = <LineH> {
margin: {bottom: -5}
draw_bg: { color: #C8C8C8 }
}
<Label> {
width: Fit, height: Fit
draw_text: {
color: (COLOR_TEXT)
text_style: <TITLE_TEXT>{font_size: 11.0}
}
text: "Or, login with an SSO provider:"
}

sso_view = <View> {
spacing: 20,
width: Fit, height: Fit,
flow: Right,
align: {x: 0.5}
width: 250, height: Fit,
margin: {left: 5, right: 5} // make the inner view 240 pixels wide
flow: RightWrap,
apple_button = <SsoButton> {
image = <SsoImage> {
source: dep("crate://self/resources/img/apple.png")
Expand Down Expand Up @@ -253,10 +294,9 @@ live_design! {
}



status_label = <Label> {
width: 250, height: Fit
padding: {left: 5, right: 5, top: 10, bottom: 10}
width: 250, height: Fit,
padding: {left: 5, right: 5, bottom: 10}
draw_text: {
color: (MESSAGE_TEXT_COLOR)
text_style: <REGULAR_TEXT> {}
Expand All @@ -274,7 +314,8 @@ live_design! {
}
signup_button = <Button> {
width: Fit, height: Fit
margin: {top: -5}
margin: {top: -10}
padding: {left: 15, right: 15, top: 10, bottom: 10}
draw_text: {
// color: (MESSAGE_TEXT_COLOR)
fn get_color(self) -> vec4 {
Expand Down Expand Up @@ -338,21 +379,19 @@ impl MatchEvent for LoginScreen {
let _ = robius_open::Uri::new(MATRIX_SIGN_UP_URL).open();
}

if login_button.clicked(actions) || user_id_input.returned(actions).is_some() || password_input.returned(actions).is_some() || homeserver_input.returned(actions).is_some(){
if login_button.clicked(actions)
|| user_id_input.returned(actions).is_some()
|| password_input.returned(actions).is_some()
|| homeserver_input.returned(actions).is_some()
{
let user_id = user_id_input.text();
let password = password_input.text();
let homeserver = homeserver_input.text();
let is_valid_user_id = UserId::parse(&user_id).is_ok();
if user_id.is_empty() || password.is_empty() {
status_label.apply_over(cx, live!{
draw_text: { color: (COLOR_DANGER_RED) }
});
status_label.set_text("Please enter both User ID and Password.");
} else if !is_valid_user_id {
status_label.apply_over(cx, live!{
draw_text: { color: (COLOR_DANGER_RED) }
});
status_label.set_text("User ID is invalid");
} else {
status_label.apply_over(cx, live!{
draw_text: { color: (MESSAGE_TEXT_COLOR) }
Expand Down
Loading