johrpan/musicus
1
0
Fork 0
mirror of https://github.com/johrpan/musicus.git synced 2025-10-26 11:47:25 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add play button and player bar

Browse source
This commit is contained in:
Elias Projahn 2023-09-21 17:19:31 +02:00
parent 3ef0fe960b
commit e96694d584
6 changed files with 166 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

165
data/res/home_page.blp
View file

@ -5,92 +5,107 @@ template $MusicusHomePage : Adw.NavigationPage {
title: _("Musicus");
tag: "home";
Adw.ToolbarView {
[top]
Adw.HeaderBar header_bar {
[end]
MenuButton {
icon-name: "open-menu-symbolic";
menu-model: primary_menu;
}
}
[top]
Adw.Clamp {
maximum-size: 1000;
tightening-threshold: 600;
Adw.Bin {
styles ["searchbar"]
Gtk.SearchEntry search_entry {
placeholder-text: _("Enter composers, performers, works…");
Gtk.Overlay {
Adw.ToolbarView {
[top]
Adw.HeaderBar header_bar {
[end]
MenuButton {
icon-name: "open-menu-symbolic";
menu-model: primary_menu;
}
}
}
Gtk.ScrolledWindow {
hscrollbar-policy: never;
[top]
Adw.Clamp {
maximum-size: 1000;
tightening-threshold: 600;
Gtk.Box {
orientation: vertical;
margin-start: 12;
margin-end: 12;
margin-top: 24;
Adw.Bin {
styles ["searchbar"]
Gtk.Label {
styles ["heading"]
visible: bind persons_flow_box.visible;
halign: start;
label: _("Composers and performers");
}
Gtk.FlowBox persons_flow_box {
margin-top: 12;
margin-bottom: 24;
column-spacing: 14;
row-spacing: 14;
homogeneous: true;
selection-mode: none;
}
Gtk.Label {
styles ["heading"]
visible: bind works_flow_box.visible;
halign: start;
label: _("Works");
}
Gtk.FlowBox works_flow_box {
margin-top: 12;
margin-bottom: 24;
column-spacing: 14;
row-spacing: 14;
homogeneous: true;
selection-mode: none;
}
Gtk.Label {
styles ["heading"]
visible: bind recordings_flow_box.visible;
halign: start;
label: _("Recordings");
}
Gtk.FlowBox recordings_flow_box {
margin-top: 12;
margin-bottom: 24;
column-spacing: 14;
row-spacing: 14;
homogeneous: true;
selection-mode: none;
Gtk.SearchEntry search_entry {
placeholder-text: _("Enter composers, performers, works…");
search-changed => $search() swapped;
}
}
}
Gtk.ScrolledWindow {
hscrollbar-policy: never;
Adw.Clamp {
maximum-size: 1000;
tightening-threshold: 600;
Gtk.Box {
orientation: vertical;
margin-start: 12;
margin-end: 12;
margin-top: 24;
margin-bottom: 68;
Gtk.Label {
styles ["heading"]
visible: bind persons_flow_box.visible;
halign: start;
label: _("Composers and performers");
}
Gtk.FlowBox persons_flow_box {
margin-top: 12;
margin-bottom: 24;
column-spacing: 12;
row-spacing: 12;
homogeneous: true;
selection-mode: none;
}
Gtk.Label {
styles ["heading"]
visible: bind works_flow_box.visible;
halign: start;
label: _("Works");
}
Gtk.FlowBox works_flow_box {
margin-top: 12;
margin-bottom: 24;
column-spacing: 12;
row-spacing: 12;
homogeneous: true;
selection-mode: none;
}
Gtk.Label {
styles ["heading"]
visible: bind recordings_flow_box.visible;
halign: start;
label: _("Recordings");
}
Gtk.FlowBox recordings_flow_box {
margin-top: 12;
margin-bottom: 24;
column-spacing: 12;
row-spacing: 12;
homogeneous: true;
selection-mode: none;
}
}
}
}
}
[overlay]
Gtk.Button play_button {
styles ["pill", "suggested-action"]
halign: end;
valign: end;
margin-end: 24;
margin-bottom: 24;
label: _("Play music");
clicked => $play() swapped;
}
}
}

2
data/res/icons/scalable/actions/playlist-symbolic.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 3 3 v 2 h 10 v -2 z m 0 4 v 2 h 5.980469 v -2 z m 0 4 v 2 h 6 l -0.011719 -2 z m 0 0"/><path d="m 10 7 v 6 h 1 c 0.199219 0 0.390625 -0.058594 0.554688 -0.167969 l 3 -2 c 0.59375 -0.394531 0.59375 -1.269531 0 -1.664062 l -3 -2 c -0.164063 -0.109375 -0.355469 -0.167969 -0.554688 -0.167969 z m 0 0"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 443 B

1
data/res/musicus.gresource.xml
View file

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<gresources>
<gresource prefix="/de/johrpan/musicus">
<file preprocess="xml-stripblanks">icons/scalable/actions/playlist-symbolic.svg</file>
<file preprocess="xml-stripblanks">home_page.ui</file>
<file preprocess="xml-stripblanks">tile.ui</file>
<file preprocess="xml-stripblanks">welcome_page.ui</file>

60
data/res/window.blp
View file

@ -6,11 +6,63 @@ template $MusicusWindow : Adw.ApplicationWindow {
default-width: 800;
default-height: 600;
Adw.NavigationView navigation_view {
$MusicusWelcomePage {
folder-selected => $set_library_folder() swapped;
Adw.ToolbarView {
Adw.NavigationView navigation_view {
$MusicusWelcomePage {
folder-selected => $set_library_folder() swapped;
}
$MusicusHomePage {}
}
$MusicusHomePage {}
[bottom]
Gtk.Revealer player_bar_revealer {
reveal-child: false;
transition-type: slide_up;
Gtk.Box {
margin-start: 6;
margin-end: 6;
margin-top: 6;
margin-bottom: 6;
spacing: 6;
Gtk.Button play_button {
styles ["circular"]
valign: center;
icon-name: "media-playback-start-symbolic";
}
Gtk.Box {
hexpand: true;
valign: center;
orientation: vertical;
Gtk.Label title_label {
styles ["caption-heading"]
halign: start;
label: _("Title");
}
Gtk.Label subtitle_label {
styles ["caption"]
halign: start;
label: _("Subtitle");
}
}
Gtk.Label {
styles ["caption", "numeric"]
valign: center;
label: "00:00 / 01:00";
}
Gtk.Button {
styles ["flat"]
valign: center;
icon-name: "playlist-symbolic";
}
}
}
}
}