Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

💄 Open/close ChatPanel on click (Conversations layout/big breakpoint)

Browse Source
This commit is contained in:
Adrien
2024-06-09 12:31:18 +02:00
parent ffe759e749
commit 271e865d40
1 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/ui/layouts/conversations.rs
View File

@@ -2,7 +2,7 @@ use std::rc::Rc;
use dioxus::prelude::*; use dioxus::prelude::*;
use futures::join; use futures::join;
use tracing::{error, warn}; use tracing::warn;
use crate::ui::{ use crate::ui::{
components::{ components::{
@@ -151,37 +151,52 @@ fn LayoutBig() -> Element {
let mut first_div = use_signal(|| None::<Rc<MountedData>>); let mut first_div = use_signal(|| None::<Rc<MountedData>>);
let mut last_div = use_signal(|| None::<Rc<MountedData>>); let mut last_div = use_signal(|| None::<Rc<MountedData>>);
let conversation_panels_nb = 3; let displayed_room_ids = STORE.read().displayed_room_ids();
let conversation_panels = (0..conversation_panels_nb + 1).map(|i| {
if i == 0 { let mut conversation_panels = Vec::new();
rsx! { let mut displayed_room_ids_it = displayed_room_ids.iter().peekable();
div { let mut is_first = true;
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL, while let Some(room_id) = displayed_room_ids_it.next() {
onmounted: move |cx| async move { if let Some(room) = STORE.read().rooms().get(room_id) {
let data = cx.data(); let room = room.signal();
let _ = data.as_ref().scroll_to(ScrollBehavior::Smooth).await; let room_name_repr = format!("CHAT {}", room.name().unwrap_or(room.id().to_string()));
first_div.set(Some(data)); let panel = if is_first {
}, is_first = false;
ChatPanel { name: format!("CHAT #{i}") }, rsx! {
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
onmounted: move |cx| async move {
let data = cx.data();
let _ = data.as_ref().scroll_to(ScrollBehavior::Smooth).await;
first_div.set(Some(data));
},
ChatPanel { name: room_name_repr },
}
} }
} } else if displayed_room_ids_it.peek().is_none() {
} else if i == conversation_panels_nb { rsx! {
rsx! { div {
div { class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL, onmounted: move |cx: Event<MountedData>| last_div.set(Some(cx.data())),
onmounted: move |cx: Event<MountedData>| last_div.set(Some(cx.data())), ChatPanel { name: room_name_repr },
ChatPanel { name: format!("CHAT #{i}") }, }
} }
} else {
rsx! {
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
ChatPanel { name: room_name_repr },
}
}
};
if let Some(panel) = panel {
conversation_panels.push(panel);
} }
} else { } else {
rsx! { warn!("No {} room found", room_id);
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
ChatPanel { name: format!("CHAT #{i}") },
}
}
} }
}); }
rsx! { rsx! {
style { {STYLE_SHEET} }, style { {STYLE_SHEET} },
@@ -219,7 +234,7 @@ fn LayoutBig() -> Element {
class: ClassName::CONVERSATIONS_VIEW_HEAD, class: ClassName::CONVERSATIONS_VIEW_HEAD,
} }
{conversation_panels} {conversation_panels.iter()}
div { div {
class: ClassName::CONVERSATIONS_VIEW_TAIL, class: ClassName::CONVERSATIONS_VIEW_TAIL,