[gnome-themes-standard: 11/26] notebook: theme notebook tabs like in the mockups
- From: Cosimo Cecchi <cosimoc src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard: 11/26] notebook: theme notebook tabs like in the mockups
- Date: Fri, 4 Mar 2011 03:31:45 +0000 (UTC)
commit a71b9d4793d3e3bd8bddc6680f3915c0e9a7d9d3
Author: Cosimo Cecchi <cosimoc gnome org>
Date: Thu Mar 3 01:53:49 2011 -0500
notebook: theme notebook tabs like in the mockups
There's a couple of things to mention:
- GtkNotebook should be able to resize the allocation of its page header
according to the 'tab-curvature' and 'tab-overlap' style properties,
in order not to make the action widget (or the label) overflow under
the next tab. When it does, we should use that feature to make
inactive tabs smaller and more tightly stacked.
- The left and right orientations do not let the theme choose the render
orientation of the label, and render the label horizontally, which
conflicts with this design, so we let the GTK+ default handler render
that, as no sane applications seem to use that; or maybe we need an
updated design?
src/adwaita_engine.c | 143 ++++++++++++++++++++++++++++++++++++++++
themes/Adwaita/gtk-3.0/gtk.css | 24 +++++--
2 files changed, 159 insertions(+), 8 deletions(-)
---
diff --git a/src/adwaita_engine.c b/src/adwaita_engine.c
index 417acd1..94b2674 100644
--- a/src/adwaita_engine.c
+++ b/src/adwaita_engine.c
@@ -527,6 +527,137 @@ adwaita_engine_render_option (GtkThemingEngine *engine,
}
static void
+draw_tab_arcs (cairo_t *cr,
+ gdouble curve_width,
+ gdouble x,
+ gdouble y,
+ gdouble width,
+ gdouble height)
+{
+ cairo_arc (cr,
+ curve_width, 5.0,
+ 2.5,
+ G_PI, G_PI + G_PI_2);
+
+ cairo_arc (cr,
+ width - curve_width, 5.0,
+ 2.5,
+ G_PI + G_PI_2, 2 * G_PI);
+}
+
+static void
+draw_tab_shape_active (cairo_t *cr,
+ gdouble curve_width,
+ gdouble x,
+ gdouble y,
+ gdouble width,
+ gdouble height)
+{
+ cairo_move_to (cr, 0, height);
+
+ draw_tab_arcs (cr, curve_width, x, y, width, height);
+
+ cairo_line_to (cr, width, height);
+}
+
+static void
+render_notebook_extension (GtkThemingEngine *engine,
+ cairo_t *cr,
+ gdouble x,
+ gdouble y,
+ gdouble width,
+ gdouble height,
+ GtkPositionType gap_side)
+{
+ gint tab_curvature;
+ GdkRGBA *color, *notebook_border_color, border_color, background_color;
+ GtkStateFlags state;
+ gdouble angle = 0;
+ cairo_pattern_t *pattern = NULL, *background_pattern = NULL;
+ cairo_matrix_t matrix;
+
+ gtk_theming_engine_get_style (engine,
+ "tab-curvature", &tab_curvature,
+ NULL);
+ state = gtk_theming_engine_get_state (engine);
+ gtk_theming_engine_get_background_color (engine, state, &background_color);
+ gtk_theming_engine_get_border_color (engine, state, &border_color);
+ gtk_theming_engine_get (engine, state,
+ "-adwaita-selected-tab-color", &color,
+ "-adwaita-notebook-border-color", ¬ebook_border_color,
+ "background-image", &background_pattern,
+ NULL);
+
+ cairo_save (cr);
+ cairo_set_line_width (cr, 1.0);
+
+ if (gap_side == GTK_POS_TOP) {
+ angle = G_PI;
+ cairo_translate (cr, width, height);
+ }
+
+ cairo_translate (cr, x, y);
+ cairo_rotate (cr, angle);
+
+ draw_tab_shape_active (cr, tab_curvature, 0, 0, width, height);
+
+ if (background_pattern != NULL) {
+ cairo_matrix_init_scale (&matrix,
+ 1. / width,
+ 1. / height);
+ cairo_pattern_set_matrix (background_pattern, &matrix);
+ cairo_set_source (cr, background_pattern);
+ } else {
+ gdk_cairo_set_source_rgba (cr, &background_color);
+ }
+
+ cairo_fill (cr);
+
+ if (state & GTK_STATE_FLAG_ACTIVE) {
+ draw_tab_shape_active (cr, tab_curvature, 0, 0, width, 5.0);
+ gdk_cairo_set_source_rgba (cr, color);
+ cairo_fill (cr);
+ }
+
+ draw_tab_shape_active (cr, tab_curvature, 0, 0, width, height);
+
+ if (state & GTK_STATE_FLAG_ACTIVE) {
+ pattern = cairo_pattern_create_linear (0, height, 0, 0);
+ cairo_pattern_set_extend (pattern, CAIRO_EXTEND_REPEAT);
+ cairo_pattern_add_color_stop_rgba (pattern, 0.0,
+ notebook_border_color->red,
+ notebook_border_color->green,
+ notebook_border_color->blue,
+ notebook_border_color->alpha);
+
+ cairo_pattern_add_color_stop_rgba (pattern, 1.0,
+ border_color.red,
+ border_color.green,
+ border_color.blue,
+ border_color.alpha);
+
+ cairo_set_source (cr, pattern);
+ } else {
+ gdk_cairo_set_source_rgba (cr, &border_color);
+ }
+
+ cairo_stroke (cr);
+
+ gdk_rgba_free (color);
+ gdk_rgba_free (notebook_border_color);
+
+ if (pattern != NULL) {
+ cairo_pattern_destroy (pattern);
+ }
+
+ if (background_pattern != NULL) {
+ cairo_pattern_destroy (background_pattern);
+ }
+
+ cairo_restore (cr);
+}
+
+static void
adwaita_engine_render_extension (GtkThemingEngine *engine,
cairo_t *cr,
gdouble x,
@@ -537,6 +668,13 @@ adwaita_engine_render_extension (GtkThemingEngine *engine,
{
GtkStateFlags state;
+ if (gtk_theming_engine_has_class (engine, GTK_STYLE_CLASS_NOTEBOOK) &&
+ ((gap_side == GTK_POS_TOP) || (gap_side == GTK_POS_BOTTOM))) {
+ render_notebook_extension (engine, cr, x, y, width, height, gap_side);
+
+ return;
+ }
+
GTK_THEMING_ENGINE_CLASS (adwaita_engine_parent_class)->render_extension (engine, cr,
x, y, width, height,
gap_side);
@@ -1129,6 +1267,11 @@ adwaita_engine_class_init (AdwaitaEngineClass *klass)
"Selected tab color",
"Selected tab color",
GDK_TYPE_RGBA, 0));
+ gtk_theming_engine_register_property (ADWAITA_NAMESPACE, NULL,
+ g_param_spec_boxed ("notebook-border-color",
+ "Notebook border color",
+ "Notebook border color",
+ GDK_TYPE_RGBA, 0));
}
static void
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index a3b20ec..d12de6a 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -70,7 +70,8 @@
@define-color highlighted_border #8a8f8a;
@define-color internal_element_color #888a85;
- define-color notebook_border #918e8a;
+ define-color notebook_border #a6a6a6;
+ define-color notebook_active_tab_border #1372d3;
@define-color toolbar_gradient_base #aaaa9e;
@define-color toolbar_gradient_step1 #bcbcb4;
@@ -230,26 +231,33 @@ GtkScale {
background-color: @theme_selected_bg_color;
}
-/* Notebooks/Tabs */
-
+/*****************
+ * Notebooks and *
+ * tabs *
+ *****************/
.notebook {
- -adwaita-selected-tab-color: shade (@theme_selected_bg_color, 1.33);
background-color: shade (@theme_bg_color, 1.12);
border-color: @notebook_border;
padding: 2;
border-style: solid;
border-radius: 0;
- -GtkNotebook-tab-overlay: 10;
- -GtkNotebook-tab-curvature: 5;
+ -GtkNotebook-tab-overlap: 6;
+ -GtkNotebook-tab-curvature: 6;
}
.notebook tab {
- padding: 3;
- border-radius: 2;
+ background-image: -gtk-gradient (linear,
+ left top, left bottom,
+ from (@theme_base_color),
+ to (@switch_slider_color));
}
.notebook tab:active {
+ -adwaita-selected-tab-color: #8dc0f3;
+ -adwaita-notebook-border-color: @notebook_border;
+ border-color: @notebook_active_tab_border;
background-color: @theme_base_color;
+ background-image: none;
}
/**************
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]