improv: add window border

This commit is contained in:
Vukašin Vojinović 2024-11-03 19:16:37 +01:00 committed by Michael Murphy
parent 36b3cfa13a
commit 127ce17b85
26 changed files with 130 additions and 114 deletions

View file

@ -169,12 +169,12 @@ impl cosmic::Application for App {
]
.width(iced::Length::Fill)
.height(iced::Length::Shrink)
.align_x(iced::alignment::Horizontal::Center),
.align_x(iced::Alignment::Center),
)
.width(iced::Length::Fill)
.height(iced::Length::Shrink)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center);
.align_x(iced::Alignment::Center)
.align_y(iced::Alignment::Center);
Element::from(centered)
}

View file

@ -88,8 +88,8 @@ impl cosmic::Application for App {
let centered = cosmic::widget::container(content)
.width(iced::Length::Fill)
.height(iced::Length::Shrink)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center);
.align_x(iced::Alignment::Center)
.align_y(iced::Alignment::Center);
Element::from(centered)
}

View file

@ -96,8 +96,8 @@ impl cosmic::Application for App {
let centered = cosmic::widget::container(widget)
.width(iced::Length::Fill)
.height(iced::Length::Fill)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center);
.align_x(iced::Alignment::Center)
.align_y(iced::Alignment::Center);
Element::from(centered)
}

View file

@ -564,12 +564,9 @@ impl Application for Window {
};
widgets.push(
scrollable(
container(content.debug(self.debug))
.align_x(iced::alignment::Horizontal::Center),
)
.width(Length::Fill)
.into(),
scrollable(container(content.debug(self.debug)).align_x(iced::Alignment::Center))
.width(Length::Fill)
.into(),
);
}

View file

@ -95,8 +95,8 @@ impl cosmic::Application for App {
let centered = cosmic::widget::container(content)
.width(iced::Length::Fill)
.height(iced::Length::Shrink)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center);
.align_x(iced::Alignment::Center)
.align_y(iced::Alignment::Center);
Element::from(centered)
}

View file

@ -183,8 +183,8 @@ impl cosmic::Application for App {
let centered = cosmic::widget::container(text)
.width(iced::Length::Fill)
.height(iced::Length::Shrink)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center);
.align_x(iced::Alignment::Center)
.align_y(iced::Alignment::Center);
Element::from(centered)
}

View file

@ -233,7 +233,7 @@ fn center<'a>(input: impl Into<Element<'a, Message>> + 'a) -> Element<'a, Messag
iced::widget::container(input.into())
.width(iced::Length::Fill)
.height(iced::Length::Fill)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center)
.align_x(iced::Alignment::Center)
.align_y(iced::Alignment::Center)
.into()
}

View file

@ -104,8 +104,8 @@ impl cosmic::Application for App {
let centered = cosmic::widget::container(column.width(200))
.width(iced::Length::Fill)
.height(iced::Length::Shrink)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Center);
.align_x(iced::Alignment::Center)
.align_y(iced::Alignment::Center);
Element::from(centered)
}

2
iced

@ -1 +1 @@
Subproject commit 02b8d08728bb12ea23e82babbd3f05602f7d578f
Subproject commit a7e035cd852ab13ce0ef04671c1e683fc343aff6

View file

@ -54,7 +54,9 @@ pub use self::core::Core;
pub use self::settings::Settings;
use crate::prelude::*;
use crate::theme::THEME;
use crate::widget::{context_drawer, horizontal_space, id_container, menu, nav_bar, popover};
use crate::widget::{
container, context_drawer, horizontal_space, id_container, menu, nav_bar, popover,
};
use apply::Apply;
use iced::window;
use iced::{Length, Subscription};
@ -694,6 +696,9 @@ impl<App: Application> ApplicationExt for App {
fn view_main(&self) -> Element<Message<Self::Message>> {
let core = self.core();
let is_condensed = core.is_condensed();
// TODO: More granularity might be needed for different resize border
// and window border handling of maximized and tiled windows
let sharp_corners = core.window.sharp_corners;
let focused = core
.focused_window()
.is_some_and(|i| Some(i) == self.core().main_window_id());
@ -706,18 +711,13 @@ impl<App: Application> ApplicationExt for App {
.nav_bar()
.map(|nav| id_container(nav, iced_core::id::Id::new("COSMIC_nav_bar")))
{
widgets.push(nav.into());
widgets.push(container(nav).padding([0, 0, 8, 8]).into());
true
} else {
false
};
if self.nav_model().is_none() || core.show_content() {
// Manual spacing must be used due to state workarounds below
if has_nav {
widgets.push(horizontal_space().width(Length::Fixed(8.0)).into());
}
let main_content = self.view().map(Message::App);
//TODO: reduce duplication
@ -737,14 +737,21 @@ impl<App: Application> ApplicationExt for App {
drawer,
iced_core::id::Id::new("COSMIC_context_drawer"),
))
}),
})
.apply(container)
.padding([0, 8, 8, 0])
.into(),
);
} else {
widgets.push(main_content);
//TODO: container and padding are temporary, until
//the `resize_border` is moved to not cover window content
widgets.push(container(main_content).padding([0, 8, 8, 8]).into());
}
} else {
//TODO: hide content when out of space
widgets.push(main_content);
//TODO: container and padding are temporary, until
//the `resize_border` is moved to not cover window content
widgets.push(container(main_content).padding([0, 8, 8, 8]).into());
if let Some(context) = self.context_drawer() {
widgets.push(
crate::widget::ContextDrawer::new_inner(
@ -753,15 +760,18 @@ impl<App: Application> ApplicationExt for App {
Message::Cosmic(cosmic::Message::ContextDrawer(false)),
context_width,
)
.apply(crate::widget::container)
.apply(container)
.width(context_width)
.apply(|drawer| {
Element::from(id_container(
drawer,
iced_core::id::Id::new("COSMIC_context_drawer"),
))
}),
);
})
.apply(container)
.padding([0, 8, 8, 0])
.into(),
)
} else {
//TODO: this element is added to workaround state issues
widgets.push(horizontal_space().width(Length::Shrink).into());
@ -774,11 +784,13 @@ impl<App: Application> ApplicationExt for App {
let content_col = crate::widget::column::with_capacity(2)
.spacing(8)
.push(content_row)
.push_maybe(self.footer().map(|footer| footer.map(Message::App)));
.push_maybe(
self.footer()
.map(|footer| container(footer.map(Message::App)).padding([0, 8, 8, 8])),
);
let content: Element<_> = if core.window.content_container {
content_col
.apply(crate::widget::container)
.padding([0, 8, 8, 8])
.apply(container)
.width(iced::Length::Fill)
.height(iced::Length::Fill)
.class(crate::theme::Container::WindowBackground)
@ -842,7 +854,17 @@ impl<App: Application> ApplicationExt for App {
None
})
// The content element contains every element beneath the header.
.push(content);
.push(content)
.apply(container)
.padding(if sharp_corners { 0 } else { 1 })
.style(move |theme| container::Style {
border: iced::Border {
color: theme.cosmic().bg_divider().into(),
width: if sharp_corners { 0.0 } else { 1.0 },
radius: theme.cosmic().radius_s().map(|x| x + 1.0).into(),
},
..Default::default()
});
// Show any current dialog on top and centered over the view content
// We have to use a popover even without a dialog to keep the tree from changing

View file

@ -206,10 +206,7 @@ impl Context {
.width(Length::Fixed(suggested.0 as f32))
.height(Length::Fixed(suggested.1 as f32)),
)
.align_x(Horizontal::Center)
.align_y(Vertical::Center)
.width(Length::Fill)
.height(Length::Fill),
.center(Length::Fill),
)
.width(Length::Fixed((suggested.0 + 2 * applet_padding) as f32))
.height(Length::Fixed((suggested.1 + 2 * applet_padding) as f32))

View file

@ -2,14 +2,15 @@
use iced::widget::Container;
use iced::Size;
use iced_core::alignment;
use iced_core::event::{self, Event};
use iced_core::layout;
use iced_core::mouse;
use iced_core::overlay;
use iced_core::renderer;
use iced_core::widget::Tree;
use iced_core::{Clipboard, Element, Layout, Length, Padding, Rectangle, Shell, Vector, Widget};
use iced_core::{
Alignment, Clipboard, Element, Layout, Length, Padding, Rectangle, Shell, Vector, Widget,
};
use iced_widget::container;
pub use iced_widget::container::{Catalog, Style};
@ -104,14 +105,14 @@ where
/// Sets the content alignment for the horizontal axis of the [`Container`].
#[must_use]
pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
pub fn align_x(mut self, alignment: Alignment) -> Self {
self.container = self.container.align_x(alignment);
self
}
/// Sets the content alignment for the vertical axis of the [`Container`].
#[must_use]
pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
pub fn align_y(mut self, alignment: Alignment) -> Self {
self.container = self.container.align_y(alignment);
self
}
@ -130,6 +131,13 @@ where
self
}
/// Centers the contents in the horizontal and vertical axis of the [`Container`].
#[must_use]
pub fn center(mut self, length: Length) -> Self {
self.container = self.container.center(length);
self
}
/// Sets the style of the [`Container`].
#[must_use]
pub fn class(mut self, style: impl Into<crate::style::Container<'a>>) -> Self {

View file

@ -5,10 +5,9 @@
use std::cmp;
use crate::iced_core::{Length, Padding};
use crate::iced_core::{Alignment, Length, Padding};
use crate::widget::{button, column, grid, icon, row, text, Grid};
use chrono::{Datelike, Days, Months, NaiveDate, Weekday};
use iced::alignment::{Horizontal, Vertical};
/// A widget that displays an interactive calendar.
pub fn calendar<M>(
@ -62,7 +61,7 @@ where
{
fn from(this: Calendar<'a, Message>) -> Self {
let date = text(this.selected.format("%B %-d, %Y").to_string()).size(18);
let day_of_week = text(this.selected.format("%A").to_string()).size(14);
let day_of_week = text::body(this.selected.format("%A").to_string());
let month_controls = row::with_capacity(2)
.push(
@ -86,7 +85,7 @@ where
text(first_day_of_week.to_string())
.size(12)
.width(Length::Fixed(36.0))
.align_x(Horizontal::Center),
.align_x(Alignment::Center),
);
first_day_of_week = first_day_of_week.succ();
@ -143,14 +142,10 @@ fn date_button<Message>(
button::ButtonClass::Text
};
let button = button::custom(
text(format!("{}", date.day()))
.align_x(Horizontal::Center)
.align_y(Vertical::Center),
)
.class(style)
.height(Length::Fixed(36.0))
.width(Length::Fixed(36.0));
let button = button::custom(text(format!("{}", date.day())).center())
.class(style)
.height(Length::Fixed(36.0))
.width(Length::Fixed(36.0));
if is_month {
button.on_press((on_select)(set_day(date, date.day())))

View file

@ -558,7 +558,7 @@ where
button::custom(
text(reset_to_default)
.width(self.width)
.align_x(iced_core::alignment::Horizontal::Center)
.align_x(iced_core::Alignment::Center)
)
.width(self.width)
.on_press(on_update(ColorPickerUpdate::Reset))
@ -574,14 +574,14 @@ where
button::custom(
text(cancel)
.width(self.width)
.align_x(iced_core::alignment::Horizontal::Center)
.align_x(iced_core::Alignment::Center)
)
.width(self.width)
.on_press(on_update(ColorPickerUpdate::Cancel)),
button::custom(
text(save)
.width(self.width)
.align_x(iced_core::alignment::Horizontal::Center)
.align_x(iced_core::Alignment::Center)
)
.width(self.width)
.on_press(on_update(ColorPickerUpdate::AppliedColor))

View file

@ -8,9 +8,9 @@ use crate::{Apply, Element, Renderer, Theme};
use super::overlay::Overlay;
use iced_core::alignment;
use iced_core::event::{self, Event};
use iced_core::widget::{Operation, Tree};
use iced_core::Alignment;
use iced_core::{
layout, mouse, overlay as iced_overlay, renderer, Clipboard, Layout, Length, Padding,
Rectangle, Shell, Vector, Widget,
@ -46,18 +46,16 @@ impl<'a, Message: Clone + 'static> ContextDrawer<'a, Message> {
text::heading(header)
.width(Length::FillPortion(1))
.height(Length::Fill)
.align_x(alignment::Horizontal::Center)
.align_y(alignment::Vertical::Center),
.align_x(Alignment::Center)
.align_y(Alignment::Center),
)
.push(
button::text("Close")
.trailing_icon(icon::from_name("go-next-symbolic"))
.on_press(on_close)
.class(crate::theme::Button::Link)
.apply(container)
.width(Length::FillPortion(1))
.height(Length::Fill)
.align_x(alignment::Horizontal::Right)
.align_x(Alignment::End)
.center_y(Length::Fill),
)
// XXX must be done after pushing elements or it may be overwritten by size hints from contents
@ -89,7 +87,7 @@ impl<'a, Message: Clone + 'static> ContextDrawer<'a, Message> {
)
.width(Length::Fill)
.height(Length::Fill)
.align_x(alignment::Horizontal::Right)
.align_x(Alignment::End)
.into()
}

View file

@ -292,7 +292,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
widget::row::with_children(start)
.align_y(iced::Alignment::Center)
.apply(widget::container)
.align_x(iced::alignment::Horizontal::Left)
.align_x(iced::Alignment::Start)
.width(Length::Shrink),
)
// If elements exist in the center region, use them here.
@ -301,8 +301,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
widget::row::with_children(center)
.align_y(iced::Alignment::Center)
.apply(widget::container)
.align_x(iced::alignment::Horizontal::Center)
.width(Length::Fill)
.center_x(Length::Fill)
.into()
} else if self.title.is_empty() {
widget::horizontal_space().width(Length::Fill).into()
@ -313,7 +312,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
widget::row::with_children(end)
.align_y(iced::Alignment::Center)
.apply(widget::container)
.align_x(iced::alignment::Horizontal::Right)
.align_x(iced::Alignment::End)
.width(Length::Shrink),
)
.align_y(iced::Alignment::Center)

View file

@ -1,14 +1,15 @@
use crate::Theme;
use cosmic_theme::LayeredTheme;
use iced::widget::Container;
use iced_core::alignment;
use iced_core::event::{self, Event};
use iced_core::layout;
use iced_core::mouse;
use iced_core::overlay;
use iced_core::renderer;
use iced_core::widget::Tree;
use iced_core::{Clipboard, Element, Layout, Length, Padding, Rectangle, Shell, Vector, Widget};
use iced_core::{
Alignment, Clipboard, Element, Layout, Length, Padding, Rectangle, Shell, Vector, Widget,
};
pub use iced_widget::container::{Catalog, Style};
pub fn layer_container<'a, Message: 'static, E>(
@ -96,14 +97,14 @@ where
/// Sets the content alignment for the horizontal axis of the [`LayerContainer`].
#[must_use]
pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
pub fn align_x(mut self, alignment: Alignment) -> Self {
self.container = self.container.align_x(alignment);
self
}
/// Sets the content alignment for the vertical axis of the [`LayerContainer`].
#[must_use]
pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
pub fn align_y(mut self, alignment: Alignment) -> Self {
self.container = self.container.align_y(alignment);
self
}
@ -122,6 +123,13 @@ where
self
}
/// Centers the contents in the horizontal and vertical axis of the [`Container`].
#[must_use]
pub fn center(mut self, length: Length) -> Self {
self.container = self.container.center(length);
self
}
/// Sets the style of the [`LayerContainer`].
#[must_use]
pub fn class(mut self, style: impl Into<crate::style::iced::Container<'a>>) -> Self {

View file

@ -42,10 +42,10 @@ impl<'a, Message: 'static> ListColumn<'a, Message> {
// Ensure a minimum height of 32.
let container = iced::widget::row![
crate::widget::container(item).align_y(iced::alignment::Vertical::Center),
crate::widget::container(item).align_y(iced::Alignment::Center),
crate::widget::vertical_space().height(iced::Length::Fixed(32.))
]
.align_y(iced::alignment::Vertical::Center);
.align_y(iced::Alignment::Center);
self.children.push(container.into());
self

View file

@ -281,9 +281,7 @@ where
widget::Space::with_width(Length::Fixed(16.0)).into()
},
widget::Space::with_width(Length::Fixed(8.0)).into(),
widget::text(label)
.align_x(iced::alignment::Horizontal::Left)
.into(),
widget::text(label).align_x(iced::Alignment::Start).into(),
widget::horizontal_space().width(Length::Fill).into(),
widget::text(key).into(),
])

View file

@ -146,11 +146,12 @@ impl<'a, Message: Clone + 'static> From<NavBar<'a, Message>>
.button_spacing(space_xxs)
.spacing(space_xxs)
.style(crate::theme::SegmentedButton::TabBar)
.apply(container)
.padding(space_xxs)
.apply(scrollable)
.class(crate::style::iced::Scrollable::Minimal)
.height(Length::Fill)
.apply(container)
.padding(space_xxs)
.height(Length::Fill)
.class(theme::Container::custom(nav_bar_style))
}

View file

@ -5,14 +5,13 @@ use iced::widget::Container;
use iced::Vector;
pub use subscription::*;
use iced_core::alignment;
use iced_core::event::{self, Event};
use iced_core::layout;
use iced_core::mouse;
use iced_core::overlay;
use iced_core::renderer;
use iced_core::widget::Tree;
use iced_core::{Clipboard, Element, Layout, Length, Padding, Rectangle, Shell, Widget};
use iced_core::{Alignment, Clipboard, Element, Layout, Length, Padding, Rectangle, Shell, Widget};
use std::{fmt::Debug, hash::Hash};
pub use iced_widget::container::{Catalog, Style};
@ -133,14 +132,14 @@ where
/// Sets the content alignment for the horizontal axis of the [`Container`].
#[must_use]
pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
pub fn align_x(mut self, alignment: Alignment) -> Self {
self.container = self.container.align_x(alignment);
self
}
/// Sets the content alignment for the vertical axis of the [`Container`].
#[must_use]
pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
pub fn align_y(mut self, alignment: Alignment) -> Self {
self.container = self.container.align_y(alignment);
self
}
@ -159,6 +158,13 @@ where
self
}
/// Centers the contents in the horizontal and vertical axis of the [`Container`].
#[must_use]
pub fn center(mut self, length: Length) -> Self {
self.container = self.container.center(length);
self
}
/// Sets the style of the [`Container`].
#[must_use]
pub fn style(mut self, style: impl Into<<crate::Theme as Catalog>::Class<'a>>) -> Self {

View file

@ -8,6 +8,4 @@ pub fn scrollable<'a, Message>(
element: impl Into<Element<'a, Message>>,
) -> widget::Scrollable<'a, Message, crate::Theme, Renderer> {
widget::scrollable(element)
// .scrollbar_width(8) TODO add these back
// .scroller_width(8)
}

