🎉 First commit (💩)
This commit is contained in:
77
src/components/avatar_selector.rs
Normal file
77
src/components/avatar_selector.rs
Normal file
@@ -0,0 +1,77 @@
|
||||
use dioxus::prelude::*;
|
||||
use sir::css;
|
||||
|
||||
pub fn AvatarSelector(cx: Scope) -> Element {
|
||||
let selector = css!(
|
||||
"
|
||||
position: relative;
|
||||
//left: 35%;
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
"
|
||||
);
|
||||
|
||||
let picture = css!(
|
||||
"
|
||||
position: absolute;
|
||||
height: 75%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
bottom: 17.5%;
|
||||
right: 18%;
|
||||
"
|
||||
);
|
||||
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
class: "{selector}",
|
||||
svg {
|
||||
view_box: "0 0 100 100",
|
||||
linearGradient {
|
||||
id: "avatar-gradient",
|
||||
x1: 1,
|
||||
y1: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
stop {
|
||||
offset: "0%",
|
||||
stop_color: "rgb(138, 191, 209)",
|
||||
}
|
||||
stop {
|
||||
offset: "60%",
|
||||
stop_color: "rgb(236, 246, 249)",
|
||||
}
|
||||
},
|
||||
filter {
|
||||
id: "avatar-shadow",
|
||||
feDropShadow {
|
||||
dx: 2,
|
||||
dy: 2,
|
||||
std_deviation: 3,
|
||||
flood_opacity: 0.5,
|
||||
},
|
||||
},
|
||||
rect {
|
||||
width: "90",
|
||||
height: "90",
|
||||
rx: "12",
|
||||
fill: "url('#avatar-gradient')",
|
||||
filter: "url('#avatar-shadow')",
|
||||
stroke: "grey",
|
||||
},
|
||||
// rect {
|
||||
// x: "7.5",
|
||||
// y: "7.5",
|
||||
// width: "75",
|
||||
// height: "75",
|
||||
// fill: "transparent",
|
||||
// stroke: "grey",
|
||||
// },
|
||||
},
|
||||
img {
|
||||
class: "{picture}",
|
||||
src: "./images/default-avatar.png",
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
467
src/components/control_window.rs
Normal file
467
src/components/control_window.rs
Normal file
@@ -0,0 +1,467 @@
|
||||
use dioxus::prelude::*;
|
||||
use sir::{css, global_css};
|
||||
|
||||
use crate::app_settings::AppSettings;
|
||||
use crate::components::avatar_selector::AvatarSelector;
|
||||
use crate::components::header::Header;
|
||||
|
||||
pub fn ControlWindow(cx: Scope) -> Element {
|
||||
let app_context = use_shared_state::<AppSettings>(cx).unwrap();
|
||||
println!("app_context={:?}", app_context.read());
|
||||
|
||||
// TODO: Use @extend once implemented (https://github.com/kaj/rsass/issues/65)
|
||||
global_css!(
|
||||
"
|
||||
.aero-button {
|
||||
height: 50%;
|
||||
min-height: 16px;
|
||||
aspect-ratio: 1;
|
||||
background-color: transparent;
|
||||
border: 2px solid transparent;
|
||||
background-size: contain !important;
|
||||
margin-right: 1%;
|
||||
}
|
||||
.aero-button:hover {
|
||||
border-image: url(./images/aerobutton_border.png) 2 round;
|
||||
}
|
||||
.aero-button:active {
|
||||
border-image: url(./images/aerobutton_border_down.png) 2 round;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 50%;
|
||||
min-height: 16px;
|
||||
aspect-ratio: 1;
|
||||
background-color: transparent;
|
||||
border: 2px solid transparent;
|
||||
background-size: contain !important;
|
||||
margin-right: 1%;
|
||||
}
|
||||
.button:hover {
|
||||
border-image: url(./images/button_border.png) 2 round;
|
||||
}
|
||||
.button:active {
|
||||
border-image: url(./images/button_border_down.png) 2 round;
|
||||
}
|
||||
|
||||
.flex-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
position: relative;
|
||||
height: 75%;
|
||||
width: 99%;
|
||||
top: -75%;
|
||||
left: 1%;
|
||||
aspect-ratio: 1;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.avatar-selector {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.user-id {
|
||||
height: 30%;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
text-align: begin;
|
||||
align-items: center;
|
||||
|
||||
.user-name {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
display: inline-block;
|
||||
color: #B9DDE7;
|
||||
width: fit-content;
|
||||
//margin-left: 1%;
|
||||
//padding-left: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message {
|
||||
width: fit-content;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
text-align: begin;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// From https://codepen.io/zoomodesign/pen/yNbVVZ
|
||||
.contacts {
|
||||
height: 72%;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
font-size: 8pt;
|
||||
|
||||
&.active {
|
||||
.arrow {
|
||||
transform: rotate(45deg) translate(-5px,-5px);
|
||||
&:before {
|
||||
transform: translate(10px,0);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(90deg) translate(10px,0);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 2%;
|
||||
width: 98%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
margin-left: 1%;
|
||||
padding-top: 1%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
height: 2%;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: calc((100%/1080)*10);
|
||||
aspect-ratio: 1;
|
||||
display: inline-block;
|
||||
transition: 0.4s ease;
|
||||
margin-top: calc((100%/1080)*2);
|
||||
margin-right: 2%;
|
||||
text-align: left;
|
||||
transform: rotate(45deg);
|
||||
float: right;
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
background-color: #000;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
top: -5px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
list-style-type: none
|
||||
margin: 0 auto
|
||||
text-align: left
|
||||
cursor: pointer
|
||||
}
|
||||
}
|
||||
"
|
||||
);
|
||||
|
||||
let root = css!(
|
||||
"
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #ECF6F9;
|
||||
font-family: \"Tahoma\", sans-serif;
|
||||
|
||||
border: thin solid #707070;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 5px #00000050;
|
||||
"
|
||||
);
|
||||
|
||||
let header = css!(
|
||||
"
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
"
|
||||
);
|
||||
|
||||
let title_bar = css!(
|
||||
"
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
background:
|
||||
linear-gradient(180deg, #7DC5E3, #3883A3);
|
||||
"
|
||||
);
|
||||
let user_info = css!(
|
||||
"
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
background:
|
||||
linear-gradient(180deg, #00658B, #0077A6);
|
||||
"
|
||||
);
|
||||
let contacts_nav = css!(
|
||||
"
|
||||
height: calc(31/1080*100%);
|
||||
background:
|
||||
linear-gradient(180deg, #00658B, #0077A6);
|
||||
"
|
||||
);
|
||||
|
||||
let contacts_nav_inner = css!(
|
||||
"
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
);
|
||||
|
||||
let search = css!(
|
||||
"
|
||||
height: calc(38/1080*100%);
|
||||
width: 100%;
|
||||
|
||||
border-bottom: thin solid #e2eaf3;
|
||||
"
|
||||
);
|
||||
|
||||
// TODO: Remove following div
|
||||
let search_inner = css!(
|
||||
"
|
||||
height: 100%;
|
||||
width: 98%;
|
||||
padding-left: 1%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
"
|
||||
);
|
||||
|
||||
let search_input = css!(
|
||||
"
|
||||
height: calc(23/38*100%);
|
||||
width: 100%;
|
||||
margin-right: 1%;
|
||||
border: thin solid #c7c7c7;
|
||||
box-shadow: inset 0 0 calc(3/1080*100%) #0000002a;
|
||||
font-size: 8pt;
|
||||
|
||||
padding-left: 1%;
|
||||
"
|
||||
);
|
||||
|
||||
let footer = css!(
|
||||
"
|
||||
height: 10%;
|
||||
"
|
||||
);
|
||||
|
||||
let show_contacts = use_state(cx, || false);
|
||||
|
||||
let contacts_active = if **show_contacts { "active" } else { "" };
|
||||
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
class: "{root}",
|
||||
|
||||
div {
|
||||
class: "{header}",
|
||||
|
||||
div {
|
||||
class: "{title_bar}",
|
||||
},
|
||||
|
||||
div {
|
||||
class: "{user_info}",
|
||||
},
|
||||
|
||||
div {
|
||||
class: "user-info",
|
||||
|
||||
div {
|
||||
class: "avatar-selector",
|
||||
AvatarSelector {},
|
||||
},
|
||||
|
||||
div {
|
||||
class: "info-container",
|
||||
|
||||
div {
|
||||
class: "aero-button user-id",
|
||||
p {
|
||||
class: "user-name",
|
||||
"SUPER USER"
|
||||
},
|
||||
p {
|
||||
class: "user-status",
|
||||
"(Busy)",
|
||||
},
|
||||
},
|
||||
|
||||
div {
|
||||
class: "aero-button user-message",
|
||||
p {
|
||||
"My message",
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
div {
|
||||
class: "{contacts_nav}",
|
||||
div {
|
||||
class: "{contacts_nav_inner}",
|
||||
|
||||
button {
|
||||
class: "aero-button",
|
||||
style: "background: url(./images/letter.png) center no-repeat",
|
||||
},
|
||||
button {
|
||||
class: "aero-button",
|
||||
style: "background: url(./images/directory.png) no-repeat center",
|
||||
},
|
||||
button {
|
||||
class: "aero-button",
|
||||
style: "background: url(./images/news.png) no-repeat center",
|
||||
},
|
||||
|
||||
button {
|
||||
class: "aero-button flex-right",
|
||||
style: "background: url(./images/brush.png) no-repeat center",
|
||||
},
|
||||
button {
|
||||
class: "aero-button",
|
||||
style: "background: url(./images/settings.png) no-repeat center",
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
div {
|
||||
class: "{search}",
|
||||
|
||||
div {
|
||||
class: "{search_inner}",
|
||||
|
||||
input {
|
||||
class: "{search_input}",
|
||||
placeholder: "Find a contact...",
|
||||
r#type: "text",
|
||||
},
|
||||
|
||||
button {
|
||||
class: "button",
|
||||
style: "background: url(./images/add_user.png) no-repeat center",
|
||||
},
|
||||
|
||||
button {
|
||||
class: "button",
|
||||
style: "background: url(./images/tbc_transfert.png) no-repeat center",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
div {
|
||||
class: "contacts {contacts_active}",
|
||||
|
||||
p {
|
||||
class: "header",
|
||||
onclick: move |_| show_contacts.set(!show_contacts),
|
||||
span {
|
||||
class: "arrow",
|
||||
},
|
||||
"Online (4)",
|
||||
},
|
||||
|
||||
// TODO: Test overflow
|
||||
ul {
|
||||
li {
|
||||
img {
|
||||
src: "./images/status_online.png",
|
||||
},
|
||||
p {
|
||||
"Contact AAAAAAAA -",
|
||||
},
|
||||
p {
|
||||
style: "color: darkgrey;",
|
||||
"i'm sad all day until i get to talk with friends, online friends that is",
|
||||
},
|
||||
},
|
||||
li {
|
||||
img {
|
||||
src: "./images/status_busy.png",
|
||||
},
|
||||
p {
|
||||
"Contact BBBBBB -",
|
||||
},
|
||||
p {
|
||||
style: "color: darkgrey;",
|
||||
"i'm sad all day until i get to talk with friends, online friends that is",
|
||||
}
|
||||
},
|
||||
li {
|
||||
img {
|
||||
src: "./images/status_away.png",
|
||||
},
|
||||
p {
|
||||
"Contact CCC -",
|
||||
},
|
||||
p {
|
||||
style: "color: darkgrey;",
|
||||
"i'm sad all day until i get to talk with friends, online friends that is",
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
div {
|
||||
class: "{footer}",
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
38
src/components/header.rs
Normal file
38
src/components/header.rs
Normal file
@@ -0,0 +1,38 @@
|
||||
use dioxus::prelude::*;
|
||||
use sir::css;
|
||||
|
||||
pub fn Header(cx: Scope) -> Element {
|
||||
let header = css!(
|
||||
"
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
svg {
|
||||
fill: white;
|
||||
}
|
||||
"
|
||||
);
|
||||
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
class: "{header}",
|
||||
img {
|
||||
// src: "./assets/live-logo2.png"
|
||||
src: "./images/logo-msn.png"
|
||||
}
|
||||
svg {
|
||||
view_box: "0 0 100 10",
|
||||
text {
|
||||
y: "55%",
|
||||
dominant_baseline: "middle",
|
||||
font_size: "5",
|
||||
"Windows Live Messenger",
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
170
src/components/login.rs
Normal file
170
src/components/login.rs
Normal file
@@ -0,0 +1,170 @@
|
||||
use dioxus::prelude::*;
|
||||
use sir::css;
|
||||
use std::str::FromStr;
|
||||
use std::sync::Arc;
|
||||
|
||||
use crate::app_settings::AppSettings;
|
||||
use crate::components::avatar_selector::AvatarSelector;
|
||||
use crate::components::header::Header;
|
||||
use crate::matrix_client::{LoginStyle, MatrixClient};
|
||||
|
||||
pub fn Login(cx: Scope) -> Element {
|
||||
let app_context = use_shared_state::<AppSettings>(cx).unwrap();
|
||||
println!("app_context={:?}", app_context.read());
|
||||
|
||||
let login = use_ref(cx, || Login::new());
|
||||
|
||||
let empty_placeholder = String::from("");
|
||||
|
||||
let root = css!(
|
||||
"
|
||||
width: 90%;
|
||||
height: 98%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 5%;
|
||||
padding-top: 2%;
|
||||
|
||||
background: linear-gradient(rgb(138, 191, 209), rgb(236, 246, 249) 10%);
|
||||
"
|
||||
);
|
||||
|
||||
let header = css!(
|
||||
"
|
||||
height: 5%;
|
||||
width: 100%;
|
||||
"
|
||||
);
|
||||
|
||||
let body = css!(
|
||||
"
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
max-width: 400px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
padding-bottom: 3%;
|
||||
"
|
||||
);
|
||||
|
||||
let footer_buttons = css!(
|
||||
"
|
||||
width: 100%;
|
||||
|
||||
padding-top: 5%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
"
|
||||
);
|
||||
|
||||
let avatar_selector = css!(
|
||||
"
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
"
|
||||
);
|
||||
|
||||
let run_matrix_client = move |_| {
|
||||
to_owned![app_context, login];
|
||||
|
||||
let homeserver_url = login.read().homeserver_url.clone().unwrap();
|
||||
let username = login.read().email.clone().unwrap();
|
||||
let password = login.read().password.clone().unwrap();
|
||||
|
||||
cx.spawn(async {
|
||||
let requester = MatrixClient::spawn(homeserver_url).await;
|
||||
|
||||
requester.init();
|
||||
requester.login(LoginStyle::Password(username, password));
|
||||
|
||||
let context = app_context;
|
||||
context.write().requester = Some(Arc::new(requester));
|
||||
});
|
||||
};
|
||||
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
class: "{root}",
|
||||
|
||||
div {
|
||||
class: "{header}",
|
||||
Header {},
|
||||
},
|
||||
|
||||
div {
|
||||
class: "{body}",
|
||||
div {
|
||||
class: "{avatar_selector}",
|
||||
AvatarSelector {},
|
||||
},
|
||||
|
||||
p {
|
||||
"Matrix homeserver:"
|
||||
},
|
||||
input {
|
||||
id: "input-homeserver-url",
|
||||
r#type: "text",
|
||||
name: "homeserver URL",
|
||||
value: "{(login.read().homeserver_url.as_ref().unwrap_or(&empty_placeholder))}",
|
||||
oninput: move |evt| login.write().homeserver_url = Some(evt.value.clone()),
|
||||
},
|
||||
|
||||
p {
|
||||
"E-mail address:"
|
||||
},
|
||||
input {
|
||||
id: "login-input-email",
|
||||
r#type: "text",
|
||||
name: "email",
|
||||
value: "{login.read().email.as_ref().unwrap_or(&empty_placeholder)}",
|
||||
oninput: move |evt| login.write().email = Some(evt.value.clone()),
|
||||
},
|
||||
p {
|
||||
"Password:"
|
||||
},
|
||||
input {
|
||||
id: "login-input-password",
|
||||
r#type: "password",
|
||||
name: "Password",
|
||||
value: "{login.read().password.as_ref().unwrap_or(&empty_placeholder)}",
|
||||
oninput: move |evt| login.write().password = Some(evt.value.clone()),
|
||||
},
|
||||
|
||||
div {
|
||||
class: "{footer_buttons}",
|
||||
input {
|
||||
class: "button",
|
||||
onclick: run_matrix_client,
|
||||
r#type: "submit",
|
||||
value: "sign in",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
#[derive(Debug)]
|
||||
struct Login {
|
||||
homeserver_url: Option<String>,
|
||||
email: Option<String>,
|
||||
password: Option<String>,
|
||||
}
|
||||
|
||||
impl Login {
|
||||
fn new() -> Self {
|
||||
let login = Self {
|
||||
homeserver_url: None,
|
||||
email: None,
|
||||
password: None,
|
||||
};
|
||||
login
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user