eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

dropdown component complete

Browse Source
This commit is contained in:
Danny Zou 2024-05-21 12:41:44 -04:00
parent be775862f9
commit 1ecd13d65f
6 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.rs
View File

@ -17,6 +17,8 @@ pub fn App() -> impl IntoView {
let play_status = PlayStatus::default(); let play_status = PlayStatus::default();
let play_status = create_rw_signal(play_status); let play_status = create_rw_signal(play_status);
let upload_open = create_rw_signal(false); let upload_open = create_rw_signal(false);
let add_artist_open = create_rw_signal(false);
let add_album_open = create_rw_signal(false);
view! { view! {
// injects a stylesheet into the document <head> // injects a stylesheet into the document <head>
@ -37,7 +39,13 @@ pub fn App() -> impl IntoView {
}> }>
<main> <main>
<Routes> <Routes>
<Route path="" view=move || view! { <HomePage play_status=play_status upload_open=upload_open/> }> <Route path="" view=move ||
view! { <HomePage play_status=play_status
upload_open=upload_open
add_artist_open=add_artist_open
add_album_open=add_album_open
/>
}>
<Route path="" view=Dashboard /> <Route path="" view=Dashboard />
<Route path="dashboard" view=Dashboard /> <Route path="dashboard" view=Dashboard />
<Route path="search" view=Search /> <Route path="search" view=Search />
@ -58,11 +66,11 @@ use crate::components::upload::*;
/// Renders the home page of your application. /// Renders the home page of your application.
#[component] #[component]
fn HomePage(play_status: RwSignal<PlayStatus>, upload_open: RwSignal<bool>) -> impl IntoView { fn HomePage(play_status: RwSignal<PlayStatus>, upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
view! { view! {
<div class="home-container"> <div class="home-container">
<Upload open=upload_open/> <Upload open=upload_open/>
<Sidebar upload_open=upload_open/> <Sidebar upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
// This <Outlet /> will render the child route components // This <Outlet /> will render the child route components
<Outlet /> <Outlet />
<Personal /> <Personal />

1
src/components.rs
View File

@ -4,3 +4,4 @@ pub mod search;
pub mod personal; pub mod personal;
pub mod upload; pub mod upload;
pub mod upload_dropdown; pub mod upload_dropdown;
pub mod add_artist;

4
src/components/sidebar.rs
View File

@ -4,7 +4,7 @@ use leptos_icons::*;
use crate::components::upload_dropdown::*; use crate::components::upload_dropdown::*;
#[component] #[component]
pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView { pub fn Sidebar(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
use leptos_router::use_location; use leptos_router::use_location;
let location = use_location(); let location = use_location();
@ -28,7 +28,7 @@ pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
when= move || dropdown_open() when= move || dropdown_open()
fallback=move || view! {} fallback=move || view! {}
> >
<UploadDropdown/> <UploadDropdown upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
</Show> </Show>
</div> </div>
<a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} > <a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >

7
src/components/upload.rs
View File

@ -16,11 +16,8 @@ pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
}; };
view! { view! {
<button class="upload-btn" on:click=open_dialog> <button class="upload-btn add-btns" on:click=open_dialog>
<div class="add-sign"> Upload Song
<Icon icon=icondata::IoAddSharp />
</div>
Upload
</button> </button>
} }
} }

7
src/components/upload_dropdown.rs
View File

@ -1,6 +1,8 @@
use leptos::*; use leptos::*;
use leptos_icons::*; use leptos_icons::*;
use leptos::leptos_dom::*; use leptos::leptos_dom::*;
use crate::components::upload::*;
use crate::components::add_artist::*;
#[component] #[component]
pub fn UploadDropdownBtn(dropdown_open: RwSignal<bool>) -> impl IntoView { pub fn UploadDropdownBtn(dropdown_open: RwSignal<bool>) -> impl IntoView {
@ -17,10 +19,11 @@ pub fn UploadDropdownBtn(dropdown_open: RwSignal<bool>) -> impl IntoView {
} }
#[component] #[component]
pub fn UploadDropdown() -> impl IntoView { pub fn UploadDropdown(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
view! { view! {
<div class="upload-dropdown"> <div class="upload-dropdown">
hello <UploadBtn dialog_open=upload_open/>
<AddArtistBtn add_artist_open=add_artist_open/>
</div> </div>
} }
} }

14
style/sidebar.scss
View File

@ -29,7 +29,7 @@
padding-right: 1rem; padding-right: 1rem;
padding-left: 1rem; padding-left: 1rem;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: all 0.3s ease;
.add-sign { .add-sign {
font-size: 1.5rem; font-size: 1.5rem;
margin-top: auto; margin-top: auto;
@ -40,10 +40,22 @@
} }
.upload-dropdown-btn-active { .upload-dropdown-btn-active {
border-radius: 12.5px 12.5px 0 0; border-radius: 12.5px 12.5px 0 0;
width: 110px;
} }
.upload-dropdown { .upload-dropdown {
background-color: #f0ecec; background-color: #f0ecec;
color: black; color: black;
width: 110px;
.add-btns {
border: none;
border-bottom: 1px solid black;
width: 100%;
padding: 0.25rem;
cursor: pointer;
}
.add-btns:first-child {
border-top: 1px solid black;
}
} }
} }