mirrors/gauntlet
1
0
Fork 0
mirror of https://github.com/project-gauntlet/gauntlet.git synced 2025-12-23 10:35:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Distinct styling for pressed state of buttons

Browse source
This commit is contained in:
Exidex 2024-11-13 22:09:32 +01:00
parent 57ea67d13e
commit 058bcde9d2
No known key found for this signature in database
GPG key ID: 46D8D21671EB48FA
1 changed files with 28 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

44
rust/client/src/ui/theme/button.rs
View file

@ -28,7 +28,8 @@ pub enum ButtonStyle {
enum ButtonState {
Active,
Hover
Hover,
Pressed,
}
impl ButtonStyle {
@ -88,61 +89,61 @@ impl ButtonStyle {
}
fn appearance(&self, theme: &GauntletTheme, state: ButtonState) -> Appearance {
let (background_color, background_color_hover, text_color, text_color_hover, border_radius, border_width, border_color) = match &self {
let (background_color, background_color_hover, background_color_pressed, text_color, text_color_hover, border_radius, border_width, border_color) = match &self {
ButtonStyle::RootBottomPanelPrimaryActionButton | ButtonStyle::RootBottomPanelActionToggleButton => {
let theme = &theme.root_bottom_panel_action_toggle_button;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
},
ButtonStyle::RootTopPanelBackButton => {
let theme = &theme.root_top_panel_button;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
},
ButtonStyle::GridItem => {
let theme = &theme.grid_item;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::GridItemFocused => {
let theme = &theme.grid_item;
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), Some(&theme.background_color), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::Action => {
let theme = &theme.action;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::ActionFocused => {
let theme = &theme.action;
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), Some(&theme.background_color), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::ListItem => {
let theme = &theme.list_item;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::ListItemFocused => {
let theme = &theme.list_item;
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), Some(&theme.background_color), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::MainListItem => {
let theme = &theme.main_list_item;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::MainListItemFocused => {
let theme = &theme.main_list_item;
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color_focused), Some(&theme.background_color_focused), Some(&theme.background_color), &theme.text_color_hovered, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::MetadataLink => {
let theme = &theme.metadata_link;
(None, None, &theme.text_color, &theme.text_color_hovered, &0.0, &1.0, &TRANSPARENT)
(None, None, None, &theme.text_color, &theme.text_color_hovered, &0.0, &1.0, &TRANSPARENT)
}
ButtonStyle::MetadataTagItem => {
let theme = &theme.metadata_tag_item_button;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
ButtonStyle::ShouldNotBeUsed => {
(Some(&NOT_INTENDED_TO_BE_USED), Some(&NOT_INTENDED_TO_BE_USED), &NOT_INTENDED_TO_BE_USED, &NOT_INTENDED_TO_BE_USED, &0.0, &1.0, &TRANSPARENT)
(Some(&NOT_INTENDED_TO_BE_USED), Some(&NOT_INTENDED_TO_BE_USED), Some(&NOT_INTENDED_TO_BE_USED), &NOT_INTENDED_TO_BE_USED, &NOT_INTENDED_TO_BE_USED, &0.0, &1.0, &TRANSPARENT)
}
ButtonStyle::DatePicker => {
let theme = &theme.form_input_date_picker_buttons;
(Some(&theme.background_color), Some(&theme.background_color_hovered), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
(Some(&theme.background_color), Some(&theme.background_color_hovered), Some(&theme.background_color), &theme.text_color, &theme.text_color_hovered, &theme.border_radius, &theme.border_width, &theme.border_color)
}
};
@ -159,6 +160,13 @@ impl ButtonStyle {
match state {
ButtonState::Active => active,
ButtonState::Pressed => {
Appearance {
background: background_color_pressed.map(|color| color.to_iced().into()),
text_color: text_color_hover.to_iced(),
..active
}
}
ButtonState::Hover => {
Appearance {
background: background_color_hover.map(|color| color.to_iced().into()),
@ -180,6 +188,10 @@ impl button::StyleSheet for GauntletTheme {
fn hovered(&self, style: &Self::Style) -> Appearance {
style.appearance(self, ButtonState::Hover)
}
fn pressed(&self, style: &Self::Style) -> Appearance {
style.appearance(self, ButtonState::Pressed)
}
}
impl<'a, Message: 'a + Clone> ThemableWidget<'a, Message> for Button<'a, Message, GauntletTheme, Renderer> {