From 6151c528241d0a6ece88e6e664df1b50f8174ecb Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 10 Mar 2020 02:57:13 +0100 Subject: Rename `Panes` widget to `PaneGrid` --- examples/pane_grid/src/main.rs | 179 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 examples/pane_grid/src/main.rs (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs new file mode 100644 index 00000000..b103afc8 --- /dev/null +++ b/examples/pane_grid/src/main.rs @@ -0,0 +1,179 @@ +use iced::{ + pane_grid, Application, Command, Element, PaneGrid, Settings, Subscription, +}; +use iced_native::input::keyboard; + +use clock::{self, Clock}; +use stopwatch::{self, Stopwatch}; + +pub fn main() { + Launcher::run(Settings { + antialiasing: true, + ..Settings::default() + }) +} + +#[derive(Debug)] +struct Launcher { + panes: pane_grid::State, +} + +#[derive(Debug)] +enum Example { + Clock(Clock), + Stopwatch(Stopwatch), +} + +#[derive(Debug, Clone)] +enum Message { + Clock(pane_grid::Pane, clock::Message), + Stopwatch(pane_grid::Pane, stopwatch::Message), + Split(pane_grid::Split), + Close, +} + +impl Application for Launcher { + type Executor = iced::executor::Default; + type Message = Message; + + fn new() -> (Self, Command) { + let (clock, _) = Clock::new(); + let (panes, _) = pane_grid::State::new(Example::Clock(clock)); + + (Self { panes }, Command::none()) + } + + fn title(&self) -> String { + String::from("Panes - Iced") + } + + fn update(&mut self, message: Message) -> Command { + match message { + Message::Clock(pane, message) => { + if let Some(Example::Clock(clock)) = self.panes.get_mut(&pane) { + let _ = clock.update(message); + } + } + Message::Stopwatch(pane, message) => { + if let Some(Example::Stopwatch(stopwatch)) = + self.panes.get_mut(&pane) + { + let _ = stopwatch.update(message); + } + } + Message::Split(kind) => { + if let Some(pane) = self.panes.focused_pane() { + let state = if pane.index() % 2 == 0 { + let (stopwatch, _) = Stopwatch::new(); + + Example::Stopwatch(stopwatch) + } else { + let (clock, _) = Clock::new(); + + Example::Clock(clock) + }; + + self.panes.split(kind, &pane, state); + } + } + Message::Close => { + if let Some(pane) = self.panes.focused_pane() { + self.panes.close(&pane); + } + } + } + + Command::none() + } + + fn subscription(&self) -> Subscription { + let panes_subscriptions = + Subscription::batch(self.panes.iter().map(|(pane, example)| { + match example { + Example::Clock(clock) => clock + .subscription() + .with(pane) + .map(|(pane, message)| Message::Clock(pane, message)), + + Example::Stopwatch(stopwatch) => { + stopwatch.subscription().with(pane).map( + |(pane, message)| Message::Stopwatch(pane, message), + ) + } + } + })); + + Subscription::batch(vec![ + events::key_released(keyboard::KeyCode::H) + .map(|_| Message::Split(pane_grid::Split::Horizontal)), + events::key_released(keyboard::KeyCode::V) + .map(|_| Message::Split(pane_grid::Split::Vertical)), + events::key_released(keyboard::KeyCode::Q).map(|_| Message::Close), + panes_subscriptions, + ]) + } + + fn view(&mut self) -> Element { + let Self { panes } = self; + + PaneGrid::new(panes, |pane, example| match example { + Example::Clock(clock) => clock + .view() + .map(move |message| Message::Clock(pane, message)), + + Example::Stopwatch(stopwatch) => stopwatch + .view() + .map(move |message| Message::Stopwatch(pane, message)), + }) + .into() + } +} + +mod events { + use iced_native::{ + futures::{ + self, + stream::{BoxStream, StreamExt}, + }, + input::{keyboard, ButtonState}, + subscription, Event, Hasher, Subscription, + }; + + pub fn key_released(key_code: keyboard::KeyCode) -> Subscription<()> { + Subscription::from_recipe(KeyReleased { key_code }) + } + + struct KeyReleased { + key_code: keyboard::KeyCode, + } + + impl subscription::Recipe for KeyReleased { + type Output = (); + + fn hash(&self, state: &mut Hasher) { + use std::hash::Hash; + + std::any::TypeId::of::().hash(state); + self.key_code.hash(state); + } + + fn stream( + self: Box, + events: subscription::EventStream, + ) -> BoxStream<'static, Self::Output> { + events + .filter(move |event| match event { + Event::Keyboard(keyboard::Event::Input { + key_code, + state: ButtonState::Released, + .. + }) if *key_code == self.key_code => { + futures::future::ready(true) + } + _ => futures::future::ready(false), + }) + .map(|_| ()) + .boxed() + } + } +} -- cgit From df6e3f8da921a98c9a1e75a1790885a07485ee45 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 11 Mar 2020 23:25:00 +0100 Subject: Expose `pane_grid::Focus` for state-based styling --- examples/pane_grid/src/main.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index b103afc8..eb8aaa51 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -116,7 +116,7 @@ impl Application for Launcher { fn view(&mut self) -> Element { let Self { panes } = self; - PaneGrid::new(panes, |pane, example| match example { + PaneGrid::new(panes, |pane, example, _| match example { Example::Clock(clock) => clock .view() .map(move |message| Message::Clock(pane, message)), -- cgit From 858c086eeee4284a5a7b3e49cb3c112d204e53c3 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 14 Mar 2020 03:39:20 +0100 Subject: Remove `pane_grid` example for now It's too contrived. I will work on something simpler. --- examples/pane_grid/src/main.rs | 179 ----------------------------------------- 1 file changed, 179 deletions(-) delete mode 100644 examples/pane_grid/src/main.rs (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs deleted file mode 100644 index eb8aaa51..00000000 --- a/examples/pane_grid/src/main.rs +++ /dev/null @@ -1,179 +0,0 @@ -use iced::{ - pane_grid, Application, Command, Element, PaneGrid, Settings, Subscription, -}; -use iced_native::input::keyboard; - -use clock::{self, Clock}; -use stopwatch::{self, Stopwatch}; - -pub fn main() { - Launcher::run(Settings { - antialiasing: true, - ..Settings::default() - }) -} - -#[derive(Debug)] -struct Launcher { - panes: pane_grid::State, -} - -#[derive(Debug)] -enum Example { - Clock(Clock), - Stopwatch(Stopwatch), -} - -#[derive(Debug, Clone)] -enum Message { - Clock(pane_grid::Pane, clock::Message), - Stopwatch(pane_grid::Pane, stopwatch::Message), - Split(pane_grid::Split), - Close, -} - -impl Application for Launcher { - type Executor = iced::executor::Default; - type Message = Message; - - fn new() -> (Self, Command) { - let (clock, _) = Clock::new(); - let (panes, _) = pane_grid::State::new(Example::Clock(clock)); - - (Self { panes }, Command::none()) - } - - fn title(&self) -> String { - String::from("Panes - Iced") - } - - fn update(&mut self, message: Message) -> Command { - match message { - Message::Clock(pane, message) => { - if let Some(Example::Clock(clock)) = self.panes.get_mut(&pane) { - let _ = clock.update(message); - } - } - Message::Stopwatch(pane, message) => { - if let Some(Example::Stopwatch(stopwatch)) = - self.panes.get_mut(&pane) - { - let _ = stopwatch.update(message); - } - } - Message::Split(kind) => { - if let Some(pane) = self.panes.focused_pane() { - let state = if pane.index() % 2 == 0 { - let (stopwatch, _) = Stopwatch::new(); - - Example::Stopwatch(stopwatch) - } else { - let (clock, _) = Clock::new(); - - Example::Clock(clock) - }; - - self.panes.split(kind, &pane, state); - } - } - Message::Close => { - if let Some(pane) = self.panes.focused_pane() { - self.panes.close(&pane); - } - } - } - - Command::none() - } - - fn subscription(&self) -> Subscription { - let panes_subscriptions = - Subscription::batch(self.panes.iter().map(|(pane, example)| { - match example { - Example::Clock(clock) => clock - .subscription() - .with(pane) - .map(|(pane, message)| Message::Clock(pane, message)), - - Example::Stopwatch(stopwatch) => { - stopwatch.subscription().with(pane).map( - |(pane, message)| Message::Stopwatch(pane, message), - ) - } - } - })); - - Subscription::batch(vec![ - events::key_released(keyboard::KeyCode::H) - .map(|_| Message::Split(pane_grid::Split::Horizontal)), - events::key_released(keyboard::KeyCode::V) - .map(|_| Message::Split(pane_grid::Split::Vertical)), - events::key_released(keyboard::KeyCode::Q).map(|_| Message::Close), - panes_subscriptions, - ]) - } - - fn view(&mut self) -> Element { - let Self { panes } = self; - - PaneGrid::new(panes, |pane, example, _| match example { - Example::Clock(clock) => clock - .view() - .map(move |message| Message::Clock(pane, message)), - - Example::Stopwatch(stopwatch) => stopwatch - .view() - .map(move |message| Message::Stopwatch(pane, message)), - }) - .into() - } -} - -mod events { - use iced_native::{ - futures::{ - self, - stream::{BoxStream, StreamExt}, - }, - input::{keyboard, ButtonState}, - subscription, Event, Hasher, Subscription, - }; - - pub fn key_released(key_code: keyboard::KeyCode) -> Subscription<()> { - Subscription::from_recipe(KeyReleased { key_code }) - } - - struct KeyReleased { - key_code: keyboard::KeyCode, - } - - impl subscription::Recipe for KeyReleased { - type Output = (); - - fn hash(&self, state: &mut Hasher) { - use std::hash::Hash; - - std::any::TypeId::of::().hash(state); - self.key_code.hash(state); - } - - fn stream( - self: Box, - events: subscription::EventStream, - ) -> BoxStream<'static, Self::Output> { - events - .filter(move |event| match event { - Event::Keyboard(keyboard::Event::Input { - key_code, - state: ButtonState::Released, - .. - }) if *key_code == self.key_code => { - futures::future::ready(true) - } - _ => futures::future::ready(false), - }) - .map(|_| ()) - .boxed() - } - } -} -- cgit From 56ba6215a25fe90a50be8feebeb74031967e92b0 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 17 Mar 2020 04:23:28 +0100 Subject: Add simple `pane_grid` example --- examples/pane_grid/src/main.rs | 202 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 examples/pane_grid/src/main.rs (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs new file mode 100644 index 00000000..09969630 --- /dev/null +++ b/examples/pane_grid/src/main.rs @@ -0,0 +1,202 @@ +use iced::{ + button, pane_grid, scrollable, Align, Button, Column, Container, Element, + HorizontalAlignment, Length, PaneGrid, Sandbox, Scrollable, Settings, Text, +}; + +pub fn main() { + Example::run(Settings::default()) +} + +struct Example { + panes: pane_grid::State, + panes_created: usize, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + Split(pane_grid::Axis, pane_grid::Pane), + SplitFocused(pane_grid::Axis), + Dragged(pane_grid::DragEvent), + Resized(pane_grid::ResizeEvent), + Close(pane_grid::Pane), +} + +impl Sandbox for Example { + type Message = Message; + + fn new() -> Self { + let (panes, _) = pane_grid::State::new(Content::new(0)); + + Example { + panes, + panes_created: 1, + } + } + + fn title(&self) -> String { + String::from("Pane grid - Iced") + } + + fn update(&mut self, message: Message) { + match message { + Message::Split(axis, pane) => { + let _ = self.panes.split( + axis, + &pane, + Content::new(self.panes_created), + ); + + self.panes_created += 1; + } + Message::SplitFocused(axis) => { + if let Some(pane) = self.panes.active() { + let _ = self.panes.split( + axis, + &pane, + Content::new(self.panes_created), + ); + + self.panes_created += 1; + } + } + Message::Resized(pane_grid::ResizeEvent { split, ratio }) => { + self.panes.resize(&split, ratio); + } + Message::Dragged(pane_grid::DragEvent::Dropped { + pane, + target, + }) => { + self.panes.swap(&pane, &target); + } + Message::Dragged(_) => {} + Message::Close(pane) => { + let _ = self.panes.close(&pane); + } + } + } + + fn view(&mut self) -> Element { + let total_panes = self.panes.len(); + + let pane_grid = + PaneGrid::new(&mut self.panes, |pane, content, focus| { + content.view(pane, focus, total_panes) + }) + .width(Length::Fill) + .height(Length::Fill) + .spacing(5) + .on_drag(Message::Dragged) + .on_resize(Message::Resized); + + Column::new() + .width(Length::Fill) + .height(Length::Fill) + .padding(10) + .push(pane_grid) + .into() + } +} + +struct Content { + id: usize, + scroll: scrollable::State, + split_horizontally: button::State, + split_vertically: button::State, + close: button::State, +} + +impl Content { + fn new(id: usize) -> Self { + Content { + id, + scroll: scrollable::State::new(), + split_horizontally: button::State::new(), + split_vertically: button::State::new(), + close: button::State::new(), + } + } + fn view( + &mut self, + pane: pane_grid::Pane, + focus: Option, + total_panes: usize, + ) -> Element { + let Content { + id, + scroll, + split_horizontally, + split_vertically, + close, + } = self; + + let button = |state, label, message| { + Button::new( + state, + Text::new(label) + .width(Length::Fill) + .horizontal_alignment(HorizontalAlignment::Center) + .size(16), + ) + .width(Length::Fill) + .on_press(message) + }; + + let mut controls = Column::new() + .spacing(5) + .max_width(150) + .push(button( + split_horizontally, + "Split horizontally", + Message::Split(pane_grid::Axis::Horizontal, pane), + )) + .push(button( + split_vertically, + "Split vertically", + Message::Split(pane_grid::Axis::Vertical, pane), + )); + + if total_panes > 1 { + controls = + controls.push(button(close, "Close", Message::Close(pane))); + } + + let content = Scrollable::new(scroll) + .width(Length::Fill) + .spacing(10) + .align_items(Align::Center) + .push(Text::new(format!("Pane {}", id)).size(30)) + .push(controls); + + Container::new(Column::new().padding(10).push(content)) + .width(Length::Fill) + .height(Length::Fill) + .center_y() + .style(style::Pane { + is_focused: focus.is_some(), + }) + .into() + } +} + +mod style { + use iced::{container, Background, Color}; + + pub struct Pane { + pub is_focused: bool, + } + + impl container::StyleSheet for Pane { + fn style(&self) -> container::Style { + container::Style { + background: Some(Background::Color(Color::WHITE)), + border_width: 1, + border_color: if self.is_focused { + Color::from_rgb8(0x25, 0x7A, 0xFD) + } else { + Color::BLACK + }, + ..Default::default() + } + } + } +} -- cgit From 6f9cf6c70d8ef01446dae4d093c6e8ff2c7e7708 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 17 Mar 2020 06:54:25 +0100 Subject: Implement hotkey logic in `pane_grid` example --- examples/pane_grid/src/main.rs | 42 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index 09969630..7ab68393 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -2,6 +2,7 @@ use iced::{ button, pane_grid, scrollable, Align, Button, Column, Container, Element, HorizontalAlignment, Length, PaneGrid, Sandbox, Scrollable, Settings, Text, }; +use iced_native::input::keyboard; pub fn main() { Example::run(Settings::default()) @@ -16,9 +17,11 @@ struct Example { enum Message { Split(pane_grid::Axis, pane_grid::Pane), SplitFocused(pane_grid::Axis), + FocusAdjacent(pane_grid::Direction), Dragged(pane_grid::DragEvent), Resized(pane_grid::ResizeEvent), Close(pane_grid::Pane), + CloseFocused, } impl Sandbox for Example { @@ -59,6 +62,15 @@ impl Sandbox for Example { self.panes_created += 1; } } + Message::FocusAdjacent(direction) => { + if let Some(pane) = self.panes.active() { + if let Some(adjacent) = + self.panes.adjacent(&pane, direction) + { + self.panes.focus(&adjacent); + } + } + } Message::Resized(pane_grid::ResizeEvent { split, ratio }) => { self.panes.resize(&split, ratio); } @@ -72,6 +84,11 @@ impl Sandbox for Example { Message::Close(pane) => { let _ = self.panes.close(&pane); } + Message::CloseFocused => { + if let Some(pane) = self.panes.active() { + let _ = self.panes.close(&pane); + } + } } } @@ -86,7 +103,8 @@ impl Sandbox for Example { .height(Length::Fill) .spacing(5) .on_drag(Message::Dragged) - .on_resize(Message::Resized); + .on_resize(Message::Resized) + .on_key_press(handle_hotkey); Column::new() .width(Length::Fill) @@ -97,6 +115,26 @@ impl Sandbox for Example { } } +fn handle_hotkey(key_code: keyboard::KeyCode) -> Option { + use keyboard::KeyCode; + use pane_grid::{Axis, Direction}; + + let direction = match key_code { + KeyCode::Up => Some(Direction::Up), + KeyCode::Down => Some(Direction::Down), + KeyCode::Left => Some(Direction::Left), + KeyCode::Right => Some(Direction::Right), + _ => None, + }; + + match key_code { + KeyCode::V => Some(Message::SplitFocused(Axis::Vertical)), + KeyCode::H => Some(Message::SplitFocused(Axis::Horizontal)), + KeyCode::W => Some(Message::CloseFocused), + _ => direction.map(Message::FocusAdjacent), + } +} + struct Content { id: usize, scroll: scrollable::State, @@ -189,7 +227,7 @@ mod style { fn style(&self) -> container::Style { container::Style { background: Some(Background::Color(Color::WHITE)), - border_width: 1, + border_width: if self.is_focused { 2 } else { 1 }, border_color: if self.is_focused { Color::from_rgb8(0x25, 0x7A, 0xFD) } else { -- cgit From 1cd1582506810255394d2f9019597e9252bd8daa Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 17 Mar 2020 07:16:54 +0100 Subject: Add `modifiers` to `KeyPressEvent` in `pane_grid` --- examples/pane_grid/src/main.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index 7ab68393..461ffc30 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -115,11 +115,11 @@ impl Sandbox for Example { } } -fn handle_hotkey(key_code: keyboard::KeyCode) -> Option { +fn handle_hotkey(event: pane_grid::KeyPressEvent) -> Option { use keyboard::KeyCode; use pane_grid::{Axis, Direction}; - let direction = match key_code { + let direction = match event.key_code { KeyCode::Up => Some(Direction::Up), KeyCode::Down => Some(Direction::Down), KeyCode::Left => Some(Direction::Left), @@ -127,7 +127,7 @@ fn handle_hotkey(key_code: keyboard::KeyCode) -> Option { _ => None, }; - match key_code { + match event.key_code { KeyCode::V => Some(Message::SplitFocused(Axis::Vertical)), KeyCode::H => Some(Message::SplitFocused(Axis::Horizontal)), KeyCode::W => Some(Message::CloseFocused), -- cgit From 05beb878527b4d4e3141ca5ba09337d6ada858be Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 17 Mar 2020 07:28:28 +0100 Subject: Move common keyboard types to `iced_core` Also expose them in `iced` through `iced_native` and `iced_web`. --- examples/pane_grid/src/main.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index 461ffc30..9e6283ab 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -1,8 +1,8 @@ use iced::{ - button, pane_grid, scrollable, Align, Button, Column, Container, Element, - HorizontalAlignment, Length, PaneGrid, Sandbox, Scrollable, Settings, Text, + button, keyboard, pane_grid, scrollable, Align, Button, Column, Container, + Element, HorizontalAlignment, Length, PaneGrid, Sandbox, Scrollable, + Settings, Text, }; -use iced_native::input::keyboard; pub fn main() { Example::run(Settings::default()) -- cgit From b8a035d2dae43f590f681686d856b8b22630141b Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 18 Mar 2020 01:27:23 +0100 Subject: Add some styling to `pane_grid` buttons --- examples/pane_grid/src/main.rs | 51 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 47 insertions(+), 4 deletions(-) (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index 9e6283ab..c5dae016 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -167,7 +167,7 @@ impl Content { close, } = self; - let button = |state, label, message| { + let button = |state, label, message, style| { Button::new( state, Text::new(label) @@ -176,7 +176,9 @@ impl Content { .size(16), ) .width(Length::Fill) + .padding(8) .on_press(message) + .style(style) }; let mut controls = Column::new() @@ -186,16 +188,22 @@ impl Content { split_horizontally, "Split horizontally", Message::Split(pane_grid::Axis::Horizontal, pane), + style::Button::Primary, )) .push(button( split_vertically, "Split vertically", Message::Split(pane_grid::Axis::Vertical, pane), + style::Button::Primary, )); if total_panes > 1 { - controls = - controls.push(button(close, "Close", Message::Close(pane))); + controls = controls.push(button( + close, + "Close", + Message::Close(pane), + style::Button::Destructive, + )); } let content = Scrollable::new(scroll) @@ -217,7 +225,7 @@ impl Content { } mod style { - use iced::{container, Background, Color}; + use iced::{button, container, Background, Color, Vector}; pub struct Pane { pub is_focused: bool, @@ -237,4 +245,39 @@ mod style { } } } + + pub enum Button { + Primary, + Destructive, + } + + impl button::StyleSheet for Button { + fn active(&self) -> button::Style { + let color = match self { + Button::Primary => Color::from_rgb8(0x25, 0x7A, 0xFD), + Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2), + }; + + button::Style { + background: None, + border_color: color, + border_radius: 5, + border_width: 1, + shadow_offset: Vector::new(0.0, 0.0), + text_color: color, + ..button::Style::default() + } + } + + fn hovered(&self) -> button::Style { + let active = self.active(); + + button::Style { + background: Some(Background::Color(active.border_color)), + text_color: Color::WHITE, + border_width: 0, + ..active + } + } + } } -- cgit From 36abf7457fdc5a50b53f7e9ae63b978f07fbcda4 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 18 Mar 2020 05:53:41 +0100 Subject: Improve styling of `pane_grid` example --- examples/pane_grid/src/main.rs | 59 +++++++++++++++++++++++++++++------------- 1 file changed, 41 insertions(+), 18 deletions(-) (limited to 'examples/pane_grid/src') diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs index c5dae016..dafc396c 100644 --- a/examples/pane_grid/src/main.rs +++ b/examples/pane_grid/src/main.rs @@ -101,7 +101,7 @@ impl Sandbox for Example { }) .width(Length::Fill) .height(Length::Fill) - .spacing(5) + .spacing(10) .on_drag(Message::Dragged) .on_resize(Message::Resized) .on_key_press(handle_hotkey); @@ -213,7 +213,7 @@ impl Content { .push(Text::new(format!("Pane {}", id)).size(30)) .push(controls); - Container::new(Column::new().padding(10).push(content)) + Container::new(Column::new().padding(5).push(content)) .width(Length::Fill) .height(Length::Fill) .center_y() @@ -227,6 +227,24 @@ impl Content { mod style { use iced::{button, container, Background, Color, Vector}; + const SURFACE: Color = Color::from_rgb( + 0xF2 as f32 / 255.0, + 0xF3 as f32 / 255.0, + 0xF5 as f32 / 255.0, + ); + + const ACTIVE: Color = Color::from_rgb( + 0x72 as f32 / 255.0, + 0x89 as f32 / 255.0, + 0xDA as f32 / 255.0, + ); + + const HOVERED: Color = Color::from_rgb( + 0x67 as f32 / 255.0, + 0x7B as f32 / 255.0, + 0xC4 as f32 / 255.0, + ); + pub struct Pane { pub is_focused: bool, } @@ -234,12 +252,11 @@ mod style { impl container::StyleSheet for Pane { fn style(&self) -> container::Style { container::Style { - background: Some(Background::Color(Color::WHITE)), - border_width: if self.is_focused { 2 } else { 1 }, - border_color: if self.is_focused { - Color::from_rgb8(0x25, 0x7A, 0xFD) - } else { - Color::BLACK + background: Some(Background::Color(SURFACE)), + border_width: 2, + border_color: Color { + a: if self.is_focused { 1.0 } else { 0.3 }, + ..Color::BLACK }, ..Default::default() } @@ -253,18 +270,18 @@ mod style { impl button::StyleSheet for Button { fn active(&self) -> button::Style { - let color = match self { - Button::Primary => Color::from_rgb8(0x25, 0x7A, 0xFD), - Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2), + let (background, text_color) = match self { + Button::Primary => (Some(ACTIVE), Color::WHITE), + Button::Destructive => { + (None, Color::from_rgb8(0xFF, 0x47, 0x47)) + } }; button::Style { - background: None, - border_color: color, + text_color, + background: background.map(Background::Color), border_radius: 5, - border_width: 1, shadow_offset: Vector::new(0.0, 0.0), - text_color: color, ..button::Style::default() } } @@ -272,10 +289,16 @@ mod style { fn hovered(&self) -> button::Style { let active = self.active(); + let background = match self { + Button::Primary => Some(HOVERED), + Button::Destructive => Some(Color { + a: 0.2, + ..active.text_color + }), + }; + button::Style { - background: Some(Background::Color(active.border_color)), - text_color: Color::WHITE, - border_width: 0, + background: background.map(Background::Color), ..active } } -- cgit