windowManager: Animate tile previews

With tile previews being implemented as Clutter actors in the shell, we
can now easily add fancy animations when showing/hiding the preview.
Besides looking more polished, the animations also help understanding
what will happen to the window when the drag is finished.

https://bugzilla.gnome.org/show_bug.cgi?id=665758
This commit is contained in:
Florian Müllner 2013-09-02 02:17:58 +02:00
parent 6d93c8b3fd
commit fcd5f06c09

View File

@ -362,9 +362,10 @@ const TilePreview = new Lang.Class({
Name: 'TilePreview', Name: 'TilePreview',
_init: function() { _init: function() {
this.actor = new St.Widget({ visible: false }); this.actor = new St.Widget();
global.window_group.add_actor(this.actor); global.window_group.add_actor(this.actor);
this._reset();
this._showing = false; this._showing = false;
}, },
@ -375,13 +376,41 @@ const TilePreview = new Lang.Class({
global.window_group.set_child_below_sibling(this.actor, windowActor); global.window_group.set_child_below_sibling(this.actor, windowActor);
this._updateStyle(monitorIndex, tileRect); if (this._rect && this._rect.equal(tileRect))
return;
this.actor.set_size(tileRect.width, tileRect.height); let changeMonitor = (this._monitorIndex == -1 ||
this.actor.set_position(tileRect.x, tileRect.y); this._monitorIndex != monitorIndex);
this._monitorIndex = monitorIndex;
this._rect = tileRect;
let monitor = Main.layoutManager.monitors[monitorIndex];
this._updateStyle(monitor);
if (!this._showing || changeMonitor) {
let monitorRect = new Meta.Rectangle({ x: monitor.x,
y: monitor.y,
width: monitor.width,
height: monitor.height });
let [, rect] = window.get_outer_rect().intersect(monitorRect);
this.actor.set_size(rect.width, rect.height);
this.actor.set_position(rect.x, rect.y);
this.actor.opacity = 0;
}
this._showing = true; this._showing = true;
this.actor.show(); this.actor.show();
Tweener.addTween(this.actor,
{ x: tileRect.x,
y: tileRect.y,
width: tileRect.width,
height: tileRect.height,
opacity: 255,
time: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad'
});
}, },
hide: function() { hide: function() {
@ -389,18 +418,27 @@ const TilePreview = new Lang.Class({
return; return;
this._showing = false; this._showing = false;
this.actor.hide(); Tweener.addTween(this.actor,
{ opacity: 0,
time: WINDOW_ANIMATION_TIME,
transition: 'easeOutQuad',
onComplete: Lang.bind(this, this._reset)
});
}, },
_updateStyle: function(monitorIndex, tileRect) { _reset: function() {
let monitor = Main.layoutManager.monitors[monitorIndex]; this.actor.hide();
this._rect = null;
this._monitorIndex = -1;
},
_updateStyle: function(monitor) {
let styles = ['tile-preview']; let styles = ['tile-preview'];
if (monitorIndex == Main.layoutManager.primaryIndex) if (this._monitorIndex == Main.layoutManager.primaryIndex)
styles.push('on-primary'); styles.push('on-primary');
if (tileRect.x == monitor.x) if (this._rect.x == monitor.x)
styles.push('tile-preview-left'); styles.push('tile-preview-left');
if (tileRect.x + tileRect.width == monitor.x + monitor.width) if (this._rect.x + this._rect.width == monitor.x + monitor.width)
styles.push('tile-preview-right'); styles.push('tile-preview-right');
this.actor.style_class = styles.join(' '); this.actor.style_class = styles.join(' ');