Commit dd7c65a9 authored by Benjamin Otte's avatar Benjamin Otte

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.
parent a6f935bb
...@@ -1627,82 +1627,57 @@ gtk_scrolled_window_draw_overshoot (GtkScrolledWindow *scrolled_window, ...@@ -1627,82 +1627,57 @@ gtk_scrolled_window_draw_overshoot (GtkScrolledWindow *scrolled_window,
cairo_t *cr) cairo_t *cr)
{ {
GtkWidget *widget = GTK_WIDGET (scrolled_window); GtkWidget *widget = GTK_WIDGET (scrolled_window);
GtkAllocation relative_allocation;
gint overshoot_x, overshoot_y; gint overshoot_x, overshoot_y;
cairo_pattern_t *pattern;
GtkStyleContext *context; GtkStyleContext *context;
cairo_matrix_t matrix;
GdkRectangle rect; GdkRectangle rect;
gdouble percent;
GdkRGBA color;
if (!_gtk_scrolled_window_get_overshoot (scrolled_window, &overshoot_x, &overshoot_y)) if (!_gtk_scrolled_window_get_overshoot (scrolled_window, &overshoot_x, &overshoot_y))
return; return;
gtk_scrolled_window_relative_allocation (widget, &relative_allocation);
context = gtk_widget_get_style_context (widget); 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_save (context);
gtk_style_context_add_class (context, GTK_STYLE_CLASS_OVERSHOOT); 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)
{
percent = CLAMP (ABS ((gdouble) overshoot_x) / MAX_OVERSHOOT_DISTANCE, 0, 1);
rect = relative_allocation;
rect.width = MAX_OVERSHOOT_DISTANCE;
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);
if (overshoot_x > 0) if (overshoot_x > 0)
{ {
rect.x += relative_allocation.width - MAX_OVERSHOOT_DISTANCE; gtk_style_context_add_class (context, GTK_STYLE_CLASS_RIGHT);
cairo_matrix_translate (&matrix, relative_allocation.width, 0);
cairo_matrix_rotate (&matrix, G_PI);
}
cairo_pattern_set_matrix (pattern, &matrix);
gdk_cairo_rectangle (cr, &rect); gtk_render_background (context, cr, rect.x + rect.width - overshoot_x, rect.y, overshoot_x, rect.height);
cairo_set_source (cr, pattern); gtk_render_frame (context, cr, rect.x + rect.width - overshoot_x, rect.y, overshoot_x, rect.height);
cairo_fill (cr); }
else if (overshoot_x < 0)
{
gtk_style_context_add_class (context, GTK_STYLE_CLASS_LEFT);
cairo_pattern_destroy (pattern); 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_y != 0) gtk_style_context_restore (context);
{
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); gtk_style_context_save (context);
cairo_pattern_add_color_stop_rgba (pattern, 0, color.red, color.green, color.blue, color.alpha * percent); gtk_style_context_add_class (context, GTK_STYLE_CLASS_OVERSHOOT);
cairo_pattern_add_color_stop_rgba (pattern, percent, color.red, color.green, color.blue, 0);
cairo_matrix_init_identity (&matrix);
if (overshoot_y > 0) if (overshoot_y > 0)
{ {
rect.y += relative_allocation.height - MAX_OVERSHOOT_DISTANCE; gtk_style_context_add_class (context, GTK_STYLE_CLASS_BOTTOM);
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); gtk_render_background (context, cr, rect.x, rect.y + rect.height - overshoot_y, rect.width, overshoot_y);
gdk_cairo_rectangle (cr, &rect); gtk_render_frame (context, cr, rect.x, rect.y + rect.height - overshoot_y, rect.width, overshoot_y);
cairo_fill (cr); }
else if (overshoot_y < 0)
{
gtk_style_context_add_class (context, GTK_STYLE_CLASS_TOP);
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 static gboolean
......
...@@ -119,12 +119,28 @@ ...@@ -119,12 +119,28 @@
background-color: transparentize($selected_bg_color,0.8); background-color: transparentize($selected_bg_color,0.8);
} }
// This is used by GtkScrolledWindow, when rendering the edge // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
// 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.
.overshoot { .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 { GtkLabel {
......
...@@ -75,8 +75,22 @@ ...@@ -75,8 +75,22 @@
border: 1px solid #215d9c; border: 1px solid #215d9c;
background-color: rgba(33, 93, 156, 0.2); } background-color: rgba(33, 93, 156, 0.2); }
.overshoot { .overshoot.top {
background-color: rgba(33, 93, 156, 0.2); } 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, GtkLabel.separator, .sidebar GtkLabel.separator:backdrop,
.sidebar .view GtkLabel.separator:backdrop { .sidebar .view GtkLabel.separator:backdrop {
...@@ -4167,6 +4181,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected { ...@@ -4167,6 +4181,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
.context-menu { .context-menu {
font: initial; } font: initial; }
/* Decouple the font of context menus from their entry/textview */
.context-menu {
font: initial; }
/* GTK NAMED COLORS */ /* GTK NAMED COLORS */
@define-color theme_fg_color #eeeeec; @define-color theme_fg_color #eeeeec;
@define-color theme_bg_color #393f3f; @define-color theme_bg_color #393f3f;
......
...@@ -75,8 +75,22 @@ ...@@ -75,8 +75,22 @@
border: 1px solid #4a90d9; border: 1px solid #4a90d9;
background-color: rgba(74, 144, 217, 0.2); } background-color: rgba(74, 144, 217, 0.2); }
.overshoot { .overshoot.top {
background-color: rgba(74, 144, 217, 0.2); } 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, GtkLabel.separator, .sidebar GtkLabel.separator:backdrop,
.sidebar .view GtkLabel.separator:backdrop { .sidebar .view GtkLabel.separator:backdrop {
...@@ -4329,6 +4343,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected { ...@@ -4329,6 +4343,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
.context-menu { .context-menu {
font: initial; } font: initial; }
/* Decouple the font of context menus from their entry/textview */
.context-menu {
font: initial; }
/* GTK NAMED COLORS */ /* GTK NAMED COLORS */
@define-color theme_fg_color #2e3436; @define-color theme_fg_color #2e3436;
@define-color theme_bg_color #ededed; @define-color theme_bg_color #ededed;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment