Add panel-wide styles and the Morph hub (#26)

Panel appearance now applies to the whole panel, with seven styles: Floating, Capsules, Notch, Edge to edge, Fused islands, Adaptive and Morph.

- Share composition, geometry, and motion through the renderer-independent `ferese-panel` crate, including native materials, input regions, and Settings previews.
- Add the Morph hub with media, calendar, notifications, controls, workspace previews, hover feedback, and attached mode. Keep recording and low-battery status visible and respect window clearance.
- Cache workspace preview geometry, draw thumbnails directly, centralize Morph transitions, and keep rendering settings local to each shell instance.
- Put Record Screen in the Morph header and show the display control only when an external monitor is connected. Update panel documentation, the desktop screenshot, and native check style names.

Local validation included 660 compositor tests, 191 shell tests, isolated preview-cache checks, GPU Morph captures at 1×/1.25×/1.5×, formatting, and Clippy with warnings denied. The final header change passed all 23 Morph tests. Release workflow jobs are skipped for this PR.
This commit is contained in:
Samuel Onoja authored and GitHub committed 2026-10-12 01:31:34 +01:00
1 parent 42c3b290dd
commit e22f0ebef9
131 files changed
+12562 -1634

No files matched your search

+185 -23
View File
@@ -8,7 +8,7 @@ use serde_json::json;
use super::{Menu, MenuRows, MenuStyle};
use crate::{
BarMetrics, FereseShell, Message, ShellTheme, accented_icon, bar_content, color, color_with_opacity, motion, text,
BarMetrics, FereseShell, Message, ShellTheme, accented_icon, bar_content, color, color_with_opacity, motion,
};
const SEEK_THUMB_DIAMETER: f32 = 10.0;
@@ -78,7 +78,7 @@ pub(super) fn bar<'a>(
width: Option<f32>,
) -> Element<'a, cosmic::Action<Message>> {
let Some(player) = &shell.media.snapshot.selected else {
return text("").into();
return shell.render.text("").into();
};
let foreground = color(if selected { palette.accent } else { palette.text_primary });
let height = (metrics.group_item_height - 4.0).max(0.0);
@@ -89,7 +89,7 @@ pub(super) fn bar<'a>(
.width(side)
.height(side)
.content_fit(cosmic::iced::ContentFit::Cover)
.border_radius(motion::radius(6.0))
.border_radius(shell.render.radius(6.0))
.shape(BorderShape::Continuous)
.into(),
None => container(accented_icon(
@@ -103,7 +103,9 @@ pub(super) fn bar<'a>(
.width(side)
.into(),
};
let label = text(player.label())
let label = shell
.render
.text(player.label())
.size(metrics.text_size)
.wrapping(cosmic::iced::widget::text::Wrapping::None)
.ellipsize(cosmic::iced::widget::text::Ellipsize::End(
@@ -170,8 +172,8 @@ pub(super) fn bar<'a>(
let controls = container(
row![
motion::button(details, foreground, false, 1.0),
motion::button(toggle, foreground, false, 1.0)
motion::button(shell.render, details, foreground, false, 1.0),
motion::button(shell.render, toggle, foreground, false, 1.0)
]
.spacing(2)
.align_y(Alignment::Center),
@@ -211,6 +213,18 @@ fn transport<'a>(
action: &str,
enabled: bool,
style: MenuStyle,
) -> Element<'a, cosmic::Action<Message>> {
transport_sized(shell, source, label, action, enabled, style, 44.)
}
fn transport_sized<'a>(
shell: &'a FereseShell,
source: &'static [u8],
label: &'static str,
action: &str,
enabled: bool,
style: MenuStyle,
size: f32,
) -> Element<'a, cosmic::Action<Message>> {
let fill = (action == "play-pause").then_some(if enabled { style.primary } else { style.muted });
let foreground = match fill {
@@ -227,19 +241,142 @@ fn transport<'a>(
}
};
let mut control = button::custom(
container(accented_icon(source, 24, foreground, color(style.theme.accent)))
.center_x(24)
.center_y(24),
container(
accented_icon(
source,
(size - 20.) as u16,
cosmic::iced::Color { a: 1., ..foreground },
color(style.theme.accent),
)
.opacity(foreground.a),
)
.center_x(size - 20.)
.center_y(size - 20.),
)
.padding(10)
.width(44)
.height(44)
.width(size)
.height(size)
.name(label);
if enabled {
control = control.on_press(cosmic::Action::App(Message::MediaAction(shell.media.action(action))));
}
motion::circular_button(control, foreground, fill, style.opacity, 44.0)
motion::circular_button(shell.render, control, foreground, fill, style.opacity, size)
}
pub(super) fn hub<'a>(shell: &'a FereseShell, rows: MenuRows<'a>, style: MenuStyle) -> MenuRows<'a> {
let Some(player) = &shell.media.snapshot.selected else {
return rows.push(
shell
.render
.text("No active player")
.size(14)
.class(theme::Text::Color(style.muted)),
);
};
let cover: Element<'_, cosmic::Action<Message>> =
match shell.media.artwork.as_ref().and_then(|art| art.handle.as_ref()) {
Some(handle) => image(handle.clone())
.width(64)
.height(64)
.opacity(style.opacity)
.content_fit(cosmic::iced::ContentFit::Cover)
.border_radius(10.)
.into(),
None => container(
accented_icon(
icons::MEDIA,
26,
color(style.theme.text_primary),
color(style.theme.accent),
)
.opacity(style.opacity),
)
.center_x(64)
.center_y(64)
.class(theme::Container::custom(move |_| {
ferese_theme::controls::surface_appearance(style.primary.scale_alpha(0.06), 10.)
}))
.into(),
};
let mut info = column![
shell
.render
.text(player.label())
.size(14)
.class(theme::Text::Color(style.primary))
.width(Length::Fill)
.ellipsize(cosmic::iced::widget::text::Ellipsize::End(
cosmic::iced::advanced::text::EllipsizeHeightLimit::Lines(1)
)),
shell
.render
.text(&player.artist)
.size(12)
.class(theme::Text::Color(style.muted))
.width(Length::Fill)
.ellipsize(cosmic::iced::widget::text::Ellipsize::End(
cosmic::iced::advanced::text::EllipsizeHeightLimit::Lines(1)
))
]
.spacing(4)
.width(Length::Fill);
if let (Some(length), Some(position)) = (
player.length_us.filter(|length| *length > 0),
player.position_at(shell.media.now_us),
) {
let value =
(shell.media.seeking.unwrap_or(position).min(length) as f64 / length as f64 * 10_000.).round() as u32;
if player.can_control && player.can_seek && player.track_id.is_some() {
info = info.push(
slider(0..=10_000_u32, value, move |value| {
cosmic::Action::App(Message::MediaSeek(seek_position(length, value)))
})
.on_release(cosmic::Action::App(Message::MediaSeekCommit))
.height(16)
.handle_width(SEEK_THUMB_DIAMETER)
.class(seek_slider_style(style))
.width(Length::Fill),
);
}
}
let rows = rows.push(row![cover, info].spacing(12).align_y(Alignment::Center));
let playing = player.status == Playback::Playing;
rows.push(
container(
row![
transport_sized(
shell,
icons::MEDIA_PREVIOUS,
"Previous track",
"previous",
player.can_control && player.can_previous,
style,
36.
),
transport_sized(
shell,
if playing { icons::MEDIA_PAUSE } else { icons::MEDIA_PLAY },
if playing { "Pause" } else { "Play" },
"play-pause",
player.can_toggle(),
style,
36.
),
transport_sized(
shell,
icons::MEDIA_NEXT,
"Next track",
"next",
player.can_control && player.can_next,
style,
36.
),
]
.spacing(8),
)
.center_x(Length::Fill),
)
}
pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: MenuStyle) -> MenuRows<'a> {
@@ -250,7 +387,7 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
.width(64)
.height(64)
.content_fit(cosmic::iced::ContentFit::Contain)
.border_radius(motion::radius(12.0))
.border_radius(shell.render.radius(12.0))
.shape(BorderShape::Continuous)
.into(),
None => container(accented_icon(icons::MEDIA, 30, style.muted, color(style.theme.accent)))
@@ -259,14 +396,23 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
.into(),
};
let text_size = if player.label().len() >= 24 { 13 } else { 15 };
let mut info = column![text(player.label()).size(text_size).width(Length::Fill).ellipsize(
cosmic::iced::widget::text::Ellipsize::End(cosmic::iced::advanced::text::EllipsizeHeightLimit::Lines(2))
)]
let mut info = column![
shell
.render
.text(player.label())
.size(text_size)
.width(Length::Fill)
.ellipsize(cosmic::iced::widget::text::Ellipsize::End(
cosmic::iced::advanced::text::EllipsizeHeightLimit::Lines(2)
))
]
.spacing(4)
.width(Length::Fill);
if !player.artist.is_empty() {
info = info.push(
text(&player.artist)
shell
.render
.text(&player.artist)
.size(12)
.width(Length::Fill)
.ellipsize(cosmic::iced::widget::text::Ellipsize::End(
@@ -277,7 +423,9 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
}
if !player.album.is_empty() {
info = info.push(
text(&player.album)
shell
.render
.text(&player.album)
.size(11)
.width(Length::Fill)
.ellipsize(cosmic::iced::widget::text::Ellipsize::End(
@@ -342,12 +490,16 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
progress = progress.push(
row![
text(time_label(position))
shell
.render
.text(time_label(position))
.font(cosmic::iced::Font::MONOSPACE)
.size(11)
.class(theme::Text::Color(style.muted))
.width(Length::Fill),
text(time_label(length))
shell
.render
.text(time_label(length))
.font(cosmic::iced::Font::MONOSPACE)
.size(11)
.class(theme::Text::Color(style.muted))
@@ -398,7 +550,8 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
player.identity.clone()
};
rows = rows.push(motion::button(
button::custom(text(label).size(12))
shell.render,
button::custom(shell.render.text(label).size(12))
.padding([6, 8])
.on_press(cosmic::Action::App(Message::MediaChoose)),
style.primary,
@@ -406,12 +559,19 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
style.opacity,
));
} else {
rows = rows.push(text("No active player").size(13).class(theme::Text::Color(style.muted)));
rows = rows.push(
shell
.render
.text("No active player")
.size(13)
.class(theme::Text::Color(style.muted)),
);
}
if shell.media.choosing || shell.media.snapshot.selected.is_none() {
let mut choices = column::with_capacity(shell.media.snapshot.players.len() + 1).spacing(4);
choices = choices.push(super::controls::menu_button(
shell.render,
"Choose automatically",
Message::MediaAction(json!({"action":"auto"})),
style.primary,
@@ -432,12 +592,14 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
choices = choices.push(
row![
super::controls::menu_button(
shell.render,
label,
Message::MediaAction(pin),
if player.ignored { style.muted } else { style.primary },
style.opacity
),
super::controls::menu_button(
shell.render,
if player.ignored { "Show" } else { "Ignore" },
Message::MediaAction(ignore),
style.muted,
@@ -452,7 +614,7 @@ pub(super) fn view<'a>(shell: &'a FereseShell, mut rows: MenuRows<'a>, style: Me
}
if let Some(error) = &shell.media.error {
rows = rows.push(text(error).size(12).class(theme::Text::Color(style.muted)));
rows = rows.push(shell.render.text(error).size(12).class(theme::Text::Color(style.muted)));
}
rows