LibreTunes/LibreTunes
LibreTunes/LibreTunes
7
1
Fork 0
Code Issues 38 Pull Requests Actions Packages Releases Activity

Convert DashboardRow to component

Browse Source
This commit is contained in:
Ethan Girouard 2024-12-24 16:41:36 -05:00
parent ae8a3d0ade
commit 4fe76fe596
Signed by: eta357
GPG Key ID: 7BCDC36DFD11C146
2 changed files with 102 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/dashboard_row.rs
View File

@ -2,26 +2,15 @@ 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 crate::components::dashboard_tile::*;
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 {
#[component]
pub fn DashboardRow(
#[prop(into)] title: TextProp,
/*#[prop(default=vec![])]*/ tiles: Vec<DashboardTile>,
) -> impl IntoView {
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
@ -93,7 +82,7 @@ impl IntoView for DashboardRow {
view! {
<div class="dashboard-tile-row">
<div class="dashboard-tile-row-title-row">
<h2>{self.title}</h2>
<h2>{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 />
@ -104,10 +93,18 @@ impl IntoView for DashboardRow {
</div>
</div>
<ul _ref={list_ref}>
{self.tiles.into_iter().map(|tile_info| {
{tiles.into_iter().map(|tile| {
view! {
<li>
{ tile_info.into_view() }
<div class="dashboard-tile">
<a href={tile.link}>
<img src={tile.image_path} alt="dashboard-tile" />
<p class="dashboard-tile-title">{tile.title}</p>
<p class="dashboard-tile-description">
{tile.description}
</p>
</a>
</div>
</li>
}
}).collect::<Vec<_>>()}
@ -115,4 +112,3 @@ impl IntoView for DashboardRow {
</div>
}.into_view()
}
}

34
src/components/dashboard_tile.rs
View File

@ -1,27 +1,13 @@
use leptos::leptos_dom::*;
use leptos::*;
pub trait DashboardTile {
fn image_path(&self) -> String;
fn title(&self) -> String;
fn link(&self) -> String;
fn description(&self) -> Option<String> { None }
}
impl IntoView for &dyn DashboardTile {
fn into_view(self) -> View {
let link = self.link();
view! {
<div class="dashboard-tile">
<a href={link}>
<img src={self.image_path()} alt="dashboard-tile" />
<p class="dashboard-tile-title">{self.title()}</p>
<p class="dashboard-tile-description">
{self.description().unwrap_or_default()}
</p>
</a>
</div>
}.into_view()
}
#[slot]
pub struct DashboardTile {
#[prop(into)]
image_path: TextProp,
#[prop(into)]
title: TextProp,
#[prop(into)]
link: TextProp,
#[prop(into, optional)]
description: Option<TextProp>,
}