🎨 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.rs
+++ b/src/components/contacts.rs
@@ -0,0 +1,143 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::io_icons::IoChevronDown;
+use dioxus_free_icons::Icon;
+use sir::global_css;
+
+fn ContactsArrow(cx: Scope) -> Element {
+    cx.render(rsx! {
+        Icon {
+            icon: IoChevronDown,
+        },
+    })
+}
+
+pub fn Contacts(cx: Scope) -> Element {
+    // TODO: Use @extend once implemented (https://github.com/kaj/rsass/issues/65)
+    global_css!(
+        "
+        .contacts {
+             height: 72%;
+             width: 100%;
+             background-color: white;
+             font-size: 8pt;
+
+             &.active {
+                 ul {
+                     opacity: 0;
+                 }
+
+                 svg {
+                     transform: rotate(180deg);
+                 }
+
+             }
+
+             .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;
+                 }
+             }
+
+             svg {
+                 transition: 0.4s ease;
+             }
+
+             .contact {
+                 list-style-type: none
+                 margin: 0 auto
+                 text-align: left
+                 cursor: pointer
+             }
+        }
+        "
+    );
+
+    let show_contacts = use_state(cx, || false);
+    let contacts_active = if **show_contacts { "active" } else { "" };
+
+    cx.render(rsx! {
+        div {
+            class: "contacts {contacts_active}",
+
+            p {
+                class: "header",
+                onclick: move |_| show_contacts.set(!show_contacts),
+
+                ContactsArrow {},
+
+                "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",
+                    }
+                },
+            },
+        },
+    })
+}