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

157
src/ui/components/conversations.rs
View File

@@ -21,18 +21,13 @@ turf::style_sheet!("src/ui/components/conversations.scss");
#[component]
fn AccountAvatar(content: Option<Vec<u8>>, class_name: Option<String>) -> Element {
match content {
Some(content) => {
let encoded = general_purpose::STANDARD.encode(content);
rsx! {
div {
class: class_name,
background_image: format!("url(data:image/jpeg;base64,{encoded})")
}
rsx! {
if let Some(content) = content {
div {
class: class_name,
background_image: format!("url(data:image/jpeg;base64,{})", general_purpose::STANDARD.encode(content))
}
}
// TODO: Manage acount without avatar
None => None,
}
}
@@ -54,11 +49,11 @@ fn PresenceState(state: Option<DomainPresenceState>, class_name: Option<String>)
rsx! {
div {
class: classes,
LogoIcon {},
LogoIcon {}
}
}
}
None => None,
None => VNode::empty(),
}
}
@@ -70,12 +65,12 @@ fn DisplayName(display_name: Option<String>, class_name: Option<String>) -> Elem
div {
class: class_name,
p {
{display_name},
{display_name}
}
}
}
}
None => None,
None => VNode::empty(),
}
}
@@ -137,37 +132,35 @@ pub fn Account() -> Element {
});
rsx! {
style { {STYLE_SHEET} },
div {
class: ClassName::ACCOUNT,
{avatar},
{presence_state},
{display_name},
{avatar}
{presence_state}
{display_name}
{status},
{status}
div {
class: ClassName::ACCOUNT_SPACES,
Button {
SpacesIcon {},
SpacesIcon {}
}
},
}
div {
class: ClassName::ACCOUNT_CHAT,
Button {
ChatsIcon {},
ChatsIcon {}
}
},
}
div {
class: ClassName::ACCOUNT_ROOM,
Button {
RoomsIcon {},
RoomsIcon {}
}
},
}
}
}
}
@@ -175,8 +168,8 @@ pub fn Account() -> Element {
#[component]
pub fn ConversationAvatar(
room_id: RoomId,
on_selected: EventHandler<RoomId>,
on_pressed: EventHandler<RoomId>,
on_selected: Option<EventHandler<RoomId>>,
on_pressed: Option<EventHandler<RoomId>>,
) -> Element {
let long_press_duration = Duration::from_millis(500);
@@ -185,7 +178,7 @@ pub fn ConversationAvatar(
let room_id = Rc::new(room_id);
let room_name = room.name();
let selected_room_id = use_context::<Signal<Option<RoomId>>>();
let selected_room_id = use_signal(|| None::<RoomId>);
let invited_badge = if room.is_invited() {
rsx! {
@@ -193,12 +186,12 @@ pub fn ConversationAvatar(
class: ClassName::CONVERSATION_AVATAR_INVITED_BADGE,
p {
"Invited",
"Invited"
}
}
}
} else {
None
VNode::empty()
};
let is_selected = match selected_room_id.read().as_ref() {
@@ -206,7 +199,6 @@ pub fn ConversationAvatar(
None => false,
};
// let avatar = if let Some(Some(content)) = &*avatar.read() {
let avatar = if let Some(content) = room.avatar() {
let encoded = general_purpose::STANDARD.encode(content);
rsx! {
@@ -230,7 +222,7 @@ pub fn ConversationAvatar(
div {
class: ClassName::CONVERSATION_AVATAR_IMAGE,
{placeholder},
{placeholder}
}
}
};
@@ -244,12 +236,12 @@ pub fn ConversationAvatar(
let on_press = {
let room_id = room_id.clone();
move || {
on_selected.call(room_id.as_ref().clone());
on_selected.map(|c| c.call(room_id.as_ref().clone()));
}
};
let on_long_press = move || {
on_pressed.call(room_id.as_ref().clone());
on_pressed.map(|c| c.call(room_id.as_ref().clone()));
};
let long_press_hook = use_long_press(long_press_duration, on_press, on_long_press);
@@ -302,7 +294,7 @@ pub fn ConversationsCarousel(
onscroll: move |_| {
// Catch scrolling events.
},
{rendered_avatars},
{rendered_avatars}
}
}
}
@@ -367,8 +359,6 @@ pub fn Space(id: Option<SpaceId>, on_pressed_conversation: EventHandler<RoomId>)
let classes_str = space_classes.join(" ");
rsx! {
style { {STYLE_SHEET} },
div {
class: "{classes_str}",
@@ -382,17 +372,17 @@ pub fn Space(id: Option<SpaceId>, on_pressed_conversation: EventHandler<RoomId>)
p {
{name}
}
},
}
ConversationsCarousel {
on_selected_conversation,
on_pressed_conversation,
},
}
div {
class: ClassName::SPACE_CONVERSATION_NAME,
p {
{selected_room_name},
{selected_room_name}
}
},
}
}
}
}
@@ -412,19 +402,24 @@ pub fn Spaces(on_pressed_conversation: EventHandler<RoomId>) -> Element {
div {
class: ClassName::SPACES,
{rendered_spaces},
{rendered_spaces}
Space { on_pressed_conversation },
Space { on_pressed_conversation }
}
}
}
#[component]
pub fn Search() -> Element {
rsx! {
div {
class: ClassName::SEARCH,
TextInput {}
div {
class: ClassName::SEARCH_TEXT,
TextInput {}
}
div {
class: ClassName::SEARCH_BUTTON,
@@ -437,7 +432,15 @@ pub fn Search() -> Element {
}
#[component]
fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {
fn ConversationOptionsMenu(
room_id: RoomId,
on_close: EventHandler,
on_join: EventHandler,
) -> Element {
let room = STORE.read().rooms().get(&room_id).unwrap().signal();
let topic = room.topic().unwrap_or("<No topic set>".to_string());
rsx! {
div {
class: ClassName::CONVERSATION_OPTIONS_MENU,
@@ -447,31 +450,44 @@ fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {
div {
class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_AVATAR,
ConversationAvatar { room_id }
}
div {
class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_NAME,
p {
{room.name()}
}
}
div {
class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_TOPIC,
p {
{topic}
}
}
div {
class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CONFIG,
p {
"Coming soon..."
}
}
div {
class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_CLOSE_BUTTON,
RejectButton {
onclick: move |_| on_close(()),
onclick: move |_| on_close(())
}
}
div {
class: ClassName::CONVERSATION_OPTIONS_MENU_INNER_JOIN_BUTTON,
JoinButton {
onclick: move |_| on_close(()),
onclick: move |_| {
on_join(());
on_close(());
}
}
}
}
@@ -480,37 +496,54 @@ fn ConversationOptionsMenu(room_id: RoomId, on_close: EventHandler) -> Element {
}
pub fn Conversations() -> Element {
let mut conversation_options_menu = use_signal(|| None::<Element>);
let mut room_id = use_signal(|| None::<RoomId>);
let on_conversation_options_menu_close = move |_| {
conversation_options_menu.set(None);
let on_menu_close = move |_| {
room_id.set(None);
};
let on_pressed_conversation = move |room_id: RoomId| {
conversation_options_menu.set(Some(rsx! { ConversationOptionsMenu { room_id, on_close: on_conversation_options_menu_close } }));
let on_menu_join = move |_| async move {
let rooms = STORE.read().rooms();
if let Some(room_id) = room_id.read().to_owned() {
if let Some(room) = rooms.get(&room_id) {}
}
};
let on_pressed_conversation = move |id: RoomId| {
room_id.set(Some(id));
};
let menu = match room_id.read().as_ref() {
Some(room_id) => {
let room_id = room_id.clone();
rsx! {
ConversationOptionsMenu { room_id, on_close: on_menu_close, on_join: on_menu_join }
}
}
None => VNode::empty(),
};
rsx! {
style { {STYLE_SHEET} },
style { {STYLE_SHEET} }
div {
class: ClassName::CONVERSATIONS,
div {
class: ClassName::CONVERSATIONS_ACCOUNT,
Account {},
},
Account {}
}
div {
class: ClassName::CONVERSATIONS_SPACES,
Spaces { on_pressed_conversation },
},
Spaces { on_pressed_conversation }
}
div {
class: ClassName::CONVERSATIONS_SEARCH,
Search {},
},
},
{conversation_options_menu}
Search {}
}
}
{menu}
}
}