me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement theme styling for PickList and Menu

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2022-06-07 04:51:44 +02:00
parent 97555e67af
commit 396735b682
No known key found for this signature in database
GPG key ID: 140CC052C94F138E
14 changed files with 168 additions and 247 deletions
Download patch file Download diff file Expand all files Collapse all files

4
examples/game_of_life/src/main.rs
View file

@ -1,7 +1,6 @@
//! This example showcases an interactive version of the Game of Life, invented
//! by John Conway. It leverages a `Canvas` together with other widgets.
mod preset;
mod style;
use grid::Grid;
use iced::button::{self, Button};
@ -877,8 +876,7 @@ impl Controls {
Message::PresetPicked,
)
.padding(8)
.text_size(16)
.style(style::PickList),
.text_size(16),
)
.push(
Button::new(&mut self.clear_button, Text::new("Clear"))

56
examples/game_of_life/src/style.rs
View file

@ -1,56 +0,0 @@
use iced::{pick_list, Color};
const BACKGROUND: Color = Color::from_rgb(
0x2F as f32 / 255.0,
0x31 as f32 / 255.0,
0x36 as f32 / 255.0,
);
pub struct PickList;
impl pick_list::StyleSheet for PickList {
fn menu(&self) -> pick_list::Menu {
pick_list::Menu {
text_color: Color::WHITE,
background: BACKGROUND.into(),
border_width: 1.0,
border_color: Color {
a: 0.7,
..Color::BLACK
},
selected_background: Color {
a: 0.5,
..Color::BLACK
}
.into(),
selected_text_color: Color::WHITE,
}
}
fn active(&self) -> pick_list::Style {
pick_list::Style {
text_color: Color::WHITE,
background: BACKGROUND.into(),
border_width: 1.0,
border_color: Color {
a: 0.6,
..Color::BLACK
},
border_radius: 2.0,
icon_size: 0.5,
..pick_list::Style::default()
}
}
fn hovered(&self) -> pick_list::Style {
let active = self.active();
pick_list::Style {
border_color: Color {
a: 0.9,
..Color::BLACK
},
..active
}
}
}

4
examples/pure/game_of_life/src/main.rs
View file

@ -1,7 +1,6 @@
//! This example showcases an interactive version of the Game of Life, invented
//! by John Conway. It leverages a `Canvas` together with other widgets.
mod preset;
mod style;
use grid::Grid;
use iced::executor;
@ -195,8 +194,7 @@ fn view_controls<'a>(
.push(
pick_list(preset::ALL, Some(preset), Message::PresetPicked)
.padding(8)
.text_size(16)
.style(style::PickList),
.text_size(16),
)
.push(
button("Clear")

56
examples/pure/game_of_life/src/style.rs
View file

@ -1,56 +0,0 @@
use iced::{pick_list, Color};
pub const BACKGROUND: Color = Color::from_rgb(
0x2F as f32 / 255.0,
0x31 as f32 / 255.0,
0x36 as f32 / 255.0,
);
pub struct PickList;
impl pick_list::StyleSheet for PickList {
fn menu(&self) -> pick_list::Menu {
pick_list::Menu {
text_color: Color::WHITE,
background: BACKGROUND.into(),
border_width: 1.0,
border_color: Color {
a: 0.7,
..Color::BLACK
},
selected_background: Color {
a: 0.5,
..Color::BLACK
}
.into(),
selected_text_color: Color::WHITE,
}
}
fn active(&self) -> pick_list::Style {
pick_list::Style {
text_color: Color::WHITE,
background: BACKGROUND.into(),
border_width: 1.0,
border_color: Color {
a: 0.6,
..Color::BLACK
},
border_radius: 2.0,
icon_size: 0.5,
..pick_list::Style::default()
}
}
fn hovered(&self) -> pick_list::Style {
let active = self.active();
pick_list::Style {
border_color: Color {
a: 0.9,
..Color::BLACK
},
..active
}
}
}

2
graphics/src/overlay/menu.rs
View file

@ -1,3 +1,3 @@
//! Build and show dropdown menus.
pub use iced_style::menu::Style;
pub use iced_style::menu::{Appearance, StyleSheet};

63
native/src/overlay/menu.rs
View file

@ -14,11 +14,15 @@ use crate::{
Shell, Size, Vector, Widget,
};
pub use iced_style::menu::Style;
pub use iced_style::menu::{Appearance, StyleSheet};
/// A list of selectable options.
#[allow(missing_debug_implementations)]
pub struct Menu<'a, T, Renderer: text::Renderer> {
pub struct Menu<'a, T, Renderer>
where
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
state: &'a mut State,
options: &'a [T],
hovered_option: &'a mut Option<usize>,
@ -27,14 +31,15 @@ pub struct Menu<'a, T, Renderer: text::Renderer> {
padding: Padding,
text_size: Option<u16>,
font: Renderer::Font,
style: Style,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, T, Renderer> Menu<'a, T, Renderer>
where
T: ToString + Clone,
Renderer: text::Renderer + 'a,
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
Renderer::Theme:
StyleSheet + container::StyleSheet + scrollable::StyleSheet,
{
/// Creates a new [`Menu`] with the given [`State`], a list of options, and
/// the message to produced when an option is selected.
@ -82,7 +87,10 @@ where
}
/// Sets the style of the [`Menu`].
pub fn style(mut self, style: impl Into<Style>) -> Self {
pub fn style(
mut self,
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
) -> Self {
self.style = style.into();
self
}
@ -121,12 +129,12 @@ impl State {
struct Overlay<'a, Message, Renderer>
where
Renderer: crate::Renderer,
Renderer::Theme: container::StyleSheet,
Renderer::Theme: StyleSheet + container::StyleSheet,
{
container: Container<'a, Message, Renderer>,
width: u16,
target_height: f32,
style: Style,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, Message, Renderer> Overlay<'a, Message, Renderer>
@ -134,7 +142,8 @@ where
Message: 'a,
Renderer: 'a,
Renderer: text::Renderer,
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
Renderer::Theme:
StyleSheet + container::StyleSheet + scrollable::StyleSheet,
{
pub fn new<T>(menu: Menu<'a, T, Renderer>, target_height: f32) -> Self
where
@ -160,9 +169,8 @@ where
font,
text_size,
padding,
style: style.clone(),
}))
.padding(1);
style,
}));
Self {
container,
@ -177,7 +185,7 @@ impl<'a, Message, Renderer> crate::Overlay<Message, Renderer>
for Overlay<'a, Message, Renderer>
where
Renderer: text::Renderer,
Renderer::Theme: container::StyleSheet,
Renderer::Theme: StyleSheet + container::StyleSheet,
{
fn layout(
&self,
@ -254,16 +262,20 @@ where
layout: Layout<'_>,
cursor_position: Point,
) {
let appearance = theme.appearance(self.style);
let bounds = layout.bounds();
renderer.fill_quad(
renderer::Quad {
bounds,
border_color: self.style.border_color,
border_width: self.style.border_width,
bounds: Rectangle {
width: bounds.width - 1.0,
..bounds
},
border_color: appearance.border_color,
border_width: appearance.border_width,
border_radius: 0.0,
},
self.style.background,
appearance.background,
);
self.container.draw(
@ -277,14 +289,18 @@ where
}
}
struct List<'a, T, Renderer: text::Renderer> {
struct List<'a, T, Renderer>
where
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
options: &'a [T],
hovered_option: &'a mut Option<usize>,
last_selection: &'a mut Option<T>,
padding: Padding,
text_size: Option<u16>,
font: Renderer::Font,
style: Style,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, T, Message, Renderer> Widget<Message, Renderer>
@ -292,6 +308,7 @@ impl<'a, T, Message, Renderer> Widget<Message, Renderer>
where
T: Clone + ToString,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
fn width(&self) -> Length {
Length::Fill
@ -404,12 +421,13 @@ where
fn draw(
&self,
renderer: &mut Renderer,
_theme: &Renderer::Theme,
theme: &Renderer::Theme,
_style: &renderer::Style,
layout: Layout<'_>,
_cursor_position: Point,
viewport: &Rectangle,
) {
let appearance = theme.appearance(self.style);
let bounds = layout.bounds();
let text_size = self.text_size.unwrap_or(renderer.default_size());
@ -441,7 +459,7 @@ where
border_width: 0.0,
border_radius: 0.0,
},
self.style.selected_background,
appearance.selected_background,
);
}
@ -456,9 +474,9 @@ where
size: f32::from(text_size),
font: self.font.clone(),
color: if is_selected {
self.style.selected_text_color
appearance.selected_text_color
} else {
self.style.text_color
appearance.text_color
},
horizontal_alignment: alignment::Horizontal::Left,
vertical_alignment: alignment::Vertical::Center,
@ -473,6 +491,7 @@ where
T: ToString + Clone,
Message: 'a,
Renderer: 'a + text::Renderer,
Renderer::Theme: StyleSheet,
{
fn into(self) -> Element<'a, Message, Renderer> {
Element::new(self)

51
native/src/widget/pick_list.rs
View file

@ -17,13 +17,15 @@ use crate::{
};
use std::borrow::Cow;
pub use iced_style::pick_list::{Style, StyleSheet};
pub use iced_style::pick_list::{Appearance, StyleSheet};
/// A widget for selecting a single value from a list of options.
#[allow(missing_debug_implementations)]
pub struct PickList<'a, T, Message, Renderer: text::Renderer>
pub struct PickList<'a, T, Message, Renderer>
where
[T]: ToOwned<Owned = Vec<T>>,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
state: &'a mut State<T>,
on_selected: Box<dyn Fn(T) -> Message>,
@ -34,7 +36,7 @@ where
padding: Padding,
text_size: Option<u16>,
font: Renderer::Font,
style_sheet: Box<dyn StyleSheet + 'a>,
style: <Renderer::Theme as StyleSheet>::Style,
}
/// The local state of a [`PickList`].
@ -66,11 +68,12 @@ impl<T> Default for State<T> {
}
}
impl<'a, T: 'a, Message, Renderer: text::Renderer>
PickList<'a, T, Message, Renderer>
impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
where
T: ToString + Eq,
[T]: ToOwned<Owned = Vec<T>>,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
/// The default padding of a [`PickList`].
pub const DEFAULT_PADDING: Padding = Padding::new(5);
@ -94,7 +97,7 @@ where
text_size: None,
padding: Self::DEFAULT_PADDING,
font: Default::default(),
style_sheet: Default::default(),
style: Default::default(),
}
}
@ -131,9 +134,9 @@ where
/// Sets the style of the [`PickList`].
pub fn style(
mut self,
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
) -> Self {
self.style_sheet = style_sheet.into();
self.style = style.into();
self
}
}
@ -319,13 +322,13 @@ pub fn overlay<'a, T, Message, Renderer>(
text_size: Option<u16>,
font: Renderer::Font,
options: &'a [T],
style_sheet: &dyn StyleSheet,
style: <Renderer::Theme as StyleSheet>::Style,
) -> Option<overlay::Element<'a, Message, Renderer>>
where
T: Clone + ToString,
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
T: Clone + ToString,
Renderer::Theme: StyleSheet,
{
if state.is_open {
let bounds = layout.bounds();
@ -339,7 +342,7 @@ where
.width(bounds.width.round() as u16)
.padding(padding)
.font(font)
.style(style_sheet.menu());
.style(style);
if let Some(text_size) = text_size {
menu = menu.text_size(text_size);
@ -354,6 +357,7 @@ where
/// Draws a [`PickList`].
pub fn draw<T, Renderer>(
renderer: &mut Renderer,
theme: &Renderer::Theme,
layout: Layout<'_>,
cursor_position: Point,
padding: Padding,
@ -361,9 +365,10 @@ pub fn draw<T, Renderer>(
font: &Renderer::Font,
placeholder: Option<&str>,
selected: Option<&T>,
style_sheet: &dyn StyleSheet,
style: <Renderer::Theme as StyleSheet>::Style,
) where
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
T: ToString,
{
let bounds = layout.bounds();
@ -371,9 +376,9 @@ pub fn draw<T, Renderer>(
let is_selected = selected.is_some();
let style = if is_mouse_over {
style_sheet.hovered()
theme.hovered(style)
} else {
style_sheet.active()
theme.active(style)
};
renderer.fill_quad(
@ -433,7 +438,7 @@ where
[T]: ToOwned<Owned = Vec<T>>,
Message: 'static,
Renderer: text::Renderer + 'a,
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
Renderer::Theme: StyleSheet,
{
fn width(&self) -> Length {
self.width
@ -494,7 +499,7 @@ where
fn draw(
&self,
renderer: &mut Renderer,
_theme: &Renderer::Theme,
theme: &Renderer::Theme,
_style: &renderer::Style,
layout: Layout<'_>,
cursor_position: Point,
@ -502,6 +507,7 @@ where
) {
draw(
renderer,
theme,
layout,
cursor_position,
self.padding,
@ -509,7 +515,7 @@ where
&self.font,
self.placeholder.as_ref().map(String::as_str),
self.selected.as_ref(),
self.style_sheet.as_ref(),
self.style,
)
}
@ -525,7 +531,7 @@ where
self.text_size,
self.font.clone(),
&self.options,
self.style_sheet.as_ref(),
self.style,
)
}
}
@ -537,7 +543,12 @@ where
[T]: ToOwned<Owned = Vec<T>>,
Message: 'static,
Renderer: text::Renderer + 'a,
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
Renderer::Theme: StyleSheet
+ container::StyleSheet
+ scrollable::StyleSheet
+ menu::StyleSheet,
<Renderer::Theme as StyleSheet>::Style:
Into<<Renderer::Theme as menu::StyleSheet>::Style>,
{
fn into(self) -> Element<'a, Message, Renderer> {
Element::new(self)

1
pure/src/helpers.rs
View file

@ -179,6 +179,7 @@ where
T: ToString + Eq + 'static,
[T]: ToOwned<Owned = Vec<T>>,
Renderer: iced_native::text::Renderer,
Renderer::Theme: widget::pick_list::StyleSheet,
{
widget::PickList::new(options, selected, on_selected)
}

32
pure/src/widget/pick_list.rs
View file

@ -1,6 +1,4 @@
//! Display a dropdown list of selectable values.
use crate::widget::container;
use crate::widget::scrollable;
use crate::widget::tree::{self, Tree};
use crate::{Element, Widget};
@ -17,13 +15,15 @@ use iced_native::{
use std::borrow::Cow;
pub use iced_style::pick_list::{Style, StyleSheet};
pub use iced_style::pick_list::{Appearance, StyleSheet};
/// A widget for selecting a single value from a list of options.
#[allow(missing_debug_implementations)]
pub struct PickList<'a, T, Message, Renderer: text::Renderer>
pub struct PickList<'a, T, Message, Renderer>
where
[T]: ToOwned<Owned = Vec<T>>,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
on_selected: Box<dyn Fn(T) -> Message + 'a>,
options: Cow<'a, [T]>,
@ -33,14 +33,15 @@ where
padding: Padding,
text_size: Option<u16>,
font: Renderer::Font,
style_sheet: Box<dyn StyleSheet + 'a>,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, T: 'a, Message, Renderer: text::Renderer>
PickList<'a, T, Message, Renderer>
impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
where
T: ToString + Eq,
[T]: ToOwned<Owned = Vec<T>>,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
/// The default padding of a [`PickList`].
pub const DEFAULT_PADDING: Padding = Padding::new(5);
@ -61,7 +62,7 @@ where
text_size: None,
padding: Self::DEFAULT_PADDING,
font: Default::default(),
style_sheet: Default::default(),
style: Default::default(),
}
}
@ -98,9 +99,9 @@ where
/// Sets the style of the [`PickList`].
pub fn style(
mut self,
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
) -> Self {
self.style_sheet = style_sheet.into();
self.style = style.into();
self
}
}
@ -112,7 +113,7 @@ where
[T]: ToOwned<Owned = Vec<T>>,
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
Renderer::Theme: StyleSheet,
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<pick_list::State<T>>()
@ -184,7 +185,7 @@ where
&self,
_tree: &Tree,
renderer: &mut Renderer,
_theme: &Renderer::Theme,
theme: &Renderer::Theme,
_style: &renderer::Style,
layout: Layout<'_>,
cursor_position: Point,
@ -192,6 +193,7 @@ where
) {
pick_list::draw(
renderer,
theme,
layout,
cursor_position,
self.padding,
@ -199,7 +201,7 @@ where
&self.font,
self.placeholder.as_ref().map(String::as_str),
self.selected.as_ref(),
self.style_sheet.as_ref(),
self.style,
)
}
@ -218,7 +220,7 @@ where
self.text_size,
self.font.clone(),
&self.options,
self.style_sheet.as_ref(),
self.style,
)
}
}
@ -230,7 +232,7 @@ where
[T]: ToOwned<Owned = Vec<T>>,
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
Renderer::Theme: StyleSheet,
{
fn into(self) -> Element<'a, Message, Renderer> {
Element::new(self)

3
src/pure/widget.rs
View file

@ -80,8 +80,7 @@ pub mod pane_grid {
pub mod pick_list {
//! Display a dropdown list of selectable values.
pub use iced_pure::overlay::menu::Style as Menu;
pub use iced_pure::widget::pick_list::{Style, StyleSheet};
pub use iced_pure::widget::pick_list::{Appearance, StyleSheet};
/// A widget allowing the selection of a single value from a list of options.
pub type PickList<'a, T, Message, Theme> =

3
src/widget.rs
View file

@ -96,8 +96,7 @@ pub mod pane_grid {
pub mod pick_list {
//! Display a dropdown list of selectable values.
pub use iced_native::overlay::menu::Style as Menu;
pub use iced_native::widget::pick_list::{State, Style, StyleSheet};
pub use iced_native::widget::pick_list::{Appearance, State, StyleSheet};
/// A widget allowing the selection of a single value from a list of options.
pub type PickList<'a, T, Message, Theme> =

17
style/src/menu.rs
View file

@ -2,7 +2,7 @@ use iced_core::{Background, Color};
/// The appearance of a menu.
#[derive(Debug, Clone, Copy)]
pub struct Style {
pub struct Appearance {
pub text_color: Color,
pub background: Background,
pub border_width: f32,
@ -11,15 +11,8 @@ pub struct Style {
pub selected_background: Background,
}
impl std::default::Default for Style {
fn default() -> Self {
Self {
text_color: Color::BLACK,
background: Background::Color([0.87, 0.87, 0.87].into()),
border_width: 1.0,
border_color: [0.7, 0.7, 0.7].into(),
selected_text_color: Color::WHITE,
selected_background: Background::Color([0.4, 0.4, 1.0].into()),
}
}
pub trait StyleSheet {
type Style: Default + Copy;
fn appearance(&self, style: Self::Style) -> Appearance;
}

65
style/src/pick_list.rs
View file

@ -1,9 +1,12 @@
use crate::menu;
use iced_core::{Background, Color};
use crate::container;
use crate::menu;
use crate::scrollable;
/// The appearance of a pick list.
#[derive(Debug, Clone, Copy)]
pub struct Style {
pub struct Appearance {
pub text_color: Color,
pub placeholder_color: Color,
pub background: Background,
@ -13,60 +16,14 @@ pub struct Style {
pub icon_size: f32,
}
impl std::default::Default for Style {
fn default() -> Self {
Self {
text_color: Color::BLACK,
placeholder_color: [0.4, 0.4, 0.4].into(),
background: Background::Color([0.87, 0.87, 0.87].into()),
border_radius: 0.0,
border_width: 1.0,
border_color: [0.7, 0.7, 0.7].into(),
icon_size: 0.7,
}
}
}
/// A set of rules that dictate the style of a container.
pub trait StyleSheet {
fn menu(&self) -> menu::Style;
pub trait StyleSheet:
container::StyleSheet + menu::StyleSheet + scrollable::StyleSheet
{
type Style: Default + Copy + Into<<Self as menu::StyleSheet>::Style>;
fn active(&self) -> Style;
fn active(&self, style: <Self as StyleSheet>::Style) -> Appearance;
/// Produces the style of a container.
fn hovered(&self) -> Style;
}
struct Default;
impl StyleSheet for Default {
fn menu(&self) -> menu::Style {
menu::Style::default()
}
fn active(&self) -> Style {
Style::default()
}
fn hovered(&self) -> Style {
Style {
border_color: Color::BLACK,
..self.active()
}
}
}
impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
fn default() -> Self {
Box::new(Default)
}
}
impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
where
T: 'a + StyleSheet,
{
fn from(style: T) -> Self {
Box::new(style)
}
fn hovered(&self, style: <Self as StyleSheet>::Style) -> Appearance;
}

58
style/src/theme.rs
View file

@ -6,7 +6,9 @@ use crate::application;
use crate::button;
use crate::checkbox;
use crate::container;
use crate::menu;
use crate::pane_grid;
use crate::pick_list;
use crate::progress_bar;
use crate::radio;
use crate::rule;
@ -327,6 +329,61 @@ impl slider::StyleSheet for Theme {
}
}
/*
* Menu
*/
impl menu::StyleSheet for Theme {
type Style = ();
fn appearance(&self, _style: Self::Style) -> menu::Appearance {
let palette = self.extended_palette();
menu::Appearance {
text_color: palette.background.weak.text,
background: palette.background.weak.color.into(),
border_width: 1.0,
border_color: palette.background.strong.color,
selected_text_color: palette.primary.strong.text,
selected_background: palette.primary.strong.color.into(),
}
}
}
/*
* Pick List
*/
impl pick_list::StyleSheet for Theme {
type Style = ();
fn active(&self, _style: ()) -> pick_list::Appearance {
let palette = self.extended_palette();
pick_list::Appearance {
text_color: palette.background.weak.text,
background: palette.background.weak.color.into(),
placeholder_color: palette.background.strong.color,
border_radius: 2.0,
border_width: 1.0,
border_color: palette.background.strong.color,
icon_size: 0.7,
}
}
fn hovered(&self, _style: ()) -> pick_list::Appearance {
let palette = self.extended_palette();
pick_list::Appearance {
text_color: palette.background.weak.text,
background: palette.background.weak.color.into(),
placeholder_color: palette.background.strong.color,
border_radius: 2.0,
border_width: 1.0,
border_color: palette.primary.strong.color,
icon_size: 0.7,
}
}
}
/*
* Radio
*/
@ -506,7 +563,6 @@ impl rule::StyleSheet for Theme {
/*
* Scrollable
*/
impl scrollable::StyleSheet for Theme {
type Style = ();