isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

st-scroll-view: Make the fade effect and offset themable

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
data/theme/gnome-shell.css
View File

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

2
js/ui/appDisplay.js
View File

@ -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,

4
js/ui/messageTray.js
View File

@ -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);

2
js/ui/searchDisplay.js
View File

@ -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);

65
src/st/st-scroll-view.c
View File

@ -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

3
src/st/st-scroll-view.h
View File

@ -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__ */

2
tests/interactive/scroll-view-sizing.js
View File

@ -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); });

4
tests/testcommon/test.css
View File

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