fix(applets_inner): use correct background color

This makes the applet dnd items use `bg_component_color`, to match designs and prevent them from visually merging with the context drawer when it's open.
Also makes the applet drop target a blank accent-colored container, rather than it being a copy of the item that's being dragged, making the UX feel a bit nicer.
This commit is contained in:
Vukašin Vojinović 2025-06-19 11:31:13 +02:00 committed by Michael Murphy
parent d6b39ebf37
commit 1d3b6d061c

View file

@ -1,4 +1,5 @@
use cosmic::app::ContextDrawer;
use cosmic::cosmic_theme::palette::WithAlpha;
use cosmic::iced::Vector;
use cosmic::iced::clipboard::dnd::{
DndAction, DndDestinationRectangle, DndEvent, OfferEvent, SourceEvent,
@ -642,7 +643,10 @@ impl<'a, Message: 'static + Clone> AppletReorderList<'a, Message> {
.map(|info| {
let id_clone = info.id.to_string();
let is_dragged = active_dnd.as_ref().map_or(false, |dnd| dnd.id == info.id);
container(
let content = if is_dragged {
row::with_capacity(0).height(Length::Fixed(32.0))
} else {
row::with_children(vec![
icon::from_name("grip-lines-symbolic")
.symbolic(true)
@ -665,20 +669,29 @@ impl<'a, Message: 'static + Clone> AppletReorderList<'a, Message> {
.into(),
])
.spacing(space_xs)
.align_y(Alignment::Center),
)
.width(Length::Fill)
.padding(8)
.class(theme::Container::Custom(Box::new(move |theme| {
let mut style = container::Catalog::style(theme, &theme::Container::Primary);
style.border.radius = theme.cosmic().radius_s().into();
if is_dragged {
style.border.color = theme.cosmic().accent_color().into();
style.border.width = 2.0;
}
style
})))
.into()
.align_y(Alignment::Center)
};
container(content)
.padding(8)
.width(Length::Fill)
.class(theme::Container::Custom(Box::new(move |theme| {
let mut style =
container::Catalog::style(theme, &theme::Container::Primary);
style.border.radius = theme.cosmic().radius_s().into();
if is_dragged {
style.border.color = theme.cosmic().accent_color().into();
style.border.width = 2.0;
style.background = Some(
Color::from(theme.cosmic().accent_color().with_alpha(0.1)).into(),
);
} else {
style.background =
Some(Color::from(theme.cosmic().bg_component_color()).into());
}
style
})))
.into()
})
.collect::<Vec<_>>();
@ -818,7 +831,11 @@ pub fn dnd_icon(info: Applet<'static>, layout: &layout::Layout) -> AppletReorder
.spacing(4.0)
.width(Length::Fill)
.push(text::body(info.name))
.push(text::caption(info.description))
.push_maybe(if info.description.is_empty() {
None
} else {
Some(text::caption(info.description))
})
.into(),
button::icon(icon::from_name("edit-delete-symbolic"))
.extra_small()
@ -831,7 +848,10 @@ pub fn dnd_icon(info: Applet<'static>, layout: &layout::Layout) -> AppletReorder
.padding(8)
.class(theme::Container::Custom(Box::new(move |theme| {
let mut style = container::Catalog::style(theme, &theme::Container::Primary);
style.border.radius = 8.0.into();
style.background = Some(Color::from(theme.cosmic().bg_component_color()).into());
style.border.radius = theme.cosmic().radius_s().into();
style.border.color = theme.cosmic().bg_divider().into();
style.border.width = 1.0;
style
})))
.into(),