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

feat: focusable segmented items in segmented button

Browse source
This commit is contained in:
Michael Aaron Murphy 2023-01-09 16:18:02 +01:00 • committed by Michael Murphy
parent a89ec01297
commit 29c7444a30
14 changed files with 794 additions and 611 deletions
Download patch file Download diff file Expand all files Collapse all files

291
src/theme/segmented_button.rs
View file

@ -4,6 +4,7 @@
use crate::theme::Theme;
use crate::widget::segmented_button;
use iced_core::{Background, BorderRadius};
use palette::{rgb::Rgb, Alpha};
#[derive(Clone, Copy, Default)]
pub enum SegmentedButton {
@ -24,27 +25,9 @@ impl segmented_button::StyleSheet for Theme {
match style {
SegmentedButton::ViewSwitcher => {
let cosmic = self.cosmic();
let active = horizontal::view_switcher_active(cosmic);
segmented_button::Appearance {
border_radius: BorderRadius::from(0.0),
active: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.base.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
inactive: segmented_button::ButtonStatusAppearance {
background: None,
first: segmented_button::ButtonAppearance {
@ -64,50 +47,17 @@ impl segmented_button::StyleSheet for Theme {
},
text_color: cosmic.primary.on.into(),
},
hover: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.hover.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
SegmentedButton::Selection => {
let cosmic = self.cosmic();
let active = horizontal::selection_active(cosmic);
segmented_button::Appearance {
border_radius: BorderRadius::from(0.0),
active: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(
cosmic.secondary.component.divider.into(),
)),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
inactive: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.base.into())),
first: segmented_button::ButtonAppearance {
@ -124,22 +74,9 @@ impl segmented_button::StyleSheet for Theme {
},
text_color: cosmic.primary.on.into(),
},
hover: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.hover.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
@ -152,83 +89,25 @@ impl segmented_button::StyleSheet for Theme {
match style {
SegmentedButton::ViewSwitcher => {
let cosmic = self.cosmic();
let active = vertical::view_switcher_active(cosmic);
segmented_button::Appearance {
border_radius: BorderRadius::from(0.0),
active: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(
cosmic.secondary.component.divider.into(),
)),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
inactive: segmented_button::ButtonStatusAppearance {
background: None,
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
text_color: cosmic.primary.on.into(),
..active
},
hover: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.hover.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
SegmentedButton::Selection => {
let cosmic = self.cosmic();
let active = vertical::selection_active(cosmic);
segmented_button::Appearance {
border_radius: BorderRadius::from(0.0),
active: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(
cosmic.secondary.component.divider.into(),
)),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
inactive: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.base.into())),
first: segmented_button::ButtonAppearance {
@ -245,22 +124,9 @@ impl segmented_button::StyleSheet for Theme {
},
text_color: cosmic.primary.on.into(),
},
hover: segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.hover.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
@ -268,3 +134,124 @@ impl segmented_button::StyleSheet for Theme {
}
}
}
mod horizontal {
use crate::widget::segmented_button;
use iced_core::{Background, BorderRadius};
use palette::{rgb::Rgb, Alpha};
pub fn selection_active(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> segmented_button::ButtonStatusAppearance {
segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.divider.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
}
}
pub fn view_switcher_active(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> segmented_button::ButtonStatusAppearance {
segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.base.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
text_color: cosmic.accent.base.into(),
}
}
}
pub fn focus(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
default: &segmented_button::ButtonStatusAppearance,
) -> segmented_button::ButtonStatusAppearance {
segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.focus.into())),
text_color: cosmic.primary.base.into(),
..*default
}
}
pub fn hover(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
default: &segmented_button::ButtonStatusAppearance,
) -> segmented_button::ButtonStatusAppearance {
segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.hover.into())),
text_color: cosmic.accent.base.into(),
..*default
}
}
mod vertical {
use crate::widget::segmented_button;
use iced_core::{Background, BorderRadius};
use palette::{rgb::Rgb, Alpha};
pub fn selection_active(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> segmented_button::ButtonStatusAppearance {
segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.divider.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
..Default::default()
},
text_color: cosmic.accent.base.into(),
}
}
pub fn view_switcher_active(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> segmented_button::ButtonStatusAppearance {
segmented_button::ButtonStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.divider.into())),
first: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
middle: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
last: segmented_button::ButtonAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
text_color: cosmic.accent.base.into(),
}
}
}