🎨 Split ChatsWindow component

Creation of the Navbar and Conversation components.

src/components/chats_window/chats_window.scss

@@ -89,143 +89,6 @@
 					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/conversation.rs

@@ -0,0 +1,80 @@
+use dioxus::prelude::*;
+use tracing::debug;
+
+use super::edit_section::EditSection;
+use crate::components::avatar_selector::AvatarSelector;
+use crate::components::icons::DownArrowIcon;
+
+turf::style_sheet!("src/components/chats_window/conversation.scss");
+
+pub(super) fn Conversation(cx: Scope) -> Element {
+    debug!("Conversation {} rendering", "TBD");
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        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/conversation.scss

@@ -0,0 +1,113 @@
+@import "../../_base.scss"
+
+.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/mod.rs

@@ -1,6 +1,7 @@
-pub mod interface;
+mod conversation;
-
 mod edit_section;
+pub mod interface;
+mod navbar;
 
 use std::collections::{HashMap, HashSet};
 
@@ -11,11 +12,10 @@ use tokio::sync::broadcast::Receiver;
 use tracing::{debug, error};
 
 use crate::base::{sync_rooms, Room, ROOMS};
-use crate::components::avatar_selector::AvatarSelector;
-use crate::components::icons::DownArrowIcon;
 use crate::matrix_interface::requester::Receivers;
+use conversation::Conversation;
+use navbar::Navbar;
 
-use edit_section::EditSection;
 use interface::{Interface, Tasks};
 
 turf::style_sheet!("src/components/chats_window/chats_window.scss");
@@ -144,118 +144,10 @@ pub fn ChatsWindow(cx: Scope<ChatsWindowProps>) -> Element {
                         },
                     },
 
-                    div {
+                    Navbar {},
-                        class: ClassName::NAVBAR,
-
-                        button {
-                            style: "background: url(./images/add_user2.png) center no-repeat",
                 },
 
-                        button {
+                Conversation {},
-                            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/navbar.rs

@@ -0,0 +1,50 @@
+use dioxus::prelude::*;
+use tracing::debug;
+
+turf::style_sheet!("src/components/chats_window/navbar.scss");
+
+pub fn Navbar(cx: Scope) -> Element {
+    debug!("Navbar rendering");
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        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",
+            },
+        },
+    })
+}

src/components/chats_window/navbar.scss

@@ -0,0 +1,26 @@
+@import "../../_base.scss"
+
+.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;
+	}
+}