🎨 Split ContactsWindow component + use of dioxus-free-icons

2023-08-04 22:34:09 +02:00
parent 54a50c1ff0
commit 45d5eb704c
7 changed files with 502 additions and 473 deletions
--- a/src/components/contacts_window.rs
+++ b/src/components/contacts_window.rs
@@ -0,0 +1,187 @@
+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;
+
+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! {
+        div {
+            class: "{root}",
+
+            div {
+                class: "{header}",
+
+                div {
+                    class: "{title_bar}",
+                },
+
+                div {
+                    class: "{user_info}",
+                },
+
+                UserInfos {},
+            },
+
+            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",
+                    },
+                },
+            },
+
+            Contacts {},
+
+            div {
+                class: "{footer}",
+            },
+        },
+    })
+}