diff --git a/images/add_user2.png b/images/add_user2.png new file mode 100644 index 0000000..82eea87 Binary files /dev/null and b/images/add_user2.png differ diff --git a/images/ban_user.png b/images/ban_user.png new file mode 100644 index 0000000..1a679ed Binary files /dev/null and b/images/ban_user.png differ diff --git a/images/games.png b/images/games.png new file mode 100644 index 0000000..11cfa77 Binary files /dev/null and b/images/games.png differ diff --git a/images/medias.png b/images/medias.png new file mode 100644 index 0000000..b5db00b Binary files /dev/null and b/images/medias.png differ diff --git a/images/phone.png b/images/phone.png new file mode 100644 index 0000000..ce1af32 Binary files /dev/null and b/images/phone.png differ diff --git a/images/webcam.svg b/images/webcam.svg new file mode 100644 index 0000000..7c3f49d --- /dev/null +++ b/images/webcam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/wizz.png.old b/images/wizz.png.old new file mode 100644 index 0000000..d7b1d5d Binary files /dev/null and b/images/wizz.png.old differ diff --git a/src/_base.scss b/src/_base.scss index 6dbde92..f210d6e 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -1,6 +1,8 @@ $font-size: 100vh * 0.01; $icon-size: $font-size * 2; +$border-style: thin solid #BED6E0; + body { height: 100vh; width: 100vw; diff --git a/src/components/chats_window/chats_window.rs b/src/components/chats_window/chats_window.rs index e542ab2..2d5edff 100644 --- a/src/components/chats_window/chats_window.rs +++ b/src/components/chats_window/chats_window.rs @@ -1,8 +1,184 @@ use dioxus::prelude::*; +use crate::components::avatar_selector::AvatarSelector; +use crate::components::chats_window::edit_section::EditSection; +use crate::components::icons::DownArrowIcon; + +turf::style_sheet!("src/components/chats_window/chats_window.scss"); + pub fn ChatsWindow(cx: Scope) -> Element { + let room_names = vec![ + "MON POTE", + "Second room", + "Third room", + "AAAAAAAAAAAA", + "BBBBBBBBBBBBBBBBBBB", + "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC", + ]; + + let rendered_room_tabs = room_names.into_iter().map(|room_name| { + rsx!( + div { + class: ClassName::TAB, + + button { + img { + src: "./images/status_online.png", + }, + + "{room_name}", + }, + }, + ) + }); + cx.render(rsx! { + style { STYLE_SHEET }, + div { - } + class: ClassName::CHATS_WINDOW, + + div { + class: ClassName::TABS, + + rendered_room_tabs.into_iter(), + }, + + div { + class: ClassName::CHAT, + + div { + class: ClassName::HEADER, + + div { + class: ClassName::INFO, + + p { + class: ClassName::ROOM_NAME, + + "MON POTE", + }, + + p { + class: ClassName::ROOM_TOPIC, + + "LE STATUT A MON POTE", + }, + }, + + div { + class: ClassName::NAVBAR, + + button { + style: "background: url(./images/add_user2.png) center no-repeat", + }, + + button { + style: "background: url(./images/directory.png) center no-repeat", + }, + + button { + style: "background: url(./images/phone.png) center no-repeat", + }, + + button { + style: "background: url(./images/medias.png) center no-repeat", + }, + + button { + style: "background: url(./images/games.png) center no-repeat", + }, + + button { + style: "background: url(./images/ban_user.png) center no-repeat", + }, + + button { + class: ClassName::FLEX_RIGHT_AERO_BUTTON, + style: "background: url(./images/brush.png) center no-repeat", + }, + + button { + class: ClassName::FLEX_LAST_BUTTON, + style: "background: url(./images/settings.png) center no-repeat", + }, + }, + }, + + div { + class: ClassName::CONVERSATION, + + div { + class: ClassName::ROOM_EVENTS, + + ul { + li { + class: ClassName::ROOM_EVENT, + div { + p { + class: ClassName::TITLE, + "MON POTE says:" + }, + p { + class: ClassName::CONTENT, + "Coucou mon pote", + }, + }, + }, + }, + }, + + div { + class: ClassName::OTHER_AVATAR_SELECTOR_CONTAINER, + + div { + + class: ClassName::AVATAR_SELECTOR, + AvatarSelector {}, + }, + div { + class: ClassName::WEBCAM, + img { + src: "images/webcam.svg" + }, + }, + + div { + class: ClassName::ARROW_ICON, + DownArrowIcon {} + }, + }, + + div { + class: ClassName::HOLDER, + "••••••" + }, + + div { + class: ClassName::EDIT_SECTION, + EditSection {}, + }, + + div { + class: ClassName::MY_AVATAR_SELECTOR_CONTAINER, + + div { + class: ClassName::AVATAR_SELECTOR, + AvatarSelector {}, + }, + div { + class: ClassName::WEBCAM, + img { + src: "images/webcam.svg" + }, + }, + div { + class: ClassName::ARROW_ICON, + DownArrowIcon {} + }, + }, + }, + }, + }, }) } diff --git a/src/components/chats_window/chats_window.scss b/src/components/chats_window/chats_window.scss new file mode 100644 index 0000000..a0379a2 --- /dev/null +++ b/src/components/chats_window/chats_window.scss @@ -0,0 +1,231 @@ +@import "../../_base.scss" + +.chats-window { + height: 100%; + width: 100%; + + $horizontal-padding-margin: calc((2*100%)/1980); + + .tabs { + height: 2%; + width: 100%; + + display: flex; + flex-flow: row; + overflow-x: scroll; + + &::-webkit-scrollbar { + height: 0px; + } + + .tab { + height: 100%; + flex-grow: 1; + padding: 0 $horizontal-padding-margin; + + display: flex; + + button { + height: 100%; + width: 100%; + + display: flex; + flex-direction: row; + align-items: center; + + $clamped-horizontal-padding-margin: clamp(5px, $horizontal-padding-margin, $horizontal-padding-margin); + margin: 0 $clamped-horizontal-padding-margin; + padding: 0 $clamped-horizontal-padding-margin; + + white-space: nowrap; + + background-color: #EFF9F9; + border: $border-style; + + $radius: calc((6*100%)/1980); + $clamped-radius: clamp(6px, $radius, $radius); + border-radius: $clamped-radius $clamped-radius 0 0; + + font-size: $font-size; + + img { + height: $icon-size; + aspect-ratio: 1; + } + } + } + } + + .chat { + height: 98%; + width: 100%; + + background-color: #ECF6F9; + + .header { + height: 7%; + + border: $border-style; + + .info { + height: 45%; + display: flex; + flex-direction: column; + + padding-left: 2%; + + background: linear-gradient(180deg, #BFE3EB, #DEFBFE); + + font-size: $font-size; + + .room-name { + margin: 0; + margin-top: 1%; + font-weight: bold; + } + + .room-topic { + margin: 0; + color: darkgrey; + } + } + + .navbar { + height: 55%; + padding-left: 2%; + padding-right: 2%; + + background: linear-gradient(180deg, #A9D3E0, #F0F9FA); + + display: flex; + flex-direction: row; + align-items: center; + + button { + @extend .aeroButton; + padding-right: 2%; + } + + .flex-right-aero-button { + margin-left: auto; + } + + .flex-last-button { + margin: 0; + } + } + } + + .conversation { + $padding-top: 2%; + + height: calc(93% - $padding-top); + + padding-left: 2%; + padding-top: $padding-top; + + display: grid; + grid-template-columns: 75% 25%; + grid-template-rows: 70% 1% 29%; + cursor: pointer; + + .holder { + display: flex; + justify-content: center; + align-items: center; + + grid-column: 1; + grid-row: 2; + + color: darkgrey; + } + + .room-events { + display: flex; + flex-flow: column; + justify-content: flex-start; + + border: $border-style; + background-color: #FFFFFF; + + ul { + margin: 0; + padding-left: 0; + } + + li { + list-style-type: none; + } + + .room-event { + display: flex; + flex-flow: column; + justify-content: space-between; + + padding-top: 1%; + + font-size: $font-size; + + .title { + margin: 0; + } + + .content { + margin: 0; + padding-left: 2%; + } + } + } + + %selector-container { + aspect-ratio: 1; + + grid-column: 2; + + display: grid; + grid-template-columns: 10% 15% 50% 15% 10%; + grid-template-rows: 80% 20%; + + .avatar-selector { + grid-column-start: 1; + grid-column-end: 6; + aspect-ratio: 1; + } + + .webcam { + grid-column: 2; + grid-row: 2; + + aspect-ratio: 1; + } + + .arrow-icon { + grid-column: 4; + grid-row: 2; + + svg { + path:last-child { + fill: black; + } + } + } + } + + .other-avatar-selector-container { + @extend %selector-container; + + grid-row: 1; + } + + .my-avatar-selector-container { + @extend %selector-container; + + grid-row: 3; + } + + .edit-section { + grid-row: 3; + } + } + } +} diff --git a/src/components/chats_window/edit_section.rs b/src/components/chats_window/edit_section.rs new file mode 100644 index 0000000..285a4d0 --- /dev/null +++ b/src/components/chats_window/edit_section.rs @@ -0,0 +1,52 @@ +use dioxus::prelude::*; + +turf::style_sheet!("src/components/chats_window/edit_section.scss"); + +pub fn EditSection(cx: Scope) -> Element { + cx.render(rsx! { + style { STYLE_SHEET }, + + div { + class: ClassName::INPUT_AREA, + + div { + class: ClassName::BUTTONS, + + button { + "😀" + }, + + button { + "😉" + }, + + button { + "😴" + }, + + button { + "🔊" + }, + }, + + textarea { + class: ClassName::EDIT, + placeholder: "Type your message here...", + }, + + div { + class: ClassName::CMD_BUTTONS, + + button { + class: ClassName::SEND_BUTTON, + + "Send" + }, + + button { + "🔎" + }, + }, + }, + }) +} diff --git a/src/components/chats_window/edit_section.scss b/src/components/chats_window/edit_section.scss new file mode 100644 index 0000000..97c94b6 --- /dev/null +++ b/src/components/chats_window/edit_section.scss @@ -0,0 +1,55 @@ +@import "../../_base.scss" + +.input-area { + height: 100%; + width: 100%; + + margin-bottom: 2%; + + .buttons { + $padding-top-bottom: 0.5%; + + height: calc(10% - ($padding-top-bottom * 2)); + padding-left: 2%; + padding-top: $padding-top-bottom; + padding-bottom: $padding-top-bottom; + + display: flex; + flex-direction: row; + align-items: center; + + border: $border-style; + background: linear-gradient(180deg, #F5FDFF, #E3ECF0, #F5FDFF); + + button { + @extend .aeroButton; + height: $icon-size; + + padding: 0; + margin: 0; + margin-right: 2%; + + font-size: larger; + } + } + + .edit { + height: 80%; + // Remove border from width + width: calc(100% - 2px); + + padding: 0; + margin: 0; + } + + .cmd-buttons { + height: 7%; + display: flex; + flex-direction: row; + justify-content: flex-end; + } + + .send-button { + width: 15%; + } +} diff --git a/src/components/chats_window/mod.rs b/src/components/chats_window/mod.rs index 42160ea..8e7c844 100644 --- a/src/components/chats_window/mod.rs +++ b/src/components/chats_window/mod.rs @@ -1 +1,3 @@ pub mod chats_window; + +mod edit_section;