Implement theme styling for Container
This commit is contained in:
parent
2933ac7355
commit
97555e67af
24 changed files with 306 additions and 258 deletions
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,7 +151,6 @@ impl Application for GameOfLife {
|
|||
container(content)
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.style(style::Container)
|
||||
.into()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue