leyoda/cosmic-files
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Vertically center context menu items (#444)

Browse source 
* fix: context menu layout

Makes the context menu text vertically centered.
Also removes the hacky list view item padding and makes the line under the breadcrumb accent-colored.

* fix: use spacing variables for menus

* fix
This commit is contained in:
Vukašin Vojinović 2024-09-11 19:02:47 +02:00 • committed by GitHub
parent 44ff7eb1ad
commit bbcfe19375
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 57 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/menu.rs
View file

@ -1,12 +1,13 @@
// SPDX-License-Identifier: GPL-3.0-only // SPDX-License-Identifier: GPL-3.0-only
use cosmic::{ use cosmic::{
//TODO: export iced::widget::horizontal_rule in cosmic::widget iced::{Alignment, Background, Border, Length},
iced::{widget::horizontal_rule, Alignment, Background, Border, Length},
theme, theme,
widget, widget::{
widget::container, button, column, container, divider, horizontal_space,
widget::menu::{self, key_bind::KeyBind, ItemHeight, ItemWidth, MenuBar}, menu::{self, key_bind::KeyBind, ItemHeight, ItemWidth, MenuBar},
text, Row,
},
Element, Element,
}; };
use mime_guess::Mime; use mime_guess::Mime;
@ -21,14 +22,14 @@ use crate::{
macro_rules! menu_button { macro_rules! menu_button {
($($x:expr),+ $(,)?) => ( ($($x:expr),+ $(,)?) => (
widget::button( button(
widget::Row::with_children( Row::with_children(
vec![$(Element::from($x)),+] vec![$(Element::from($x)),+]
) )
.height(Length::Fixed(24.0))
.align_items(Alignment::Center) .align_items(Alignment::Center)
) )
.height(Length::Fixed(32.0)) .padding([theme::active().cosmic().spacing.space_xxxs, 16])
.padding([4, 16])
.width(Length::Fill) .width(Length::Fill)
.style(theme::Button::MenuItem) .style(theme::Button::MenuItem)
); );
@ -50,9 +51,9 @@ pub fn context_menu<'a>(
let menu_item = |label, action| { let menu_item = |label, action| {
let key = find_key(&action); let key = find_key(&action);
menu_button!( menu_button!(
widget::text(label), text::body(label),
widget::horizontal_space(Length::Fill), horizontal_space(Length::Fill),
widget::text(key) text::body(key)
) )
.on_press(tab::Message::ContextAction(action)) .on_press(tab::Message::ContextAction(action))
}; };
@ -120,12 +121,12 @@ pub fn context_menu<'a>(
children children
.push(menu_item(fl!("open-in-new-window"), Action::OpenInNewWindow).into()); .push(menu_item(fl!("open-in-new-window"), Action::OpenInNewWindow).into());
} }
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
children.push(menu_item(fl!("rename"), Action::Rename).into()); children.push(menu_item(fl!("rename"), Action::Rename).into());
children.push(menu_item(fl!("cut"), Action::Cut).into()); children.push(menu_item(fl!("cut"), Action::Cut).into());
children.push(menu_item(fl!("copy"), Action::Copy).into()); children.push(menu_item(fl!("copy"), Action::Copy).into());
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
let supported_archive_types = [ let supported_archive_types = [
"application/x-compressed-tar", "application/x-compressed-tar",
"application/x-tar", "application/x-tar",
@ -139,14 +140,13 @@ pub fn context_menu<'a>(
children.push(menu_item(fl!("extract-here"), Action::ExtractHere).into()); children.push(menu_item(fl!("extract-here"), Action::ExtractHere).into());
} }
children.push(menu_item(fl!("compress"), Action::Compress).into()); children.push(menu_item(fl!("compress"), Action::Compress).into());
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
//TODO: Print? //TODO: Print?
children.push(container(horizontal_rule(1)).padding([0, 8]).into());
children.push(menu_item(fl!("show-details"), Action::Properties).into()); children.push(menu_item(fl!("show-details"), Action::Properties).into());
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
children.push(menu_item(fl!("add-to-sidebar"), Action::AddToSidebar).into()); children.push(menu_item(fl!("add-to-sidebar"), Action::AddToSidebar).into());
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
children.push(menu_item(fl!("move-to-trash"), Action::MoveToTrash).into()); children.push(menu_item(fl!("move-to-trash"), Action::MoveToTrash).into());
} else { } else {
//TODO: need better designs for menu with no selection //TODO: need better designs for menu with no selection
@ -154,10 +154,10 @@ pub fn context_menu<'a>(
children.push(menu_item(fl!("new-folder"), Action::NewFolder).into()); children.push(menu_item(fl!("new-folder"), Action::NewFolder).into());
children.push(menu_item(fl!("new-file"), Action::NewFile).into()); children.push(menu_item(fl!("new-file"), Action::NewFile).into());
children.push(menu_item(fl!("open-in-terminal"), Action::OpenTerminal).into()); children.push(menu_item(fl!("open-in-terminal"), Action::OpenTerminal).into());
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
children.push(menu_item(fl!("select-all"), Action::SelectAll).into()); children.push(menu_item(fl!("select-all"), Action::SelectAll).into());
children.push(menu_item(fl!("paste"), Action::Paste).into()); children.push(menu_item(fl!("paste"), Action::Paste).into());
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
// TODO: Nested menu // TODO: Nested menu
children.push(sort_item(fl!("sort-by-name"), HeadingOptions::Name)); children.push(sort_item(fl!("sort-by-name"), HeadingOptions::Name));
children.push(sort_item(fl!("sort-by-modified"), HeadingOptions::Modified)); children.push(sort_item(fl!("sort-by-modified"), HeadingOptions::Modified));
@ -167,13 +167,13 @@ pub fn context_menu<'a>(
Location::Trash => { Location::Trash => {
children.push(menu_item(fl!("select-all"), Action::SelectAll).into()); children.push(menu_item(fl!("select-all"), Action::SelectAll).into());
if selected > 0 { if selected > 0 {
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
children.push(menu_item(fl!("show-details"), Action::Properties).into()); children.push(menu_item(fl!("show-details"), Action::Properties).into());
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
children children
.push(menu_item(fl!("restore-from-trash"), Action::RestoreFromTrash).into()); .push(menu_item(fl!("restore-from-trash"), Action::RestoreFromTrash).into());
} }
children.push(container(horizontal_rule(1)).padding([0, 8]).into()); children.push(divider::horizontal::light().into());
// TODO: Nested menu // TODO: Nested menu
children.push(sort_item(fl!("sort-by-name"), HeadingOptions::Name)); children.push(sort_item(fl!("sort-by-name"), HeadingOptions::Name));
children.push(sort_item(fl!("sort-by-modified"), HeadingOptions::Modified)); children.push(sort_item(fl!("sort-by-modified"), HeadingOptions::Modified));
@ -181,13 +181,13 @@ pub fn context_menu<'a>(
} }
} }
widget::container(widget::column::with_children(children)) container(column::with_children(children))
.padding(1) .padding(1)
//TODO: move style to libcosmic //TODO: move style to libcosmic
.style(theme::Container::custom(|theme| { .style(theme::Container::custom(|theme| {
let cosmic = theme.cosmic(); let cosmic = theme.cosmic();
let component = &cosmic.background.component; let component = &cosmic.background.component;
widget::container::Appearance { container::Appearance {
icon_color: Some(component.on.into()), icon_color: Some(component.on.into()),
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())),
@ -287,36 +287,36 @@ pub fn menu_bar<'a>(
]) ])
.item_height(ItemHeight::Dynamic(40)) .item_height(ItemHeight::Dynamic(40))
.item_width(ItemWidth::Uniform(240)) .item_width(ItemWidth::Uniform(240))
.spacing(4.0) .spacing(theme::active().cosmic().spacing.space_xxxs.into())
.into() .into()
} }
pub fn location_context_menu<'a>(ancestor_index: usize) -> Element<'a, tab::Message> { pub fn location_context_menu<'a>(ancestor_index: usize) -> Element<'a, tab::Message> {
let children = vec![ let children = vec![
menu_button!(widget::text(fl!("open-in-new-tab"))) menu_button!(text::body(fl!("open-in-new-tab")))
.on_press(tab::Message::LocationMenuAction( .on_press(tab::Message::LocationMenuAction(
LocationMenuAction::OpenInNewTab(ancestor_index), LocationMenuAction::OpenInNewTab(ancestor_index),
)) ))
.into(), .into(),
menu_button!(widget::text(fl!("open-in-new-window"))) menu_button!(text::body(fl!("open-in-new-window")))
.on_press(tab::Message::LocationMenuAction( .on_press(tab::Message::LocationMenuAction(
LocationMenuAction::OpenInNewWindow(ancestor_index), LocationMenuAction::OpenInNewWindow(ancestor_index),
)) ))
.into(), .into(),
container(horizontal_rule(1)).padding([0, 8]).into(), divider::horizontal::light().into(),
menu_button!(widget::text(fl!("show-details"))) menu_button!(text::body(fl!("show-details")))
.on_press(tab::Message::LocationMenuAction( .on_press(tab::Message::LocationMenuAction(
LocationMenuAction::Properties(ancestor_index), LocationMenuAction::Properties(ancestor_index),
)) ))
.into(), .into(),
]; ];
widget::container(widget::column::with_children(children)) container(column::with_children(children))
.padding(1) .padding(1)
.style(theme::Container::custom(|theme| { .style(theme::Container::custom(|theme| {
let cosmic = theme.cosmic(); let cosmic = theme.cosmic();
let component = &cosmic.background.component; let component = &cosmic.background.component;
widget::container::Appearance { container::Appearance {
icon_color: Some(component.on.into()), icon_color: Some(component.on.into()),
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())),

41
src/tab.rs
View file

@ -25,12 +25,14 @@ use cosmic::{
Size, Size,
}, },
iced_core::widget::tree, iced_core::widget::tree,
theme, widget, iced_style::rule,
theme,
widget::{ widget::{
self,
menu::{action::MenuAction, key_bind::KeyBind}, menu::{action::MenuAction, key_bind::KeyBind},
vertical_space, DndDestination, DndSource, Id, Widget, vertical_space, DndDestination, DndSource, Id, Widget,
}, },
Element, Element, Theme,
}; };
use chrono::{DateTime, Utc}; use chrono::{DateTime, Utc};
@ -2295,10 +2297,17 @@ 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)); column = column.push(horizontal_rule(1).style(theme::Rule::Custom(Box::new(
|theme: &Theme| rule::Appearance {
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(horizontal_rule(1)); column = column.push(widget::divider::horizontal::default());
} }
return column.into(); return column.into();
} }
@ -2452,11 +2461,18 @@ 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)); column = column.push(horizontal_rule(1).style(theme::Rule::Custom(Box::new(
|theme: &Theme| rule::Appearance {
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(horizontal_rule(1)); column = column.push(widget::divider::horizontal::default());
} }
let mouse_area = crate::mouse_area::MouseArea::new(column) let mouse_area = crate::mouse_area::MouseArea::new(column)
@ -2905,6 +2921,7 @@ impl Tab {
]) ])
.into(), .into(),
]) ])
.height(Length::Fixed(row_height as f32))
.align_items(Alignment::Center) .align_items(Alignment::Center)
.spacing(space_xxs) .spacing(space_xxs)
} else { } else {
@ -2921,6 +2938,7 @@ impl Tab {
.width(Length::Fixed(size_width)) .width(Length::Fixed(size_width))
.into(), .into(),
]) ])
.height(Length::Fixed(row_height as f32))
.align_items(Alignment::Center) .align_items(Alignment::Center)
.spacing(space_xxs) .spacing(space_xxs)
}; };
@ -2929,17 +2947,8 @@ impl Tab {
let mouse_area = crate::mouse_area::MouseArea::new( let mouse_area = crate::mouse_area::MouseArea::new(
widget::button(row) widget::button(row)
.width(Length::Fill) .width(Length::Fill)
.height(Length::Fixed(row_height as f32))
.id(item.button_id.clone()) .id(item.button_id.clone())
.padding(if condensed && icon_size < 32 { .padding([0, space_xxs])
space_xxxs
} else {
if icon_size < 24 {
space_xxs - 1
} else {
space_xxs
}
})
.style(button_style(item.selected, true, false)), .style(button_style(item.selected, true, false)),
) )
.on_press(move |_| Message::Click(Some(i))) .on_press(move |_| Message::Click(Some(i)))