commit 0296834c9839baef6ed2a32352c6c7425f99e490
parent 96ecca7410ec17f047b17f643a26b534dec125a4
Author: Marcel <mtrnord1@gmail.com>
Date: Thu, 28 May 2020 00:33:48 +0200
Implement roomlist filtering
Took 33 minutes
Diffstat:
3 files changed, 37 insertions(+), 6 deletions(-)
diff --git a/src/app/components/event_list.rs b/src/app/components/event_list.rs
@@ -104,10 +104,11 @@ impl Component for EventList {
fn view(&self) -> Html {
return html! {
- <div class="container uk-flex uk-flex-column uk-width-5-6 uk-padding uk-padding-remove-bottom">
+ <div class="container uk-flex uk-flex-column uk-width-5-6 uk-padding uk-padding-remove-bottom" style="height: 100%">
<h1>{ self.props.displayname.clone() }</h1>
- <div class="scrollable">
+ <div class="scrollable" style="height: 100%">
{ self.state.events.iter().filter(|x| x.room_id == self.props.current_room.clone().unwrap()).map(|event| self.get_event(event.clone())).collect::<Html>() }
+ <div id="anchor"></div>
</div>
</div>
};
diff --git a/src/app/components/room_list.rs b/src/app/components/room_list.rs
@@ -21,13 +21,15 @@ pub struct RoomList {
pub enum Msg {
NewMessage(Response),
ChangeRoom(String),
+ SetFilter(String),
}
#[derive(Serialize, Deserialize, Default)]
pub struct State {
- pub rooms: HashMap<RoomId, SmallRoom>,
- pub current_room: Option<RoomId>,
+ rooms: HashMap<RoomId, SmallRoom>,
+ current_room: Option<RoomId>,
loading: bool,
+ search_query: Option<String>,
}
#[derive(Clone, PartialEq, Properties)]
@@ -47,6 +49,7 @@ impl Component for RoomList {
rooms: Default::default(),
current_room: None,
loading: true,
+ search_query: None
};
RoomList {
@@ -72,6 +75,10 @@ impl Component for RoomList {
self.props.change_room_callback.emit((displayname, room));
false
}
+ Msg::SetFilter(query) => {
+ self.state.search_query = Some(query);
+ true
+ }
}
}
@@ -94,12 +101,22 @@ impl Component for RoomList {
<div class="uk-padding uk-padding-remove-bottom">
<form class="uk-search uk-search-default">
<span uk-search-icon=""></span>
- <input class="uk-search-input" type="search" placeholder="Filter Rooms..." />
+ <input
+ class="uk-search-input"
+ type="search"
+ placeholder="Filter Rooms..."
+ oninput=self.link.callback(|e: InputData| Msg::SetFilter(e.value)) />
</form>
</div>
<ul class="scrollable uk-flex uk-flex-column uk-padding uk-nav-default uk-nav-parent-icon" uk-nav="" style="height: 100%">
<li class="uk-nav-header">{"Rooms"}</li>
- { self.state.rooms.iter().map(|(_, room)| self.get_room(room.clone())).collect::<Html>() }
+ {
+ if self.state.search_query.is_none() || (self.state.search_query.clone().unwrap_or("".to_string()) == "".to_string()) {
+ self.state.rooms.iter().map(|(_, room)| self.get_room(room.clone())).collect::<Html>()
+ } else {
+ self.state.rooms.iter().filter(|(_, room)| room.name.contains(&self.state.search_query.clone().unwrap())).map(|(_, room)| self.get_room(room.clone())).collect::<Html>()
+ }
+ }
</ul>
</div>
};
diff --git a/static/style.scss b/static/style.scss
@@ -9,6 +9,19 @@ $scrollbar-bg-color: #181b21;
scrollbar-color: $scrollbar-bg-color $scrollbar-color;
}
+.scrollable * {
+ /* don't allow the children of the scrollable element to be selected as an anchor node */
+ overflow-anchor: none;
+}
+
+#anchor {
+ /* allow the final child to be selected as an anchor node */
+ overflow-anchor: auto;
+
+ /* anchor nodes are required to have non-zero area */
+ height: 1px;
+}
+
.scrollable::-webkit-scrollbar {
width: 11px;
}
