119 lines
3.7 KiB
Rust
119 lines
3.7 KiB
Rust
use leptos::html::Ul;
|
|
use leptos::leptos_dom::*;
|
|
use leptos::*;
|
|
use leptos_use::{use_element_size, UseElementSizeReturn, use_scroll, UseScrollReturn};
|
|
use crate::components::dashboard_tile::DashboardTile;
|
|
use leptos_icons::*;
|
|
|
|
/// A row of dashboard tiles, with a title
|
|
pub struct DashboardRow {
|
|
pub title: String,
|
|
pub tiles: Vec<Box<dyn DashboardTile>>,
|
|
}
|
|
|
|
impl DashboardRow {
|
|
pub fn new(title: String, tiles: Vec<Box<dyn DashboardTile>>) -> Self {
|
|
Self {
|
|
title,
|
|
tiles,
|
|
}
|
|
}
|
|
}
|
|
|
|
impl IntoView for DashboardRow {
|
|
fn into_view(self) -> View {
|
|
let list_ref = create_node_ref::<Ul>();
|
|
|
|
// Scroll functions attempt to align the left edge of the scroll area with the left edge of a tile
|
|
// This is done by scrolling to the nearest multiple of the tile width, plus some for padding
|
|
|
|
let scroll_left = move |_| {
|
|
if let Some(scroll_element) = list_ref.get_untracked() {
|
|
let client_width = scroll_element.client_width() as f64;
|
|
let current_pos = scroll_element.scroll_left() as f64;
|
|
let desired_pos = current_pos - client_width;
|
|
|
|
if let Some(first_tile) = scroll_element.first_element_child() {
|
|
let tile_width = first_tile.client_width() as f64;
|
|
let scroll_pos = desired_pos + (tile_width - (desired_pos % tile_width));
|
|
scroll_element.scroll_to_with_x_and_y(scroll_pos, 0.0);
|
|
} else {
|
|
warn!("Could not get first tile to scroll left");
|
|
// Fall back to scrolling by the client width if we can't get the tile width
|
|
scroll_element.scroll_to_with_x_and_y(desired_pos, 0.0);
|
|
}
|
|
} else {
|
|
warn!("Could not get scroll element to scroll left");
|
|
}
|
|
};
|
|
|
|
let scroll_right = move |_| {
|
|
if let Some(scroll_element) = list_ref.get_untracked() {
|
|
let client_width = scroll_element.client_width() as f64;
|
|
let current_pos = scroll_element.scroll_left() as f64;
|
|
let desired_pos = current_pos + client_width;
|
|
|
|
if let Some(first_tile) = scroll_element.first_element_child() {
|
|
let tile_width = first_tile.client_width() as f64;
|
|
let scroll_pos = desired_pos - (desired_pos % tile_width);
|
|
scroll_element.scroll_to_with_x_and_y(scroll_pos, 0.0);
|
|
} else {
|
|
warn!("Could not get first tile to scroll right");
|
|
// Fall back to scrolling by the client width if we can't get the tile width
|
|
scroll_element.scroll_to_with_x_and_y(desired_pos, 0.0);
|
|
}
|
|
} else {
|
|
warn!("Could not get scroll element to scroll right");
|
|
}
|
|
};
|
|
|
|
let UseElementSizeReturn { width: scroll_element_width, .. } = use_element_size(list_ref);
|
|
let UseScrollReturn { x: scroll_x, .. } = use_scroll(list_ref);
|
|
|
|
let scroll_right_hidden = Signal::derive(move || {
|
|
if let Some(scroll_element) = list_ref.get() {
|
|
if scroll_element.scroll_width() as f64 - scroll_element_width.get() <= scroll_x.get() {
|
|
"visibility: hidden"
|
|
} else {
|
|
""
|
|
}
|
|
} else {
|
|
""
|
|
}
|
|
});
|
|
|
|
let scroll_left_hidden = Signal::derive(move || {
|
|
if scroll_x.get() <= 0.0 {
|
|
"visibility: hidden"
|
|
} else {
|
|
""
|
|
}
|
|
});
|
|
|
|
view! {
|
|
<div class="dashboard-tile-row">
|
|
<div class="dashboard-tile-row-title-row">
|
|
<h2>{self.title}</h2>
|
|
<div class="dashboard-tile-row-scroll-btn">
|
|
<button on:click=scroll_left tabindex=-1 style=scroll_left_hidden>
|
|
<Icon class="dashboard-tile-row-scroll" icon=icondata::FiChevronLeft />
|
|
</button>
|
|
<button on:click=scroll_right tabindex=-1 style=scroll_right_hidden>
|
|
<Icon class="dashboard-tile-row-scroll" icon=icondata::FiChevronRight />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ul _ref={list_ref}>
|
|
{self.tiles.into_iter().map(|tile_info| {
|
|
view! {
|
|
<li>
|
|
{ tile_info.into_view() }
|
|
</li>
|
|
}
|
|
}).collect::<Vec<_>>()}
|
|
</ul>
|
|
</div>
|
|
}.into_view()
|
|
}
|
|
}
|