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

refactor!: separate horizontal and vertical segmented button widgets

Browse source 
- Removes the orientation enum in favor of two separate widgets
- Implements the spacing attribute for both widgets
- Demo is updated to display spaced variants of the widgets
This commit is contained in:
Michael Aaron Murphy 2023-01-03 19:35:34 +01:00 • committed by Michael Murphy
parent 3af1da6332
commit 444e389496
12 changed files with 969 additions and 547 deletions
Download patch file Download diff file Expand all files Collapse all files

169
src/theme/segmented_button.rs Normal file
View file

@ -0,0 +1,169 @@
// Copyright 2023 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use crate::theme::Theme;
use crate::widget::segmented_button;
use iced_core::{Background, BorderRadius, Color};
#[derive(Clone, Copy, Default)]
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),
}
impl segmented_button::StyleSheet for Theme {
type Style = SegmentedButton;
fn horizontal(&self, style: &Self::Style) -> segmented_button::Appearance {
match style {
SegmentedButton::ViewSwitcher => {
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.primary.component.base.into())),
border_bottom: Some((4.0, cosmic.accent.base.into())),
border_radius_first: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_radius_last: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_radius_middle: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
text_color: cosmic.accent.base.into(),
},
button_inactive: segmented_button::ButtonAppearance {
background: None,
border_bottom: Some((1.0, cosmic.accent.base.into())),
border_radius_first: BorderRadius::from(0.0),
border_radius_last: BorderRadius::from(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: Some((1.0, cosmic.accent.base.into())),
border_radius_first: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_radius_last: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_radius_middle: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
text_color: cosmic.accent.base.into(),
},
}
}
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),
}
}
fn vertical(&self, style: &Self::Style) -> segmented_button::Appearance {
match style {
SegmentedButton::ViewSwitcher => {
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.primary.component.base.into())),
border_bottom: None,
border_radius_first: BorderRadius::from(24.0),
border_radius_last: BorderRadius::from(24.0),
border_radius_middle: BorderRadius::from(24.0),
text_color: cosmic.accent.base.into(),
},
button_inactive: segmented_button::ButtonAppearance {
background: None,
border_bottom: None,
border_radius_first: BorderRadius::from(24.0),
border_radius_last: BorderRadius::from(24.0),
border_radius_middle: BorderRadius::from(24.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),
border_radius_last: BorderRadius::from(24.0),
border_radius_middle: BorderRadius::from(24.0),
text_color: cosmic.accent.base.into(),
},
}
}
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, 24.0, 0.0, 0.0]),
border_radius_last: BorderRadius::from([0.0, 0.0, 24.0, 24.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, 24.0, 0.0, 0.0]),
border_radius_last: BorderRadius::from([0.0, 0.0, 24.0, 24.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, 24.0, 0.0, 0.0]),
border_radius_last: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
border_radius_middle: BorderRadius::from(0.0),
text_color: cosmic.accent.base.into(),
},
}
}
SegmentedButton::Custom(func) => func(self),
}
}
}