[gtk+] scrolledwindow: Rewrite overshoot code with regular styling
- From: Benjamin Otte <otte src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] scrolledwindow: Rewrite overshoot code with regular styling
- Date: Fri, 3 Oct 2014 04:21:37 +0000 (UTC)
commit dd7c65a95a37050e84546259fb08ea16974fc5c5
Author: Benjamin Otte <otte redhat com>
Date: Thu Oct 2 15:38:32 2014 +0200
scrolledwindow: Rewrite overshoot code with regular styling
Instead of drawing a gradient in the background color, draw a CSS box.
And change the theme so instead of setting just a background color it
draws a gradient.
The resulting visuals are the same.
gtk/gtkscrolledwindow.c | 83 +++++++-------------
gtk/resources/theme/Adwaita/_common.scss | 26 +++++-
gtk/resources/theme/Adwaita/gtk-contained-dark.css | 22 +++++-
gtk/resources/theme/Adwaita/gtk-contained.css | 22 +++++-
4 files changed, 90 insertions(+), 63 deletions(-)
---
diff --git a/gtk/gtkscrolledwindow.c b/gtk/gtkscrolledwindow.c
index 2902c92..875aff2 100644
--- a/gtk/gtkscrolledwindow.c
+++ b/gtk/gtkscrolledwindow.c
@@ -1627,82 +1627,57 @@ gtk_scrolled_window_draw_overshoot (GtkScrolledWindow *scrolled_window,
cairo_t *cr)
{
GtkWidget *widget = GTK_WIDGET (scrolled_window);
- GtkAllocation relative_allocation;
gint overshoot_x, overshoot_y;
- cairo_pattern_t *pattern;
GtkStyleContext *context;
- cairo_matrix_t matrix;
GdkRectangle rect;
- gdouble percent;
- GdkRGBA color;
if (!_gtk_scrolled_window_get_overshoot (scrolled_window, &overshoot_x, &overshoot_y))
return;
- gtk_scrolled_window_relative_allocation (widget, &relative_allocation);
-
context = gtk_widget_get_style_context (widget);
+ gtk_scrolled_window_relative_allocation (widget, &rect);
+ overshoot_x = CLAMP (overshoot_x, - MAX_OVERSHOOT_DISTANCE, MAX_OVERSHOOT_DISTANCE);
+ overshoot_y = CLAMP (overshoot_y, - MAX_OVERSHOOT_DISTANCE, MAX_OVERSHOOT_DISTANCE);
+
gtk_style_context_save (context);
gtk_style_context_add_class (context, GTK_STYLE_CLASS_OVERSHOOT);
- gtk_style_context_get_background_color (context,
- gtk_widget_get_state_flags (widget),
- &color);
- gtk_style_context_restore (context);
+ if (overshoot_x > 0)
+ {
+ gtk_style_context_add_class (context, GTK_STYLE_CLASS_RIGHT);
- if (overshoot_x != 0)
+ gtk_render_background (context, cr, rect.x + rect.width - overshoot_x, rect.y, overshoot_x,
rect.height);
+ gtk_render_frame (context, cr, rect.x + rect.width - overshoot_x, rect.y, overshoot_x, rect.height);
+ }
+ else if (overshoot_x < 0)
{
- percent = CLAMP (ABS ((gdouble) overshoot_x) / MAX_OVERSHOOT_DISTANCE, 0, 1);
- rect = relative_allocation;
- rect.width = MAX_OVERSHOOT_DISTANCE;
+ gtk_style_context_add_class (context, GTK_STYLE_CLASS_LEFT);
- pattern = cairo_pattern_create_linear (0, 0, MAX_OVERSHOOT_DISTANCE, 0);
- cairo_pattern_add_color_stop_rgba (pattern, 0, color.red, color.green, color.blue, color.alpha *
percent);
- cairo_pattern_add_color_stop_rgba (pattern, percent, color.red, color.green, color.blue, 0);
- cairo_matrix_init_identity (&matrix);
+ gtk_render_background (context, cr, rect.x, rect.y, -overshoot_x, rect.height);
+ gtk_render_frame (context, cr, rect.x, rect.y, -overshoot_x, rect.height);
+ }
- if (overshoot_x > 0)
- {
- rect.x += relative_allocation.width - MAX_OVERSHOOT_DISTANCE;
- cairo_matrix_translate (&matrix, relative_allocation.width, 0);
- cairo_matrix_rotate (&matrix, G_PI);
- }
+ gtk_style_context_restore (context);
- cairo_pattern_set_matrix (pattern, &matrix);
+ gtk_style_context_save (context);
+ gtk_style_context_add_class (context, GTK_STYLE_CLASS_OVERSHOOT);
- gdk_cairo_rectangle (cr, &rect);
- cairo_set_source (cr, pattern);
- cairo_fill (cr);
+ if (overshoot_y > 0)
+ {
+ gtk_style_context_add_class (context, GTK_STYLE_CLASS_BOTTOM);
- cairo_pattern_destroy (pattern);
+ gtk_render_background (context, cr, rect.x, rect.y + rect.height - overshoot_y, rect.width,
overshoot_y);
+ gtk_render_frame (context, cr, rect.x, rect.y + rect.height - overshoot_y, rect.width, overshoot_y);
}
-
- if (overshoot_y != 0)
+ else if (overshoot_y < 0)
{
- percent = CLAMP (ABS ((gdouble) overshoot_y) / MAX_OVERSHOOT_DISTANCE, 0, 1);
- rect = relative_allocation;
- rect.height = MAX_OVERSHOOT_DISTANCE;
-
- pattern = cairo_pattern_create_linear (0, 0, 0, MAX_OVERSHOOT_DISTANCE);
- cairo_pattern_add_color_stop_rgba (pattern, 0, color.red, color.green, color.blue, color.alpha *
percent);
- cairo_pattern_add_color_stop_rgba (pattern, percent, color.red, color.green, color.blue, 0);
- cairo_matrix_init_identity (&matrix);
+ gtk_style_context_add_class (context, GTK_STYLE_CLASS_TOP);
- if (overshoot_y > 0)
- {
- rect.y += relative_allocation.height - MAX_OVERSHOOT_DISTANCE;
- cairo_matrix_translate (&matrix, 0, relative_allocation.height);
- cairo_matrix_rotate (&matrix, G_PI);
- }
-
- cairo_pattern_set_matrix (pattern, &matrix);
-
- cairo_set_source (cr, pattern);
- gdk_cairo_rectangle (cr, &rect);
- cairo_fill (cr);
-
- cairo_pattern_destroy (pattern);
+ gtk_render_background (context, cr, rect.x, rect.y, rect.width, -overshoot_y);
+ gtk_render_frame (context, cr, rect.x, rect.y, rect.width, -overshoot_y);
}
+
+ gtk_style_context_restore (context);
}
static gboolean
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 0704773..070b93c 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -119,12 +119,28 @@
background-color: transparentize($selected_bg_color,0.8);
}
-// This is used by GtkScrolledWindow, when rendering the edge
-// gradient shown when content is touch-dragged past boundaries.
-// The color is used as a base for such gradient, which is then
-// stretched/modified as a direct result of user interaction.
+// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
.overshoot {
- background-color: transparentize($selected_bg_color,0.8);
+ &.top {
+ background: linear-gradient(to top, transparentize($selected_bg_color,1),
transparentize($selected_bg_color,0.8));
+ background-size: auto 100px;
+ background-position: center 100%;
+ }
+ &.bottom {
+ background: linear-gradient(to bottom, transparentize($selected_bg_color,1),
transparentize($selected_bg_color,0.8));
+ background-size: auto 100px;
+ background-position: center 0%;
+ }
+ &.left {
+ background: linear-gradient(to left, transparentize($selected_bg_color,1),
transparentize($selected_bg_color,0.8));
+ background-size: 100px auto;
+ background-position: 100% center;
+ }
+ &.right {
+ background: linear-gradient(to right, transparentize($selected_bg_color,1),
transparentize($selected_bg_color,0.8));
+ background-size: 100px auto;
+ background-position: 0% center;
+ }
}
GtkLabel {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 8160a3f..a3ed6aa 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -75,8 +75,22 @@
border: 1px solid #215d9c;
background-color: rgba(33, 93, 156, 0.2); }
-.overshoot {
- background-color: rgba(33, 93, 156, 0.2); }
+.overshoot.top {
+ background: linear-gradient(to top, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+ background-size: auto 100px;
+ background-position: center 100%; }
+.overshoot.bottom {
+ background: linear-gradient(to bottom, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+ background-size: auto 100px;
+ background-position: center 0%; }
+.overshoot.left {
+ background: linear-gradient(to left, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+ background-size: 100px auto;
+ background-position: 100% center; }
+.overshoot.right {
+ background: linear-gradient(to right, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+ background-size: 100px auto;
+ background-position: 0% center; }
GtkLabel.separator, .sidebar GtkLabel.separator:backdrop,
.sidebar .view GtkLabel.separator:backdrop {
@@ -4167,6 +4181,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
.context-menu {
font: initial; }
+/* Decouple the font of context menus from their entry/textview */
+.context-menu {
+ font: initial; }
+
/* GTK NAMED COLORS */
@define-color theme_fg_color #eeeeec;
@define-color theme_bg_color #393f3f;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 49f5d12..9a81aeb 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -75,8 +75,22 @@
border: 1px solid #4a90d9;
background-color: rgba(74, 144, 217, 0.2); }
-.overshoot {
- background-color: rgba(74, 144, 217, 0.2); }
+.overshoot.top {
+ background: linear-gradient(to top, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+ background-size: auto 100px;
+ background-position: center 100%; }
+.overshoot.bottom {
+ background: linear-gradient(to bottom, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+ background-size: auto 100px;
+ background-position: center 0%; }
+.overshoot.left {
+ background: linear-gradient(to left, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+ background-size: 100px auto;
+ background-position: 100% center; }
+.overshoot.right {
+ background: linear-gradient(to right, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+ background-size: 100px auto;
+ background-position: 0% center; }
GtkLabel.separator, .sidebar GtkLabel.separator:backdrop,
.sidebar .view GtkLabel.separator:backdrop {
@@ -4329,6 +4343,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
.context-menu {
font: initial; }
+/* Decouple the font of context menus from their entry/textview */
+.context-menu {
+ font: initial; }
+
/* GTK NAMED COLORS */
@define-color theme_fg_color #2e3436;
@define-color theme_bg_color #ededed;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]