Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

🎨 Replace sir with turf + move css to dedicated scss files

Browse Source
This commit is contained in:
Adrien
2023-08-06 21:27:20 +02:00
parent 88b063b770
commit fd80b7fc10
16 changed files with 432 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/contacts_window.rs
View File

@@ -1,151 +1,60 @@
use dioxus::prelude::*;
use sir::css;
use crate::app_settings::AppSettings;
use crate::components::contacts::Contacts;
use crate::components::header::Header;
use crate::components::user_infos::UserInfos;
turf::style_sheet!("src/components/contacts_window.scss");
pub fn ContactWindow(cx: Scope) -> Element {
let app_context = use_shared_state::<AppSettings>(cx).unwrap();
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%;
"
);
cx.render(rsx! {
style { STYLE_SHEET },
div {
class: "{root}",
class: ClassName::CONTACTS_WINDOW,
div {
class: "{header}",
class: ClassName::HEADER,
div {
class: "{title_bar}",
class: ClassName::TITLE_BAR,
},
div {
class: "{user_info}",
class: ClassName::USER_INFO,
},
UserInfos {},
},
div {
class: "{contacts_nav}",
class: ClassName::CONTACTS_NAV,
div {
class: "{contacts_nav_inner}",
class: ClassName::INNER,
button {
class: "aero-button",
class: ClassName::AERO_BUTTON,
style: "background: url(./images/letter.png) center no-repeat",
},
button {
class: "aero-button",
class: ClassName::AERO_BUTTON,
style: "background: url(./images/directory.png) no-repeat center",
},
button {
class: "aero-button",
class: ClassName::AERO_BUTTON,
style: "background: url(./images/news.png) no-repeat center",
},
button {
class: "aero-button flex-right",
class: ClassName::FLEX_RIGHT_AERO_BUTTON,
style: "background: url(./images/brush.png) no-repeat center",
},
button {
class: "aero-button",
class: ClassName::AERO_BUTTON,
style: "background: url(./images/settings.png) no-repeat center",
},
@@ -154,24 +63,24 @@ pub fn ContactWindow(cx: Scope) -> Element {
},
div {
class: "{search}",
class: ClassName::SEARCH,
div {
class: "{search_inner}",
class: ClassName::INNER,
input {
class: "{search_input}",
class: ClassName::SEARCH_INPUT,
placeholder: "Find a contact...",
r#type: "text",
},
button {
class: "button",
class: ClassName::BUTTON,
style: "background: url(./images/add_user.png) no-repeat center",
},
button {
class: "button",
class: ClassName::BUTTON,
style: "background: url(./images/tbc_transfert.png) no-repeat center",
},
},
@@ -180,7 +89,7 @@ pub fn ContactWindow(cx: Scope) -> Element {
Contacts {},
div {
class: "{footer}",
class: ClassName::FOOTER,
},
},
})