fix(list view): styling

This commit is contained in:
Vukašin Vojinović 2024-10-25 13:24:17 +02:00 • committed by Jeremy Soller
parent b34fa1995c
commit b5258985ef
3 changed files with 175 additions and 214 deletions

332
Cargo.lock generated

File diff suppressed because it is too large Load diff

View file

@ -295,7 +295,7 @@ pub fn context_menu<'a>(
text_color: Some(component.on.into()), text_color: Some(component.on.into()),
background: Some(Background::Color(component.base.into())), background: Some(Background::Color(component.base.into())),
border: Border { border: Border {
radius: cosmic.radius_s().into(), radius: cosmic.radius_s().map(|x| x + 1.0).into(),
width: 1.0, width: 1.0,
color: component.divider.into(), color: component.divider.into(),
}, },
@ -645,7 +645,7 @@ pub fn location_context_menu<'a>(ancestor_index: usize) -> Element<'a, tab::Mess
text_color: Some(component.on.into()), text_color: Some(component.on.into()),
background: Some(Background::Color(component.base.into())), background: Some(Background::Color(component.base.into())),
border: Border { border: Border {
radius: cosmic.radius_s().into(), radius: cosmic.radius_s().map(|x| x + 1.0).into(),
width: 1.0, width: 1.0,
color: component.divider.into(), color: component.divider.into(),
}, },

View file

@ -14,7 +14,7 @@ use cosmic::{
stream, stream,
//TODO: export in cosmic::widget //TODO: export in cosmic::widget
widget::{ widget::{
container, horizontal_rule, rule, horizontal_rule, rule,
scrollable::{self, AbsoluteOffset, Viewport}, scrollable::{self, AbsoluteOffset, Viewport},
}, },
Alignment, Alignment,
@ -30,7 +30,7 @@ use cosmic::{
iced_core::{mouse::ScrollDelta, widget::tree}, iced_core::{mouse::ScrollDelta, widget::tree},
theme, theme,
widget::{ widget::{
self, self, container,
menu::{action::MenuAction, key_bind::KeyBind}, menu::{action::MenuAction, key_bind::KeyBind},
DndDestination, DndSource, Id, Space, Widget, DndDestination, DndSource, Id, Space, Widget,
}, },
@ -3250,7 +3250,7 @@ impl Tab {
let heading_item = |name, width, msg| { let heading_item = |name, width, msg| {
let mut row = widget::row::with_capacity(2) let mut row = widget::row::with_capacity(2)
.align_y(Alignment::Center) .align_y(Alignment::Center)
.spacing(space_xxs) .spacing(space_xxxs)
.width(width); .width(width);
row = row.push(widget::text::heading(name)); row = row.push(widget::text::heading(name));
match (sort_name == msg, sort_direction) { match (sort_name == msg, sort_direction) {
@ -3287,8 +3287,17 @@ impl Tab {
]) ])
.align_y(Alignment::Center) .align_y(Alignment::Center)
.height(Length::Fixed((space_m + 4).into())) .height(Length::Fixed((space_m + 4).into()))
.padding([0, space_xxs]) .padding([0, space_xxs]);
.spacing(space_xxs);
let accent_rule =
horizontal_rule(1).class(theme::Rule::Custom(Box::new(|theme| rule::Style {
color: theme.cosmic().accent_color().into(),
width: 1,
radius: 0.0.into(),
fill_mode: rule::FillMode::Full,
})));
let heading_rule = container(horizontal_rule(1))
.padding([0, theme::active().cosmic().corner_radii.radius_xs[0] as u16]);
if let Some(location) = &self.edit_location { if let Some(location) = &self.edit_location {
//TODO: allow editing other locations //TODO: allow editing other locations
@ -3312,17 +3321,10 @@ impl Tab {
); );
let mut column = widget::column::with_capacity(4).padding([0, space_s]); let mut column = widget::column::with_capacity(4).padding([0, space_s]);
column = column.push(row); column = column.push(row);
column = column.push(horizontal_rule(1).class(theme::Rule::Custom(Box::new( column = column.push(accent_rule);
|theme| rule::Style {
color: theme.cosmic().accent_color().into(),
width: 1,
radius: 0.0.into(),
fill_mode: rule::FillMode::Full,
},
))));
if self.config.view == View::List && !condensed { if self.config.view == View::List && !condensed {
column = column.push(heading_row); column = column.push(heading_row);
column = column.push(widget::divider::horizontal::default()); column = column.push(heading_rule);
} }
return column.into(); return column.into();
} }
@ -3452,18 +3454,11 @@ impl Tab {
} }
let mut column = widget::column::with_capacity(4).padding([0, space_s]); let mut column = widget::column::with_capacity(4).padding([0, space_s]);
column = column.push(row); column = column.push(row);
column = column.push( column = column.push(accent_rule);
horizontal_rule(1).class(theme::Rule::Custom(Box::new(|theme| rule::Style {
color: theme.cosmic().accent_color().into(),
width: 1,
radius: 0.0.into(),
fill_mode: rule::FillMode::Full,
}))),
);
if self.config.view == View::List && !condensed { if self.config.view == View::List && !condensed {
column = column.push(heading_row); column = column.push(heading_row);
column = column.push(widget::divider::horizontal::default()); column = column.push(heading_rule);
} }
let mouse_area = crate::mouse_area::MouseArea::new(column) let mouse_area = crate::mouse_area::MouseArea::new(column)
@ -3507,10 +3502,7 @@ impl Tab {
.align_x(Alignment::Center) .align_x(Alignment::Center)
.spacing(space_xxs), .spacing(space_xxs),
) )
.align_x(Horizontal::Center) .center(Length::Fill)
.align_y(Vertical::Center)
.width(Length::Fill)
.height(Length::Fill)
.into()]) .into()])
.into() .into()
} }
@ -3820,7 +3812,6 @@ impl Tab {
space_m, space_m,
space_s, space_s,
space_xxs, space_xxs,
space_xxxs,
.. ..
} = theme::active().cosmic().spacing; } = theme::active().cosmic().spacing;
@ -3847,6 +3838,8 @@ impl Tab {
let mut children: Vec<Element<_>> = Vec::new(); let mut children: Vec<Element<_>> = Vec::new();
let mut y = 0; let mut y = 0;
let rule_padding = theme::active().cosmic().corner_radii.radius_xs[0] as u16;
let items = self.column_sort(); let items = self.column_sort();
let mut drag_items = Vec::new(); let mut drag_items = Vec::new();
if let Some(items) = items { if let Some(items) = items {
@ -3868,7 +3861,7 @@ impl Tab {
if count > 0 { if count > 0 {
children.push( children.push(
container(horizontal_rule(1)) container(horizontal_rule(1))
.padding([0, space_xxxs]) .padding([0, rule_padding])
.into(), .into(),
); );
y += 1; y += 1;
@ -3994,7 +3987,7 @@ impl Tab {
item.selected, item.selected,
item.highlighted, item.highlighted,
true, true,
false, true,
false, false,
)), )),
) )