reivilibre/iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement styling for ProgressBar

Browse Source
This commit is contained in:
Héctor Ramón Jiménez 2020-01-07 01:53:26 +01:00
parent fce89d0ffe
commit 48b3b78a38
10 changed files with 151 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/progress_bar.rs
View File

@ -1,7 +1,4 @@
use iced::{
slider, Background, Color, Column, Element, Length, ProgressBar, Sandbox,
Settings, Slider,
};
use iced::{slider, Column, Element, ProgressBar, Sandbox, Settings, Slider};
pub fn main() {
Progress::run(Settings::default())
@ -38,14 +35,7 @@ impl Sandbox for Progress {
fn view(&mut self) -> Element<Message> {
Column::new()
.padding(20)
.push(
ProgressBar::new(0.0..=100.0, self.value)
.background(Background::Color(Color::from_rgb(
0.6, 0.6, 0.6,
)))
.active_color(Color::from_rgb(0.0, 0.95, 0.0))
.height(Length::Units(30)),
)
.push(ProgressBar::new(0.0..=100.0, self.value))
.push(Slider::new(
&mut self.progress_bar_slider,
0.0..=100.0,

40
examples/styling.rs
View File

@ -1,6 +1,7 @@
use iced::{
button, scrollable, slider, text_input, Button, Column, Container, Element,
Length, Radio, Row, Sandbox, Scrollable, Settings, Slider, Text, TextInput,
Length, ProgressBar, Radio, Row, Sandbox, Scrollable, Settings, Slider,
Text, TextInput,
};
pub fn main() {
@ -82,13 +83,17 @@ impl Sandbox for Styling {
)
.style(self.theme);
let progress_bar =
ProgressBar::new(0.0..=100.0, self.slider_value).style(self.theme);
let content = Column::new()
.spacing(20)
.padding(20)
.max_width(600)
.push(choose_theme)
.push(Row::new().spacing(10).push(text_input).push(button))
.push(slider);
.push(slider)
.push(progress_bar);
let scrollable = Scrollable::new(&mut self.scroll)
.style(self.theme)
@ -104,7 +109,9 @@ impl Sandbox for Styling {
}
mod style {
use iced::{button, container, scrollable, slider, text_input};
use iced::{
button, container, progress_bar, scrollable, slider, text_input,
};
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Theme {
@ -167,6 +174,15 @@ mod style {
}
}
impl From<Theme> for Box<dyn progress_bar::StyleSheet> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::ProgressBar.into(),
}
}
}
mod light {
use iced::{button, Background, Color, Vector};
@ -197,8 +213,8 @@ mod style {
mod dark {
use iced::{
button, container, scrollable, slider, text_input, Background,
Color,
button, container, progress_bar, scrollable, slider, text_input,
Background, Color,
};
const SURFACE: Color = Color::from_rgb(
@ -268,7 +284,7 @@ mod style {
}
fn placeholder_color(&self) -> Color {
Color::from_rgb(0.7, 0.7, 0.7)
Color::from_rgb(0.4, 0.4, 0.4)
}
fn value_color(&self) -> Color {
@ -372,5 +388,17 @@ mod style {
}
}
}
pub struct ProgressBar;
impl progress_bar::StyleSheet for ProgressBar {
fn style(&self) -> progress_bar::Style {
progress_bar::Style {
background: Background::Color(SURFACE),
bar: Background::Color(ACTIVE),
border_radius: 10,
}
}
}
}
}

23
native/src/renderer/null.rs
View File

@ -1,7 +1,7 @@
use crate::{
button, checkbox, column, radio, row, scrollable, slider, text, text_input,
Color, Element, Font, HorizontalAlignment, Layout, Point, Rectangle,
Renderer, Size, VerticalAlignment,
button, checkbox, column, progress_bar, radio, row, scrollable, slider,
text, text_input, Color, Element, Font, HorizontalAlignment, Layout, Point,
Rectangle, Renderer, Size, VerticalAlignment,
};
/// A renderer that does nothing.
@ -196,6 +196,21 @@ impl slider::Renderer for Null {
_value: f32,
_is_dragging: bool,
_style_sheet: &Self::Style,
) -> Self::Output {
) {
}
}
impl progress_bar::Renderer for Null {
type Style = ();
const DEFAULT_HEIGHT: u16 = 30;
fn draw(
&self,
_bounds: Rectangle,
_range: std::ops::RangeInclusive<f32>,
_value: f32,
_style: &Self::Style,
) {
}
}

49
native/src/widget/progress_bar.rs
View File

@ -1,7 +1,6 @@
//! Provide progress feedback to your users.
use crate::{
layout, Background, Color, Element, Hasher, Layout, Length, Point,
Rectangle, Size, Widget,
layout, Element, Hasher, Layout, Length, Point, Rectangle, Size, Widget,
};
use std::{hash::Hash, ops::RangeInclusive};
@ -10,8 +9,9 @@ use std::{hash::Hash, ops::RangeInclusive};
///
/// # Example
/// ```
/// # use iced_native::ProgressBar;
/// # use iced_native::renderer::Null;
/// #
/// # pub type ProgressBar = iced_native::ProgressBar<Null>;
/// let value = 50.0;
///
/// ProgressBar::new(0.0..=100.0, value);
@ -19,16 +19,15 @@ use std::{hash::Hash, ops::RangeInclusive};
///
/// ![Progress bar drawn with `iced_wgpu`](https://user-images.githubusercontent.com/18618951/71662391-a316c200-2d51-11ea-9cef-52758cab85e3.png)
#[allow(missing_debug_implementations)]
pub struct ProgressBar {
pub struct ProgressBar<Renderer: self::Renderer> {
range: RangeInclusive<f32>,
value: f32,
width: Length,
height: Option<Length>,
background: Option<Background>,
active_color: Option<Color>,
style: Renderer::Style,
}
impl ProgressBar {
impl<Renderer: self::Renderer> ProgressBar<Renderer> {
/// Creates a new [`ProgressBar`].
///
/// It expects:
@ -42,8 +41,7 @@ impl ProgressBar {
range,
width: Length::Fill,
height: None,
background: None,
active_color: None,
style: Renderer::Style::default(),
}
}
@ -63,24 +61,16 @@ impl ProgressBar {
self
}
/// Sets the background of the [`ProgressBar`].
/// Sets the style of the [`ProgressBar`].
///
/// [`ProgressBar`]: struct.ProgressBar.html
pub fn background(mut self, background: Background) -> Self {
self.background = Some(background);
self
}
/// Sets the active color of the [`ProgressBar`].
///
/// [`ProgressBar`]: struct.ProgressBar.html
pub fn active_color(mut self, active_color: Color) -> Self {
self.active_color = Some(active_color);
pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
self.style = style.into();
self
}
}
impl<Message, Renderer> Widget<Message, Renderer> for ProgressBar
impl<Message, Renderer> Widget<Message, Renderer> for ProgressBar<Renderer>
where
Renderer: self::Renderer,
{
@ -119,8 +109,7 @@ where
layout.bounds(),
self.range.clone(),
self.value,
self.background,
self.active_color,
&self.style,
)
}
@ -138,6 +127,8 @@ where
/// [`ProgressBar`]: struct.ProgressBar.html
/// [renderer]: ../../renderer/index.html
pub trait Renderer: crate::Renderer {
type Style: Default;
/// The default height of a [`ProgressBar`].
///
/// [`ProgressBar`]: struct.ProgressBar.html
@ -158,17 +149,19 @@ pub trait Renderer: crate::Renderer {
bounds: Rectangle,
range: RangeInclusive<f32>,
value: f32,
background: Option<Background>,
active_color: Option<Color>,
style: &Self::Style,
) -> Self::Output;
}
impl<'a, Message, Renderer> From<ProgressBar> for Element<'a, Message, Renderer>
impl<'a, Message, Renderer> From<ProgressBar<Renderer>>
for Element<'a, Message, Renderer>
where
Renderer: self::Renderer,
Renderer: 'static + self::Renderer,
Message: 'static,
{
fn from(progress_bar: ProgressBar) -> Element<'a, Message, Renderer> {
fn from(
progress_bar: ProgressBar<Renderer>,
) -> Element<'a, Message, Renderer> {
Element::new(progress_bar)
}
}

6
src/native.rs
View File

@ -34,13 +34,13 @@ pub mod widget {
pub use iced_winit::svg::{Handle, Svg};
}
pub use iced_winit::{Checkbox, ProgressBar, Radio, Text};
pub use iced_winit::{Checkbox, Radio, Text};
#[doc(no_inline)]
pub use {
button::Button, container::Container, image::Image,
scrollable::Scrollable, slider::Slider, svg::Svg,
text_input::TextInput,
progress_bar::ProgressBar, scrollable::Scrollable, slider::Slider,
svg::Svg, text_input::TextInput,
};
/// A container that distributes its contents vertically.

1
style/src/lib.rs
View File

@ -1,5 +1,6 @@
pub mod button;
pub mod container;
pub mod progress_bar;
pub mod scrollable;
pub mod slider;
pub mod text_input;

42
style/src/progress_bar.rs Normal file
View File

@ -0,0 +1,42 @@
//! Provide progress feedback to your users.
use iced_core::{Background, Color};
/// The appearance of a progress bar.
#[derive(Debug)]
pub struct Style {
pub background: Background,
pub bar: Background,
pub border_radius: u16,
}
/// A set of rules that dictate the style of a progress bar.
pub trait StyleSheet {
fn style(&self) -> Style;
}
struct Default;
impl StyleSheet for Default {
fn style(&self) -> Style {
Style {
background: Background::Color(Color::from_rgb(0.6, 0.6, 0.6)),
bar: Background::Color(Color::from_rgb(0.3, 0.9, 0.3)),
border_radius: 5,
}
}
}
impl std::default::Default for Box<dyn StyleSheet> {
fn default() -> Self {
Box::new(Default)
}
}
impl<T> From<T> for Box<dyn StyleSheet>
where
T: 'static + StyleSheet,
{
fn from(style: T) -> Self {
Box::new(style)
}
}

27
wgpu/src/renderer/widget/progress_bar.rs
View File

@ -1,7 +1,9 @@
use crate::{Primitive, Renderer};
use iced_native::{progress_bar, Background, Color, MouseCursor, Rectangle};
use crate::{progress_bar::StyleSheet, Primitive, Renderer};
use iced_native::{progress_bar, Color, MouseCursor, Rectangle};
impl progress_bar::Renderer for Renderer {
type Style = Box<dyn StyleSheet>;
const DEFAULT_HEIGHT: u16 = 30;
fn draw(
@ -9,9 +11,10 @@ impl progress_bar::Renderer for Renderer {
bounds: Rectangle,
range: std::ops::RangeInclusive<f32>,
value: f32,
background: Option<Background>,
active_color: Option<Color>,
style_sheet: &Self::Style,
) -> Self::Output {
let style = style_sheet.style();
let (range_start, range_end) = range.into_inner();
let active_progress_width = bounds.width
* ((value - range_start) / (range_end - range_start).max(1.0));
@ -19,31 +22,27 @@ impl progress_bar::Renderer for Renderer {
let background = Primitive::Group {
primitives: vec![Primitive::Quad {
bounds: Rectangle { ..bounds },
background: background
.unwrap_or(Background::Color([0.6, 0.6, 0.6].into()))
.into(),
border_radius: 5,
background: style.background,
border_radius: style.border_radius,
border_width: 0,
border_color: Color::TRANSPARENT,
}],
};
let active_progress = Primitive::Quad {
let bar = Primitive::Quad {
bounds: Rectangle {
width: active_progress_width,
..bounds
},
background: Background::Color(
active_color.unwrap_or([0.0, 0.95, 0.0].into()),
),
border_radius: 5,
background: style.bar,
border_radius: style.border_radius,
border_width: 0,
border_color: Color::TRANSPARENT,
};
(
Primitive::Group {
primitives: vec![background, active_progress],
primitives: vec![background, bar],
},
MouseCursor::OutOfBounds,
)

1
wgpu/src/widget.rs
View File

@ -1,5 +1,6 @@
pub mod button;
pub mod container;
pub mod progress_bar;
pub mod scrollable;
pub mod slider;
pub mod text_input;

15
wgpu/src/widget/progress_bar.rs Normal file
View File

@ -0,0 +1,15 @@
//! Allow your users to perform actions by pressing a button.
//!
//! A [`Button`] has some local [`State`].
//!
//! [`Button`]: type.Button.html
//! [`State`]: struct.State.html
use crate::Renderer;
pub use iced_style::progress_bar::{Style, StyleSheet};
/// A bar that displays progress.
///
/// This is an alias of an `iced_native` progress bar with an
/// `iced_wgpu::Renderer`.
pub type ProgressBar = iced_native::ProgressBar<Renderer>;