✨ Add first static (no reactivity, static data) implementation of ChatsWindow

images/webcam.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 48 48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="m36.5 44h-25c-1.1 0-1.8-1.2-1.3-2.2l2.8-4.8h22l2.7 4.8c.6 1-.1 2.2-1.2 2.2z" fill="#455a64"/><circle cx="24" cy="23" fill="#78909c" r="18"/><path d="m24 35c-6.6 0-12-5.4-12-12s5.4-12 12-12 12 5.4 12 12-5.4 12-12 12z" fill="#455a64"/><circle cx="24" cy="23" fill="#42a5f5" r="9"/><path d="m28.8 20c-1.2-1.4-3-2.2-4.8-2.2s-3.6.8-4.8 2.2c-.5.5-.4 1.3.1 1.8s1.3.4 1.8-.1c1.5-1.7 4.3-1.7 5.8 0 .3.3.6.4 1 .4.3 0 .6-.1.9-.3.4-.4.5-1.3 0-1.8z" fill="#90caf9"/></svg>

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;

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 {}
+                        },
+                    },
+                },
+            },
+        },
     })
 }

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;
+			}
+		}
+	}
+}

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 {
+                    "🔎"
+                },
+            },
+        },
+    })
+}

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%;
+	}
+}

src/components/chats_window/mod.rs

@@ -1 +1,3 @@
 pub mod chats_window;
+
+mod edit_section;