feat: filter UI part 2
This commit is contained in:
parent
ed9eba8dc1
commit
9898af1bf7
@ -20,6 +20,18 @@ pub mod components {
|
|||||||
pub mod outlined_box;
|
pub mod outlined_box;
|
||||||
pub mod problem;
|
pub mod problem;
|
||||||
pub mod problem_info;
|
pub mod problem_info;
|
||||||
|
|
||||||
|
use leptos::prelude::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn OnHoverRed(children: Children) -> impl IntoView {
|
||||||
|
view! {
|
||||||
|
<div class="group relative">
|
||||||
|
<div>{children()}</div>
|
||||||
|
<div class="absolute inset-0 bg-red-500 opacity-0 group-hover:opacity-50"></div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub mod gradient;
|
pub mod gradient;
|
||||||
|
@ -31,6 +31,7 @@
|
|||||||
// +--------------------------------------+
|
// +--------------------------------------+
|
||||||
|
|
||||||
use crate::codec::ron::RonEncoded;
|
use crate::codec::ron::RonEncoded;
|
||||||
|
use crate::components::OnHoverRed;
|
||||||
use crate::components::ProblemInfo;
|
use crate::components::ProblemInfo;
|
||||||
use crate::components::attempt::Attempt;
|
use crate::components::attempt::Attempt;
|
||||||
use crate::components::button::Button;
|
use crate::components::button::Button;
|
||||||
@ -125,7 +126,7 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
|
|||||||
|
|
||||||
// Filter
|
// Filter
|
||||||
let (filter_holds, set_filter_holds) = signal(BTreeSet::new());
|
let (filter_holds, set_filter_holds) = signal(BTreeSet::new());
|
||||||
let filter_add_hold = move |hold_pos: models::HoldPosition| {
|
let _filter_add_hold = move |hold_pos: models::HoldPosition| {
|
||||||
set_filter_holds.update(move |set| {
|
set_filter_holds.update(move |set| {
|
||||||
set.insert(hold_pos);
|
set.insert(hold_pos);
|
||||||
});
|
});
|
||||||
@ -189,7 +190,17 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
|
|||||||
for hold_pos in filter_holds.get() {
|
for hold_pos in filter_holds.get() {
|
||||||
let w = &*wall.read();
|
let w = &*wall.read();
|
||||||
if let Some(hold) = w.holds.get(&hold_pos).cloned() {
|
if let Some(hold) = w.holds.get(&hold_pos).cloned() {
|
||||||
let v = view! { <Hold hold /> };
|
let onclick = move |_| {
|
||||||
|
filter_remove_hold(hold_pos);
|
||||||
|
};
|
||||||
|
|
||||||
|
let v = view! {
|
||||||
|
<button on:click=onclick>
|
||||||
|
<OnHoverRed>
|
||||||
|
<Hold hold />
|
||||||
|
</OnHoverRed>
|
||||||
|
</button>
|
||||||
|
};
|
||||||
cells.push(v);
|
cells.push(v);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -201,7 +212,7 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
|
|||||||
<div class="inline-grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]">
|
<div class="inline-grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]">
|
||||||
<div>{grid}</div>
|
<div>{grid}</div>
|
||||||
|
|
||||||
<div class="flex flex-col max-w-screen-sm">
|
<div class="flex flex-col w-screen-sm">
|
||||||
<Section title="Filter">{filter}</Section>
|
<Section title="Filter">{filter}</Section>
|
||||||
|
|
||||||
<Separator />
|
<Separator />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user