Implement theme styling for PickList and Menu
This commit is contained in:
parent
97555e67af
commit
396735b682
14 changed files with 168 additions and 247 deletions
|
|
@ -1,7 +1,6 @@
|
||||||
//! This example showcases an interactive version of the Game of Life, invented
|
//! This example showcases an interactive version of the Game of Life, invented
|
||||||
//! by John Conway. It leverages a `Canvas` together with other widgets.
|
//! by John Conway. It leverages a `Canvas` together with other widgets.
|
||||||
mod preset;
|
mod preset;
|
||||||
mod style;
|
|
||||||
|
|
||||||
use grid::Grid;
|
use grid::Grid;
|
||||||
use iced::button::{self, Button};
|
use iced::button::{self, Button};
|
||||||
|
|
@ -877,8 +876,7 @@ impl Controls {
|
||||||
Message::PresetPicked,
|
Message::PresetPicked,
|
||||||
)
|
)
|
||||||
.padding(8)
|
.padding(8)
|
||||||
.text_size(16)
|
.text_size(16),
|
||||||
.style(style::PickList),
|
|
||||||
)
|
)
|
||||||
.push(
|
.push(
|
||||||
Button::new(&mut self.clear_button, Text::new("Clear"))
|
Button::new(&mut self.clear_button, Text::new("Clear"))
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
//! This example showcases an interactive version of the Game of Life, invented
|
//! This example showcases an interactive version of the Game of Life, invented
|
||||||
//! by John Conway. It leverages a `Canvas` together with other widgets.
|
//! by John Conway. It leverages a `Canvas` together with other widgets.
|
||||||
mod preset;
|
mod preset;
|
||||||
mod style;
|
|
||||||
|
|
||||||
use grid::Grid;
|
use grid::Grid;
|
||||||
use iced::executor;
|
use iced::executor;
|
||||||
|
|
@ -195,8 +194,7 @@ fn view_controls<'a>(
|
||||||
.push(
|
.push(
|
||||||
pick_list(preset::ALL, Some(preset), Message::PresetPicked)
|
pick_list(preset::ALL, Some(preset), Message::PresetPicked)
|
||||||
.padding(8)
|
.padding(8)
|
||||||
.text_size(16)
|
.text_size(16),
|
||||||
.style(style::PickList),
|
|
||||||
)
|
)
|
||||||
.push(
|
.push(
|
||||||
button("Clear")
|
button("Clear")
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
//! Build and show dropdown menus.
|
//! Build and show dropdown menus.
|
||||||
|
|
||||||
pub use iced_style::menu::Style;
|
pub use iced_style::menu::{Appearance, StyleSheet};
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,15 @@ use crate::{
|
||||||
Shell, Size, Vector, Widget,
|
Shell, Size, Vector, Widget,
|
||||||
};
|
};
|
||||||
|
|
||||||
pub use iced_style::menu::Style;
|
pub use iced_style::menu::{Appearance, StyleSheet};
|
||||||
|
|
||||||
/// A list of selectable options.
|
/// A list of selectable options.
|
||||||
#[allow(missing_debug_implementations)]
|
#[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,
|
state: &'a mut State,
|
||||||
options: &'a [T],
|
options: &'a [T],
|
||||||
hovered_option: &'a mut Option<usize>,
|
hovered_option: &'a mut Option<usize>,
|
||||||
|
|
@ -27,14 +31,15 @@ pub struct Menu<'a, T, Renderer: text::Renderer> {
|
||||||
padding: Padding,
|
padding: Padding,
|
||||||
text_size: Option<u16>,
|
text_size: Option<u16>,
|
||||||
font: Renderer::Font,
|
font: Renderer::Font,
|
||||||
style: Style,
|
style: <Renderer::Theme as StyleSheet>::Style,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<'a, T, Renderer> Menu<'a, T, Renderer>
|
impl<'a, T, Renderer> Menu<'a, T, Renderer>
|
||||||
where
|
where
|
||||||
T: ToString + Clone,
|
T: ToString + Clone,
|
||||||
Renderer: text::Renderer + 'a,
|
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
|
/// Creates a new [`Menu`] with the given [`State`], a list of options, and
|
||||||
/// the message to produced when an option is selected.
|
/// the message to produced when an option is selected.
|
||||||
|
|
@ -82,7 +87,10 @@ where
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Sets the style of the [`Menu`].
|
/// 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.style = style.into();
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
@ -121,12 +129,12 @@ impl State {
|
||||||
struct Overlay<'a, Message, Renderer>
|
struct Overlay<'a, Message, Renderer>
|
||||||
where
|
where
|
||||||
Renderer: crate::Renderer,
|
Renderer: crate::Renderer,
|
||||||
Renderer::Theme: container::StyleSheet,
|
Renderer::Theme: StyleSheet + container::StyleSheet,
|
||||||
{
|
{
|
||||||
container: Container<'a, Message, Renderer>,
|
container: Container<'a, Message, Renderer>,
|
||||||
width: u16,
|
width: u16,
|
||||||
target_height: f32,
|
target_height: f32,
|
||||||
style: Style,
|
style: <Renderer::Theme as StyleSheet>::Style,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<'a, Message, Renderer> Overlay<'a, Message, Renderer>
|
impl<'a, Message, Renderer> Overlay<'a, Message, Renderer>
|
||||||
|
|
@ -134,7 +142,8 @@ where
|
||||||
Message: 'a,
|
Message: 'a,
|
||||||
Renderer: 'a,
|
Renderer: 'a,
|
||||||
Renderer: text::Renderer,
|
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
|
pub fn new<T>(menu: Menu<'a, T, Renderer>, target_height: f32) -> Self
|
||||||
where
|
where
|
||||||
|
|
@ -160,9 +169,8 @@ where
|
||||||
font,
|
font,
|
||||||
text_size,
|
text_size,
|
||||||
padding,
|
padding,
|
||||||
style: style.clone(),
|
style,
|
||||||
}))
|
}));
|
||||||
.padding(1);
|
|
||||||
|
|
||||||
Self {
|
Self {
|
||||||
container,
|
container,
|
||||||
|
|
@ -177,7 +185,7 @@ impl<'a, Message, Renderer> crate::Overlay<Message, Renderer>
|
||||||
for Overlay<'a, Message, Renderer>
|
for Overlay<'a, Message, Renderer>
|
||||||
where
|
where
|
||||||
Renderer: text::Renderer,
|
Renderer: text::Renderer,
|
||||||
Renderer::Theme: container::StyleSheet,
|
Renderer::Theme: StyleSheet + container::StyleSheet,
|
||||||
{
|
{
|
||||||
fn layout(
|
fn layout(
|
||||||
&self,
|
&self,
|
||||||
|
|
@ -254,16 +262,20 @@ where
|
||||||
layout: Layout<'_>,
|
layout: Layout<'_>,
|
||||||
cursor_position: Point,
|
cursor_position: Point,
|
||||||
) {
|
) {
|
||||||
|
let appearance = theme.appearance(self.style);
|
||||||
let bounds = layout.bounds();
|
let bounds = layout.bounds();
|
||||||
|
|
||||||
renderer.fill_quad(
|
renderer.fill_quad(
|
||||||
renderer::Quad {
|
renderer::Quad {
|
||||||
bounds,
|
bounds: Rectangle {
|
||||||
border_color: self.style.border_color,
|
width: bounds.width - 1.0,
|
||||||
border_width: self.style.border_width,
|
..bounds
|
||||||
|
},
|
||||||
|
border_color: appearance.border_color,
|
||||||
|
border_width: appearance.border_width,
|
||||||
border_radius: 0.0,
|
border_radius: 0.0,
|
||||||
},
|
},
|
||||||
self.style.background,
|
appearance.background,
|
||||||
);
|
);
|
||||||
|
|
||||||
self.container.draw(
|
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],
|
options: &'a [T],
|
||||||
hovered_option: &'a mut Option<usize>,
|
hovered_option: &'a mut Option<usize>,
|
||||||
last_selection: &'a mut Option<T>,
|
last_selection: &'a mut Option<T>,
|
||||||
padding: Padding,
|
padding: Padding,
|
||||||
text_size: Option<u16>,
|
text_size: Option<u16>,
|
||||||
font: Renderer::Font,
|
font: Renderer::Font,
|
||||||
style: Style,
|
style: <Renderer::Theme as StyleSheet>::Style,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<'a, T, Message, Renderer> Widget<Message, Renderer>
|
impl<'a, T, Message, Renderer> Widget<Message, Renderer>
|
||||||
|
|
@ -292,6 +308,7 @@ impl<'a, T, Message, Renderer> Widget<Message, Renderer>
|
||||||
where
|
where
|
||||||
T: Clone + ToString,
|
T: Clone + ToString,
|
||||||
Renderer: text::Renderer,
|
Renderer: text::Renderer,
|
||||||
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
fn width(&self) -> Length {
|
fn width(&self) -> Length {
|
||||||
Length::Fill
|
Length::Fill
|
||||||
|
|
@ -404,12 +421,13 @@ where
|
||||||
fn draw(
|
fn draw(
|
||||||
&self,
|
&self,
|
||||||
renderer: &mut Renderer,
|
renderer: &mut Renderer,
|
||||||
_theme: &Renderer::Theme,
|
theme: &Renderer::Theme,
|
||||||
_style: &renderer::Style,
|
_style: &renderer::Style,
|
||||||
layout: Layout<'_>,
|
layout: Layout<'_>,
|
||||||
_cursor_position: Point,
|
_cursor_position: Point,
|
||||||
viewport: &Rectangle,
|
viewport: &Rectangle,
|
||||||
) {
|
) {
|
||||||
|
let appearance = theme.appearance(self.style);
|
||||||
let bounds = layout.bounds();
|
let bounds = layout.bounds();
|
||||||
|
|
||||||
let text_size = self.text_size.unwrap_or(renderer.default_size());
|
let text_size = self.text_size.unwrap_or(renderer.default_size());
|
||||||
|
|
@ -441,7 +459,7 @@ where
|
||||||
border_width: 0.0,
|
border_width: 0.0,
|
||||||
border_radius: 0.0,
|
border_radius: 0.0,
|
||||||
},
|
},
|
||||||
self.style.selected_background,
|
appearance.selected_background,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -456,9 +474,9 @@ where
|
||||||
size: f32::from(text_size),
|
size: f32::from(text_size),
|
||||||
font: self.font.clone(),
|
font: self.font.clone(),
|
||||||
color: if is_selected {
|
color: if is_selected {
|
||||||
self.style.selected_text_color
|
appearance.selected_text_color
|
||||||
} else {
|
} else {
|
||||||
self.style.text_color
|
appearance.text_color
|
||||||
},
|
},
|
||||||
horizontal_alignment: alignment::Horizontal::Left,
|
horizontal_alignment: alignment::Horizontal::Left,
|
||||||
vertical_alignment: alignment::Vertical::Center,
|
vertical_alignment: alignment::Vertical::Center,
|
||||||
|
|
@ -473,6 +491,7 @@ where
|
||||||
T: ToString + Clone,
|
T: ToString + Clone,
|
||||||
Message: 'a,
|
Message: 'a,
|
||||||
Renderer: 'a + text::Renderer,
|
Renderer: 'a + text::Renderer,
|
||||||
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
fn into(self) -> Element<'a, Message, Renderer> {
|
fn into(self) -> Element<'a, Message, Renderer> {
|
||||||
Element::new(self)
|
Element::new(self)
|
||||||
|
|
|
||||||
|
|
@ -17,13 +17,15 @@ use crate::{
|
||||||
};
|
};
|
||||||
use std::borrow::Cow;
|
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.
|
/// A widget for selecting a single value from a list of options.
|
||||||
#[allow(missing_debug_implementations)]
|
#[allow(missing_debug_implementations)]
|
||||||
pub struct PickList<'a, T, Message, Renderer: text::Renderer>
|
pub struct PickList<'a, T, Message, Renderer>
|
||||||
where
|
where
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
|
Renderer: text::Renderer,
|
||||||
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
state: &'a mut State<T>,
|
state: &'a mut State<T>,
|
||||||
on_selected: Box<dyn Fn(T) -> Message>,
|
on_selected: Box<dyn Fn(T) -> Message>,
|
||||||
|
|
@ -34,7 +36,7 @@ where
|
||||||
padding: Padding,
|
padding: Padding,
|
||||||
text_size: Option<u16>,
|
text_size: Option<u16>,
|
||||||
font: Renderer::Font,
|
font: Renderer::Font,
|
||||||
style_sheet: Box<dyn StyleSheet + 'a>,
|
style: <Renderer::Theme as StyleSheet>::Style,
|
||||||
}
|
}
|
||||||
|
|
||||||
/// The local state of a [`PickList`].
|
/// The local state of a [`PickList`].
|
||||||
|
|
@ -66,11 +68,12 @@ impl<T> Default for State<T> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<'a, T: 'a, Message, Renderer: text::Renderer>
|
impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
|
||||||
PickList<'a, T, Message, Renderer>
|
|
||||||
where
|
where
|
||||||
T: ToString + Eq,
|
T: ToString + Eq,
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
|
Renderer: text::Renderer,
|
||||||
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
/// The default padding of a [`PickList`].
|
/// The default padding of a [`PickList`].
|
||||||
pub const DEFAULT_PADDING: Padding = Padding::new(5);
|
pub const DEFAULT_PADDING: Padding = Padding::new(5);
|
||||||
|
|
@ -94,7 +97,7 @@ where
|
||||||
text_size: None,
|
text_size: None,
|
||||||
padding: Self::DEFAULT_PADDING,
|
padding: Self::DEFAULT_PADDING,
|
||||||
font: Default::default(),
|
font: Default::default(),
|
||||||
style_sheet: Default::default(),
|
style: Default::default(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -131,9 +134,9 @@ where
|
||||||
/// Sets the style of the [`PickList`].
|
/// Sets the style of the [`PickList`].
|
||||||
pub fn style(
|
pub fn style(
|
||||||
mut self,
|
mut self,
|
||||||
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
|
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
|
||||||
) -> Self {
|
) -> Self {
|
||||||
self.style_sheet = style_sheet.into();
|
self.style = style.into();
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -319,13 +322,13 @@ pub fn overlay<'a, T, Message, Renderer>(
|
||||||
text_size: Option<u16>,
|
text_size: Option<u16>,
|
||||||
font: Renderer::Font,
|
font: Renderer::Font,
|
||||||
options: &'a [T],
|
options: &'a [T],
|
||||||
style_sheet: &dyn StyleSheet,
|
style: <Renderer::Theme as StyleSheet>::Style,
|
||||||
) -> Option<overlay::Element<'a, Message, Renderer>>
|
) -> Option<overlay::Element<'a, Message, Renderer>>
|
||||||
where
|
where
|
||||||
|
T: Clone + ToString,
|
||||||
Message: 'a,
|
Message: 'a,
|
||||||
Renderer: text::Renderer + 'a,
|
Renderer: text::Renderer + 'a,
|
||||||
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
|
Renderer::Theme: StyleSheet,
|
||||||
T: Clone + ToString,
|
|
||||||
{
|
{
|
||||||
if state.is_open {
|
if state.is_open {
|
||||||
let bounds = layout.bounds();
|
let bounds = layout.bounds();
|
||||||
|
|
@ -339,7 +342,7 @@ where
|
||||||
.width(bounds.width.round() as u16)
|
.width(bounds.width.round() as u16)
|
||||||
.padding(padding)
|
.padding(padding)
|
||||||
.font(font)
|
.font(font)
|
||||||
.style(style_sheet.menu());
|
.style(style);
|
||||||
|
|
||||||
if let Some(text_size) = text_size {
|
if let Some(text_size) = text_size {
|
||||||
menu = menu.text_size(text_size);
|
menu = menu.text_size(text_size);
|
||||||
|
|
@ -354,6 +357,7 @@ where
|
||||||
/// Draws a [`PickList`].
|
/// Draws a [`PickList`].
|
||||||
pub fn draw<T, Renderer>(
|
pub fn draw<T, Renderer>(
|
||||||
renderer: &mut Renderer,
|
renderer: &mut Renderer,
|
||||||
|
theme: &Renderer::Theme,
|
||||||
layout: Layout<'_>,
|
layout: Layout<'_>,
|
||||||
cursor_position: Point,
|
cursor_position: Point,
|
||||||
padding: Padding,
|
padding: Padding,
|
||||||
|
|
@ -361,9 +365,10 @@ pub fn draw<T, Renderer>(
|
||||||
font: &Renderer::Font,
|
font: &Renderer::Font,
|
||||||
placeholder: Option<&str>,
|
placeholder: Option<&str>,
|
||||||
selected: Option<&T>,
|
selected: Option<&T>,
|
||||||
style_sheet: &dyn StyleSheet,
|
style: <Renderer::Theme as StyleSheet>::Style,
|
||||||
) where
|
) where
|
||||||
Renderer: text::Renderer,
|
Renderer: text::Renderer,
|
||||||
|
Renderer::Theme: StyleSheet,
|
||||||
T: ToString,
|
T: ToString,
|
||||||
{
|
{
|
||||||
let bounds = layout.bounds();
|
let bounds = layout.bounds();
|
||||||
|
|
@ -371,9 +376,9 @@ pub fn draw<T, Renderer>(
|
||||||
let is_selected = selected.is_some();
|
let is_selected = selected.is_some();
|
||||||
|
|
||||||
let style = if is_mouse_over {
|
let style = if is_mouse_over {
|
||||||
style_sheet.hovered()
|
theme.hovered(style)
|
||||||
} else {
|
} else {
|
||||||
style_sheet.active()
|
theme.active(style)
|
||||||
};
|
};
|
||||||
|
|
||||||
renderer.fill_quad(
|
renderer.fill_quad(
|
||||||
|
|
@ -433,7 +438,7 @@ where
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
Message: 'static,
|
Message: 'static,
|
||||||
Renderer: text::Renderer + 'a,
|
Renderer: text::Renderer + 'a,
|
||||||
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
fn width(&self) -> Length {
|
fn width(&self) -> Length {
|
||||||
self.width
|
self.width
|
||||||
|
|
@ -494,7 +499,7 @@ where
|
||||||
fn draw(
|
fn draw(
|
||||||
&self,
|
&self,
|
||||||
renderer: &mut Renderer,
|
renderer: &mut Renderer,
|
||||||
_theme: &Renderer::Theme,
|
theme: &Renderer::Theme,
|
||||||
_style: &renderer::Style,
|
_style: &renderer::Style,
|
||||||
layout: Layout<'_>,
|
layout: Layout<'_>,
|
||||||
cursor_position: Point,
|
cursor_position: Point,
|
||||||
|
|
@ -502,6 +507,7 @@ where
|
||||||
) {
|
) {
|
||||||
draw(
|
draw(
|
||||||
renderer,
|
renderer,
|
||||||
|
theme,
|
||||||
layout,
|
layout,
|
||||||
cursor_position,
|
cursor_position,
|
||||||
self.padding,
|
self.padding,
|
||||||
|
|
@ -509,7 +515,7 @@ where
|
||||||
&self.font,
|
&self.font,
|
||||||
self.placeholder.as_ref().map(String::as_str),
|
self.placeholder.as_ref().map(String::as_str),
|
||||||
self.selected.as_ref(),
|
self.selected.as_ref(),
|
||||||
self.style_sheet.as_ref(),
|
self.style,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -525,7 +531,7 @@ where
|
||||||
self.text_size,
|
self.text_size,
|
||||||
self.font.clone(),
|
self.font.clone(),
|
||||||
&self.options,
|
&self.options,
|
||||||
self.style_sheet.as_ref(),
|
self.style,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -537,7 +543,12 @@ where
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
Message: 'static,
|
Message: 'static,
|
||||||
Renderer: text::Renderer + 'a,
|
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> {
|
fn into(self) -> Element<'a, Message, Renderer> {
|
||||||
Element::new(self)
|
Element::new(self)
|
||||||
|
|
|
||||||
|
|
@ -179,6 +179,7 @@ where
|
||||||
T: ToString + Eq + 'static,
|
T: ToString + Eq + 'static,
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
Renderer: iced_native::text::Renderer,
|
Renderer: iced_native::text::Renderer,
|
||||||
|
Renderer::Theme: widget::pick_list::StyleSheet,
|
||||||
{
|
{
|
||||||
widget::PickList::new(options, selected, on_selected)
|
widget::PickList::new(options, selected, on_selected)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
//! Display a dropdown list of selectable values.
|
//! Display a dropdown list of selectable values.
|
||||||
use crate::widget::container;
|
|
||||||
use crate::widget::scrollable;
|
|
||||||
use crate::widget::tree::{self, Tree};
|
use crate::widget::tree::{self, Tree};
|
||||||
use crate::{Element, Widget};
|
use crate::{Element, Widget};
|
||||||
|
|
||||||
|
|
@ -17,13 +15,15 @@ use iced_native::{
|
||||||
|
|
||||||
use std::borrow::Cow;
|
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.
|
/// A widget for selecting a single value from a list of options.
|
||||||
#[allow(missing_debug_implementations)]
|
#[allow(missing_debug_implementations)]
|
||||||
pub struct PickList<'a, T, Message, Renderer: text::Renderer>
|
pub struct PickList<'a, T, Message, Renderer>
|
||||||
where
|
where
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
|
Renderer: text::Renderer,
|
||||||
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
on_selected: Box<dyn Fn(T) -> Message + 'a>,
|
on_selected: Box<dyn Fn(T) -> Message + 'a>,
|
||||||
options: Cow<'a, [T]>,
|
options: Cow<'a, [T]>,
|
||||||
|
|
@ -33,14 +33,15 @@ where
|
||||||
padding: Padding,
|
padding: Padding,
|
||||||
text_size: Option<u16>,
|
text_size: Option<u16>,
|
||||||
font: Renderer::Font,
|
font: Renderer::Font,
|
||||||
style_sheet: Box<dyn StyleSheet + 'a>,
|
style: <Renderer::Theme as StyleSheet>::Style,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<'a, T: 'a, Message, Renderer: text::Renderer>
|
impl<'a, T: 'a, Message, Renderer> PickList<'a, T, Message, Renderer>
|
||||||
PickList<'a, T, Message, Renderer>
|
|
||||||
where
|
where
|
||||||
T: ToString + Eq,
|
T: ToString + Eq,
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
|
Renderer: text::Renderer,
|
||||||
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
/// The default padding of a [`PickList`].
|
/// The default padding of a [`PickList`].
|
||||||
pub const DEFAULT_PADDING: Padding = Padding::new(5);
|
pub const DEFAULT_PADDING: Padding = Padding::new(5);
|
||||||
|
|
@ -61,7 +62,7 @@ where
|
||||||
text_size: None,
|
text_size: None,
|
||||||
padding: Self::DEFAULT_PADDING,
|
padding: Self::DEFAULT_PADDING,
|
||||||
font: Default::default(),
|
font: Default::default(),
|
||||||
style_sheet: Default::default(),
|
style: Default::default(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -98,9 +99,9 @@ where
|
||||||
/// Sets the style of the [`PickList`].
|
/// Sets the style of the [`PickList`].
|
||||||
pub fn style(
|
pub fn style(
|
||||||
mut self,
|
mut self,
|
||||||
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
|
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
|
||||||
) -> Self {
|
) -> Self {
|
||||||
self.style_sheet = style_sheet.into();
|
self.style = style.into();
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -112,7 +113,7 @@ where
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
Message: 'a,
|
Message: 'a,
|
||||||
Renderer: text::Renderer + 'a,
|
Renderer: text::Renderer + 'a,
|
||||||
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
fn tag(&self) -> tree::Tag {
|
fn tag(&self) -> tree::Tag {
|
||||||
tree::Tag::of::<pick_list::State<T>>()
|
tree::Tag::of::<pick_list::State<T>>()
|
||||||
|
|
@ -184,7 +185,7 @@ where
|
||||||
&self,
|
&self,
|
||||||
_tree: &Tree,
|
_tree: &Tree,
|
||||||
renderer: &mut Renderer,
|
renderer: &mut Renderer,
|
||||||
_theme: &Renderer::Theme,
|
theme: &Renderer::Theme,
|
||||||
_style: &renderer::Style,
|
_style: &renderer::Style,
|
||||||
layout: Layout<'_>,
|
layout: Layout<'_>,
|
||||||
cursor_position: Point,
|
cursor_position: Point,
|
||||||
|
|
@ -192,6 +193,7 @@ where
|
||||||
) {
|
) {
|
||||||
pick_list::draw(
|
pick_list::draw(
|
||||||
renderer,
|
renderer,
|
||||||
|
theme,
|
||||||
layout,
|
layout,
|
||||||
cursor_position,
|
cursor_position,
|
||||||
self.padding,
|
self.padding,
|
||||||
|
|
@ -199,7 +201,7 @@ where
|
||||||
&self.font,
|
&self.font,
|
||||||
self.placeholder.as_ref().map(String::as_str),
|
self.placeholder.as_ref().map(String::as_str),
|
||||||
self.selected.as_ref(),
|
self.selected.as_ref(),
|
||||||
self.style_sheet.as_ref(),
|
self.style,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -218,7 +220,7 @@ where
|
||||||
self.text_size,
|
self.text_size,
|
||||||
self.font.clone(),
|
self.font.clone(),
|
||||||
&self.options,
|
&self.options,
|
||||||
self.style_sheet.as_ref(),
|
self.style,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -230,7 +232,7 @@ where
|
||||||
[T]: ToOwned<Owned = Vec<T>>,
|
[T]: ToOwned<Owned = Vec<T>>,
|
||||||
Message: 'a,
|
Message: 'a,
|
||||||
Renderer: text::Renderer + 'a,
|
Renderer: text::Renderer + 'a,
|
||||||
Renderer::Theme: container::StyleSheet + scrollable::StyleSheet,
|
Renderer::Theme: StyleSheet,
|
||||||
{
|
{
|
||||||
fn into(self) -> Element<'a, Message, Renderer> {
|
fn into(self) -> Element<'a, Message, Renderer> {
|
||||||
Element::new(self)
|
Element::new(self)
|
||||||
|
|
|
||||||
|
|
@ -80,8 +80,7 @@ pub mod pane_grid {
|
||||||
|
|
||||||
pub mod pick_list {
|
pub mod pick_list {
|
||||||
//! Display a dropdown list of selectable values.
|
//! Display a dropdown list of selectable values.
|
||||||
pub use iced_pure::overlay::menu::Style as Menu;
|
pub use iced_pure::widget::pick_list::{Appearance, StyleSheet};
|
||||||
pub use iced_pure::widget::pick_list::{Style, StyleSheet};
|
|
||||||
|
|
||||||
/// A widget allowing the selection of a single value from a list of options.
|
/// A widget allowing the selection of a single value from a list of options.
|
||||||
pub type PickList<'a, T, Message, Theme> =
|
pub type PickList<'a, T, Message, Theme> =
|
||||||
|
|
|
||||||
|
|
@ -96,8 +96,7 @@ pub mod pane_grid {
|
||||||
|
|
||||||
pub mod pick_list {
|
pub mod pick_list {
|
||||||
//! Display a dropdown list of selectable values.
|
//! Display a dropdown list of selectable values.
|
||||||
pub use iced_native::overlay::menu::Style as Menu;
|
pub use iced_native::widget::pick_list::{Appearance, State, StyleSheet};
|
||||||
pub use iced_native::widget::pick_list::{State, Style, StyleSheet};
|
|
||||||
|
|
||||||
/// A widget allowing the selection of a single value from a list of options.
|
/// A widget allowing the selection of a single value from a list of options.
|
||||||
pub type PickList<'a, T, Message, Theme> =
|
pub type PickList<'a, T, Message, Theme> =
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ use iced_core::{Background, Color};
|
||||||
|
|
||||||
/// The appearance of a menu.
|
/// The appearance of a menu.
|
||||||
#[derive(Debug, Clone, Copy)]
|
#[derive(Debug, Clone, Copy)]
|
||||||
pub struct Style {
|
pub struct Appearance {
|
||||||
pub text_color: Color,
|
pub text_color: Color,
|
||||||
pub background: Background,
|
pub background: Background,
|
||||||
pub border_width: f32,
|
pub border_width: f32,
|
||||||
|
|
@ -11,15 +11,8 @@ pub struct Style {
|
||||||
pub selected_background: Background,
|
pub selected_background: Background,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl std::default::Default for Style {
|
pub trait StyleSheet {
|
||||||
fn default() -> Self {
|
type Style: Default + Copy;
|
||||||
Self {
|
|
||||||
text_color: Color::BLACK,
|
fn appearance(&self, style: Self::Style) -> Appearance;
|
||||||
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()),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
use crate::menu;
|
|
||||||
use iced_core::{Background, Color};
|
use iced_core::{Background, Color};
|
||||||
|
|
||||||
|
use crate::container;
|
||||||
|
use crate::menu;
|
||||||
|
use crate::scrollable;
|
||||||
|
|
||||||
/// The appearance of a pick list.
|
/// The appearance of a pick list.
|
||||||
#[derive(Debug, Clone, Copy)]
|
#[derive(Debug, Clone, Copy)]
|
||||||
pub struct Style {
|
pub struct Appearance {
|
||||||
pub text_color: Color,
|
pub text_color: Color,
|
||||||
pub placeholder_color: Color,
|
pub placeholder_color: Color,
|
||||||
pub background: Background,
|
pub background: Background,
|
||||||
|
|
@ -13,60 +16,14 @@ pub struct Style {
|
||||||
pub icon_size: f32,
|
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.
|
/// A set of rules that dictate the style of a container.
|
||||||
pub trait StyleSheet {
|
pub trait StyleSheet:
|
||||||
fn menu(&self) -> menu::Style;
|
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.
|
/// Produces the style of a container.
|
||||||
fn hovered(&self) -> Style;
|
fn hovered(&self, style: <Self as StyleSheet>::Style) -> Appearance;
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@ use crate::application;
|
||||||
use crate::button;
|
use crate::button;
|
||||||
use crate::checkbox;
|
use crate::checkbox;
|
||||||
use crate::container;
|
use crate::container;
|
||||||
|
use crate::menu;
|
||||||
use crate::pane_grid;
|
use crate::pane_grid;
|
||||||
|
use crate::pick_list;
|
||||||
use crate::progress_bar;
|
use crate::progress_bar;
|
||||||
use crate::radio;
|
use crate::radio;
|
||||||
use crate::rule;
|
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
|
* Radio
|
||||||
*/
|
*/
|
||||||
|
|
@ -506,7 +563,6 @@ impl rule::StyleSheet for Theme {
|
||||||
/*
|
/*
|
||||||
* Scrollable
|
* Scrollable
|
||||||
*/
|
*/
|
||||||
|
|
||||||
impl scrollable::StyleSheet for Theme {
|
impl scrollable::StyleSheet for Theme {
|
||||||
type Style = ();
|
type Style = ();
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue