GNOME.org
 

[gnome-themes-standard: 9/26] adwaita: theme menus according to mockups

commit 85821993cdec8d99b76084db5c3d31c0ac4eb52e
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Wed Mar 2 20:01:08 2011 -0500

    adwaita: theme menus according to mockups

 src/adwaita_engine.c           |  135 +++++++++++++++++++++++++++++++++++++++-
 themes/Adwaita/gtk-3.0/gtk.css |   97 +++++++++++++++-------------
 2 files changed, 185 insertions(+), 47 deletions(-)
---
diff --git a/src/adwaita_engine.c b/src/adwaita_engine.c
index ce950ae..2b75ca4 100644
--- a/src/adwaita_engine.c
+++ b/src/adwaita_engine.c
@@ -629,6 +629,77 @@ adwaita_engine_render_extension (GtkThemingEngine *engine,
 }
 
 static void
+draw_menu_bar_item_shape (cairo_t *cr,
+			  gdouble radius,
+			  gdouble x,
+			  gdouble y,
+			  gdouble w,
+			  gdouble h,
+			  gboolean for_fill)
+{
+	/* draw a round rectangle without the bottom side */
+	cairo_move_to (cr, x+radius, y);
+	cairo_arc (cr, x+w-radius, y+radius, radius, G_PI * 1.5, G_PI * 2);
+	cairo_line_to (cr, x+w, y+h);
+
+	if (for_fill) {
+		cairo_line_to (cr, x, y+h);
+	} else {
+		cairo_move_to (cr, x, y+h);
+	}
+
+	cairo_arc (cr, x+radius, y+radius, radius, G_PI, G_PI * 1.5);
+}
+
+static void
+render_menubar_active_frame (GtkThemingEngine *engine,
+			     cairo_t          *cr,
+			     gdouble           x,
+			     gdouble           y,
+			     gdouble           w,
+			     gdouble           h)
+{
+	GtkStateFlags state;
+	GdkRGBA color;
+	gint radius, border_width;
+	GtkBorder *border;
+
+	state = gtk_theming_engine_get_state (engine);
+	gtk_theming_engine_get_border_color (engine, state, &color);
+	gtk_theming_engine_get (engine, state,
+				"border-radius", &radius,
+				"border-width", &border,
+				NULL);
+
+	border_width = MIN (MIN (border->top, border->bottom),
+			    MIN (border->left, border->right));
+
+	if (border_width > 1) {
+		x += (gdouble) border_width / 2;
+		y += (gdouble) border_width / 2;
+		w -= border_width;
+		h -= border_width;
+        } else if (border_width == 1) {
+		x += 0.5;
+		y += 0.5;
+		w -= 1;
+		h -= 1;
+        }
+
+	cairo_save (cr);
+
+	cairo_set_line_width (cr, border_width);
+	draw_menu_bar_item_shape (cr, radius, x, y, w, h, FALSE);
+
+	gdk_cairo_set_source_rgba (cr, &color);
+	cairo_stroke (cr);
+
+	cairo_restore (cr);
+
+	gtk_border_free (border);
+}
+
+static void
 adwaita_engine_render_frame (GtkThemingEngine *engine,
 			     cairo_t          *cr,
 			     gdouble           x,
@@ -639,16 +710,26 @@ adwaita_engine_render_frame (GtkThemingEngine *engine,
 	const GtkWidgetPath *path;
 	GtkRegionFlags flags = 0;
 	gint len;
+	GtkStateFlags state;	
 
+	state = gtk_theming_engine_get_state (engine);
+
+	if (gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_MENUITEM) &&
+	    gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_MENUBAR)) {
+		render_menubar_active_frame (engine, cr, x, y, width, height);
+
+		return;
+	}
+	
 	path = gtk_theming_engine_get_path (engine);
 	len = gtk_widget_path_length (path);
+
 	cairo_save (cr);
 
 	if (gtk_widget_path_iter_has_region (path, len - 2,
 					     GTK_STYLE_REGION_COLUMN_HEADER,
 					     &flags))
 	{
-		GtkStateFlags state;
 		GdkRGBA color;
 
 		if ((flags & GTK_REGION_LAST) != 0)
@@ -666,7 +747,6 @@ adwaita_engine_render_frame (GtkThemingEngine *engine,
 			cairo_line_to (cr, x + width - 0.5, y + height - 4);
 		}
 
-		state = gtk_theming_engine_get_state (engine);
 		gtk_theming_engine_get_border_color (engine, state, &color);
 
 		cairo_set_line_width (cr, 1);
@@ -699,6 +779,47 @@ adwaita_engine_render_frame (GtkThemingEngine *engine,
 }
 
 static void
+render_menubar_active_background (GtkThemingEngine *engine,
+				  cairo_t          *cr,
+				  gdouble           x,
+				  gdouble           y,
+				  gdouble           w,
+				  gdouble           h)
+{
+	GtkStateFlags state;
+	GdkRGBA color;
+	gint radius;
+	GtkBorder *border;
+
+	state = gtk_theming_engine_get_state (engine);
+	gtk_theming_engine_get_border_color (engine, state, &color);
+	gtk_theming_engine_get (engine, state,
+				"border-radius", &radius,
+				"border-width", &border,
+				NULL);
+
+	gtk_theming_engine_get_background_color (engine, state, &color);
+
+	/* omit all the border but the bottom line */
+	x += border->left;
+	y += border->top;
+	w -= border->left + border->right;
+	h -= border->top;
+
+	cairo_save (cr);
+	cairo_translate (cr, x, y);
+
+	draw_menu_bar_item_shape (cr, radius, 0, 0, w, h, TRUE);
+
+	gdk_cairo_set_source_rgba (cr, &color);
+	cairo_fill (cr);
+
+	cairo_restore (cr);
+
+	gtk_border_free (border);
+}
+
+static void
 adwaita_engine_render_background (GtkThemingEngine *engine,
 				  cairo_t          *cr,
 				  gdouble           x,
@@ -707,8 +828,18 @@ adwaita_engine_render_background (GtkThemingEngine *engine,
 				  gdouble           height)
 {
 	const GtkWidgetPath *path;
+	GtkStateFlags state;
+	GSList *classes, *l;
 
 	path = gtk_theming_engine_get_path (engine);
+	state = gtk_theming_engine_get_state (engine);
+
+	if (gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_MENUITEM) &&
+	    gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_MENUBAR)) {
+		render_menubar_active_background (engine, cr, x, y, width, height);
+
+		return;
+	}
 
 	if (gtk_widget_path_is_type (path, GTK_TYPE_SCALE) &&
 	    gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_TROUGH))
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index ac8c043..3fd8bf5 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -64,7 +64,9 @@
 @define-color selected_row_bg_color_b shade (@theme_selected_bg_color, 1.22);
 
 @define-color menu_fg_color #2e87e3;
