diff options
| -rw-r--r-- | assets/style.scss | 28 | ||||
| -rw-r--r-- | src/components/sidebar.rs | 68 |
2 files changed, 53 insertions, 43 deletions
diff --git a/assets/style.scss b/assets/style.scss index 4078aa1..6903145 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -284,7 +284,7 @@ background: #00000060; .chats-list-chats, .roster-list-roster { flex-grow: 1; - overflow: scroll; + overflow-y: scroll; } .open-chat-views { @@ -345,7 +345,7 @@ background: #00000060; color: black; background-color: #dcdcdc; max-height: 32em; - overflow: scroll; + overflow-y: scroll; font-size: 16px; border: 2px solid black; padding: 8px; @@ -372,7 +372,7 @@ background: #00000060; /* You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none; /* Firefox shows scrollbar on growth, you can hide like this. */ - overflow: scroll; + overflow-y: scroll; } .grow-wrap>textarea, @@ -395,7 +395,7 @@ background: #00000060; display: flex; flex-direction: column-reverse; flex-grow: 1; - overflow: scroll; + overflow-y: scroll; } .chat-message { @@ -573,6 +573,10 @@ background: #00000060; border-top: 2px solid black; } +.sidebar { + position: relative; +} + .dock .personal .dock-item { padding: 8px 16px } @@ -584,7 +588,6 @@ background: #00000060; .sidebar-drawer { height: auto; - position: relative; z-index: 5; } @@ -592,17 +595,18 @@ background: #00000060; z-index: 10; } -.sidebar .sidebar-hovering-drawer>* { +.sidebar .sidebar-hovering-drawer { position: absolute; - left: 0; - transition: left 0.2s ease-in; - transition-behaviour: allow-discrete; + height: 100%; + /* must be width of dock... */ + left: 82px; + transition: left 0.2s ease-out allow-discrete; } @starting-style { - .sidebar .sidebar-hovering-drawer>* { + .sidebar .sidebar-hovering-drawer { /* TODO: allow to edit this width */ - left: -400px; + left: -318px; } } @@ -1443,4 +1447,4 @@ hr { font-weight: normal; font-style: italic; font-display: block; -}
\ No newline at end of file +} diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index ca753ef..487fb76 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,7 +1,8 @@ -use std::collections::HashSet; +use std::collections::{HashMap, HashSet}; use jid::BareJID; use leptos::prelude::*; +use reactive_stores::Store; use crate::components::{ personal_status::PersonalStatus, @@ -9,12 +10,18 @@ use crate::components::{ roster_list::RosterList, }; -#[derive(PartialEq, Eq, Clone, Copy)] +#[derive(PartialEq, Eq, Clone, Copy, Hash)] pub enum SidebarOpen { Roster, Chats, } +#[derive(Store)] +pub struct Drawer { + open: SidebarOpen, + hovering: bool, +} + pub enum Open { /// Currently on screen Focused, @@ -68,8 +75,22 @@ pub fn Sidebar() -> impl IntoView { // for what has been clicked open (in the background) let (open, set_open) = signal(None::<SidebarOpen>); // for what is just in the hovered state (not clicked to be pinned open yet necessarily) + let open= Memo::new(move |_| open.get()); let (hovered, set_hovered) = signal(None::<SidebarOpen>); + let hovered = Memo::new(move |_| hovered.get()); let (just_closed, set_just_closed) = signal(false); + let just_closed = Memo::new(move |_| just_closed.get()); + + let pages = Memo::new(move |_| { + let mut pages = HashSet::new(); + if let Some(hovered) = *hovered.read() { + pages.insert(hovered); + } + if let Some(opened) = *open.read() { + pages.insert(opened); + } + pages + }); view! { <div class="sidebar" on:mouseleave=move |_| { @@ -129,46 +150,31 @@ pub fn Sidebar() -> impl IntoView { <PersonalStatus /> </div> </div> - {move || if let Some(hovered) = *hovered.read() { - if Some(hovered) != *open.read() { - if !just_closed.get() { - match hovered { + {move || { + if !just_closed.get() { + view! { + <For each=move || pages.get() key=|page| *page let(page)> + {move || match page { SidebarOpen::Roster => view! { - <div class="sidebar-drawer sidebar-hovering-drawer"> + <div class:sidebar-drawer=true class:sidebar-hovering-drawer=move || { + !(*open.read() == Some(SidebarOpen::Roster)) && (*hovered.read() == Some(SidebarOpen::Roster)) + }> <RosterList /> </div> }.into_any(), SidebarOpen::Chats => view! { - <div class="sidebar-drawer sidebar-hovering-drawer"> + <div class:sidebar-drawer=true class:sidebar-hovering-drawer=move || { + !(*open.read() == Some(SidebarOpen::Chats)) && (*hovered.read() == Some(SidebarOpen::Chats)) + }> <ChatsList /> </div> }.into_any(), - } - } else { - - view! {}.into_any() - } + }} + </For> + }.into_any() } else { view! {}.into_any() } - } else { - view! {}.into_any() - }} - {move || if let Some(opened) = *open.read() { - match opened { - SidebarOpen::Roster => view! { - <div class="sidebar-drawer"> - <RosterList /> - </div> - }.into_any(), - SidebarOpen::Chats => view! { - <div class="sidebar-drawer"> - <ChatsList /> - </div> - }.into_any(), - } - } else { - view! {}.into_any() }} </div> } |