GNOME.org
 

[gnome-shell] st-scroll-view: Make the fade effect and offset themable

commit e7289378b718095f84554ee9045af7a274aa0092
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Fri Jun 3 17:44:57 2011 -0400

    st-scroll-view: Make the fade effect and offset themable
    
    Theme authors now have the power (and responsibility) of creating fade
    effects with the new CSS length property '-st-fade-offset'. A value of
    0 disables the effect.
    
    This new CSS approach replaces the current programmatic toggle of
    the 'vfade' property. A new CSS style class name 'vfade' is used as
    a replacement for the old property.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=651813

 data/theme/gnome-shell.css              |    5 ++
 js/ui/appDisplay.js                     |    2 +-
 js/ui/messageTray.js                    |    4 +-
 js/ui/searchDisplay.js                  |    2 +-
 src/st/st-scroll-view.c                 |   65 +++++++++++++------------------
 src/st/st-scroll-view.h                 |    3 -
 tests/interactive/scroll-view-sizing.js |    2 +-
 tests/testcommon/test.css               |    4 ++
 8 files changed, 41 insertions(+), 46 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ae7f59b..e5bed0d 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -39,6 +39,11 @@ StScrollBar
   padding: 0px;
 }
 
+StScrollView.vfade
+{
+  -st-vfade-offset: 68px;
+}
+
 StScrollView StScrollBar
 {
   min-width: 16px;
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index b360e67..c08e956 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -44,7 +44,7 @@ AlphabeticalView.prototype = {
         this.actor = new St.ScrollView({ x_fill: true,
                                          y_fill: false,
                                          y_align: St.Align.START,
-                                         vfade: true });
+                                         style_class: 'vfade' });
         this.actor.add_actor(box);
         this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         this.actor.connect('notify::mapped', Lang.bind(this,
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 5c57c9c..a16fde5 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -557,7 +557,7 @@ Notification.prototype = {
         this._scrollArea = new St.ScrollView({ name: 'notification-scrollview',
                                                vscrollbar_policy: this._scrollPolicy,
                                                hscrollbar_policy: Gtk.PolicyType.NEVER,
-                                               vfade: true });
+                                               style_class: 'vfade' });
         this._table.add(this._scrollArea, { row: 1, col: 1 });
         this._contentArea = new St.BoxLayout({ name: 'notification-body',
                                                vertical: true });
@@ -1002,7 +1002,7 @@ SummaryItem.prototype = {
         this.notificationStackView = new St.ScrollView({ name: source.isChat ? '' : 'summary-notification-stack-scrollview',
                                                          vscrollbar_policy: source.isChat ? Gtk.PolicyType.NEVER : Gtk.PolicyType.AUTOMATIC,
                                                          hscrollbar_policy: Gtk.PolicyType.NEVER,
-                                                         vfade: true });
+                                                         style_class: 'vfade' });
         this.notificationStack = new St.BoxLayout({ name: 'summary-notification-stack',
                                                      vertical: true });
         this.notificationStackView.add_actor(this.notificationStack);
diff --git a/js/ui/searchDisplay.js b/js/ui/searchDisplay.js
index a8eba1b..fdf918f 100644
--- a/js/ui/searchDisplay.js
+++ b/js/ui/searchDisplay.js
@@ -192,7 +192,7 @@ SearchResults.prototype = {
 
         let scrollView = new St.ScrollView({ x_fill: true,
                                              y_fill: false,
-                                             vfade: true });
+                                             style_class: 'vfade' });
         scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         scrollView.add_actor(this._content);
 
diff --git a/src/st/st-scroll-view.c b/src/st/st-scroll-view.c
index 47db3e2..a628690 100644
--- a/src/st/st-scroll-view.c
+++ b/src/st/st-scroll-view.c
@@ -97,7 +97,6 @@ struct _StScrollViewPrivate
   gfloat        row_size;
   gfloat        column_size;
 
-  gboolean      vfade;
   StScrollViewFade *vfade_effect;
 
   gboolean      row_size_set : 1;
@@ -115,7 +114,6 @@ enum {
   PROP_HSCROLLBAR_POLICY,
   PROP_VSCROLLBAR_POLICY,
   PROP_MOUSE_SCROLL,
-  PROP_VFADE
 };
 
 static void
@@ -143,51 +141,48 @@ st_scroll_view_get_property (GObject    *object,
     case PROP_MOUSE_SCROLL:
       g_value_set_boolean (value, priv->mouse_scroll);
       break;
-    case PROP_VFADE:
-      g_value_set_boolean (value, priv->vfade);
-      break;
     default:
       G_OBJECT_WARN_INVALID_PROPERTY_ID (object, property_id, pspec);
     }
 }
 
 /**
- * st_scroll_view_set_vfade:
+ * st_scroll_view_update_vfade_effect:
  * @self: a #StScrollView
- * @vfade: Whether to enable the vertical fade effect
+ * @fade_offset: The length of the fade effect, in pixels.
  *
- * Sets whether to fade the content at the top and bottom of the area when not
- * fully scrolled to that edge.
+ * Sets the height of the fade area area in pixels. A value of 0
+ * disables the effect.
  */
