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

feat(theme): improvements and refactoring of theme module

Browse source 
fix: theme rebase
This commit is contained in:
Michael Aaron Murphy 2023-09-13 15:49:11 +02:00 • committed by Michael Murphy
parent 4c6c678f88
commit 7f0943924a
9 changed files with 1635 additions and 1228 deletions
Download patch file Download diff file Expand all files Collapse all files

271
src/theme/segmented_button.rs
View file

@ -1,271 +0,0 @@
// Copyright 2023 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
use crate::widget::segmented_button::{Appearance, ItemAppearance, StyleSheet};
use crate::{theme::Theme, widget::segmented_button::ItemStatusAppearance};
use iced_core::{Background, BorderRadius};
use palette::{rgb::Rgb, Alpha};
#[derive(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(Box<dyn Fn(&Theme) -> Appearance>),
}
impl StyleSheet for Theme {
type Style = SegmentedButton;
#[allow(clippy::too_many_lines)]
fn horizontal(&self, style: &Self::Style) -> Appearance {
match style {
SegmentedButton::ViewSwitcher => {
let cosmic = self.cosmic();
let active = horizontal::view_switcher_active(cosmic);
Appearance {
border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance {
background: None,
first: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from(0.0),
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
SegmentedButton::Selection => {
let cosmic = self.cosmic();
let active = horizontal::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
Appearance {
border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
SegmentedButton::Custom(func) => func(self),
}
}
#[allow(clippy::too_many_lines)]
fn vertical(&self, style: &Self::Style) -> Appearance {
match style {
SegmentedButton::ViewSwitcher => {
let cosmic = self.cosmic();
let active = vertical::view_switcher_active(cosmic);
Appearance {
border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance {
background: None,
text_color: cosmic.on_bg_color().into(),
..active
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
SegmentedButton::Selection => {
let cosmic = self.cosmic();
let active = vertical::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
Appearance {
border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
active,
..Default::default()
}
}
SegmentedButton::Custom(func) => func(self),
}
}
}
mod horizontal {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use iced_core::{Background, BorderRadius};
use palette::{rgb::Rgb, Alpha};
pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: ItemAppearance {
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>>,
) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default()
},
last: ItemAppearance {
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: &ItemStatusAppearance,
) -> ItemStatusAppearance {
// TODO: This is a hack to make the hover color lighter than the selected color
// I'm not sure why the alpha is being applied differently here than in figma
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
text_color: cosmic.accent.base.into(),
..*default
}
}
pub fn hover(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
default: &ItemStatusAppearance,
) -> ItemStatusAppearance {
let mut neutral_10 = cosmic.palette.neutral_10;
neutral_10.alpha = 0.1;
ItemStatusAppearance {
background: Some(Background::Color(neutral_10.into())),
text_color: cosmic.accent.base.into(),
..*default
}
}
mod vertical {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use iced_core::{Background, BorderRadius};
use palette::{rgb::Rgb, Alpha};
pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(0.0),
..Default::default()
},
last: ItemAppearance {
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>>,
) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
middle: ItemAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
last: ItemAppearance {
border_radius: BorderRadius::from(24.0),
..Default::default()
},
text_color: cosmic.accent.base.into(),
}
}
}