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 = create_rw_signal(play_status);
let upload_open = create_rw_signal(false);
let add_artist_open = create_rw_signal(false);
let add_album_open = create_rw_signal(false);
view! {
// injects a stylesheet into the document <head>
@ -37,7 +39,13 @@ pub fn App() -> impl IntoView {
}>
<main>
<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="dashboard" view=Dashboard />
<Route path="search" view=Search />
@ -58,11 +66,11 @@ use crate::components::upload::*;
/// Renders the home page of your application.
#[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! {
<div class="home-container">
<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
<Outlet />
<Personal />

1
src/components.rs
View File

@ -4,3 +4,4 @@ pub mod search;
pub mod personal;
pub mod upload;
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::*;
#[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;
let location = use_location();
@ -28,7 +28,7 @@ pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
when= move || dropdown_open()
fallback=move || view! {}
>
<UploadDropdown/>
<UploadDropdown upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
</Show>
</div>
<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! {
<button class="upload-btn" on:click=open_dialog>
<div class="add-sign">
<Icon icon=icondata::IoAddSharp />
</div>
Upload
<button class="upload-btn add-btns" on:click=open_dialog>
Upload Song
</button>
}
}

7
src/components/upload_dropdown.rs
View File

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

14
style/sidebar.scss
View File

@ -29,7 +29,7 @@
padding-right: 1rem;
padding-left: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
transition: all 0.3s ease;
.add-sign {
font-size: 1.5rem;
margin-top: auto;
@ -40,10 +40,22 @@
}
.upload-dropdown-btn-active {
border-radius: 12.5px 12.5px 0 0;
width: 110px;
}
.upload-dropdown {
background-color: #f0ecec;
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;
}
}
}