feat: sorta hacky way of creating header bars for libcosmic + update iced to get support for resizable windows in iced-sctk

This commit is contained in:
Ashley Wulber 2023-05-24 19:36:14 -04:00
parent bf1c474d08
commit 09abcfd03c
No known key found for this signature in database
GPG key ID: 5216D4F46A90A820
10 changed files with 43 additions and 15 deletions

View file

@ -6,8 +6,9 @@ use cosmic::{
iced::{ iced::{
wayland::window::{start_drag_window, toggle_maximize}, wayland::window::{start_drag_window, toggle_maximize},
widget::{column, container, horizontal_space, pick_list, progress_bar, row, slider}, widget::{column, container, horizontal_space, pick_list, progress_bar, row, slider},
window, window, Color,
}, },
iced_style::application,
theme::{self, Theme}, theme::{self, Theme},
widget::{ widget::{
button, header_bar, nav_bar, nav_bar_toggle, button, header_bar, nav_bar, nav_bar_toggle,
@ -402,6 +403,7 @@ impl Application for Window {
.padding([0, 8, 8, 8]) .padding([0, 8, 8, 8])
.width(Length::Fill) .width(Length::Fill)
.height(Length::Fill) .height(Length::Fill)
.style(theme::Container::Background)
.into(); .into();
column(vec![header, content]).into() column(vec![header, content]).into()
@ -421,4 +423,11 @@ impl Application for Window {
fn subscription(&self) -> iced::Subscription<Self::Message> { fn subscription(&self) -> iced::Subscription<Self::Message> {
rectangle_tracker_subscription(0).map(|(_, e)| Message::Rectangle(e)) rectangle_tracker_subscription(0).map(|(_, e)| Message::Rectangle(e))
} }
fn style(&self) -> <Self::Theme as cosmic::iced_style::application::StyleSheet>::Style {
cosmic::theme::Application::Custom(Box::new(|theme| application::Appearance {
background_color: Color::TRANSPARENT,
text_color: theme.cosmic().on_bg_color().into(),
}))
}
} }

View file

@ -577,17 +577,21 @@ impl Application for Window {
.padding([0, 8, 8, 8]) .padding([0, 8, 8, 8])
.width(Length::Fill) .width(Length::Fill)
.height(Length::Fill) .height(Length::Fill)
.style(theme::Container::Background)
.into(); .into();
let warning = warning(&self.warning_message) let warning = warning(&self.warning_message)
.on_close(Message::ToggleWarning) .on_close(Message::ToggleWarning)
.into(); .into();
if self.show_warning { if self.show_warning {
column(vec![ column![
header, header,
warning, container(column(vec![
iced::widget::vertical_space(Length::Fixed(12.0)).into(), warning,
content, iced::widget::vertical_space(Length::Fixed(12.0)).into(),
]) content,
]))
.style(theme::Container::Background)
]
.into() .into()
} else { } else {
column(vec![header, content]).into() column(vec![header, content]).into()

2
iced

@ -1 +1 @@
Subproject commit 4d201931964228c8372cdf6277f14c2be777d403 Subproject commit a9a116085bcf173938464689233a55df97f65fc1

View file

@ -13,6 +13,7 @@ pub use self::segmented_button::SegmentedButton;
use cosmic_theme::Component; use cosmic_theme::Component;
use cosmic_theme::LayeredTheme; use cosmic_theme::LayeredTheme;
use iced_core::renderer::BorderRadius;
use iced_style::application; use iced_style::application;
use iced_style::button; use iced_style::button;
use iced_style::checkbox; use iced_style::checkbox;
@ -484,6 +485,7 @@ pub enum Container {
Secondary, Secondary,
#[default] #[default]
Transparent, Transparent,
HeaderBar,
Custom(Box<dyn Fn(&Theme) -> container::Appearance>), Custom(Box<dyn Fn(&Theme) -> container::Appearance>),
} }
@ -506,7 +508,18 @@ impl container::StyleSheet for Theme {
container::Appearance { container::Appearance {
text_color: Some(Color::from(palette.background.on)), text_color: Some(Color::from(palette.background.on)),
background: Some(iced::Background::Color(palette.background.base.into())), 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_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }
@ -517,7 +530,7 @@ impl container::StyleSheet for Theme {
container::Appearance { container::Appearance {
text_color: Some(Color::from(palette.primary.on)), text_color: Some(Color::from(palette.primary.on)),
background: Some(iced::Background::Color(palette.primary.base.into())), background: Some(iced::Background::Color(palette.primary.base.into())),
border_radius: 2.0, border_radius: 2.0.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }
@ -528,7 +541,7 @@ impl container::StyleSheet for Theme {
container::Appearance { container::Appearance {
text_color: Some(Color::from(palette.secondary.on)), text_color: Some(Color::from(palette.secondary.on)),
background: Some(iced::Background::Color(palette.secondary.base.into())), background: Some(iced::Background::Color(palette.secondary.base.into())),
border_radius: 2.0, border_radius: 2.0.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }

View file

@ -5,6 +5,7 @@ use crate::{theme, Element};
use apply::Apply; use apply::Apply;
use derive_setters::Setters; use derive_setters::Setters;
use iced::{self, widget, Length}; use iced::{self, widget, Length};
use iced_core::renderer::BorderRadius;
use std::borrow::Cow; use std::borrow::Cow;
#[must_use] #[must_use]
@ -78,6 +79,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
.padding(8) .padding(8)
.spacing(8) .spacing(8)
.apply(widget::container) .apply(widget::container)
.style(crate::theme::Container::HeaderBar)
.center_y() .center_y()
.apply(widget::mouse_area); .apply(widget::mouse_area);

View file

@ -63,7 +63,7 @@ pub fn style(theme: &crate::Theme) -> iced::widget::container::Appearance {
iced::widget::container::Appearance { iced::widget::container::Appearance {
text_color: Some(container.on.into()), text_color: Some(container.on.into()),
background: Some(Background::Color(container.base.into())), background: Some(Background::Color(container.base.into())),
border_radius: 8.0, border_radius: 8.0.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }

View file

@ -45,7 +45,7 @@ pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance {
iced_style::container::Appearance { iced_style::container::Appearance {
text_color: Some(cosmic.on_bg_color().into()), text_color: Some(cosmic.on_bg_color().into()),
background: Some(Background::Color(cosmic.primary.base.into())), background: Some(Background::Color(cosmic.primary.base.into())),
border_radius: 8.0, border_radius: 8.0.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }

View file

@ -85,7 +85,7 @@ fn active_style(theme: &crate::Theme) -> container::Appearance {
iced::widget::container::Appearance { iced::widget::container::Appearance {
text_color: Some(cosmic.palette.neutral_9.into()), text_color: Some(cosmic.palette.neutral_9.into()),
background: Some(Background::Color(neutral_7.into())), background: Some(Background::Color(neutral_7.into())),
border_radius: 24.0, border_radius: 24.0.into(),
border_width: 2.0, border_width: 2.0,
border_color: cosmic.accent.focus.into(), border_color: cosmic.accent.focus.into(),
} }

View file

@ -102,7 +102,7 @@ fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance {
iced_style::container::Appearance { iced_style::container::Appearance {
text_color: Some(basic.palette.neutral_10.into()), text_color: Some(basic.palette.neutral_10.into()),
background: Some(Background::Color(neutral_10.into())), background: Some(Background::Color(neutral_10.into())),
border_radius: 24.0, border_radius: 24.0.into(),
border_width: 0.0, border_width: 0.0,
border_color: accent.base.into(), border_color: accent.base.into(),
} }

View file

@ -69,7 +69,7 @@ pub fn warning_container(theme: &Theme) -> widget::container::Appearance {
widget::container::Appearance { widget::container::Appearance {
text_color: Some(theme.cosmic().warning.on.into()), text_color: Some(theme.cosmic().warning.on.into()),
background: Some(Background::Color(theme.cosmic().warning_color().into())), background: Some(Background::Color(theme.cosmic().warning_color().into())),
border_radius: 0.0, border_radius: 0.0.into(),
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
} }