From bbac6b9bbfa11b5ac2b858d77a7972dfd66b2b66 Mon Sep 17 00:00:00 2001 From: Michael Aaron Murphy Date: Wed, 28 Dec 2022 21:13:49 +0100 Subject: [PATCH] feat(segmented-button): Selection style and implementation --- examples/cosmic/src/window.rs | 25 +++++++++++++++----- examples/cosmic/src/window/demo.rs | 19 ++++++++++----- src/theme/mod.rs | 35 ++++++++++++++++++++++++++++ src/widget/segmented_button/mod.rs | 3 +-- src/widget/segmented_button/state.rs | 1 - src/widget/segmented_button/style.rs | 1 - 6 files changed, 68 insertions(+), 16 deletions(-) diff --git a/examples/cosmic/src/window.rs b/examples/cosmic/src/window.rs index fd5f9346..ca8ca655 100644 --- a/examples/cosmic/src/window.rs +++ b/examples/cosmic/src/window.rs @@ -129,7 +129,8 @@ pub struct Window { debug: bool, theme: Theme, slider_value: f32, - demo_tab_state: segmented_button::State, + demo_view_switcher: segmented_button::State, + demo_selection: segmented_button::State<()>, spin_button: SpinButtonModel, checkbox_value: bool, toggler_value: bool, @@ -166,6 +167,7 @@ pub enum Message { CondensedViewToggle(()), Debug(bool), DemoTabActivate(segmented_button::Key), + DemoSelectionActivate(segmented_button::Key), Drag, InputChanged, Maximize, @@ -271,20 +273,30 @@ impl Application for Window { window.spin_button.min = -10; window.spin_button.max = 10; + // Configures the demo view switcher. let key = window - .demo_tab_state + .demo_view_switcher .insert(String::from("Tab A"), DemoView::TabA); - window.demo_tab_state.activate(key); + window.demo_view_switcher.activate(key); window - .demo_tab_state + .demo_view_switcher .insert(String::from("Tab B"), DemoView::TabB); window - .demo_tab_state + .demo_view_switcher .insert(String::from("Tab C"), DemoView::TabC); + // Configures the demo selection button. + let key = window. + demo_selection + .insert(String::from("Choice A"), ()); + + window.demo_selection.activate(key); + window.demo_selection.insert(String::from("Choice B"), ()); + window.demo_selection.insert(String::from("Choice C"), ()); + (window, Command::none()) } @@ -341,7 +353,8 @@ impl Application for Window { Message::InputChanged => {} Message::SpinButton(msg) => self.spin_button.update(msg), Message::CondensedViewToggle(_) => {} - Message::DemoTabActivate(key) => self.demo_tab_state.activate(key), + Message::DemoTabActivate(key) => self.demo_view_switcher.activate(key), + Message::DemoSelectionActivate(key) => self.demo_selection.activate(key), } Command::none() diff --git a/examples/cosmic/src/window/demo.rs b/examples/cosmic/src/window/demo.rs index 87e39b4a..0f07200c 100644 --- a/examples/cosmic/src/window/demo.rs +++ b/examples/cosmic/src/window/demo.rs @@ -1,7 +1,7 @@ use cosmic::{ iced::widget::{checkbox, pick_list, progress_bar, radio, row, slider}, iced::{Alignment, Length}, - theme::{Button as ButtonTheme, Theme}, + theme::{self, Button as ButtonTheme, Theme}, widget::{button, segmented_button, settings, toggler}, Element, }; @@ -30,10 +30,11 @@ impl Window { settings::view_column(vec![ self.page_title(Page::Demo), - segmented_button(&self.demo_tab_state) + segmented_button(&self.demo_view_switcher) + .height(Length::Units(48)) .on_activate(Message::DemoTabActivate) .into(), - match self.demo_tab_state.active_data() { + match self.demo_view_switcher.active_data() { None => panic!("no tab is active"), Some(DemoView::TabA) => settings::view_column(vec![ settings::view_section("Debug") @@ -117,9 +118,15 @@ impl Window { .padding(0) .into(), Some(DemoView::TabB) => { - settings::view_column(vec![settings::view_section("Tab B") - .add(cosmic::iced::widget::text("Nothing here yet").width(Length::Fill)) - .into()]) + settings::view_column(vec![ + cosmic::iced::widget::text("SegmentedButton::Selection") + .font(cosmic::font::FONT_SEMIBOLD) + .into(), + segmented_button(&self.demo_selection) + .style(theme::SegmentedButton::Selection) + .on_activate(Message::DemoSelectionActivate) + .into() + ]) .padding(0) .into() } diff --git a/src/theme/mod.rs b/src/theme/mod.rs index e9a151c5..5c4a6f17 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -871,6 +871,8 @@ pub enum SegmentedButton { /// A tabbed widget for switching between views in an interface. #[default] ViewSwitcher, + /// A widget for multiple choice selection. + Selection, /// Or implement any custom theme of your liking. Custom(fn(&Theme) -> segmented_button::Appearance) } @@ -913,6 +915,39 @@ impl segmented_button::StyleSheet for Theme { } } } + SegmentedButton::Selection => { + let cosmic = self.cosmic(); + segmented_button::Appearance { + background: None, + border_color: Color::TRANSPARENT, + border_radius: BorderRadius::from(0.0), + border_width: 0.0, + button_active: segmented_button::ButtonAppearance { + background: Some(Background::Color(cosmic.secondary.component.divider.into())), + border_bottom: None, + border_radius_first: BorderRadius::from([24.0, 0.0, 0.0, 24.0]), + border_radius_last: BorderRadius::from([0.0, 24.0, 24.0, 0.0]), + border_radius_middle: BorderRadius::from(0.0), + text_color: cosmic.accent.base.into(), + }, + button_inactive: segmented_button::ButtonAppearance { + background: Some(Background::Color(cosmic.secondary.component.base.into())), + border_bottom: None, + border_radius_first: BorderRadius::from([24.0, 0.0, 0.0, 24.0]), + border_radius_last: BorderRadius::from([0.0, 24.0, 24.0, 0.0]), + border_radius_middle: BorderRadius::from(0.0), + text_color: cosmic.primary.on.into(), + }, + button_hover: segmented_button::ButtonAppearance { + background: Some(Background::Color(cosmic.primary.component.hover.into())), + border_bottom: None, + border_radius_first: BorderRadius::from([24.0, 0.0, 0.0, 24.0]), + border_radius_last: BorderRadius::from([0.0, 24.0, 24.0, 0.0]), + border_radius_middle: BorderRadius::from(0.0), + text_color: cosmic.accent.base.into(), + } + } + } SegmentedButton::Custom(func) => func(self) } } diff --git a/src/widget/segmented_button/mod.rs b/src/widget/segmented_button/mod.rs index f95ba0c5..9922ef94 100644 --- a/src/widget/segmented_button/mod.rs +++ b/src/widget/segmented_button/mod.rs @@ -1,6 +1,5 @@ /// Copyright 2022 System76 // SPDX-License-Identifier: MPL-2.0 - mod state; mod style; @@ -49,7 +48,7 @@ where pub fn new(state: &'a WidgetState) -> Self { Self { state, - height: Length::Units(48), + height: Length::Units(32), width: Length::Fill, spacing: 0, style: ::Style::default(), diff --git a/src/widget/segmented_button/state.rs b/src/widget/segmented_button/state.rs index b46884c1..7b164fca 100644 --- a/src/widget/segmented_button/state.rs +++ b/src/widget/segmented_button/state.rs @@ -1,6 +1,5 @@ /// Copyright 2022 System76 // SPDX-License-Identifier: MPL-2.0 - use slotmap::{SecondaryMap, SlotMap}; slotmap::new_key_type! { diff --git a/src/widget/segmented_button/style.rs b/src/widget/segmented_button/style.rs index 5e346bd3..8d7eb53d 100644 --- a/src/widget/segmented_button/style.rs +++ b/src/widget/segmented_button/style.rs @@ -1,6 +1,5 @@ /// Copyright 2022 System76 // SPDX-License-Identifier: MPL-2.0 - use iced_core::{Background, BorderRadius, Color}; /// The appearance of a [`SegmentedButton`].