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);
|
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
|
StScrollBar
|
||||||
{
|
{
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
@ -33,8 +33,7 @@ const HOT_CORNER_ACTIVATION_TIMEOUT = 0.5;
|
|||||||
const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
|
const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
|
||||||
|
|
||||||
const ANIMATED_ICON_UPDATE_TIMEOUT = 100;
|
const ANIMATED_ICON_UPDATE_TIMEOUT = 100;
|
||||||
const SPINNER_UPDATE_TIMEOUT = 130;
|
const SPINNER_ANIMATION_TIME = 0.2;
|
||||||
const SPINNER_SPEED = 0.02;
|
|
||||||
|
|
||||||
const STANDARD_TRAY_ICON_ORDER = ['a11y', 'display', 'keyboard', 'volume', 'bluetooth', 'network', 'battery'];
|
const STANDARD_TRAY_ICON_ORDER = ['a11y', 'display', 'keyboard', 'volume', 'bluetooth', 'network', 'battery'];
|
||||||
const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
|
const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
|
||||||
@ -275,20 +274,13 @@ AppMenuButton.prototype = {
|
|||||||
this.hide();
|
this.hide();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this._updateId = 0;
|
this._stop = true;
|
||||||
this._animationStep = 0;
|
|
||||||
this._clipWidth = PANEL_ICON_SIZE;
|
|
||||||
this._direction = SPINNER_SPEED;
|
|
||||||
|
|
||||||
this._spinner = new AnimatedIcon('process-working.svg',
|
this._spinner = new AnimatedIcon('process-working.svg',
|
||||||
PANEL_ICON_SIZE);
|
PANEL_ICON_SIZE);
|
||||||
this._container.add_actor(this._spinner.actor);
|
this._container.add_actor(this._spinner.actor);
|
||||||
this._spinner.actor.lower_bottom();
|
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();
|
let tracker = Shell.WindowTracker.get_default();
|
||||||
tracker.connect('notify::focus-app', Lang.bind(this, this._sync));
|
tracker.connect('notify::focus-app', Lang.bind(this, this._sync));
|
||||||
tracker.connect('app-state-changed', Lang.bind(this, this._onAppStateChanged));
|
tracker.connect('app-state-changed', Lang.bind(this, this._onAppStateChanged));
|
||||||
@ -338,14 +330,14 @@ AppMenuButton.prototype = {
|
|||||||
this._iconBox.remove_clip();
|
this._iconBox.remove_clip();
|
||||||
},
|
},
|
||||||
|
|
||||||
_stopAnimation: function(animate) {
|
stopAnimation: function() {
|
||||||
this._label.actor.remove_clip();
|
if (this._stop)
|
||||||
if (this._updateId) {
|
return;
|
||||||
this._shadow.hide();
|
|
||||||
if (animate) {
|
this._stop = true;
|
||||||
Tweener.addTween(this._spinner.actor,
|
Tweener.addTween(this._spinner.actor,
|
||||||
{ opacity: 0,
|
{ opacity: 0,
|
||||||
time: 0.2,
|
time: SPINNER_ANIMATION_TIME,
|
||||||
transition: "easeOutQuad",
|
transition: "easeOutQuad",
|
||||||
onCompleteScope: this,
|
onCompleteScope: this,
|
||||||
onComplete: function() {
|
onComplete: function() {
|
||||||
@ -353,47 +345,11 @@ AppMenuButton.prototype = {
|
|||||||
this._spinner.actor.hide();
|
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;
|
|
||||||
},
|
|
||||||
|
|
||||||
_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;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
startAnimation: function() {
|
startAnimation: function() {
|
||||||
this._direction = SPINNER_SPEED;
|
|
||||||
this._stopAnimation(false);
|
|
||||||
this._animationStep = 0;
|
|
||||||
this._update();
|
|
||||||
this._stop = false;
|
this._stop = false;
|
||||||
this._updateId = Mainloop.timeout_add(SPINNER_UPDATE_TIMEOUT, Lang.bind(this, this._update));
|
|
||||||
this._spinner.actor.show();
|
this._spinner.actor.show();
|
||||||
this._shadow.show();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_getContentPreferredWidth: function(actor, forHeight, alloc) {
|
_getContentPreferredWidth: function(actor, forHeight, alloc) {
|
||||||
@ -455,18 +411,13 @@ AppMenuButton.prototype = {
|
|||||||
this._label.actor.allocate(childBox, flags);
|
this._label.actor.allocate(childBox, flags);
|
||||||
|
|
||||||
if (direction == St.TextDirection.LTR) {
|
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.x2 = childBox.x1 + this._spinner.actor.width;
|
||||||
childBox.y1 = box.y1;
|
childBox.y1 = box.y1;
|
||||||
childBox.y2 = box.y2 - 1;
|
childBox.y2 = box.y2 - 1;
|
||||||
this._spinner.actor.allocate(childBox, flags);
|
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 {
|
} 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.x2 = childBox.x1 + this._spinner.actor.width;
|
||||||
childBox.y1 = box.y1;
|
childBox.y1 = box.y1;
|
||||||
childBox.y2 = box.y2 - 1;
|
childBox.y2 = box.y2 - 1;
|
||||||
@ -545,7 +496,6 @@ AppMenuButton.prototype = {
|
|||||||
this.stopAnimation();
|
this.stopAnimation();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this._stopAnimation();
|
|
||||||
|
|
||||||
if (this._iconBox.child != null)
|
if (this._iconBox.child != null)
|
||||||
this._iconBox.child.destroy();
|
this._iconBox.child.destroy();
|
||||||
|
Loading…
Reference in New Issue
Block a user