From 65e09c723afc2087eef3d78b4061f45acfffabd2 Mon Sep 17 00:00:00 2001
From: Simon Hausmann <simon.hausmann@sixtyfps.io>
Date: Tue, 24 Nov 2020 22:12:17 +0100
Subject: [PATCH] Use hover effects in the ugly style

Use a darker shade between the unpressed and the pressed shade when hovering
over controls that can be activated.
---
 sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60 | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60 b/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60
index 27fc4a050..25d4e32da 100644
--- a/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60
+++ b/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60
@@ -14,7 +14,8 @@ global Palette := {
     property<color> text_color_disabled: lightgray;
     property<color> text_color_secondary: #111;
     property<color> button_background: #aaa;
-    property<color> button_pressed: #9c9c9c;
+    property<color> button_hover: #8c8c8c;
+    property<color> button_pressed: #575757;
     property<color> highlight_background: #2b60ae;
     property<color> placeholder_text: #ccc;
     property<color> border_color: #d0d3cf;
@@ -37,7 +38,7 @@ export Button := Rectangle {
     border_width: 1px;
     border_radius: 2px;
     border_color: Palette.text_color;
-    color: self.pressed ? Palette.button_pressed : Palette.button_background;
+    color: self.pressed ? Palette.button_pressed : (touch_area.has_hover ? Palette.button_hover : Palette.button_background);
     animate color { duration: 100ms; }
     horizontal-stretch: 0;
     vertical-stretch: 0;
@@ -131,7 +132,7 @@ SpinBoxButton := Rectangle {
     border_width: 1px;
     border_radius: 2px;
     border_color: black;
-    color: touch.pressed ? Palette.button_pressed : Palette.button_background;
+    color: touch.pressed ? Palette.button_pressed : (touch.has_hover ? Palette.button_hover : Palette.button_background);
     animate color { duration: 100ms; }
     touch := TouchArea {
         width: parent.width;
@@ -344,7 +345,7 @@ ScrollBar := Rectangle {
         height: horizontal ? parent.height : max <= 0phx ? 0phx : parent.height * (page_size / (max + page_size));
 
         border_radius: self.width / 2;
-        color: touch_area.pressed ? Palette.button_pressed : Palette.button_background;
+        color: touch_area.pressed ? Palette.button_pressed : (touch_area.has_hover ? Palette.button_hover : Palette.button_background);
         animate color { duration: 100ms; }
         x: !horizontal ? 0phx : (root.width - handle.width) * (new_value / max);
         y: horizontal ? 0phx : (root.height - handle.height) * (new_value / max);
@@ -444,7 +445,7 @@ export ComboBox := Rectangle {
     border_width: 1px;
     border_radius: 2px;
     border_color: Palette.text_color;
-    color: touch_area.pressed ? Palette.button_pressed : Palette.button_background;
+    color: touch_area.pressed ? Palette.button_pressed : (touch_area.has_hover ? Palette.button_hover : Palette.button_background);
     animate color { duration: 100ms; }
     horizontal-stretch: 0;
     vertical-stretch: 0;