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:
parent
d6b39ebf37
commit
1d3b6d061c
1 changed files with 37 additions and 17 deletions
|
|
@ -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(),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue