From 09abcfd03c8ca9aea5aa9045c754f0d0145ff3a0 Mon Sep 17 00:00:00 2001 From: Ashley Wulber Date: Wed, 24 May 2023 19:36:14 -0400 Subject: [PATCH] feat: sorta hacky way of creating header bars for libcosmic + update iced to get support for resizable windows in iced-sctk --- examples/cosmic-sctk/src/window.rs | 11 ++++++++++- examples/cosmic/src/window.rs | 14 +++++++++----- iced | 2 +- src/theme/mod.rs | 19 ++++++++++++++++--- src/widget/header_bar.rs | 2 ++ src/widget/list/column.rs | 2 +- src/widget/nav_bar.rs | 2 +- src/widget/search/field.rs | 2 +- src/widget/spin_button/mod.rs | 2 +- src/widget/warning.rs | 2 +- 10 files changed, 43 insertions(+), 15 deletions(-) diff --git a/examples/cosmic-sctk/src/window.rs b/examples/cosmic-sctk/src/window.rs index 4f5e696b..1665118b 100644 --- a/examples/cosmic-sctk/src/window.rs +++ b/examples/cosmic-sctk/src/window.rs @@ -6,8 +6,9 @@ use cosmic::{ iced::{ wayland::window::{start_drag_window, toggle_maximize}, widget::{column, container, horizontal_space, pick_list, progress_bar, row, slider}, - window, + window, Color, }, + iced_style::application, theme::{self, Theme}, widget::{ button, header_bar, nav_bar, nav_bar_toggle, @@ -402,6 +403,7 @@ impl Application for Window { .padding([0, 8, 8, 8]) .width(Length::Fill) .height(Length::Fill) + .style(theme::Container::Background) .into(); column(vec![header, content]).into() @@ -421,4 +423,11 @@ impl Application for Window { fn subscription(&self) -> iced::Subscription { rectangle_tracker_subscription(0).map(|(_, e)| Message::Rectangle(e)) } + + fn style(&self) -> ::Style { + cosmic::theme::Application::Custom(Box::new(|theme| application::Appearance { + background_color: Color::TRANSPARENT, + text_color: theme.cosmic().on_bg_color().into(), + })) + } } diff --git a/examples/cosmic/src/window.rs b/examples/cosmic/src/window.rs index 948d5c30..d5977a11 100644 --- a/examples/cosmic/src/window.rs +++ b/examples/cosmic/src/window.rs @@ -577,17 +577,21 @@ impl Application for Window { .padding([0, 8, 8, 8]) .width(Length::Fill) .height(Length::Fill) + .style(theme::Container::Background) .into(); let warning = warning(&self.warning_message) .on_close(Message::ToggleWarning) .into(); if self.show_warning { - column(vec![ + column![ header, - warning, - iced::widget::vertical_space(Length::Fixed(12.0)).into(), - content, - ]) + container(column(vec![ + warning, + iced::widget::vertical_space(Length::Fixed(12.0)).into(), + content, + ])) + .style(theme::Container::Background) + ] .into() } else { column(vec![header, content]).into() diff --git a/iced b/iced index 4d201931..a9a11608 160000 --- a/iced +++ b/iced @@ -1 +1 @@ -Subproject commit 4d201931964228c8372cdf6277f14c2be777d403 +Subproject commit a9a116085bcf173938464689233a55df97f65fc1 diff --git a/src/theme/mod.rs b/src/theme/mod.rs index b16cd2af..2fef40a7 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -13,6 +13,7 @@ pub use self::segmented_button::SegmentedButton; use cosmic_theme::Component; use cosmic_theme::LayeredTheme; +use iced_core::renderer::BorderRadius; use iced_style::application; use iced_style::button; use iced_style::checkbox; @@ -484,6 +485,7 @@ pub enum Container { Secondary, #[default] Transparent, + HeaderBar, Custom(Box container::Appearance>), } @@ -506,7 +508,18 @@ impl container::StyleSheet for Theme { container::Appearance { text_color: Some(Color::from(palette.background.on)), background: Some(iced::Background::Color(palette.background.base.into())), - border_radius: 2.0, + border_radius: 2.0.into(), + border_width: 0.0, + border_color: Color::TRANSPARENT, + } + } + Container::HeaderBar => { + let palette = self.cosmic(); + + container::Appearance { + text_color: Some(Color::from(palette.background.on)), + background: Some(iced::Background::Color(palette.background.base.into())), + border_radius: BorderRadius::from([16.0, 16.0, 0.0, 0.0]), border_width: 0.0, border_color: Color::TRANSPARENT, } @@ -517,7 +530,7 @@ impl container::StyleSheet for Theme { container::Appearance { text_color: Some(Color::from(palette.primary.on)), background: Some(iced::Background::Color(palette.primary.base.into())), - border_radius: 2.0, + border_radius: 2.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, } @@ -528,7 +541,7 @@ impl container::StyleSheet for Theme { container::Appearance { text_color: Some(Color::from(palette.secondary.on)), background: Some(iced::Background::Color(palette.secondary.base.into())), - border_radius: 2.0, + border_radius: 2.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, } diff --git a/src/widget/header_bar.rs b/src/widget/header_bar.rs index e0623ab3..64e4bc3d 100644 --- a/src/widget/header_bar.rs +++ b/src/widget/header_bar.rs @@ -5,6 +5,7 @@ use crate::{theme, Element}; use apply::Apply; use derive_setters::Setters; use iced::{self, widget, Length}; +use iced_core::renderer::BorderRadius; use std::borrow::Cow; #[must_use] @@ -78,6 +79,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> { .padding(8) .spacing(8) .apply(widget::container) + .style(crate::theme::Container::HeaderBar) .center_y() .apply(widget::mouse_area); diff --git a/src/widget/list/column.rs b/src/widget/list/column.rs index 0a1f5c36..c6261383 100644 --- a/src/widget/list/column.rs +++ b/src/widget/list/column.rs @@ -63,7 +63,7 @@ pub fn style(theme: &crate::Theme) -> iced::widget::container::Appearance { iced::widget::container::Appearance { text_color: Some(container.on.into()), background: Some(Background::Color(container.base.into())), - border_radius: 8.0, + border_radius: 8.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, } diff --git a/src/widget/nav_bar.rs b/src/widget/nav_bar.rs index 3ee2263d..2a236468 100644 --- a/src/widget/nav_bar.rs +++ b/src/widget/nav_bar.rs @@ -45,7 +45,7 @@ pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance { iced_style::container::Appearance { text_color: Some(cosmic.on_bg_color().into()), background: Some(Background::Color(cosmic.primary.base.into())), - border_radius: 8.0, + border_radius: 8.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, } diff --git a/src/widget/search/field.rs b/src/widget/search/field.rs index 8a236365..2cfbe2b5 100644 --- a/src/widget/search/field.rs +++ b/src/widget/search/field.rs @@ -85,7 +85,7 @@ fn active_style(theme: &crate::Theme) -> container::Appearance { iced::widget::container::Appearance { text_color: Some(cosmic.palette.neutral_9.into()), background: Some(Background::Color(neutral_7.into())), - border_radius: 24.0, + border_radius: 24.0.into(), border_width: 2.0, border_color: cosmic.accent.focus.into(), } diff --git a/src/widget/spin_button/mod.rs b/src/widget/spin_button/mod.rs index 8a97d324..c069422e 100644 --- a/src/widget/spin_button/mod.rs +++ b/src/widget/spin_button/mod.rs @@ -102,7 +102,7 @@ fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance { iced_style::container::Appearance { text_color: Some(basic.palette.neutral_10.into()), background: Some(Background::Color(neutral_10.into())), - border_radius: 24.0, + border_radius: 24.0.into(), border_width: 0.0, border_color: accent.base.into(), } diff --git a/src/widget/warning.rs b/src/widget/warning.rs index e4d812c1..f46fa45f 100644 --- a/src/widget/warning.rs +++ b/src/widget/warning.rs @@ -69,7 +69,7 @@ pub fn warning_container(theme: &Theme) -> widget::container::Appearance { widget::container::Appearance { text_color: Some(theme.cosmic().warning.on.into()), background: Some(Background::Color(theme.cosmic().warning_color().into())), - border_radius: 0.0, + border_radius: 0.0.into(), border_width: 0.0, border_color: Color::TRANSPARENT, }