diff --git a/src/style.css b/src/style.css index d2828fe..72842e2 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,11 @@ +/* +#play-queue-page { + background-image: linear-gradient( + var(--window-bg-color), + var(--accent-bg-color)); +} +*/ + #seek-scale slider { margin: 0px; opacity: 0%; @@ -11,6 +19,10 @@ min-height: 15px; } -.playing .title-label { +#play-queue .playing .title-label { font-weight: bold; } + +.drag-handle { + color: color-mix(in srgb, currentColor 40%, transparent); +} diff --git a/src/ui/play_queue.blp b/src/ui/play_queue.blp index 56ab5fa..7b87a8a 100644 --- a/src/ui/play_queue.blp +++ b/src/ui/play_queue.blp @@ -1,13 +1,19 @@ using Gtk 4.0; template $UiPlayQueue: Box { + name: "play-queue"; + ScrolledWindow { hexpand: true; + vscrollbar-policy: always; + hscrollbar-policy: never; ListView view { show-separators: true; single-click-activate: true; + styles [ "rich-list" ] + activate => $on_row_activated (); model: NoSelection { diff --git a/src/ui/play_queue_song.blp b/src/ui/play_queue_song.blp index a900b91..4a02ea0 100644 --- a/src/ui/play_queue_song.blp +++ b/src/ui/play_queue_song.blp @@ -2,6 +2,7 @@ using Gtk 4.0; template $UiPlayQueueSong: ListBoxRow { selectable: false; + activatable: false; // prevents double background change on focus Box { focusable: false; diff --git a/src/ui/window.blp b/src/ui/window.blp index 9823ff8..9d783f3 100644 --- a/src/ui/window.blp +++ b/src/ui/window.blp @@ -39,8 +39,38 @@ template $UiWindow: Adw.ApplicationWindow { title: _("Play queue"); icon-name: "media-playback-start"; - child: $UiPlayQueue play_queue { - playbin: bind template.playbin; + child: Box { + name: "play-queue-page"; + homogeneous: true; + + Adw.Clamp { + halign: center; + maximum-size: 400; + width-request: 400; + margin-start: 24; + margin-end: 24; + + Image { + valign: center; + styles [ "frame" ] + halign: center; + pixel-size: 400; + paintable: bind template.playing_cover_art; + } + } + + $UiPlayQueue play_queue { + hexpand: true; + halign: fill; + + margin-top: 48; + margin-bottom: 48; + margin-start: 24; + margin-end: 24; + + styles [ "frame" ] + playbin: bind template.playbin; + } }; } };