View file

@ -114,8 +114,8 @@ impl<'a, Message: 'static> Item<'a, Message> {
if let Some(description) = self.description {
let column = column::with_capacity(2)
.spacing(2)
.push(text(self.title).wrapping(Wrapping::Word))
.push(text(description).wrapping(Wrapping::Word).size(10))
.push(text::body(self.title).wrapping(Wrapping::Word))
.push(text::caption(description).wrapping(Wrapping::Word))
.width(Length::Fill);
contents.push(column.into());

View file

@ -5,7 +5,7 @@ pub mod item;
pub mod section;
pub use self::item::{flex_item, flex_item_row, item, item_row};
pub use self::section::{section, view_section, Section};
pub use self::section::{section, Section};
use crate::widget::{column, Column};
use crate::{theme, Element};
@ -13,8 +13,8 @@ use crate::{theme, Element};
/// A column with a predefined style for creating a settings panel
#[must_use]
pub fn view_column<Message: 'static>(children: Vec<Element<Message>>) -> Column<Message> {
let spacing = theme::THEME.lock().unwrap().cosmic().spacing;
let space_m = theme::THEME.lock().unwrap().cosmic().spacing.space_m;
column::with_children(children)
.spacing(spacing.space_m)
.padding([0, spacing.space_m])
.spacing(space_m)
.padding([0, space_m])
}

