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

refactor: icon styling and headerbar icon styling

Browse source 
Headerbar icons are transparent when their window is not focused, but otherwise share the same style as icons with selection. This updates the icon styles to match figma when selected.
This commit is contained in:
Ashley Wulber 2024-03-11 15:21:48 -04:00 • committed by Ashley Wulber
parent 6f6eeec0e7
commit e47684ffdb
11 changed files with 121 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/theme/style/button.rs
View file

@ -22,6 +22,7 @@ pub enum Button {
Destructive,
Link,
Icon,
HeaderBar,
IconVertical,
Image,
#[default]
@ -66,7 +67,7 @@ pub fn appearance(
appearance.icon_color = icon;
}
Button::Icon | Button::IconVertical => {
Button::Icon | Button::IconVertical | Button::HeaderBar => {
if matches!(style, Button::IconVertical) {
corner_radii = &cosmic.corner_radii.radius_m;
}
@ -146,14 +147,23 @@ pub fn appearance(
impl StyleSheet for crate::Theme {
type Style = Button;
fn active(&self, focused: bool, style: &Self::Style) -> Appearance {
fn active(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance {
if let Button::Custom { active, .. } = style {
return active(focused, self);
}
let accent = self.cosmic().accent_color();
appearance(self, focused, style, |component| {
let text_color = if let Button::Icon | Button::IconVertical = style {
None
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
Some(c)
} else {
Some(component.on.into())
};
@ -179,39 +189,61 @@ impl StyleSheet for crate::Theme {
}
fn drop_target(&self, style: &Self::Style) -> Appearance {
self.active(false, style)
self.active(false, false, style)
}
fn hovered(&self, focused: bool, style: &Self::Style) -> Appearance {
fn hovered(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance {
if let Button::Custom { hovered, .. } = style {
return hovered(focused, self);
}
let accent = self.cosmic().accent_button.hover;
appearance(
self,
focused || matches!(style, Button::Image),
style,
|component| {
(
component.hover.into(),
Some(component.on.into()),
Some(component.on.into()),
)
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
Some(c)
} else {
Some(component.on.into())
};
(component.hover.into(), text_color, text_color)
},
)
}
fn pressed(&self, focused: bool, style: &Self::Style) -> Appearance {
fn pressed(&self, focused: bool, selected: bool, style: &Self::Style) -> Appearance {
if let Button::Custom { pressed, .. } = style {
return pressed(focused, self);
}
let accent = self.cosmic().accent_button.pressed;
appearance(self, focused, style, |component| {
(
component.pressed.into(),
Some(component.on.into()),
Some(component.on.into()),
)
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
Some(c)
} else {
Some(component.on.into())
};
(component.pressed.into(), text_color, text_color)
})
}