Button: hover_color, hover_border_color

dash-frontend/assets/gui/templates.xml

@@ -5,6 +5,8 @@
       height="82"
       color="#00000033"
       border_color="#FFFFFF77"
+      hover_color="~accent"
+      hover_border_color="#FFFFFF"
       round="8">
       <div gap="8"
         align_items="center"

dash-frontend/assets/gui/theme.xml

@@ -1,6 +1,7 @@
 <layout>
   <theme>
     <var key="menu_dark" value="#0A0A0ACC" />
+    <var key="accent" value="#008cff" />
     <var key="background_dark" value="#0d131acc" />
     <var key="background_light" value="#244179aa" />
     <var key="bottom_panel" value="#141e28" />

wgui/doc/widgets.md

@@ -170,6 +170,10 @@ _Translated by key_
 
 `border_color`: #FFAABB | #FFAABBCC
 
+`hover_color`: #FFAABB | #FFAABBCC
+
+`hover_border_color`: #FFAABB | #FFAABBCC
+
 #### Info
 
 Child widgets are supported and can be added directly in XML.

wgui/src/components/button.rs

@@ -20,6 +20,8 @@ pub struct Params {
 	pub text: Translation,
 	pub color: drawing::Color,
 	pub border_color: drawing::Color,
+	pub hover_border_color: drawing::Color,
+	pub hover_color: drawing::Color,
 	pub round: WLength,
 	pub style: taffy::Style,
 	pub text_style: TextStyle,
@@ -29,8 +31,10 @@ impl Default for Params {
 	fn default() -> Self {
 		Self {
 			text: Translation::from_raw_text(""),
-			color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
+			color: drawing::Color::new(0.7, 0.7, 0.7, 1.0),
+			hover_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
 			border_color: drawing::Color::new(0.0, 0.0, 0.0, 1.0),
+			hover_border_color: drawing::Color::new(0.25, 0.25, 0.25, 1.0),
 			round: WLength::Units(4.0),
 			style: Default::default(),
 			text_style: TextStyle::default(),
@@ -52,8 +56,9 @@ struct State {
 
 struct Data {
 	initial_color: drawing::Color,
-	initial_color2: drawing::Color,
 	initial_border_color: drawing::Color,
+	initial_hover_color: drawing::Color,
+	initial_hover_border_color: drawing::Color,
 	id_label: WidgetID, // Label
 	id_rect: WidgetID,  // Rectangle
 	node_label: taffy::NodeId,
@@ -97,18 +102,21 @@ fn get_color2(color: &drawing::Color) -> drawing::Color {
 }
 
 fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool) {
-	let brightness = pos * if pressed { 0.75 } else { 0.5 };
+	let mult = pos * if pressed { 1.25 } else { 1.0 };
-	let border_brightness = pos;
+	let bgcolor = data.initial_color.lerp(&data.initial_hover_color, mult);
-	rect.params.color = data.initial_color.add_rgb(brightness);
+
-	rect.params.color2 = data.initial_color2.add_rgb(brightness);
+	rect.params.color = bgcolor;
-	rect.params.border_color = data.initial_border_color.add_rgb(border_brightness);
+	rect.params.color2 = get_color2(&bgcolor);
+	rect.params.border_color = data
+		.initial_border_color
+		.lerp(&data.initial_hover_border_color, mult);
 	rect.params.border = 2.0;
 }
 
 fn anim_hover_in(data: Rc<Data>, state: Rc<RefCell<State>>, widget_id: WidgetID) -> Animation {
 	Animation::new(
 		widget_id,
-		5,
+		2,
 		AnimationEasing::OutQuad,
 		Box::new(move |common, anim_data| {
 			let rect = anim_data.obj.get_as_mut::<WidgetRectangle>();
@@ -297,8 +305,9 @@ pub fn construct<U1, U2>(
 		id_rect,
 		node_label,
 		initial_color: params.color,
-		initial_color2: get_color2(&params.color),
 		initial_border_color: params.border_color,
+		initial_hover_color: params.hover_color,
+		initial_hover_border_color: params.hover_border_color,
 	});
 
 	let state = Rc::new(RefCell::new(State {

wgui/src/parser/component_button.rs

@@ -18,6 +18,8 @@ pub fn parse_component_button<'a, U1, U2>(
 ) -> anyhow::Result<WidgetID> {
 	let mut color = Color::new(1.0, 1.0, 1.0, 1.0);
 	let mut border_color: Option<Color> = None;
+	let mut hover_color: Option<Color> = None;
+	let mut hover_border_color: Option<Color> = None;
 	let mut round = WLength::Units(4.0);
 	let mut translation = Translation::default();
 
@@ -42,6 +44,12 @@ pub fn parse_component_button<'a, U1, U2>(
 			"border_color" => {
 				parse_color_opt(&value, &mut border_color);
 			}
+			"hover_color" => {
+				parse_color_opt(&value, &mut hover_color);
+			}
+			"hover_border_color" => {
+				parse_color_opt(&value, &mut hover_border_color);
+			}
 			_ => {}
 		}
 	}
@@ -55,6 +63,14 @@ pub fn parse_component_button<'a, U1, U2>(
 		));
 	}
 
+	if hover_color.is_none() {
+		hover_color = Some(color.add_rgb(0.5));
+	}
+
+	if hover_border_color.is_none() {
+		hover_border_color = Some(border_color.unwrap().add_rgb(0.75));
+	}
+
 	let (new_id, component) = button::construct(
 		ctx.layout,
 		ctx.listeners,
@@ -62,6 +78,8 @@ pub fn parse_component_button<'a, U1, U2>(
 		button::Params {
 			color,
 			border_color: border_color.unwrap(),
+			hover_border_color: hover_border_color.unwrap(),
+			hover_color: hover_color.unwrap(),
 			text: translation,
 			style,
 			text_style,