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

[Matthias Clasen <matthiasc src gnome org>]

commit cadac02931ee802cdab93ca4632b311f25ca2b6b
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                            |   64 ++++++++++++++++++++
 gtk/resources/theme/Adwaita/_common.scss           |   23 +++++++
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   17 +++++
 gtk/resources/theme/Adwaita/gtk-contained.css      |   17 +++++
 4 files changed, 121 insertions(+), 0 deletions(-)
---
diff --git a/gtk/gtkscrolledwindow.c b/gtk/gtkscrolledwindow.c
index 5a0b410..8a4aa6c 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)
@@ -1884,6 +1947,7 @@ gtk_scrolled_window_draw (GtkWidget *widget,
       gtk_cairo_should_draw_window (cr, priv->vindicator.window))
     gtk_container_propagate_draw (GTK_CONTAINER (scrolled_window), priv->vscrollbar, cr);
 
+  gtk_scrolled_window_draw_undershoot (scrolled_window, cr);
   gtk_scrolled_window_draw_overshoot (scrolled_window, cr);
 
   return FALSE;
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 3d1efb7..7704db6 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -143,6 +143,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/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 2a1eb1a..dbc87aa 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -90,6 +90,23 @@
   background-size: 100px auto;
   background-position: 0% center; }
 
+.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/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 77d2701..dde1f89 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -90,6 +90,23 @@
   background-size: 100px auto;
   background-position: 0% center; }
 
+.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 {