-void
-st_scroll_view_set_vfade (StScrollView *self,
-                          gboolean vfade)
+static void
+st_scroll_view_update_vfade_effect (StScrollView *self,
+                                    float fade_offset)
 {
   StScrollViewPrivate *priv = ST_SCROLL_VIEW (self)->priv;
 
-  vfade = vfade != FALSE;
-  if (priv->vfade == vfade)
-    return;
-
-  priv->vfade = vfade;
-
-  if (vfade)
+  /* A fade amount of more than 0 enables the effect. */
+  if (fade_offset > 0.)
     {
-      if (priv->vfade_effect == NULL)
+      if (priv->vfade_effect == NULL) {
         priv->vfade_effect = g_object_new (ST_TYPE_SCROLL_VIEW_FADE, NULL);
 
-      clutter_actor_add_effect_with_name (CLUTTER_ACTOR (self), "vfade",
-                                          CLUTTER_EFFECT (priv->vfade_effect));
+        clutter_actor_add_effect_with_name (CLUTTER_ACTOR (self), "vfade",
+                                            CLUTTER_EFFECT (priv->vfade_effect));
+      }
+
+      g_object_set (priv->vfade_effect,
+                    "fade-offset", fade_offset,
+                    NULL);
     }
    else
     {
-      clutter_actor_remove_effect (CLUTTER_ACTOR (self), CLUTTER_EFFECT (priv->vfade_effect));
-      priv->vfade_effect = NULL;
+      if (priv->vfade_effect != NULL) {
+        clutter_actor_remove_effect (CLUTTER_ACTOR (self), CLUTTER_EFFECT (priv->vfade_effect));
+        priv->vfade_effect = NULL;
+      }
     }
 
   clutter_actor_queue_redraw (CLUTTER_ACTOR (self));
-
-  g_object_notify (G_OBJECT (self), "vfade");
 }
 
 static void
@@ -201,9 +196,6 @@ st_scroll_view_set_property (GObject      *object,
 
   switch (property_id)
     {
-    case PROP_VFADE:
-      st_scroll_view_set_vfade (self, g_value_get_boolean (value));
-      break;
     case PROP_MOUSE_SCROLL:
       st_scroll_view_set_mouse_scrolling (self,
                                           g_value_get_boolean (value));
@@ -661,7 +653,12 @@ st_scroll_view_allocate (ClutterActor          *actor,
 static void
 st_scroll_view_style_changed (StWidget *widget)
 {
-  StScrollViewPrivate *priv = ST_SCROLL_VIEW (widget)->priv;
+  StScrollView *self = ST_SCROLL_VIEW (widget);
+  StScrollViewPrivate *priv = self->priv;
+
+  StThemeNode *theme_node = st_widget_get_theme_node (widget);
+  gdouble fade_offset = st_theme_node_get_length (theme_node, "-st-vfade-offset");
+  st_scroll_view_update_vfade_effect (self, fade_offset);
 
   st_widget_style_changed (ST_WIDGET (priv->hscroll));
   st_widget_style_changed (ST_WIDGET (priv->vscroll));
@@ -798,14 +795,6 @@ st_scroll_view_class_init (StScrollViewClass *klass)
                                    PROP_MOUSE_SCROLL,
                                    pspec);
 
-  pspec = g_param_spec_boolean ("vfade",
-                                "Vertical Shadows",
-                                "Fade the content at the top and and bottom of the area unless fully scrolled to that edge",
-                                FALSE,
-                                G_PARAM_READWRITE);
-  g_object_class_install_property (object_class,
-                                   PROP_VFADE,
-                                   pspec);
 }
 
 static void
diff --git a/src/st/st-scroll-view.h b/src/st/st-scroll-view.h
index f0a03fe..c00d16e 100644
--- a/src/st/st-scroll-view.h
+++ b/src/st/st-scroll-view.h
@@ -84,9 +84,6 @@ void          st_scroll_view_set_policy          (StScrollView   *scroll,
                                                   GtkPolicyType   hscroll,
                                                   GtkPolicyType   vscroll);
 
-void          st_scroll_view_set_vfade           (StScrollView *self,
-                                                  gboolean      vfade);
-
 G_END_DECLS
 
 #endif /* __ST_SCROLL_VIEW_H__ */
diff --git a/tests/interactive/scroll-view-sizing.js b/tests/interactive/scroll-view-sizing.js
index 4ea5b8a..249e0c3 100644
--- a/tests/interactive/scroll-view-sizing.js
+++ b/tests/interactive/scroll-view-sizing.js
@@ -338,7 +338,7 @@ function toggleFade(button) {
 	button.label = 'No';
 	break;
     }
-    scrollView.set_vfade(vfade.label == 'Yes');
+    scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
 }
 
 vfade.connect('clicked', function() { toggleFade(vfade); });
diff --git a/tests/testcommon/test.css b/tests/testcommon/test.css
index af56617..7933995 100644
--- a/tests/testcommon/test.css
+++ b/tests/testcommon/test.css
@@ -68,3 +68,7 @@ stage {
 .push-button:active {
     background: #ccbb99;
 }
+
+.vfade {
+    -st-fade-offset: 68px;
+}
\ No newline at end of file
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]