Styling of the border and text of the action button. A dark variant is available.

[endlessm/eos-sdk#104]

3 files changed, 119 insertions, 35 deletions

diff --git a/endless/eosactionbutton.c b/endless/eosactionbutton.c
index 148cd2b..0540f5b 100644
--- a/endless/eosactionbutton.c
+++ b/endless/eosactionbutton.c
@@ -595,7 +595,7 @@ eos_action_button_draw (GtkWidget *widget,
   GtkAllocation allocation;
   GtkStyleContext *context;
   GtkStateFlags state;
-  gint width, height, border_width, border_height;
+  gint width, border_width, border_height, border_thickness;
   GtkBorder margin;
 
   context = gtk_widget_get_style_context (widget);
@@ -615,28 +615,33 @@ eos_action_button_draw (GtkWidget *widget,
   x = 0;
   y = 0;
   width = allocation.width;
-  height = allocation.height;
 
   border_width = icon_sizes[priv->size].width;
   border_height = icon_sizes[priv->size].height;
+  border_thickness = icon_sizes[priv->size].border_width;
 
   cairo_save (cr);
 
   gtk_render_frame (context, cr,
                     x + (width - border_width)/2,
-                    margin.top,
+                    y + margin.top,
                     border_width, border_height);
 
-  if (gtk_widget_has_visible_focus (widget))
-    {
-      gtk_render_focus (context, cr,
-                        x, y, width, height);
-    }
-
   // TODO is it really needed to restore and save the cairo_t here?
   cairo_restore (cr);
   cairo_save (cr);
 
+  // GTK+ tries to paint the background inside the border, we work around this
+  //because we want to draw the inset shadow over the border itself
+  gtk_render_background (context, cr,
+                         x + (width - border_width)/2 - border_thickness,
+                         y + margin.top - border_thickness,
+                         border_width + 2*border_thickness,
+                         border_height + 2*border_thickness);
+
+  cairo_restore (cr);
+  cairo_save (cr);
+
   // *** image
 
   gtk_widget_get_allocation (priv->icon_image, &allocation);
diff --git a/test/smoke-tests/action-buttons.js b/test/smoke-tests/action-buttons.js
index 7fe046b..cc8534b 100644
--- a/test/smoke-tests/action-buttons.js
+++ b/test/smoke-tests/action-buttons.js
@@ -15,7 +15,22 @@ const TestApplication = new Lang.Class ({
 
         this._page = new Gtk.Grid ();
         
-        this._content = new Gtk.Label ({name: 'content', label: 'Content'});
+        this._content = new Gtk.Grid ({
+            hexpand: true,
+            halign: Gtk.Align.CENTER,
+            vexpand: true,
+            valign: Gtk.Align.CENTER});
+
+        this._darkSwitch = new Gtk.Switch ({active: false});
+        this._darkSwitch.connect ('notify::active', Lang.bind (this, function (active) {
+            if (this._darkSwitch.get_active()) {
+                this._menu_panel.get_style_context().add_class('dark');
+            } else {
+                this._menu_panel.get_style_context().remove_class('dark');
+            }
+        }));
+        this._content.add(new Gtk.Label ({label: 'Dark action menu'}), 0, 0, 1, 1);
+        this._content.add(this._darkSwitch, 0, 1, 1, 1);
         
         this._menu = new Endless.ActionMenu ();
         
diff --git a/test/smoke-tests/eosactionbutton.css b/test/smoke-tests/eosactionbutton.css
index e4a8267..e6bb8e7 100644
--- a/test/smoke-tests/eosactionbutton.css
+++ b/test/smoke-tests/eosactionbutton.css
@@ -2,71 +2,135 @@
 
 EosActionButton {
 	background-color: transparent;
-	border-color: #012345;
-	border-radius: 32px;
-	border-width: 8px;
 	border-style: solid;
 	margin: 10px;
+
+	border-radius: 40px;
+	border-width: 8px;
+}
+
+EosActionButton GtkLabel {
+	font-family: BentonSans, sans-serif;
+	font-weight: normal;
+	font-size: 11px;
 }
 
 /* ****** SIZES ****** */
 
 EosActionButton.primary {
-	border-radius: 32px;
+	border-radius: 40px;
 	border-width: 8px;
 }
 
 EosActionButton.secondary {
-	border-radius: 24px;
+	border-radius: 30px;
 	border-width: 6px;
 }
 
 EosActionButton.tertiary {
-	border-radius: 18px;
+	border-radius: 23px;
 	border-width: 5px;
 }
 
 EosActionButton.quaternary {
-	border-radius: 13px;
+	border-radius: 17px;
 	border-width: 4px;
 }
 
-/* ****** STATES ****** */
+/* ****** LIGHT BACKGROUND ****** */
 
-EosActionButton:active {
-	border-color: #123456;
+/* normal */
+EosActionButton,
+EosActionButton:selected,
+EosActionButton:focused {
+	border-color: alpha(#323232, 0.5);
+	box-shadow: 1px 1px 1px alpha(black, 0.8) inset,
+	            0px -1px 1px alpha(white, 0.65);
 }
 
-EosActionButton:hover {
-	border-color: #234567;
+EosActionButton GtkLabel,
+EosActionButton:selected GtkLabel,
+EosActionButton:focused GtkLabel {
+	color: alpha(#323232, 0.65);
 }
 
-EosActionButton:insensitive {
-	border-color: #345678;
+/* hover */
+EosActionButton:hover {
+	border-color: alpha(#323232, 0.8);
+	box-shadow: 1px 1px 1px alpha(black, 0.8) inset;
 }
 
-EosActionButton:selected {
-	border-color: #456789;
+EosActionButton:hover GtkLabel {
+	color: alpha(#1E1E1E, 0.8);
 }
 
-EosActionButton:focused {
-	border-color: #56789A;
+/* pressed */
+EosActionButton:active {
+	border-color: alpha(#323232, 0.65);
+	box-shadow: 1px 1px 1px alpha(black, 0.8) inset;
+}	
+
+EosActionButton:active {
+	color: alpha(#1E1E1E, 0.8);
 }
 
+/* insensitive, just in case */
+EosActionButton:insensitive,
 EosActionButton:inconsistent {
-	border-color: #6789AB;
+	border-color: alpha(#888888, 0.50);
+	box-shadow: none;
+}
+
+/* ****** DARK BACKGROUND ****** */
+
+
+/* normal */
+.dark EosActionButton,
+.dark EosActionButton:selected,
+.dark EosActionButton:focused {
+	border-color: alpha(#E6E6E6, 0.5);
+	box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+	            0px -1px 1px alpha(white, 0.5) inset;
+}
+
+.dark EosActionButton GtkLabel,
+.dark EosActionButton:selected GtkLabel,
+.dark EosActionButton:focused GtkLabel {
+	color: alpha(#E6E6E6, 0.5);
+}
+
+/* hover */
+.dark EosActionButton:hover {
+	border-color: alpha(white, 0.8);
+	box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+	            0px -1px 1px alpha(white, 0.85) inset;
+}
+
+.dark EosActionButton:hover GtkLabel {
+	color: alpha(white, 0.8);
+	font-style: italic;
+}
+
+/* pressed */
+.dark EosActionButton:active {
+	border-color: alpha(white, 0.65);
+	box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+	            0px -1px 1px alpha(white, 0.7) inset;
+}	
+
+.dark EosActionButton:active {
+	color: alpha(white, 0.8);
 }
 
 /* ****** ACTION MENU ****** */
 
 GtkFrame#menu {
-	background-color: #D3D7CF;
-	border-color: #E1E2DE;
+	background-color: mix(white, black, 0.2);
+	border-color: mix(white, black, 0.5);
 	border-width: 0 0 0 6px;
 }
 
-GtkLabel#content {
-	color: #BABDB6;
-	font-size: 48pt;
-	background: #EEEEEC;
+GtkFrame.dark#menu {
+	background-color: mix(white, black, 0.8);
+	border-width: 0 0 0 6px;
 }