[gtk+/scrollable-indicator: 1/3] Try adding a scrollable indication

[Matthias Clasen <matthiasc src gnome org>]

commit 12ee8c1968ffcb7f79723d089046432b56ead9f6
Author: Matthias Clasen <mclasen redhat com>
Date:   Wed Nov 5 08:08:51 2014 -0500

    Try adding a scrollable indication
    
    Draw a themable indication when an edge of a scrolled window
    is hiding some content that can be scrolled in.

 gtk/gtkscrolledwindow.c                  |   68 +++++++++++++++++++++++++++++-
 gtk/theme/Adwaita/_common.scss           |   23 ++++++++++
 gtk/theme/Adwaita/gtk-contained-dark.css |   17 +++++++
 gtk/theme/Adwaita/gtk-contained.css      |   17 +++++++
 4 files changed, 124 insertions(+), 1 deletions(-)
---
diff --git a/gtk/gtkscrolledwindow.c b/gtk/gtkscrolledwindow.c
index 86a53d7..ce2a442 100644
--- a/gtk/gtkscrolledwindow.c
+++ b/gtk/gtkscrolledwindow.c
@@ -1822,6 +1822,69 @@ gtk_scrolled_window_draw_overshoot (GtkScrolledWindow *scrolled_window,
   gtk_style_context_restore (context);
 }
 
+#define UNDERSHOOT_SIZE 20
+#define GTK_STYLE_CLASS_UNDERSHOOT "undershoot"
+
+static void
+gtk_scrolled_window_draw_undershoot (GtkScrolledWindow *scrolled_window,
+                                     cairo_t           *cr)
+{
+  GtkScrolledWindowPrivate *priv = scrolled_window->priv;
+  GtkWidget *widget = GTK_WIDGET (scrolled_window);
+  GtkStyleContext *context;
+  GdkRectangle rect;
+  GtkAdjustment *adj;
+
+  context = gtk_widget_get_style_context (widget);
+  gtk_scrolled_window_relative_allocation (widget, &rect);
+
+  gtk_style_context_save (context);
+  gtk_style_context_remove_class (context, GTK_STYLE_CLASS_FRAME);
+  gtk_style_context_add_class (context, GTK_STYLE_CLASS_UNDERSHOOT);
+
+  adj = gtk_range_get_adjustment (GTK_RANGE (priv->hscrollbar));
+  if (gtk_adjustment_get_value (adj) < gtk_adjustment_get_upper (adj) - gtk_adjustment_get_page_size (adj))
+    {
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_RIGHT);
+
+      gtk_render_background (context, cr, rect.x + rect.width - UNDERSHOOT_SIZE, rect.y, UNDERSHOOT_SIZE, 
rect.height);
+      gtk_render_frame (context, cr, rect.x + rect.width - UNDERSHOOT_SIZE, rect.y, UNDERSHOOT_SIZE, 
rect.height);
+
+      gtk_style_context_remove_class (context, GTK_STYLE_CLASS_RIGHT);
+    }
+  if (gtk_adjustment_get_value (adj) > gtk_adjustment_get_lower (adj))
+    {
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_LEFT);
+
+      gtk_render_background (context, cr, rect.x, rect.y, UNDERSHOOT_SIZE, rect.height);
+      gtk_render_frame (context, cr, rect.x, rect.y, UNDERSHOOT_SIZE, rect.height);
+
+      gtk_style_context_remove_class (context, GTK_STYLE_CLASS_LEFT);
+    }
+
+  adj = gtk_range_get_adjustment (GTK_RANGE (priv->vscrollbar));
+  if (gtk_adjustment_get_value (adj) < gtk_adjustment_get_upper (adj) - gtk_adjustment_get_page_size (adj))
+    {
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_BOTTOM);
+
+      gtk_render_background (context, cr, rect.x, rect.y + rect.height - UNDERSHOOT_SIZE, rect.width, 
UNDERSHOOT_SIZE);
+      gtk_render_frame (context, cr, rect.x, rect.y + rect.height - UNDERSHOOT_SIZE, rect.width, 
UNDERSHOOT_SIZE);
+
+      gtk_style_context_remove_class (context, GTK_STYLE_CLASS_BOTTOM);
+    }
+  if (gtk_adjustment_get_value (adj) > gtk_adjustment_get_lower (adj))
+    {
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_TOP);
+
+      gtk_render_background (context, cr, rect.x, rect.y, rect.width, UNDERSHOOT_SIZE);
+      gtk_render_frame (context, cr, rect.x, rect.y, rect.width, UNDERSHOOT_SIZE);
+
+      gtk_style_context_remove_class (context, GTK_STYLE_CLASS_TOP);
+    }
+
+  gtk_style_context_restore (context);
+}
+
 static gboolean
 gtk_scrolled_window_draw (GtkWidget *widget,
                           cairo_t   *cr)
@@ -1880,7 +1943,10 @@ gtk_scrolled_window_draw (GtkWidget *widget,
   GTK_WIDGET_CLASS (gtk_scrolled_window_parent_class)->draw (widget, cr);
 
   if (gtk_cairo_should_draw_window (cr, gtk_widget_get_window (widget)))
-    gtk_scrolled_window_draw_overshoot (scrolled_window, cr);
+    {
+      gtk_scrolled_window_draw_undershoot (scrolled_window, cr);
+      gtk_scrolled_window_draw_overshoot (scrolled_window, cr);
+    }
 
   return FALSE;
 }
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 2840af3..6e99ee3 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -140,6 +140,29 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 }
 
+.undershoot {
+  &.top {
+    background: linear-gradient(to top, transparentize(red,1), transparentize(red,0.5));
+    background-size: auto 100px;
+    background-position: center 100%;
+  } 
+  &.bottom {
+    background: linear-gradient(to bottom, transparentize(red,1), transparentize(red,0.5));
+    background-size: auto 100px;
+    background-position: center 0%;
+  } 
+  &.left {
+    background: linear-gradient(to left, transparentize(red,1), transparentize(red,0.5));
+    background-size: 100px auto;
+    background-position: 100% center;
+  } 
+  &.right {
+    background: linear-gradient(to right, transparentize(red,1), transparentize(red,0.5));
+    background-size: 100px auto;
+    background-position: 0% center;
+  } 
+}
+
 .label {
   &.separator {
     color: $fg_color;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index fd64f6c..e69d9f7 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -140,6 +140,23 @@
     border: none;
     box-shadow: none; }
 
+.undershoot.top {
+  background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: auto 100px;
+  background-position: center 100%; }
+.undershoot.bottom {
+  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: auto 100px;
+  background-position: center 0%; }
+.undershoot.left {
+  background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: 100px auto;
+  background-position: 100% center; }
+.undershoot.right {
+  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: 100px auto;
+  background-position: 0% center; }
+
 .label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
   color: #eeeeec; }
   .label.separator:backdrop, GtkPlacesSidebar.sidebar .view .label.separator:backdrop {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 22862db..d53ddfb 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -140,6 +140,23 @@
     border: none;
     box-shadow: none; }
 
+.undershoot.top {
+  background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: auto 100px;
+  background-position: center 100%; }
+.undershoot.bottom {
+  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: auto 100px;
+  background-position: center 0%; }
+.undershoot.left {
+  background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: 100px auto;
+  background-position: 100% center; }
+.undershoot.right {
+  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
+  background-size: 100px auto;
+  background-position: 0% center; }
+
 .label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
   color: #2e3436; }
   .label.separator:backdrop, GtkPlacesSidebar.sidebar .view .label.separator:backdrop {