leyoda/libcosmic-yoda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(segmented-button): Selection style and implementation

Browse source
This commit is contained in:
Michael Aaron Murphy 2022-12-28 21:13:49 +01:00 • committed by Ashley Wulber
parent 3454483345
commit bbac6b9bbf
6 changed files with 68 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

25
examples/cosmic/src/window.rs
View file

@ -129,7 +129,8 @@ pub struct Window {
debug: bool,
theme: Theme,
slider_value: f32,
demo_tab_state: segmented_button::State<DemoView>,
demo_view_switcher: segmented_button::State<DemoView>,
demo_selection: segmented_button::State<()>,
spin_button: SpinButtonModel<i32>,
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()

19
examples/cosmic/src/window/demo.rs
View file

@ -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()
}

35
src/theme/mod.rs
View file

@ -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)
}
}

3
src/widget/segmented_button/mod.rs
View file

@ -1,6 +1,5 @@
/// Copyright 2022 System76 <info@system76.com>
// 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: <Renderer::Theme as StyleSheet>::Style::default(),

1
src/widget/segmented_button/state.rs
View file

@ -1,6 +1,5 @@
/// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use slotmap::{SecondaryMap, SlotMap};
slotmap::new_key_type! {

1
src/widget/segmented_button/style.rs
View file

@ -1,6 +1,5 @@
/// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use iced_core::{Background, BorderRadius, Color};
/// The appearance of a [`SegmentedButton`].