loginDialog: add cross fade animation between states

This commit adds a crossfade between the user selection state
and the user verification state.

https://bugzilla.gnome.org/show_bug.cgi?id=694062
This commit is contained in:
Ray Strode 2013-02-06 14:18:26 -05:00
parent 96001d86e1
commit 5fa9581db3
2 changed files with 56 additions and 4 deletions

View File

@ -746,7 +746,12 @@ const LoginDialog = new Lang.Class({
this._promptEntry.show();
this._promptLoginHint.opacity = 0;
this._promptLoginHint.show();
this._promptBox.opacity = 0;
this._promptBox.show();
Tweener.addTween(this._promptBox,
{ opacity: 255,
time: _FADE_ANIMATION_TIME,
transition: 'easeOutQuad' });
if (!this._user || (this._user.is_logged_in() && this._verifyingUser))
this._sessionList.actor.show();
@ -1065,6 +1070,7 @@ const LoginDialog = new Lang.Class({
_hideUserListAndLogIn: function() {
this._setUserListExpanded(false);
GdmUtil.cloneAndFadeOutActor(this._userSelectionBox);
this._askForUsernameAndLogIn();
},
@ -1082,15 +1088,31 @@ const LoginDialog = new Lang.Class({
return hold;
},
_onUserListActivated: function(activatedItem) {
_beginVerificationForItem: function(item) {
let userWidget = new UserWidget.UserWidget(item.user);
this._promptUser.set_child(userWidget.actor);
let tasks = [function() {
let userName = item.user.get_user_name();
return this._beginVerificationForUser(userName);
}];
let batch = new Batch.ConsecutiveBatch(this, tasks);
return batch.run();
},
_onUserListActivated: function(activatedItem) {
let tasks = [function() {
return GdmUtil.cloneAndFadeOutActor(this._userSelectionBox);
},
function() {
this._setUserListExpanded(false);
}];
this._user = activatedItem.user;
let userName = activatedItem.user.get_user_name();
this._beginVerificationForUser(userName);
let batch = new Batch.ConcurrentBatch(this, [new Batch.ConsecutiveBatch(this, tasks),
this._beginVerificationForItem(activatedItem)]);
batch.run();
},
_onDestroy: function() {

View File

@ -1,5 +1,6 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
const Clutter = imports.gi.Clutter;
const Gio = imports.gi.Gio;
const Lang = imports.lang;
const Mainloop = imports.mainloop;
@ -15,6 +16,7 @@ const Tweener = imports.ui.tweener;
const PASSWORD_SERVICE_NAME = 'gdm-password';
const FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint';
const FADE_ANIMATION_TIME = 0.16;
const CLONE_FADE_ANIMATION_TIME = 0.25;
const LOGIN_SCREEN_SCHEMA = 'org.gnome.login-screen';
const FINGERPRINT_AUTHENTICATION_KEY = 'enable-fingerprint-authentication';
@ -71,6 +73,34 @@ function fadeOutActor(actor) {
return hold;
}
function cloneAndFadeOutActor(actor) {
// Immediately hide actor so its sibling can have its space
// and position, but leave a non-reactive clone on-screen,
// so from the user's point of view it smoothly fades away
// and reveals its sibling.
actor.hide();
let clone = new Clutter.Clone({ source: actor,
reactive: false });
Main.uiGroup.add_child(clone);
let [x, y] = actor.get_transformed_position();
clone.set_position(x, y);
let hold = new Batch.Hold();
Tweener.addTween(clone,
{ opacity: 0,
time: CLONE_FADE_ANIMATION_TIME,
transition: 'easeOutQuad',
onComplete: function() {
clone.destroy();
hold.release();
}
});
return hold;
}
const ShellUserVerifier = new Lang.Class({
Name: 'ShellUserVerifier',