Implement theme styling for Container

This commit is contained in:
Héctor Ramón Jiménez 2022-06-07 04:11:24 +02:00
parent 2933ac7355
commit 97555e67af
No known key found for this signature in database
GPG key ID: 140CC052C94F138E
24 changed files with 306 additions and 258 deletions

View file

@ -193,9 +193,9 @@ impl Application for Example {
.controls(pane.controls.view(id, total_panes, *is_pinned))
.padding(10)
.style(if is_focused {
style::TitleBar::Focused
style::title_bar_focused
} else {
style::TitleBar::Active
style::title_bar_active
});
pane_grid::Content::new(Responsive::new(responsive, move |size| {
@ -203,9 +203,9 @@ impl Application for Example {
}))
.title_bar(title_bar)
.style(if is_focused {
style::Pane::Focused
style::pane_focused
} else {
style::Pane::Active
style::pane_active
})
})
.width(Length::Fill)
@ -387,51 +387,47 @@ impl Controls {
}
mod style {
use iced::{container, Background, Color};
use iced::{container, Theme};
const SURFACE: Color = Color::from_rgb(
0xF2 as f32 / 255.0,
0xF3 as f32 / 255.0,
0xF5 as f32 / 255.0,
);
pub fn title_bar_active(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
pub enum TitleBar {
Active,
Focused,
}
impl container::StyleSheet for TitleBar {
fn style(&self) -> container::Style {
let pane = match self {
Self::Active => Pane::Active,
Self::Focused => Pane::Focused,
}
.style();
container::Style {
text_color: Some(Color::WHITE),
background: Some(pane.border_color.into()),
..Default::default()
}
container::Appearance {
text_color: Some(palette.background.strong.text),
background: Some(palette.background.strong.color.into()),
..Default::default()
}
}
pub enum Pane {
Active,
Focused,
pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
container::Appearance {
text_color: Some(palette.primary.strong.text),
background: Some(palette.primary.strong.color.into()),
..Default::default()
}
}
impl container::StyleSheet for Pane {
fn style(&self) -> container::Style {
container::Style {
background: Some(Background::Color(SURFACE)),
border_width: 2.0,
border_color: match self {
Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
Self::Focused => Color::BLACK,
},
..Default::default()
}
pub fn pane_active(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
container::Appearance {
background: Some(palette.background.weak.color.into()),
border_width: 2.0,
border_color: palette.background.strong.color,
..Default::default()
}
}
pub fn pane_focused(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
container::Appearance {
background: Some(palette.background.weak.color.into()),
border_width: 2.0,
border_color: palette.primary.strong.color,
..Default::default()
}
}
}

View file

@ -151,7 +151,6 @@ impl Application for GameOfLife {
container(content)
.width(Length::Fill)
.height(Length::Fill)
.style(style::Container)
.into()
}
}

View file

@ -1,4 +1,4 @@
use iced::{container, pick_list, Color};
use iced::{pick_list, Color};
pub const BACKGROUND: Color = Color::from_rgb(
0x2F as f32 / 255.0,
@ -6,17 +6,6 @@ pub const BACKGROUND: Color = Color::from_rgb(
0x36 as f32 / 255.0,
);
pub struct Container;
impl container::StyleSheet for Container {
fn style(&self) -> container::Style {
container::Style {
text_color: Some(Color::WHITE),
..container::Style::default()
}
}
}
pub struct PickList;
impl pick_list::StyleSheet for PickList {

View file

@ -179,9 +179,9 @@ impl Application for Example {
.controls(view_controls(id, total_panes, pane.is_pinned))
.padding(10)
.style(if is_focused {
style::TitleBar::Focused
style::title_bar_focused
} else {
style::TitleBar::Active
style::title_bar_active
});
pane_grid::Content::new(responsive(move |size| {
@ -189,9 +189,9 @@ impl Application for Example {
}))
.title_bar(title_bar)
.style(if is_focused {
style::Pane::Focused
style::pane_focused
} else {
style::Pane::Active
style::pane_active
})
})
.width(Length::Fill)
@ -323,51 +323,47 @@ fn view_controls<'a>(
}
mod style {
use iced::{container, Background, Color};
use iced::{container, Theme};
const SURFACE: Color = Color::from_rgb(
0xF2 as f32 / 255.0,
0xF3 as f32 / 255.0,
0xF5 as f32 / 255.0,
);
pub fn title_bar_active(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
pub enum TitleBar {
Active,
Focused,
}
impl container::StyleSheet for TitleBar {
fn style(&self) -> container::Style {
let pane = match self {
Self::Active => Pane::Active,
Self::Focused => Pane::Focused,
}
.style();
container::Style {
text_color: Some(Color::WHITE),
background: Some(pane.border_color.into()),
..Default::default()
}
container::Appearance {
text_color: Some(palette.background.strong.text),
background: Some(palette.background.strong.color.into()),
..Default::default()
}
}
pub enum Pane {
Active,
Focused,
pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
container::Appearance {
text_color: Some(palette.primary.strong.text),
background: Some(palette.primary.strong.color.into()),
..Default::default()
}
}
impl container::StyleSheet for Pane {
fn style(&self) -> container::Style {
container::Style {
background: Some(Background::Color(SURFACE)),
border_width: 2.0,
border_color: match self {
Self::Active => Color::from_rgb(0.7, 0.7, 0.7),
Self::Focused => Color::BLACK,
},
..Default::default()
}
pub fn pane_active(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
container::Appearance {
background: Some(palette.background.weak.color.into()),
border_width: 2.0,
border_color: palette.background.strong.color,
..Default::default()
}
}
pub fn pane_focused(theme: &Theme) -> container::Appearance {
let palette = theme.extended_palette();
container::Appearance {
background: Some(palette.background.weak.color.into()),
border_width: 2.0,
border_color: palette.primary.strong.color,
..Default::default()
}
}
}

View file

@ -1,6 +1,7 @@
use iced::pure::{
button, container, tooltip, widget::tooltip::Position, Element, Sandbox,
};
use iced::pure::widget::tooltip::Position;
use iced::pure::{button, container, tooltip};
use iced::pure::{Element, Sandbox};
use iced::theme;
use iced::{Length, Settings};
pub fn main() -> iced::Result {
@ -53,7 +54,7 @@ impl Sandbox for Example {
self.position,
)
.gap(10)
.style(style::Tooltip);
.style(theme::Container::Box);
container(tooltip)
.width(Length::Fill)
@ -73,21 +74,3 @@ fn position_to_text<'a>(position: Position) -> &'a str {
Position::Right => "Right",
}
}
mod style {
use iced::container;
use iced::Color;
pub struct Tooltip;
impl container::StyleSheet for Tooltip {
fn style(&self) -> container::Style {
container::Style {
text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
border_radius: 12.0,
..container::Style::default()
}
}
}
}

View file

@ -1,7 +1,9 @@
use iced::alignment::{self, Alignment};
use iced::button;
use iced::theme;
use iced::tooltip::{self, Tooltip};
use iced::{
alignment, button, Alignment, Button, Column, Container, Element, Length,
Row, Sandbox, Settings, Text,
Button, Column, Container, Element, Length, Row, Sandbox, Settings, Text,
};
pub fn main() {
@ -115,24 +117,6 @@ fn tooltip<'a>(
)
.gap(5)
.padding(10)
.style(style::Tooltip)
.style(theme::Container::Box)
.into()
}
mod style {
use iced::container;
use iced::Color;
pub struct Tooltip;
impl container::StyleSheet for Tooltip {
fn style(&self) -> container::Style {
container::Style {
text_color: Some(Color::from_rgb8(0xEE, 0xEE, 0xEE)),
background: Some(Color::from_rgb(0.11, 0.42, 0.87).into()),
border_radius: 12.0,
..container::Style::default()
}
}
}
}