Skip to content

Commit 6f4e23c

Browse files
basharovVbasharovV
committed
feat(sidebar): animating artwork collapse
1 parent 14c3a97 commit 6f4e23c

4 files changed

Lines changed: 89 additions & 35 deletions

File tree

‎src/App.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -643,8 +643,8 @@
643643
644644
main {
645645
border-radius: 11px;
646-
border: 0.5px solid
647-
color-mix(in srgb, var(--type-bw-inverse) 20%, transparent);
646+
// border: 0.5px solid
647+
// color-mix(in srgb, var(--type-bw-inverse) 20%, transparent);
648648
box-sizing: border-box;
649649
display: grid;
650650
grid-template-columns: auto auto 1fr auto auto; // Sidebar, queue, panel, resizer, wiki

‎src/lib/sidebar/Sidebar.svelte‎

Lines changed: 86 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
import tippy from "svelte-tippy";
1313
import { flip } from "svelte/animate";
1414
import { cubicInOut } from "svelte/easing";
15-
import { fade, fly } from "svelte/transition";
15+
import { fade, fly, scale } from "svelte/transition";
1616
import type { PlaylistFile, Song } from "../../App";
1717
import {
1818
addSongsToPlaylist,
@@ -1859,27 +1859,6 @@
18591859
</div>
18601860
</div>
18611861
<div class="bottom" data-tauri-drag-region>
1862-
{#if song}
1863-
<div
1864-
class="artwork-container"
1865-
class:collapsed={$isArtworkCollapsed && !$isMiniPlayer}
1866-
class:disabled={$isMiniPlayer}
1867-
on:click={() => {
1868-
if (!$isMiniPlayer) {
1869-
$isArtworkCollapsed = !$isArtworkCollapsed;
1870-
}
1871-
}}
1872-
>
1873-
<div class="artwork-frame">
1874-
<canvas
1875-
class="artwork"
1876-
bind:this={artworkCanvas}
1877-
width={210}
1878-
height={210}
1879-
/>
1880-
</div>
1881-
</div>
1882-
{/if}
18831862
<div class="transport">
18841863
<Seekbar
18851864
{duration}
@@ -1975,6 +1954,27 @@
19751954
</div>
19761955
</div>
19771956
</div>
1957+
{#if song}
1958+
<div
1959+
class="artwork-container"
1960+
class:collapsed={$isArtworkCollapsed && !$isMiniPlayer}
1961+
class:disabled={$isMiniPlayer}
1962+
on:click={() => {
1963+
if (!$isMiniPlayer) {
1964+
$isArtworkCollapsed = !$isArtworkCollapsed;
1965+
}
1966+
}}
1967+
>
1968+
<div class="artwork-frame">
1969+
<canvas
1970+
class="artwork"
1971+
bind:this={artworkCanvas}
1972+
width={210}
1973+
height={210}
1974+
/>
1975+
</div>
1976+
</div>
1977+
{/if}
19781978
{/if}
19791979
</sidebar>
19801980

@@ -1986,6 +1986,7 @@
19861986
$track_info_artwork_margin: 5px;
19871987
$artwork_bottom: 143px;
19881988
$bottom_height: 340px;
1989+
$bottom_height_collapsed: 100px;
19891990
19901991
:global {
19911992
sidebar {
@@ -2045,6 +2046,7 @@
20452046
max-width: 210px;
20462047
min-width: 210px;
20472048
background-color: $sidebar_primary_color;
2049+
transition: grid-template-rows 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
20482050
20492051
.click-curtain {
20502052
position: fixed;
@@ -2584,27 +2586,62 @@
25842586
}
25852587
}
25862588
2589+
.artwork-spacer {
2590+
width: 210px;
2591+
&.show {
2592+
animation: in 0.2s ease-in-out forwards;
2593+
}
2594+
2595+
&.hide {
2596+
animation: out 0.2s ease-in-out forwards;
2597+
}
2598+
2599+
@keyframes in {
2600+
from {
2601+
min-height: 0px;
2602+
}
2603+
to {
2604+
min-height: 210px;
2605+
}
2606+
}
2607+
@keyframes out {
2608+
from {
2609+
min-height: 210px;
2610+
}
2611+
to {
2612+
min-height: 100px;
2613+
}
2614+
}
2615+
}
2616+
25872617
.artwork-container {
2618+
position: absolute;
2619+
bottom: 135px;
25882620
padding: 0em;
2589-
width: 100%;
2621+
width: 210px;
2622+
margin: auto;
2623+
left: 0;
2624+
right: 0;
25902625
height: auto;
2591-
position: relative;
25922626
opacity: 1;
25932627
box-sizing: content-box;
2594-
z-index: 1;
2628+
z-index: 5;
25952629
cursor: zoom-out;
2630+
transition: all 0.2s cubic-bezier(0.2, 0.05, 0.02, 0.99);
25962631
&.collapsed {
2597-
bottom: 120px;
2632+
bottom: 268px;
25982633
height: 80px;
2634+
left: 0;
2635+
right: 0;
25992636
width: 80px;
26002637
margin: auto;
26012638
cursor: zoom-in;
2602-
z-index: 4;
2639+
z-index: 3;
26032640
.artwork-frame {
2604-
transition: all 0.2s cubic-bezier(0.2, 0.01, 0.02, 0.99);
2605-
2606-
border-radius: 3px;
2607-
border: 2px solid var(--panel-separator);
2641+
border-radius: 3px 3px 0px 0px;
2642+
border-top: 1px solid var(--panel-separator);
2643+
border-left: 1px solid var(--panel-separator);
2644+
border-right: 1px solid var(--panel-separator);
26082645
padding: 2px;
26092646
overflow: hidden;
26102647
background-color: var(--background);
@@ -2864,6 +2901,24 @@
28642901
28652902
.has-current-song {
28662903
&.artwork-collapsed {
2904+
grid-template-rows: 1fr auto $bottom_height_collapsed;
2905+
.track-info {
2906+
z-index: 4;
2907+
padding-bottom: 5px;
2908+
border-bottom: 0.7px solid var(--panel-separator);
2909+
box-shadow: 0px -16px 20px 0px rgba(0, 0, 0, 0.15);
2910+
.noise {
2911+
backdrop-filter: blur(4px);
2912+
background-color: color-mix(
2913+
in srgb,
2914+
var(--overlay-bg) 60%,
2915+
transparent
2916+
);
2917+
}
2918+
}
2919+
.bottom {
2920+
z-index: 5;
2921+
}
28672922
@media only screen and (min-height: 650px) {
28682923
grid-template-rows: 1fr auto 135px;
28692924
}

‎src/theming/store.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ export function applyTheme(userSettings: UserSettings): Theme {
4848
const foundTheme = Object.entries(allThemes).find(
4949
(t) => t[0] === theme,
5050
);
51-
console.log("foundTheme", foundTheme, allThemes);
5251
return foundTheme ? foundTheme[1] : DEFAULT_THEME_DARK;
5352
} else {
5453
return DEFAULT_THEME_DARK;

‎src/theming/themes/dark.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ variant: dark
33
# Basics
44
accent: "#45fffcf3"
55
accent-secondary: "#632fff"
6-
background: "#242026cb"
6+
background: "#2420264e"
77
button-active-bg: "#624dd4"
88
button-active-disabled-bg: "#4935b8"
99
button-active-disabled-text: "#747272"

0 commit comments

Comments
 (0)