Skip to content

Commit

Permalink
fix: theme rendering fixed to reflect theme colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@edfloreshz
edfloreshz committed Nov 1, 2024
1 parent 688e9ce commit 0f3bd62
Show file tree
Hide file tree
Showing 4 changed files with 345 additions and 44 deletions.
1 change: 0 additions & 1 deletion src/app.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -648,7 +648,6 @@ impl TweakTool {
let widgets = widget::flex_row(themes)
.row_spacing(spacing.space_xs)
.column_spacing(spacing.space_xs)
.min_item_width(Some(400.0))
.apply(widget::container)
.padding([0, spacing.space_xxs]);
Some(widgets.into())
Expand Down
363 changes: 331 additions & 32 deletions src/app/style.rs
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
use cosmic::{
cosmic_theme::Theme,
cosmic_theme::{Component, Theme},
iced::{Background, Border, Color},
iced_core::Shadow,
widget::{self, button, container},
theme::{Button, TRANSPARENT_COMPONENT},
widget::{self, container},
};

pub fn background<'a>(theme: Theme) -> cosmic::theme::Container<'a> {
pub fn background<'a>(theme: &Theme) -> cosmic::theme::Container<'a> {
let theme = theme.clone();
let corner_radii = cosmic::theme::active().cosmic().corner_radii;
cosmic::theme::Container::custom(move |_| container::Style {
icon_color: Some(Color::from(theme.background.on)),
Expand Down Expand Up @@ -53,38 +55,335 @@ pub fn panel_style(theme: &cosmic::Theme) -> widget::container::Style {
}
}

#[allow(dead_code)]
pub fn standard_button(theme: Theme) -> cosmic::theme::Button {
let active_theme = theme.clone();
let disabled_theme = theme.clone();
let hovered_theme = theme.clone();
let pressed_theme = theme.clone();
let _corner_radii = cosmic::theme::active().cosmic().corner_radii;

cosmic::theme::Button::Custom {
active: Box::new(move |_active, _cosmic| button::Style {
background: Some(cosmic::iced_core::Background::Color(
active_theme.on_accent_color().into(),
)),
..Default::default()
pub fn standard_button(theme: Theme) -> Button {
let theme_active = theme.clone();
let theme_disabled = theme.clone();
let theme_hovered = theme.clone();
let theme_pressed = theme;

Button::Custom {
active: Box::new(move |_, _| {
appearance(
&theme_active,
false,
false,
false,
Button::Standard,
|component| {
let text_color = Some(component.on.into());
(component.hover.into(), text_color, text_color)
},
)
}),
disabled: Box::new(move |_cosmic| button::Style {
background: Some(cosmic::iced_core::Background::Color(
disabled_theme.on_accent_color().into(),
)),
..Default::default()
disabled: Box::new(move |_| {
appearance(
&theme_disabled,
false,
false,
true,
Button::Standard,
|component| {
let mut background = Color::from(component.base);
background.a *= 0.5;
(
background,
Some(component.on_disabled.into()),
Some(component.on_disabled.into()),
)
},
)
}),
hovered: Box::new(move |_hovered, _cosmic| button::Style {
background: Some(cosmic::iced_core::Background::Color(
hovered_theme.on_accent_color().into(),
)),
..Default::default()
hovered: Box::new(move |_, _| {
appearance(
&theme_hovered,
false,
false,
false,
Button::Standard,
|component| {
let text_color = Some(component.on.into());

(component.hover.into(), text_color, text_color)
},
)
}),
pressed: Box::new(move |_pressed, _cosmic| button::Style {
background: Some(cosmic::iced_core::Background::Color(
pressed_theme.on_accent_color().into(),
)),
..Default::default()
pressed: Box::new(move |_, _| {
appearance(
&theme_pressed,
false,
false,
false,
Button::Standard,
|component| {
let text_color = Some(component.on.into());

(component.pressed.into(), text_color, text_color)
},
)
}),
}
}

pub fn destructive_button(theme: Theme) -> Button {
let theme_active = theme.clone();
let theme_disabled = theme.clone();
let theme_hovered = theme.clone();
let theme_pressed = theme;

Button::Custom {
active: Box::new(move |_, _| {
appearance(
&theme_active,
false,
false,
false,
Button::Destructive,
|component| {
let text_color = Some(component.on.into());
(component.hover.into(), text_color, text_color)
},
)
}),
disabled: Box::new(move |_| {
appearance(
&theme_disabled,
false,
false,
true,
Button::Destructive,
|component| {
let mut background = Color::from(component.base);
background.a *= 0.5;
(
background,
Some(component.on_disabled.into()),
Some(component.on_disabled.into()),
)
},
)
}),
hovered: Box::new(move |_, _| {
appearance(
&theme_hovered,
false,
false,
false,
Button::Destructive,
|component| {
let text_color = Some(component.on.into());

(component.hover.into(), text_color, text_color)
},
)
}),
pressed: Box::new(move |_, _| {
appearance(
&theme_pressed,
false,
false,
false,
Button::Destructive,
|component| {
let text_color = Some(component.on.into());

(component.pressed.into(), text_color, text_color)
},
)
}),
}
}

pub fn link_button(theme: Theme) -> Button {
let theme_active = theme.clone();
let theme_disabled = theme.clone();
let theme_hovered = theme.clone();
let theme_pressed = theme;

Button::Custom {
active: Box::new(move |_, _| {
appearance(
&theme_active,
false,
false,
false,
Button::Link,
|component| {
let text_color = Some(component.on.into());
(component.hover.into(), text_color, text_color)
},
)
}),
disabled: Box::new(move |_| {
appearance(
&theme_disabled,
false,
false,
true,
Button::Link,
|component| {
let mut background = Color::from(component.base);
background.a *= 0.5;
(
background,
Some(component.on_disabled.into()),
Some(component.on_disabled.into()),
)
},
)
}),
hovered: Box::new(move |_, _| {
appearance(
&theme_hovered,
false,
false,
false,
Button::Link,
|component| {
let text_color = Some(component.on.into());

(component.hover.into(), text_color, text_color)
},
)
}),
pressed: Box::new(move |_, _| {
appearance(
&theme_pressed,
false,
false,
false,
Button::Link,
|component| {
let text_color = Some(component.on.into());

(component.pressed.into(), text_color, text_color)
},
)
}),
}
}

pub fn appearance(
theme: &Theme,
focused: bool,
selected: bool,
disabled: bool,
style: Button,
color: impl Fn(&Component) -> (Color, Option<Color>, Option<Color>),
) -> widget::button::Style {
let cosmic = theme;
let mut corner_radii = &cosmic.corner_radii.radius_xl;
let mut appearance = widget::button::Style::new();

match style {
Button::Standard
| Button::Text
| Button::Suggested
| Button::Destructive
| Button::Transparent => {
let style_component = match style {
Button::Standard => &cosmic.button,
Button::Text => &cosmic.text_button,
Button::Suggested => &cosmic.accent_button,
Button::Destructive => &cosmic.destructive_button,
Button::Transparent => &TRANSPARENT_COMPONENT,
_ => return appearance,
};

let (background, text, icon) = color(style_component);
appearance.background = Some(Background::Color(background));
if !matches!(style, Button::Standard) {
appearance.text_color = text;
appearance.icon_color = icon;
}
}

Button::Icon | Button::IconVertical | Button::HeaderBar => {
if matches!(style, Button::IconVertical) {
corner_radii = &cosmic.corner_radii.radius_m;
if selected {
appearance.overlay = Some(Background::Color(Color::from(
cosmic.icon_button.selected_state_color(),
)));
}
}

let (background, text, icon) = color(&cosmic.icon_button);
appearance.background = Some(Background::Color(background));
// Only override icon button colors when it is disabled
appearance.icon_color = if disabled { icon } else { None };
appearance.text_color = if disabled { text } else { None };
}

Button::Image => {
appearance.background = None;
appearance.text_color = Some(cosmic.accent.base.into());
appearance.icon_color = Some(cosmic.accent.base.into());

corner_radii = &cosmic.corner_radii.radius_s;
appearance.border_radius = (*corner_radii).into();

if focused || selected {
appearance.border_width = 2.0;
appearance.border_color = cosmic.accent.base.into();
}

return appearance;
}

Button::Link => {
appearance.background = None;
appearance.icon_color = Some(cosmic.accent.base.into());
appearance.text_color = Some(cosmic.accent.base.into());
corner_radii = &cosmic.corner_radii.radius_0;
}

Button::Custom { .. } => (),
Button::AppletMenu => {
let (background, _, _) = color(&cosmic.text_button);
appearance.background = Some(Background::Color(background));

appearance.icon_color = Some(cosmic.background.on.into());
appearance.text_color = Some(cosmic.background.on.into());
corner_radii = &cosmic.corner_radii.radius_0;
}
Button::AppletIcon => {
let (background, _, _) = color(&cosmic.text_button);
appearance.background = Some(Background::Color(background));

appearance.icon_color = Some(cosmic.background.on.into());
appearance.text_color = Some(cosmic.background.on.into());
}
Button::MenuFolder => {
// Menu folders cannot be disabled, ignore customized icon and text color
let component = &cosmic.background.component;
let (background, _, _) = color(component);
appearance.background = Some(Background::Color(background));
appearance.icon_color = Some(component.on.into());
appearance.text_color = Some(component.on.into());
corner_radii = &cosmic.corner_radii.radius_s;
}
Button::MenuItem => {
let (background, text, icon) = color(&cosmic.background.component);
appearance.background = Some(Background::Color(background));
appearance.icon_color = icon;
appearance.text_color = text;
corner_radii = &cosmic.corner_radii.radius_s;
}
Button::MenuRoot => {
appearance.background = None;
appearance.icon_color = None;
appearance.text_color = None;
}
}

appearance.border_radius = (*corner_radii).into();

if focused {
appearance.outline_width = 1.0;
appearance.outline_color = cosmic.accent.base.into();
appearance.border_width = 2.0;
appearance.border_color = Color::TRANSPARENT;
}

appearance
}
1 change: 0 additions & 1 deletion src/pages/color_schemes.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,6 @@ impl ColorSchemes {
.row_spacing(spacing.space_xs)
.column_spacing(spacing.space_xs)
.apply(widget::container)
.padding([0, spacing.space_xxs])
})
.into(),
])
Expand Down
Loading

0 comments on commit 0f3bd62

Please sign in to comment.