Rockbox open source high quality audio player as a Music Player Daemon
mpris
rockbox
mpd
libadwaita
audio
rust
zig
deno
Refactor ControlBar layout and slider
Add left spacer matching volume width for symmetry.
Move elapsed and duration into the central progress area and
nest them alongside the track. Make the slider a track element
containing a rounded fill child so fill width is independent.
Increase horizontal gap and set a fixed width with right
alignment for the volume container.
+34
-27
+34
-27
gpui/src/ui/components/controlbar.rs
+34
-27
gpui/src/ui/components/controlbar.rs
···
23
23
.flex_shrink_0()
24
24
.flex()
25
25
.items_center()
26
-
.gap_x_3()
26
+
.gap_x_4()
27
27
.px_6()
28
28
.py_3()
29
-
// Elapsed
30
-
.child(
31
-
div()
32
-
.text_xs()
33
-
.text_color(theme.playback_position_text)
34
-
.flex_shrink_0()
35
-
.child(format_duration(position)),
36
-
)
37
-
// Progress bar
29
+
// Left spacer — mirrors volume width for symmetry
30
+
.child(div().w(px(160.0)))
31
+
// Elapsed + progress + duration
38
32
.child(
39
33
div()
40
34
.flex_1()
41
-
.h(px(4.0))
42
-
.rounded_full()
43
-
.bg(theme.playback_slider_track)
35
+
.flex()
36
+
.items_center()
37
+
.gap_x_3()
38
+
.child(
39
+
div()
40
+
.text_xs()
41
+
.text_color(theme.playback_position_text)
42
+
.flex_shrink_0()
43
+
.child(format_duration(position)),
44
+
)
44
45
.child(
45
46
div()
46
-
.h_full()
47
+
.flex_1()
48
+
.h(px(4.0))
47
49
.rounded_full()
48
-
.bg(theme.playback_slider_fill)
49
-
.w(px(fill_pct / 100.0 * 800.0)),
50
+
.bg(theme.playback_slider_track)
51
+
.child(
52
+
div()
53
+
.h_full()
54
+
.rounded_full()
55
+
.bg(theme.playback_slider_fill)
56
+
.w(px(fill_pct / 100.0 * 800.0)),
57
+
),
58
+
)
59
+
.child(
60
+
div()
61
+
.text_xs()
62
+
.text_color(theme.playback_position_text)
63
+
.flex_shrink_0()
64
+
.child(format_duration(duration)),
50
65
),
51
66
)
52
-
// Duration
67
+
// Volume — fixed width to match left spacer
53
68
.child(
54
69
div()
55
-
.text_xs()
56
-
.text_color(theme.playback_position_text)
57
-
.flex_shrink_0()
58
-
.child(format_duration(duration)),
59
-
)
60
-
// Volume
61
-
.child(
62
-
div()
63
-
.flex_shrink_0()
70
+
.w(px(160.0))
64
71
.flex()
65
72
.items_center()
73
+
.justify_end()
66
74
.gap_x_2()
67
-
.ml_4()
68
75
.child(
69
76
div()
70
77
.text_color(theme.volume_icon)