app-menu: Simplify startup animation
During application startup, we used to display a rotating spinner which also moved from left to right, revealing the application title. The result looks rather busy, so remove the horizontal movement. https://bugzilla.gnome.org/show_bug.cgi?id=640782
This commit is contained in:
parent
73853cf147
commit
fcfd17e973
@ -34,13 +34,6 @@ stage {
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.label-real-shadow {
|
||||
background-gradient-direction: horizontal;
|
||||
background-gradient-start: rgba(0, 0, 0, 0);
|
||||
background-gradient-end: rgba(0, 0, 0, 255);
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
StScrollBar
|
||||
{
|
||||
padding: 0px;
|
||||
|
@ -33,8 +33,7 @@ const HOT_CORNER_ACTIVATION_TIMEOUT = 0.5;
|
||||
const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
|
||||
|
||||
const ANIMATED_ICON_UPDATE_TIMEOUT = 100;
|
||||
const SPINNER_UPDATE_TIMEOUT = 130;
|
||||
const SPINNER_SPEED = 0.02;
|
||||
const SPINNER_ANIMATION_TIME = 0.2;
|
||||
|
||||
const STANDARD_TRAY_ICON_ORDER = ['a11y', 'display', 'keyboard', 'volume', 'bluetooth', 'network', 'battery'];
|
||||
const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
|
||||
@ -275,20 +274,13 @@ AppMenuButton.prototype = {
|
||||
this.hide();
|
||||
}));
|
||||
|
||||
this._updateId = 0;
|
||||
this._animationStep = 0;
|
||||
this._clipWidth = PANEL_ICON_SIZE;
|
||||
this._direction = SPINNER_SPEED;
|
||||
this._stop = true;
|
||||
|
||||
this._spinner = new AnimatedIcon('process-working.svg',
|
||||
PANEL_ICON_SIZE);
|
||||
this._container.add_actor(this._spinner.actor);
|
||||
this._spinner.actor.lower_bottom();
|
||||
|
||||
this._shadow = new St.Bin({ style_class: 'label-real-shadow' });
|
||||
this._shadow.hide();
|
||||
this._container.add_actor(this._shadow);
|
||||
|
||||
let tracker = Shell.WindowTracker.get_default();
|
||||
tracker.connect('notify::focus-app', Lang.bind(this, this._sync));
|
||||
tracker.connect('app-state-changed', Lang.bind(this, this._onAppStateChanged));
|
||||
@ -338,62 +330,26 @@ AppMenuButton.prototype = {
|
||||
this._iconBox.remove_clip();
|
||||
},
|
||||
|
||||
_stopAnimation: function(animate) {
|
||||
this._label.actor.remove_clip();
|
||||
if (this._updateId) {
|
||||
this._shadow.hide();
|
||||
if (animate) {
|
||||
Tweener.addTween(this._spinner.actor,
|
||||
{ opacity: 0,
|
||||
time: 0.2,
|
||||
transition: "easeOutQuad",
|
||||
onCompleteScope: this,
|
||||
onComplete: function() {
|
||||
this._spinner.actor.opacity = 255;
|
||||
this._spinner.actor.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
Mainloop.source_remove(this._updateId);
|
||||
this._updateId = 0;
|
||||
}
|
||||
if (!animate)
|
||||
this._spinner.actor.hide();
|
||||
},
|
||||
|
||||
stopAnimation: function() {
|
||||
this._direction = SPINNER_SPEED * 3;
|
||||
this._stop = true;
|
||||
},
|
||||
if (this._stop)
|
||||
return;
|
||||
|
||||
_update: function() {
|
||||
this._animationStep += this._direction;
|
||||
if (this._animationStep > 1 && this._stop) {
|
||||
this._animationStep = 1;
|
||||
this._stopAnimation(true);
|
||||
return false;
|
||||
}
|
||||
if (this._animationStep > 1)
|
||||
this._animationStep = 1;
|
||||
this._clipWidth = this._label.actor.width - (this._label.actor.width - PANEL_ICON_SIZE) * (1 - this._animationStep);
|
||||
if (this.actor.get_direction() == St.TextDirection.LTR) {
|
||||
this._label.actor.set_clip(0, 0, this._clipWidth + this._shadow.width, this.actor.height);
|
||||
} else {
|
||||
this._label.actor.set_clip(this._label.actor.width - this._clipWidth, 0, this._clipWidth, this.actor.height);
|
||||
}
|
||||
this._container.queue_relayout();
|
||||
return true;
|
||||
this._stop = true;
|
||||
Tweener.addTween(this._spinner.actor,
|
||||
{ opacity: 0,
|
||||
time: SPINNER_ANIMATION_TIME,
|
||||
transition: "easeOutQuad",
|
||||
onCompleteScope: this,
|
||||
onComplete: function() {
|
||||
this._spinner.actor.opacity = 255;
|
||||
this._spinner.actor.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
startAnimation: function() {
|
||||
this._direction = SPINNER_SPEED;
|
||||
this._stopAnimation(false);
|
||||
this._animationStep = 0;
|
||||
this._update();
|
||||
this._stop = false;
|
||||
this._updateId = Mainloop.timeout_add(SPINNER_UPDATE_TIMEOUT, Lang.bind(this, this._update));
|
||||
this._spinner.actor.show();
|
||||
this._shadow.show();
|
||||
},
|
||||
|
||||
_getContentPreferredWidth: function(actor, forHeight, alloc) {
|
||||
@ -455,18 +411,13 @@ AppMenuButton.prototype = {
|
||||
this._label.actor.allocate(childBox, flags);
|
||||
|
||||
if (direction == St.TextDirection.LTR) {
|
||||
childBox.x1 = Math.floor(iconWidth / 2) + this._clipWidth + this._shadow.width;
|
||||
childBox.x1 = Math.floor(iconWidth / 2) + this._label.actor.width;
|
||||
childBox.x2 = childBox.x1 + this._spinner.actor.width;
|
||||
childBox.y1 = box.y1;
|
||||
childBox.y2 = box.y2 - 1;
|
||||
this._spinner.actor.allocate(childBox, flags);
|
||||
childBox.x1 = Math.floor(iconWidth / 2) + this._clipWidth + 2;
|
||||
childBox.x2 = childBox.x1 + this._shadow.width;
|
||||
childBox.y1 = box.y1;
|
||||
childBox.y2 = box.y2 - 1;
|
||||
this._shadow.allocate(childBox, flags);
|
||||
} else {
|
||||
childBox.x1 = this._label.actor.width - this._clipWidth - this._spinner.actor.width;
|
||||
childBox.x1 = -this._spinner.actor.width;
|
||||
childBox.x2 = childBox.x1 + this._spinner.actor.width;
|
||||
childBox.y1 = box.y1;
|
||||
childBox.y2 = box.y2 - 1;
|
||||
@ -545,7 +496,6 @@ AppMenuButton.prototype = {
|
||||
this.stopAnimation();
|
||||
return;
|
||||
}
|
||||
this._stopAnimation();
|
||||
|
||||
if (this._iconBox.child != null)
|
||||
this._iconBox.child.destroy();
|
||||
|
Loading…
Reference in New Issue
Block a user