summaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/chats_list.rs42
-rw-r--r--src/components/message_composer.rs79
-rw-r--r--src/components/roster_list.rs77
3 files changed, 160 insertions, 38 deletions
diff --git a/src/components/chats_list.rs b/src/components/chats_list.rs
index 43ee53e..027de64 100644
--- a/src/components/chats_list.rs
+++ b/src/components/chats_list.rs
@@ -1,7 +1,9 @@
use chats_list_item::ChatsListItem;
use indexmap::IndexMap;
use jid::BareJID;
-use leptos::prelude::*;
+use js_sys::{wasm_bindgen::UnwrapThrowExt, Object, Reflect, JSON};
+use leptos::{html::Div, prelude::*};
+use overlay_scrollbars::OverlayScrollbars;
use tracing::debug;
use crate::{
@@ -86,6 +88,30 @@ pub fn ChatsList() -> impl IntoView {
}
});
+ let chats_list: NodeRef<Div> = NodeRef::new();
+ let chats_list_viewport: NodeRef<Div> = NodeRef::new();
+
+ let _scrollbars = Effect::new(move |_| {
+ if let Some(buffer) = chats_list.get() {
+ if let Some(viewport) = chats_list_viewport.get() {
+ let scrollbars_obj = Object::new();
+ // Reflect::set(&scrollbars_obj, &"theme".into(), &"os-macaw".into()).unwrap_throw();
+ // Reflect::set(&scrollbars_obj, &"autoHide".into(), &"leave".into()).unwrap_throw();
+ let options_obj = Object::new();
+ // Reflect::set(&options_obj, &"scrollbars".into(), &scrollbars_obj).unwrap_throw();
+
+ let elements_obj = Object::new();
+ Reflect::set(&elements_obj, &"viewport".into(), &viewport.into()).unwrap_throw();
+ let element_obj = Object::new();
+ Reflect::set(&elements_obj, &"elements".into(), &elements_obj).unwrap_throw();
+ Reflect::set(&element_obj, &"target".into(), &buffer.into()).unwrap_throw();
+ // let element = Object::define_property(&Object::define_property(&Object::new(), &"target".into(), &buffer.into()), &"elements".into(), &Object::define_property(&Object::new(), &"viewport".into(), &viewport.into()));
+ debug!("scrollable element: {}", JSON::stringify(&element_obj.clone().into()).unwrap_throw());
+ OverlayScrollbars(element_obj, options_obj);
+ }
+ }
+ });
+
view! {
<div class="chats-list panel">
// TODO: update icon, tooltip on hover.
@@ -110,10 +136,16 @@ pub fn ChatsList() -> impl IntoView {
}}
</div>
</div>
- <div class="chats-list-chats">
- <For each=move || chats.get() key=|chat| chat.1.1.message.get().read().id let(chat)>
- <ChatsListItem chat=chat.1.0.into() message=chat.1.1.into() />
- </For>
+ <div class="overlay-scroll" node_ref=chats_list>
+ <div class="chats-list-chats" node_ref=chats_list_viewport>
+ <For
+ each=move || chats.get()
+ key=|chat| chat.1.1.message.get().read().id
+ let(chat)
+ >
+ <ChatsListItem chat=chat.1.0.into() message=chat.1.1.into() />
+ </For>
+ </div>
</div>
</div>
}
diff --git a/src/components/message_composer.rs b/src/components/message_composer.rs
index 09e5f80..6b34298 100644
--- a/src/components/message_composer.rs
+++ b/src/components/message_composer.rs
@@ -1,6 +1,9 @@
use filamento::chat::Body;
use jid::BareJID;
+use js_sys::{wasm_bindgen::UnwrapThrowExt, Object, Reflect, JSON};
use leptos::{html::Div, prelude::*, task::spawn_local};
+use overlay_scrollbars::OverlayScrollbars;
+use tracing::debug;
use crate::client::Client;
@@ -60,35 +63,67 @@ pub fn ChatViewMessageComposer(chat: BareJID) -> impl IntoView {
// };
//
+ let composer: NodeRef<Div> = NodeRef::new();
+
+ let _scrollbars = Effect::new(move |_| {
+ if let Some(buffer) = composer.get() {
+ if let Some(viewport) = message_input.get() {
+ let scrollbars_obj = Object::new();
+ Reflect::set(&scrollbars_obj, &"theme".into(), &"os-macaw".into()).unwrap_throw();
+ Reflect::set(&scrollbars_obj, &"autoHide".into(), &"leave".into()).unwrap_throw();
+ let options_obj = Object::new();
+ Reflect::set(&options_obj, &"scrollbars".into(), &scrollbars_obj).unwrap_throw();
+
+ let elements_obj = Object::new();
+ Reflect::set(&elements_obj, &"viewport".into(), &viewport.into()).unwrap_throw();
+ let element_obj = Object::new();
+ Reflect::set(&elements_obj, &"elements".into(), &elements_obj).unwrap_throw();
+ Reflect::set(&element_obj, &"target".into(), &buffer.into()).unwrap_throw();
+ // let element = Object::define_property(&Object::define_property(&Object::new(), &"target".into(), &buffer.into()), &"elements".into(), &Object::define_property(&Object::new(), &"viewport".into(), &viewport.into()));
+ debug!(
+ "scrollable element: {}",
+ JSON::stringify(&element_obj.clone().into()).unwrap_throw()
+ );
+ debug!(
+ "scrollable options: {}",
+ JSON::stringify(&options_obj.clone().into()).unwrap_throw()
+ );
+ OverlayScrollbars(element_obj, options_obj);
+ }
+ }
+ });
+
// TODO: placeholder
view! {
<form class="new-message-composer panel">
- <div
- class="text-box"
- on:input:target=move |ev| {
- new_message.set(ev.target().text_content().unwrap_or_default())
- }
- node_ref=message_input
- contenteditable
- on:keydown=move |ev| {
- match ev.key_code() {
- 16 => set_shift_pressed.set(true),
- 13 => {
- if !shift_pressed.get() {
- ev.prevent_default();
- send_message();
+ <div class="overlay-scroll" node_ref=composer>
+ <div
+ class="text-box"
+ on:input:target=move |ev| {
+ new_message.set(ev.target().text_content().unwrap_or_default())
+ }
+ node_ref=message_input
+ contenteditable
+ on:keydown=move |ev| {
+ match ev.key_code() {
+ 16 => set_shift_pressed.set(true),
+ 13 => {
+ if !shift_pressed.get() {
+ ev.prevent_default();
+ send_message();
+ }
}
+ _ => {}
}
- _ => {}
}
- }
- on:keyup=move |ev| {
- match ev.key_code() {
- 16 => set_shift_pressed.set(false),
- _ => {}
+ on:keyup=move |ev| {
+ match ev.key_code() {
+ 16 => set_shift_pressed.set(false),
+ _ => {}
+ }
}
- }
- ></div>
+ ></div>
+ </div>
// <input hidden type="submit" />
</form>
}
diff --git a/src/components/roster_list.rs b/src/components/roster_list.rs
index 50c7989..21a9666 100644
--- a/src/components/roster_list.rs
+++ b/src/components/roster_list.rs
@@ -2,9 +2,12 @@ use std::collections::HashSet;
use contact_request_manager::AddContact;
use jid::BareJID;
-use leptos::prelude::*;
+use js_sys::{wasm_bindgen::UnwrapThrowExt, Object, Reflect, JSON};
+use leptos::{html::Div, prelude::*};
+use overlay_scrollbars::OverlayScrollbars;
use reactive_stores::Store;
use roster_list_item::RosterListItem;
+use tracing::debug;
use crate::{
components::icon::IconComponent,
@@ -29,6 +32,54 @@ pub fn RosterList() -> impl IntoView {
let open_chat = Memo::new(move |_| open_chats.chat_view().get());
provide_context(open_chat);
+ let roster_list: NodeRef<Div> = NodeRef::new();
+ let roster_list_viewport: NodeRef<Div> = NodeRef::new();
+
+ let _scrollbars = Effect::new(move |_| {
+ if let Some(buffer) = roster_list.get() {
+ if let Some(viewport) = roster_list_viewport.get() {
+ let elements_obj = Object::new();
+ Reflect::set(&elements_obj, &"viewport".into(), &viewport.into()).unwrap_throw();
+ let element_obj = Object::new();
+ Reflect::set(&elements_obj, &"elements".into(), &elements_obj).unwrap_throw();
+ Reflect::set(&element_obj, &"target".into(), &buffer.into()).unwrap_throw();
+ // let element = Object::define_property(&Object::define_property(&Object::new(), &"target".into(), &buffer.into()), &"elements".into(), &Object::define_property(&Object::new(), &"viewport".into(), &viewport.into()));
+ debug!(
+ "scrollable element: {}",
+ JSON::stringify(&element_obj.clone().into()).unwrap_throw()
+ );
+ OverlayScrollbars(element_obj, Object::new());
+ }
+ }
+ });
+
+ let add_contact: NodeRef<Div> = NodeRef::new();
+ let add_contact_viewport: NodeRef<Div> = NodeRef::new();
+
+ let _scrollbars = Effect::new(move |_| {
+ if let Some(buffer) = add_contact.get() {
+ if let Some(viewport) = add_contact_viewport.get() {
+ let scrollbars_obj = Object::new();
+ Reflect::set(&scrollbars_obj, &"theme".into(), &"os-macaw".into()).unwrap_throw();
+ Reflect::set(&scrollbars_obj, &"move".into(), &"leave".into()).unwrap_throw();
+ let options_obj = Object::new();
+ Reflect::set(&options_obj, &"scrollbars".into(), &scrollbars_obj).unwrap_throw();
+
+ let elements_obj = Object::new();
+ Reflect::set(&elements_obj, &"viewport".into(), &viewport.into()).unwrap_throw();
+ let element_obj = Object::new();
+ Reflect::set(&elements_obj, &"elements".into(), &elements_obj).unwrap_throw();
+ Reflect::set(&element_obj, &"target".into(), &buffer.into()).unwrap_throw();
+ // let element = Object::define_property(&Object::define_property(&Object::new(), &"target".into(), &buffer.into()), &"elements".into(), &Object::define_property(&Object::new(), &"viewport".into(), &viewport.into()));
+ debug!(
+ "scrollable element: {}",
+ JSON::stringify(&element_obj.clone().into()).unwrap_throw()
+ );
+ OverlayScrollbars(element_obj, options_obj);
+ }
+ }
+ });
+
// TODO: filter new messages signal
view! {
<div class="roster-list panel">
@@ -51,8 +102,10 @@ pub fn RosterList() -> impl IntoView {
{move || {
if *open_add_contact.read() {
view! {
- <div class="roster-add-contact">
- <AddContact />
+ <div class="overlay-scroll add-contact-panel" node_ref=add_contact>
+ <div class="roster-add-contact" node_ref=add_contact_viewport>
+ <AddContact />
+ </div>
</div>
}
.into_any()
@@ -60,14 +113,16 @@ pub fn RosterList() -> impl IntoView {
view! {}.into_any()
}
}}
- <div class="roster-list-roster">
- <For
- each=move || roster.contacts().get()
- key=|contact| contact.0.clone()
- let(contact)
- >
- <RosterListItem contact=contact.1 />
- </For>
+ <div class="overlay-scroll" node_ref=roster_list>
+ <div class="roster-list-roster" node_ref=roster_list_viewport>
+ <For
+ each=move || roster.contacts().get()
+ key=|contact| contact.0.clone()
+ let(contact)
+ >
+ <RosterListItem contact=contact.1 />
+ </For>
+ </div>
</div>
</div>
}
generated by cgit (git 2.34.1) at 2025-06-15 15:32:57 +0000