- define-color menu_items_color #555753;
+ define-color menu_bg_color #729fcf;
+ define-color menu_controls_color #555753;
+
 @define-color highlighted_border #8a8f8a;
 @define-color internal_element_color #888a85;
 
@@ -104,8 +106,6 @@
     -GtkScrolledWindow-scrollbar-spacing: 0;
     -GtkScrolledWindow-scrollbars-within-bevel: 1;
 
-
-    -GtkMenuBar-internal-padding: 0;
     -GtkTreeView-expander-size: 10;
     -GtkToolItemGroup-expander-size: 12;
     -GtkExpander-expander-size: 12;
@@ -132,6 +132,7 @@
     -GtkEntry-progress-border: 0;
 
     -GtkSeparatorToolItem-shadow-type: none;
+    -GtkSeparator-shadow-type: none;
 
     /* Style */
     background-color: @theme_bg_color;
@@ -376,57 +377,80 @@ GtkScrollbar.button:insensitive {
  * Menus *
  *********/
 
+/* this controls the general appearance of the menubar */
 .menubar {
     background-image: -gtk-gradient (linear,
 				     left top, left bottom,
 				     from (@theme_bg_color),
 				     color-stop (0.45, shade (@theme_bg_color, 0.97)),
 				     to (shade (@theme_bg_color, 0,99));
+    border-width: 0;
     border-style: none;
     padding: 4;
-    border-width: 0;
 
     -GtkWidget-window-dragging: true;
+    -GtkMenuBar-internal-padding: 0;
 }
 
-.menu {
-    padding: -1;
-    background-color: shade (@theme_bg_color, 1.12);
+/* remove the image from the prelight areas */
+.menubar .menuitem:prelight {
+    background-image: none;
+    background-color: @theme_base_color;
+    color: @theme_text_color;
+
     border-style: solid;
+    border-radius: 3;
     border-width: 1;
-    border-color: shade (@theme_bg_color, 0.7);
-    border-radius: 0; /* No argb visuals by default 0, it would have been nice to have it something like 4*/
-    -GtkMenuItem-arrow-scaling: 0.4;
+    border-color: @inactive_frame_color;
 }
 
-.menu * {
+.menu {
     padding: 2;
+
+    background-color: @theme_base_color;
+
+    border-style: solid;
+    border-width: 1;
+    border-radius: 0;
+    border-color: @inactive_frame_color;
+
+    -GtkMenuItem-arrow-scaling: 0.4;
+
 }
 
-.menu *:active,
-.menu *:prelight,
-.menubar *:prelight {
-    background-image: -gtk-gradient (linear,
-				     left top,
-				     left bottom,
-				     from (shade (@theme_selected_bg_color, 1.3)),
-				     color-stop (0.05, shade (@theme_selected_bg_color, 0.95)),
-				     color-stop (0.4, @theme_selected_bg_color),
-				     to @theme_selected_bg_color);
-    /* background-color: @theme_selected_bg_color; */
+.menuitem:active,
+.menuitem:prelight {
+    background-color: @menu_bg_color;
     color: @theme_selected_fg_color;
     border-style: solid;
     border-width: 1;
-    border-radius: 0;
-    border-color: darker (@theme_selected_bg_color);
+    border-radius: 1;
+    border-color: darker (@menu_bg_color);
 }
 
-.menu.separator {
-    padding: 1 0;
+.menu .separator {
+    border-color: @inactive_frame_color;
+
     -GtkSeparatorMenuItem-horizontal-padding: 0;
     -GtkWidget-wide-separators: 1;
-    -GtkWidget-separator-width: 1;
-    -GtkWidget-separator-height: 7;
+    -GtkWidget-separator-height: 1;
+}
+
+/* menu radio and check items are drawn differently */
+.menu .check:active {
+    color: @menu_controls_color;
+}
+
+.menu .radio:active {
+    color: @menu_controls_color;
+}
+
+.menu .check:prelight {
+    color: @selected_fg_color;
+}
+
+.menu .radio:prelight {
+    color: @selected_fg_color;
 }
 
 /*************************
@@ -499,23 +523,6 @@ GtkScrollbar.button:insensitive {
     background-color: mix (shade (@highlighted_border, 1.345), @theme_base_color, 0.9);
 }
 
-/* menu radio and check items are drawn differently */
-.menu .check:active {
-    color: @menu_items_color;
-}
-
-.menu .radio:active {
-    color: @menu_items_color;
-}
-
-.menu .check:prelight {
-    color: @selected_fg_color;
-}
-
-.menu .radio:prelight {
-    color: @selected_fg_color;
-}
-
 GtkStatusbar {
     padding: 5;
     color: @theme_fg_color;
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]