switch: Animate transitions
Use a constraint align instead of :x-align to animate it. Match GTK duration. Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2717>
This commit is contained in:

committed by
Florian Müllner

parent
cca34af31e
commit
71f2355b8a
@ -375,13 +375,17 @@ export const Switch = GObject.registerClass({
|
||||
this._handle = new St.Widget({
|
||||
style_class: 'handle',
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
x_align: Clutter.ActorAlign.START,
|
||||
x_expand: true,
|
||||
constraints: new Clutter.BindConstraint({
|
||||
source: this,
|
||||
coordinate: Clutter.BindCoordinate.SIZE,
|
||||
coordinate: Clutter.BindCoordinate.HEIGHT,
|
||||
}),
|
||||
});
|
||||
this._handleAlignConstraint = new Clutter.AlignConstraint({
|
||||
name: 'align',
|
||||
align_axis: Clutter.AlignAxis.X_AXIS,
|
||||
source: this,
|
||||
});
|
||||
this._handle.add_constraint(this._handleAlignConstraint);
|
||||
this.add_child(this._handle);
|
||||
|
||||
this.state = state;
|
||||
@ -412,14 +416,24 @@ export const Switch = GObject.registerClass({
|
||||
if (this._state === state)
|
||||
return;
|
||||
|
||||
let handleAlignFactor;
|
||||
// Calling get_theme_node() while unmapped is an error, avoid that
|
||||
const duration = this._handle.mapped
|
||||
? this._handle.get_theme_node().get_transition_duration()
|
||||
: 0;
|
||||
|
||||
if (state) {
|
||||
this.add_style_pseudo_class('checked');
|
||||
this._handle.x_align = Clutter.ActorAlign.END;
|
||||
handleAlignFactor = 1.0;
|
||||
} else {
|
||||
this.remove_style_pseudo_class('checked');
|
||||
this._handle.x_align = Clutter.ActorAlign.START;
|
||||
handleAlignFactor = 0.0;
|
||||
}
|
||||
|
||||
this._handle.ease_property('@constraints.align.factor', handleAlignFactor, {
|
||||
duration,
|
||||
});
|
||||
|
||||
this._state = state;
|
||||
this.notify('state');
|
||||
}
|
||||
|
Reference in New Issue
Block a user