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

⬆️ Use of Dioxus main branch instead of 0.5 release

Browse Source
This commit is contained in:
Adrien
2024-08-21 22:57:34 +02:00
parent d5d996eec3
commit 9a5f7ae504
10 changed files with 318 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,19 @@
use std::rc::Rc;
use std::{collections::HashSet, rc::Rc};
use base64::{engine::general_purpose, Engine as _};
use dioxus::prelude::*;
use futures::join;
use tracing::warn;
use crate::ui::{
components::{
chat_panel::ChatPanel, conversations::Conversations as ConversationsComponent,
wallpaper::Wallpaper,
use crate::{
domain::model::room::RoomId,
ui::{
components::{
chat_panel::ChatPanel, conversations::Conversations as ConversationsComponent,
wallpaper::Wallpaper,
},
STORE,
},
STORE,
};
turf::style_sheet!("src/ui/layouts/conversations.scss");
@@ -66,7 +70,7 @@ fn LayoutSmall() -> Element {
let inner = rsx! {
div {
class: ClassName::CONVERSATIONS_VIEW_SMALL_PANEL_INNER,
ChatPanel { name: format!("CHAT {room_name_repr}") },
ChatPanel { name: format!("CHAT {room_name_repr}") }
}
};
@@ -88,7 +92,7 @@ fn LayoutSmall() -> Element {
}
};
if let Some(panel) = panel {
if let Ok(panel) = panel {
conversation_panels.push(panel);
}
} else {
@@ -97,7 +101,7 @@ fn LayoutSmall() -> Element {
}
rsx! {
style { {STYLE_SHEET} },
style { {STYLE_SHEET} }
div {
class: ClassName::CONVERSATIONS_VIEW_SMALL,
@@ -133,9 +137,9 @@ fn LayoutSmall() -> Element {
div {
class: ClassName::CONVERSATIONS_VIEW_SMALL_CONVERSATIONS_PANEL_INNER,
ConversationsComponent {},
},
},
ConversationsComponent {}
}
}
{conversation_panels.iter()}
@@ -164,33 +168,33 @@ fn LayoutBig() -> Element {
is_first = false;
rsx! {
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_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 },
ChatPanel { name: room_name_repr }
}
}
} else if displayed_room_ids_it.peek().is_none() {
rsx! {
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS_PANEL,
onmounted: move |cx: Event<MountedData>| last_div.set(Some(cx.data())),
ChatPanel { name: room_name_repr },
ChatPanel { name: room_name_repr }
}
}
} else {
rsx! {
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS_PANEL,
ChatPanel { name: room_name_repr },
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS_PANEL,
ChatPanel { name: room_name_repr }
}
}
};
if let Some(panel) = panel {
if let Ok(panel) = panel {
conversation_panels.push(panel);
}
} else {
@@ -199,7 +203,7 @@ fn LayoutBig() -> Element {
}
rsx! {
style { {STYLE_SHEET} },
style { {STYLE_SHEET} }
div {
class: ClassName::CONVERSATIONS_VIEW_BIG,
@@ -207,40 +211,45 @@ fn LayoutBig() -> Element {
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANEL,
ConversationsComponent {},
},
ConversationsComponent {}
}
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATION_PANELS,
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS,
onmounted: move |cx| async move {
let data = cx.data();
carousel_div.set(Some(data));
},
onscroll: move |_| {
async move {
if let (Some(carousel_div), Some(first_div), Some(last_div)) = (
carousel_div.read().as_ref(),
first_div.read().as_ref(),
last_div.read().as_ref(),
) {
on_carousel_scroll(carousel_div, first_div, last_div).await;
div {
class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS,
onmounted: move |cx| async move {
let data = cx.data();
carousel_div.set(Some(data));
},
onscroll: move |_| {
async move {
if let (Some(carousel_div), Some(first_div), Some(last_div)) = (
carousel_div.read().as_ref(),
first_div.read().as_ref(),
last_div.read().as_ref(),
) {
on_carousel_scroll(carousel_div, first_div, last_div).await;
}
}
},
div {
class: ClassName::CONVERSATIONS_VIEW_HEAD,
}
},
div {
class: ClassName::CONVERSATIONS_VIEW_HEAD,
{conversation_panels.iter()}
div {
class: ClassName::CONVERSATIONS_VIEW_TAIL,
}
}
{conversation_panels.iter()}
div {
class: ClassName::CONVERSATIONS_VIEW_TAIL,
}
},
}
}
}
}
@@ -249,29 +258,29 @@ pub fn Conversations() -> Element {
let mut layout = use_signal(|| None::<VNode>);
rsx! {
style { {STYLE_SHEET} },
style { {STYLE_SHEET} }
Wallpaper {
display_version: true
},
}
div {
class: ClassName::CONVERSATIONS_VIEW,
onresized: move |cx| {
onresize: move |cx| {
let data = cx.data();
let mut use_big_layout = false;
if let Ok(size) = data.get_border_box_size() {
if let Some(size) = size.first() {
// Use LayoutBig if the layout can contain 2 panels side by side
let component_width = size.height * INNER_PANEL_HEIGHT_RATIO * ASPECT_RATIO;
let breakpoint_width = component_width * 2_f64;
use_big_layout = size.width > breakpoint_width;
}
// Use LayoutBig if the layout can contain 2 panels side by side
let component_width = size.height * INNER_PANEL_HEIGHT_RATIO * ASPECT_RATIO;
let breakpoint_width = component_width * 2_f64;
use_big_layout = size.width > breakpoint_width;
}
layout.set(rsx! { if use_big_layout { LayoutBig {} } else { LayoutSmall {} }});
// let layout_result = rsx! { if use_big_layout { LayoutBig {} } else { LayoutSmall {} }};
let layout_result = rsx! { LayoutBig {} };
layout.set(Some(layout_result.unwrap()));
},
{layout}