View file

@ -11,10 +11,7 @@ pub use self::model::{Message, Model};
use crate::widget::{button, container, icon, row, text};
use crate::{theme, Element};
use apply::Apply;
use iced::{
alignment::{Horizontal, Vertical},
Alignment, Length,
};
use iced::{Alignment, Length};
use iced_core::{Border, Shadow};
pub struct SpinButton<'a, Message> {
@ -49,10 +46,7 @@ impl<'a, Message: 'static> SpinButton<'a, Message> {
icon::from_name("list-remove-symbolic")
.size(16)
.apply(container)
.width(Length::Fixed(32.0))
.height(Length::Fixed(32.0))
.align_x(Horizontal::Center)
.align_y(Vertical::Center)
.center(Length::Fixed(32.0))
.apply(button::custom)
.width(Length::Fixed(32.0))
.height(Length::Fixed(32.0))
@ -61,17 +55,13 @@ impl<'a, Message: 'static> SpinButton<'a, Message> {
.into(),
text::title4(label)
.apply(container)
.width(Length::Fixed(48.0))
.align_x(Horizontal::Center)
.align_y(Vertical::Center)
.center_x(Length::Fixed(48.0))
.align_y(Alignment::Center)
.into(),
icon::from_name("list-add-symbolic")
.size(16)
.apply(container)
.width(Length::Fixed(32.0))
.height(Length::Fixed(32.0))
.align_x(Horizontal::Center)
.align_y(Vertical::Center)
.center(Length::Fixed(32.0))
.apply(button::custom)
.width(Length::Fixed(32.0))
.height(Length::Fixed(32.0))
@ -83,9 +73,8 @@ impl<'a, Message: 'static> SpinButton<'a, Message> {
.height(Length::Fixed(32.0))
.align_y(Alignment::Center),
)
.align_y(Vertical::Center)
.width(Length::Shrink)
.height(Length::Fixed(32.0))
.center_y(Length::Fixed(32.0))
.class(theme::Container::custom(container_style))
.apply(Element::from)
.map(on_change)

View file

@ -4,7 +4,7 @@
use super::icon;
use crate::{theme, widget, Element, Renderer, Theme};
use apply::Apply;
use iced::{alignment, Alignment, Background, Color, Length};
use iced::{Alignment, Background, Color, Length};
use iced_core::{Border, Shadow};
use std::borrow::Cow;
@ -45,7 +45,7 @@ impl<'a, Message: 'static + Clone> Warning<'a, Message> {
.apply(widget::container)
.class(theme::Container::custom(warning_container))
.padding(10)
.align_y(alignment::Vertical::Center)
.align_y(Alignment::Center)
.width(Length::Fill)
}
}