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

created component to add a playlist

Browse Source
This commit is contained in:
Danny Zou 2024-04-13 13:50:31 -04:00
parent 79903c779a
commit 1a9addefa4
3 changed files with 87 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/sidebar.rs
View File

@ -34,17 +34,36 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl Into
#[component]
pub fn Bottom() -> impl IntoView {
let (create_playlist_open, set_create_playlist_open) = create_signal(false);
view! {
<div class="sidebar-bottom-container">
<div class="heading">
<h1 class="header">Playlists</h1>
<button class="add-playlist">
<button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
<div class="add-sign">
<Icon icon=icondata::IoAddSharp />
</div>
New Playlist
</button>
</div>
<CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
</div>
}
}
#[component]
pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
view! {
<div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
<div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
<Icon icon=icondata::IoCloseSharp />
</div>
<h1 class="header">Create Playlist</h1>
<form class="create-playlist-form" action="POST">
<input class="name-input" type="text" placeholder="Playlist Name" />
<button class="create-button" type="submit">Create</button>
</form>
</div>
}
}

4
src/pages/login.rs
View File

@ -73,9 +73,7 @@ pub fn Login() -> impl IntoView {
<i></i>
<Show
when=move || {show_password() == false}
fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility">
<Icon icon=icondata::AiEyeInvisibleFilled />
</button> /> }
fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility"><Icon icon=icondata::AiEyeInvisibleFilled /></button> /> }
>
<button on:click=toggle_password class="login-password-visibility">
<Icon icon=icondata::AiEyeFilled />

66
style/sidebar.scss
View File

@ -88,4 +88,70 @@
background-color: #9e9e9e;
}
}
.create-playlist-popup-container {
display: flex;
position: relative;
flex-direction: column;
// background-color: #1c1c1c;
height: 12rem;
width: 20rem;
border-radius: 2px;
padding: 1rem;
padding-top: 0.1rem;
border: 1px solid grey;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
.header {
font-size: 1.2rem;
font-weight: 200;
margin-bottom: 0.5rem;
}
.create-playlist-form {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
.name-input {
background: transparent;
border: none;
border-bottom: 1px solid grey;
font-size: 1.1rem;
color: white;
margin-top: 2rem;
}
.name-input:focus {
outline: none;
}
.create-button {
position: absolute;
bottom: 0px;
width: 5rem;
padding: 0.4rem;
border-radius: 0.5rem;
cursor: pointer;
}
}
}
}