Improve player bar layout

This commit is contained in:
Elias Projahn 2023-10-26 12:37:33 +02:00
parent 7110401f61
commit f16a27e343
2 changed files with 78 additions and 28 deletions

View file

@ -1,3 +1,11 @@
.playerbar .title {
font-weight: bold;
}
.playerbar .subtitle {
font-size: smaller;
}
.searchbar .searchtag { .searchbar .searchtag {
background-color: alpha(currentColor, 0.1); background-color: alpha(currentColor, 0.1);
border-radius: 100px; border-radius: 100px;

View file

@ -24,48 +24,90 @@ template $MusicusWindow : Adw.ApplicationWindow {
transition-type: slide_up; transition-type: slide_up;
Gtk.Box { Gtk.Box {
styles ["playerbar"]
orientation: vertical;
margin-start: 6; margin-start: 6;
margin-end: 6; margin-end: 6;
margin-top: 6; margin-top: 12;
margin-bottom: 6; margin-bottom: 12;
spacing: 6; spacing: 6;
Gtk.Button play_button { Gtk.Box {
styles ["circular"] spacing: 6;
valign: center;
icon-name: "media-playback-start-symbolic";
}
Gtk.Box { Gtk.Box {
hexpand: true;
valign: center; valign: center;
hexpand: true;
margin-start: 10;
orientation: vertical; orientation: vertical;
Gtk.Label title_label { Gtk.Label title_label {
styles ["caption-heading"] styles ["title"]
halign: start; halign: start;
label: _("Title"); label: _("Title");
ellipsize: end;
} }
Gtk.Label subtitle_label { Gtk.Label subtitle_label {
styles ["caption"] styles ["subtitle", "dim-label"]
halign: start; halign: start;
label: _("Subtitle"); label: _("Subtitle");
ellipsize: end;
} }
} }
Gtk.Label { Gtk.Button back_button {
styles ["caption", "numeric"] styles ["circular", "flat"]
valign: center; valign: center;
label: "00:00 / 01:00"; icon-name: "media-skip-backward-symbolic";
} }
Gtk.ToggleButton playlist_button { Gtk.ToggleButton playlist_button {
styles ["flat"] styles ["flat", "circular"]
valign: center; valign: center;
icon-name: "playlist-symbolic"; icon-name: "playlist-symbolic";
toggled => $show_playlist() swapped; toggled => $show_playlist() swapped;
} }
Gtk.Button forward_button {
styles ["circular", "flat"]
valign: center;
icon-name: "media-skip-forward-symbolic";
}
}
Gtk.Box {
spacing: 6;
Gtk.Button play_button {
styles ["circular", "flat"]
valign: center;
icon-name: "media-playback-start-symbolic";
}
Gtk.Label current_time_label {
styles ["caption", "numeric"]
valign: center;
label: "00:00";
}
Gtk.Scale slider {
valign: center;
hexpand: true;
adjustment: Gtk.Adjustment {
lower: 0;
upper: 1;
value: 0.2;
step-increment: 0.01;
};
}
Gtk.Label remaining_time_label {
styles ["caption", "numeric"]
valign: center;
label: "01:00";
}
}
} }
} }
} }