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
This commit is contained in:
Jasper St. Pierre 2011-06-03 17:44:57 -04:00
parent 31bde574de
commit e7289378b7
8 changed files with 41 additions and 46 deletions

View File

@ -39,6 +39,11 @@ StScrollBar
padding: 0px; padding: 0px;
} }
StScrollView.vfade
{
-st-vfade-offset: 68px;
}
StScrollView StScrollBar StScrollView StScrollBar
{ {
min-width: 16px; min-width: 16px;

View File

@ -44,7 +44,7 @@ AlphabeticalView.prototype = {
this.actor = new St.ScrollView({ x_fill: true, this.actor = new St.ScrollView({ x_fill: true,
y_fill: false, y_fill: false,
y_align: St.Align.START, y_align: St.Align.START,
vfade: true }); style_class: 'vfade' });
this.actor.add_actor(box); this.actor.add_actor(box);
this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC); this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
this.actor.connect('notify::mapped', Lang.bind(this, this.actor.connect('notify::mapped', Lang.bind(this,

View File

@ -557,7 +557,7 @@ Notification.prototype = {
this._scrollArea = new St.ScrollView({ name: 'notification-scrollview', this._scrollArea = new St.ScrollView({ name: 'notification-scrollview',
vscrollbar_policy: this._scrollPolicy, vscrollbar_policy: this._scrollPolicy,
hscrollbar_policy: Gtk.PolicyType.NEVER, hscrollbar_policy: Gtk.PolicyType.NEVER,
vfade: true }); style_class: 'vfade' });
this._table.add(this._scrollArea, { row: 1, col: 1 }); this._table.add(this._scrollArea, { row: 1, col: 1 });
this._contentArea = new St.BoxLayout({ name: 'notification-body', this._contentArea = new St.BoxLayout({ name: 'notification-body',
vertical: true }); vertical: true });
@ -1002,7 +1002,7 @@ SummaryItem.prototype = {
this.notificationStackView = new St.ScrollView({ name: source.isChat ? '' : 'summary-notification-stack-scrollview', this.notificationStackView = new St.ScrollView({ name: source.isChat ? '' : 'summary-notification-stack-scrollview',
vscrollbar_policy: source.isChat ? Gtk.PolicyType.NEVER : Gtk.PolicyType.AUTOMATIC, vscrollbar_policy: source.isChat ? Gtk.PolicyType.NEVER : Gtk.PolicyType.AUTOMATIC,
hscrollbar_policy: Gtk.PolicyType.NEVER, hscrollbar_policy: Gtk.PolicyType.NEVER,
vfade: true }); style_class: 'vfade' });
this.notificationStack = new St.BoxLayout({ name: 'summary-notification-stack', this.notificationStack = new St.BoxLayout({ name: 'summary-notification-stack',
vertical: true }); vertical: true });
this.notificationStackView.add_actor(this.notificationStack); this.notificationStackView.add_actor(this.notificationStack);

View File

@ -192,7 +192,7 @@ SearchResults.prototype = {
let scrollView = new St.ScrollView({ x_fill: true, let scrollView = new St.ScrollView({ x_fill: true,
y_fill: false, y_fill: false,
vfade: true }); style_class: 'vfade' });
scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC); scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
scrollView.add_actor(this._content); scrollView.add_actor(this._content);

View File

@ -97,7 +97,6 @@ struct _StScrollViewPrivate
gfloat row_size; gfloat row_size;
gfloat column_size; gfloat column_size;
gboolean vfade;
StScrollViewFade *vfade_effect; StScrollViewFade *vfade_effect;
gboolean row_size_set : 1; gboolean row_size_set : 1;
@ -115,7 +114,6 @@ enum {
PROP_HSCROLLBAR_POLICY, PROP_HSCROLLBAR_POLICY,
PROP_VSCROLLBAR_POLICY, PROP_VSCROLLBAR_POLICY,
PROP_MOUSE_SCROLL, PROP_MOUSE_SCROLL,
PROP_VFADE
}; };
static void static void
@ -143,51 +141,48 @@ st_scroll_view_get_property (GObject *object,
case PROP_MOUSE_SCROLL: case PROP_MOUSE_SCROLL:
g_value_set_boolean (value, priv->mouse_scroll); g_value_set_boolean (value, priv->mouse_scroll);
break; break;
case PROP_VFADE:
g_value_set_boolean (value, priv->vfade);
break;
default: default:
G_OBJECT_WARN_INVALID_PROPERTY_ID (object, property_id, pspec); G_OBJECT_WARN_INVALID_PROPERTY_ID (object, property_id, pspec);
} }
} }
/** /**
* st_scroll_view_set_vfade: * st_scroll_view_update_vfade_effect:
* @self: a #StScrollView * @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 * Sets the height of the fade area area in pixels. A value of 0
* fully scrolled to that edge. * disables the effect.
*/ */
void static void
st_scroll_view_set_vfade (StScrollView *self, st_scroll_view_update_vfade_effect (StScrollView *self,
gboolean vfade) float fade_offset)
{ {
StScrollViewPrivate *priv = ST_SCROLL_VIEW (self)->priv; StScrollViewPrivate *priv = ST_SCROLL_VIEW (self)->priv;
vfade = vfade != FALSE; /* A fade amount of more than 0 enables the effect. */
if (priv->vfade == vfade) if (fade_offset > 0.)
return;
priv->vfade = vfade;
if (vfade)
{ {
if (priv->vfade_effect == NULL) if (priv->vfade_effect == NULL) {
priv->vfade_effect = g_object_new (ST_TYPE_SCROLL_VIEW_FADE, NULL); priv->vfade_effect = g_object_new (ST_TYPE_SCROLL_VIEW_FADE, NULL);
clutter_actor_add_effect_with_name (CLUTTER_ACTOR (self), "vfade", clutter_actor_add_effect_with_name (CLUTTER_ACTOR (self), "vfade",
CLUTTER_EFFECT (priv->vfade_effect)); CLUTTER_EFFECT (priv->vfade_effect));
} }
g_object_set (priv->vfade_effect,
"fade-offset", fade_offset,
NULL);
}
else else
{ {
if (priv->vfade_effect != NULL) {
clutter_actor_remove_effect (CLUTTER_ACTOR (self), CLUTTER_EFFECT (priv->vfade_effect)); clutter_actor_remove_effect (CLUTTER_ACTOR (self), CLUTTER_EFFECT (priv->vfade_effect));
priv->vfade_effect = NULL; priv->vfade_effect = NULL;
} }
}
clutter_actor_queue_redraw (CLUTTER_ACTOR (self)); clutter_actor_queue_redraw (CLUTTER_ACTOR (self));
g_object_notify (G_OBJECT (self), "vfade");
} }
static void static void
@ -201,9 +196,6 @@ st_scroll_view_set_property (GObject *object,
switch (property_id) switch (property_id)
{ {
case PROP_VFADE:
st_scroll_view_set_vfade (self, g_value_get_boolean (value));
break;
case PROP_MOUSE_SCROLL: case PROP_MOUSE_SCROLL:
st_scroll_view_set_mouse_scrolling (self, st_scroll_view_set_mouse_scrolling (self,
g_value_get_boolean (value)); g_value_get_boolean (value));
@ -661,7 +653,12 @@ st_scroll_view_allocate (ClutterActor *actor,
static void static void
st_scroll_view_style_changed (StWidget *widget) 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->hscroll));
st_widget_style_changed (ST_WIDGET (priv->vscroll)); st_widget_style_changed (ST_WIDGET (priv->vscroll));
@ -798,14 +795,6 @@ st_scroll_view_class_init (StScrollViewClass *klass)
PROP_MOUSE_SCROLL, PROP_MOUSE_SCROLL,
pspec); 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 static void

View File

@ -84,9 +84,6 @@ void st_scroll_view_set_policy (StScrollView *scroll,
GtkPolicyType hscroll, GtkPolicyType hscroll,
GtkPolicyType vscroll); GtkPolicyType vscroll);
void st_scroll_view_set_vfade (StScrollView *self,
gboolean vfade);
G_END_DECLS G_END_DECLS
#endif /* __ST_SCROLL_VIEW_H__ */ #endif /* __ST_SCROLL_VIEW_H__ */

View File

@ -338,7 +338,7 @@ function toggleFade(button) {
button.label = 'No'; button.label = 'No';
break; break;
} }
scrollView.set_vfade(vfade.label == 'Yes'); scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
} }
vfade.connect('clicked', function() { toggleFade(vfade); }); vfade.connect('clicked', function() { toggleFade(vfade); });

View File

@ -68,3 +68,7 @@ stage {
.push-button:active { .push-button:active {
background: #ccbb99; background: #ccbb99;
} }
.vfade {
-st-fade-offset: 68px;
}