isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loginDialog: start to move login dialog away from modal dialog

Browse Source
This commit is contained in:
Ray Strode 2013-06-18 07:28:49 -04:00
parent ca9099997c
commit 9451c04a09
2 changed files with 147 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
data/theme/gnome-shell.css
View File

@ -381,6 +381,7 @@ StScrollBar StButton#vhandle:active {
/* Entries */ /* Entries */
#searchEntry, #searchEntry,
.login-dialog StEntry,
.notification StEntry, .notification StEntry,
.modal-dialog StEntry { .modal-dialog StEntry {
color: rgb(64, 64, 64); color: rgb(64, 64, 64);
@ -392,6 +393,7 @@ StScrollBar StButton#vhandle:active {
} }
#searchEntry, #searchEntry,
.login-dialog StEntry,
.run-dialog-entry, .run-dialog-entry,
.notification StEntry { .notification StEntry {
border: 2px solid rgba(245,245,245,0.2); border: 2px solid rgba(245,245,245,0.2);
@ -404,6 +406,7 @@ StScrollBar StButton#vhandle:active {
#searchEntry:focus, #searchEntry:focus,
#searchEntry:hover, #searchEntry:hover,
.login-dialog StEntry:focus,
.notification StEntry:focus, .notification StEntry:focus,
.modal-dialog StEntry { .modal-dialog StEntry {
border: 2px solid rgb(136,138,133); border: 2px solid rgb(136,138,133);
@ -413,6 +416,7 @@ StScrollBar StButton#vhandle:active {
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6); box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6);
} }
.login-dialog StEntry:focus,
.notification StEntry:focus, .notification StEntry:focus,
.modal-dialog StEntry:focus { .modal-dialog StEntry:focus {
border: 2px solid #3465a4; border: 2px solid #3465a4;
@ -436,6 +440,7 @@ StScrollBar StButton#vhandle:active {
transition-duration: 0ms; transition-duration: 0ms;
} }
.login-dialog StEntry,
.notification StEntry, .notification StEntry,
.modal-dialog StEntry { .modal-dialog StEntry {
border-radius: 5px; border-radius: 5px;
@ -449,6 +454,7 @@ StScrollBar StButton#vhandle:active {
padding: 0 4px; padding: 0 4px;
} }
.login-dialog StEntry:insensitive,
.modal-dialog StEntry:insensitive { .modal-dialog StEntry:insensitive {
border-color: #666666; border-color: #666666;
color: #9f9f9f; color: #9f9f9f;

216
js/ui/auth/loginDialog.js
View File

@ -19,6 +19,7 @@
*/ */
const AccountsService = imports.gi.AccountsService; const AccountsService = imports.gi.AccountsService;
const Atk = imports.gi.Atk;
const Clutter = imports.gi.Clutter; const Clutter = imports.gi.Clutter;
const CtrlAltTab = imports.ui.ctrlAltTab; const CtrlAltTab = imports.ui.ctrlAltTab;
const Gio = imports.gi.Gio; const Gio = imports.gi.Gio;
@ -34,9 +35,11 @@ const Shell = imports.gi.Shell;
const St = imports.gi.St; const St = imports.gi.St;
const Gdm = imports.gi.Gdm; const Gdm = imports.gi.Gdm;
const Animation = imports.ui.animation;
const AuthUtil = imports.ui.auth.util; const AuthUtil = imports.ui.auth.util;
const Batch = imports.misc.batch; const Batch = imports.misc.batch;
const Fprint = imports.ui.auth.fingerprint; const Fprint = imports.ui.auth.fingerprint;
const Layout = imports.ui.layout;
const Main = imports.ui.main; const Main = imports.ui.main;
const ModalDialog = imports.ui.modalDialog; const ModalDialog = imports.ui.modalDialog;
const SessionList = imports.ui.auth.sessionList; const SessionList = imports.ui.auth.sessionList;
@ -47,6 +50,9 @@ const UserWidget = imports.ui.userWidget;
const _FADE_ANIMATION_TIME = 0.25; const _FADE_ANIMATION_TIME = 0.25;
const _SCROLL_ANIMATION_TIME = 0.5; const _SCROLL_ANIMATION_TIME = 0.5;
const _WORK_SPINNER_ICON_SIZE = 24;
const _WORK_SPINNER_ANIMATION_DELAY = 1.0;
const _WORK_SPINNER_ANIMATION_TIME = 0.3;
const _TIMED_LOGIN_IDLE_THRESHOLD = 5.0; const _TIMED_LOGIN_IDLE_THRESHOLD = 5.0;
const _LOGO_ICON_HEIGHT = 48; const _LOGO_ICON_HEIGHT = 48;
@ -54,19 +60,19 @@ let _loginDialog = null;
const LoginDialog = new Lang.Class({ const LoginDialog = new Lang.Class({
Name: 'LoginDialog', Name: 'LoginDialog',
Extends: ModalDialog.ModalDialog,
_init: function(parentActor) { _init: function(parentActor) {
this.parent({ shellReactive: true, this.actor = new St.Widget({ accessible_role: Atk.Role.WINDOW,
styleClass: 'login-dialog', style_class: 'login-dialog' });
parentActor: parentActor,
keybindingMode: Shell.KeyBindingMode.LOGIN_SCREEN,
shouldFadeIn: false });
this.connect('destroy',
Lang.bind(this, this._onDestroy));
this.connect('opened',
Lang.bind(this, this._onOpened));
this.actor.add_constraint(new Layout.MonitorConstraint({ primary: true }));
this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
parentActor.add_child(this.actor);
Main.ctrlAltTabManager.addGroup(this.actor,
_("Login Window"),
'dialog-password-symbolic',
{ sortGroup: CtrlAltTab.SortGroup.MIDDLE });
this._userManager = AccountsService.UserManager.get_default() this._userManager = AccountsService.UserManager.get_default()
this._greeterClient = new Gdm.Client(); this._greeterClient = new Gdm.Client();
@ -108,7 +114,11 @@ const LoginDialog = new Lang.Class({
this._userSelectionBox = new St.BoxLayout({ style_class: 'login-dialog-user-selection-box', this._userSelectionBox = new St.BoxLayout({ style_class: 'login-dialog-user-selection-box',
vertical: true }); vertical: true });
this.contentLayout.add(this._userSelectionBox);
this._userSelectionBox.add_constraint(new Clutter.AlignConstraint({ source: this.actor,
align_axis: Clutter.AlignAxis.BOTH,
factor: 0.5 }));
this.actor.add_child(this._userSelectionBox);
this._bannerLabel = new St.Label({ style_class: 'login-dialog-banner', this._bannerLabel = new St.Label({ style_class: 'login-dialog-banner',
text: '' }); text: '' });
@ -121,15 +131,14 @@ const LoginDialog = new Lang.Class({
x_fill: true, x_fill: true,
y_fill: true }); y_fill: true });
this.setInitialKeyFocus(this._userList.actor); this._userList.actor.grab_key_focus();
this._promptBox = new St.BoxLayout({ style_class: 'login-dialog-prompt-layout', this._promptBox = new St.BoxLayout({ style_class: 'login-dialog-prompt-layout',
vertical: true }); vertical: true });
this.contentLayout.add(this._promptBox, this._promptBox.add_constraint(new Clutter.AlignConstraint({ source: this.actor,
{ expand: true, align_axis: Clutter.AlignAxis.BOTH,
x_fill: true, factor: 0.5 }));
y_fill: true, this.actor.add_child(this._promptBox);
x_align: St.Align.START });
this._promptUser = new St.Bin({ x_fill: true, this._promptUser = new St.Bin({ x_fill: true,
x_align: St.Align.START }); x_align: St.Align.START });
this._promptBox.add(this._promptUser, this._promptBox.add(this._promptUser,
@ -149,10 +158,8 @@ const LoginDialog = new Lang.Class({
this._promptEntryTextChangedId = 0; this._promptEntryTextChangedId = 0;
this._promptEntryActivateId = 0; this._promptEntryActivateId = 0;
this._promptBox.add(this._promptEntry, this._promptBox.add(this._promptEntry,
{ expand: true, { expand: false,
x_fill: true, x_fill: false });
y_fill: false,
x_align: St.Align.START });
this._promptMessage = new St.Label({ visible: false }); this._promptMessage = new St.Label({ visible: false });
this._promptBox.add(this._promptMessage, { x_fill: true }); this._promptBox.add(this._promptMessage, { x_fill: true });
@ -161,8 +168,6 @@ const LoginDialog = new Lang.Class({
this._promptLoginHint.hide(); this._promptLoginHint.hide();
this._promptBox.add(this._promptLoginHint); this._promptBox.add(this._promptLoginHint);
this._signInButton = null;
this._sessionList = new SessionList.SessionList(); this._sessionList = new SessionList.SessionList();
this._sessionList.connect('session-activated', this._sessionList.connect('session-activated',
Lang.bind(this, function(list, sessionId) { Lang.bind(this, function(list, sessionId) {
@ -174,6 +179,16 @@ const LoginDialog = new Lang.Class({
x_fill: false, x_fill: false,
y_fill: true, y_fill: true,
x_align: St.Align.START }); x_align: St.Align.START });
this._buttonBox = new St.BoxLayout({ style_class: 'modal-dialog-button-box',
vertical: false });
this._promptBox.add(this._buttonBox,
{ expand: true,
x_align: St.Align.MIDDLE,
y_align: St.Align.END });
this._cancelButton = null;
this._signInButton = null;
this._promptBox.hide(); this._promptBox.hide();
// translators: this message is shown below the user list on the // translators: this message is shown below the user list on the
@ -198,7 +213,13 @@ const LoginDialog = new Lang.Class({
this._logoBin = new St.Bin({ style_class: 'login-dialog-logo-bin', y_expand: true }); this._logoBin = new St.Bin({ style_class: 'login-dialog-logo-bin', y_expand: true });
this._logoBin.set_y_align(Clutter.ActorAlign.END); this._logoBin.set_y_align(Clutter.ActorAlign.END);
this.backgroundStack.add_actor(this._logoBin); this._logoBin.add_constraint(new Clutter.AlignConstraint({ source: this.actor,
align_axis: Clutter.AlignAxis.X_AXIS,
factor: 0.5 }));
this._logoBin.add_constraint(new Clutter.AlignConstraint({ source: this.actor,
align_axis: Clutter.AlignAxis.Y_AXIS,
factor: 1.0 }));
this.actor.add_actor(this._logoBin);
this._updateLogo(); this._updateLogo();
if (!this._userManager.is_loaded) if (!this._userManager.is_loaded)
@ -279,11 +300,38 @@ const LoginDialog = new Lang.Class({
this._showUserList(); this._showUserList();
}, },
_setWorking: function(working) {
if (!this._workSpinner)
return;
Tweener.removeTweens(this._workSpinner.actor);
if (working) {
this._workSpinner.play();
Tweener.addTween(this._workSpinner.actor,
{ opacity: 255,
delay: _WORK_SPINNER_ANIMATION_DELAY,
time: _WORK_SPINNER_ANIMATION_TIME,
transition: 'linear'
});
} else {
Tweener.addTween(this._workSpinner.actor,
{ opacity: 0,
time: _WORK_SPINNER_ANIMATION_TIME,
transition: 'linear',
onCompleteScope: this,
onComplete: function() {
if (this._workSpinner)
this._workSpinner.stop();
}
});
}
},
_verificationFailed: function() { _verificationFailed: function() {
this._promptEntry.text = ''; this._promptEntry.text = '';
this._updateSensitivity(true); this._updateSensitivity(true);
this.setWorking(false); this._setWorking(false);
}, },
_onDefaultSessionChanged: function(client, sessionId) { _onDefaultSessionChanged: function(client, sessionId) {
@ -349,33 +397,62 @@ const LoginDialog = new Lang.Class({
}, },
_prepareDialog: function(forSecret, hold) { _prepareDialog: function(forSecret, hold) {
this.buttonLayout.visible = true; this._buttonBox.visible = true;
this.clearButtons(); this._buttonBox.destroy_all_children();
if (!this._disableUserList || this._verifyingUser) if (!this._disableUserList || this._verifyingUser) {
this.addButton({ action: Lang.bind(this, this.cancel), this._cancelButton = new St.Button({ style_class: 'modal-dialog-button',
label: _("Cancel"), button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
key: Clutter.Escape }, reactive: true,
{ expand: true, can_focus: true,
x_fill: false, label: _("Cancel") });
y_fill: false, this._cancelButton.connect('clicked',
x_align: St.Align.START, Lang.bind(this, function() {
y_align: St.Align.MIDDLE }); this.cancel();
this.placeSpinner({ expand: false, }));
x_fill: false, global.stage.connect('captured-event',
y_fill: false, Lang.bind(this, function(actor, event) {
x_align: St.Align.END, if (event.type() == Clutter.EventType.KEY_PRESS &&
y_align: St.Align.MIDDLE }); event.get_key_symbol() == Clutter.KEY_Escape) {
this._signInButton = this.addButton({ action: Lang.bind(this, function() { this.cancel();
hold.release(); }
}), }));
label: forSecret ? C_("button", "Sign In") : _("Next"), this._buttonBox.add(this._cancelButton,
default: true }, { expand: true,
{ expand: false, x_fill: false,
x_fill: false, y_fill: false,
y_fill: false, x_align: St.Align.START,
x_align: St.Align.END, y_align: St.Align.END });
y_align: St.Align.MIDDLE }); }
let spinnerIcon = global.datadir + '/theme/process-working.svg';
this._workSpinner = new Animation.AnimatedIcon(spinnerIcon, _WORK_SPINNER_ICON_SIZE);
this._workSpinner.actor.opacity = 0;
this._workSpinner.actor.show();
this._buttonBox.add(this._workSpinner.actor,
{ expand: false,
x_fill: false,
y_fill: false,
x_align: St.Align.END,
y_align: St.Align.MIDDLE });
this._signInButton = new St.Button({ style_class: 'modal-dialog-button',
button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
reactive: true,
can_focus: true,
label: forSecret ? C_("button", "Sign In") : _("Next") });
this._signInButton.connect('clicked',
Lang.bind(this, function() {
hold.release();
}));
this._signInButton.add_style_pseudo_class('default');
this._buttonBox.add(this._signInButton,
{ expand: true,
x_fill: false,
y_fill: false,
x_align: St.Align.END,
y_align: St.Align.END });
this._updateSignInButtonSensitivity(this._promptEntry.text.length > 0); this._updateSignInButtonSensitivity(this._promptEntry.text.length > 0);
@ -385,10 +462,10 @@ const LoginDialog = new Lang.Class({
this._updateSignInButtonSensitivity(this._promptEntry.text.length > 0); this._updateSignInButtonSensitivity(this._promptEntry.text.length > 0);
})); }));
this._promptEntryActivateId = this._promptEntryActivateId =
this._promptEntry.clutter_text.connect('activate', function() { this._promptEntry.clutter_text.connect('activate', function() {
hold.release(); hold.release();
}); });
}, },
_updateSensitivity: function(sensitive) { _updateSensitivity: function(sensitive) {
@ -406,7 +483,7 @@ const LoginDialog = new Lang.Class({
}, },
_hidePrompt: function() { _hidePrompt: function() {
this.setButtons([]); this._buttonBox.destroy_all_children();
if (this._promptEntryTextChangedId > 0) { if (this._promptEntryTextChangedId > 0) {
this._promptEntry.clutter_text.disconnect(this._promptEntryTextChangedId); this._promptEntry.clutter_text.disconnect(this._promptEntryTextChangedId);
@ -418,7 +495,7 @@ const LoginDialog = new Lang.Class({
this._promptEntryActivateId = 0; this._promptEntryActivateId = 0;
} }
this.setWorking(false); this._setWorking(false);
this._promptBox.hide(); this._promptBox.hide();
this._promptLoginHint.hide(); this._promptLoginHint.hide();
@ -430,8 +507,9 @@ const LoginDialog = new Lang.Class({
this._sessionList.close(); this._sessionList.close();
this._promptLoginHint.hide(); this._promptLoginHint.hide();
this.clearButtons(); this._buttonBox.destroy_all_children();
this._signInButton = null; this._signInButton = null;
this._cancelButton = null;
}, },
_askQuestion: function(verifier, serviceName, question, passwordChar) { _askQuestion: function(verifier, serviceName, question, passwordChar) {
@ -448,7 +526,7 @@ const LoginDialog = new Lang.Class({
function() { function() {
let text = this._promptEntry.get_text(); let text = this._promptEntry.get_text();
this._updateSensitivity(false); this._updateSensitivity(false);
this.setWorking(true); this._setWorking(true);
this._userVerifier.answerQuery(serviceName, text); this._userVerifier.answerQuery(serviceName, text);
}]; }];
@ -497,7 +575,7 @@ const LoginDialog = new Lang.Class({
}, },
_startSession: function(serviceName) { _startSession: function(serviceName) {
Tweener.addTween(this.dialogLayout, Tweener.addTween(this.actor,
{ opacity: 0, { opacity: 0,
time: _FADE_ANIMATION_TIME, time: _FADE_ANIMATION_TIME,
transition: 'easeOutQuad', transition: 'easeOutQuad',
@ -506,7 +584,7 @@ const LoginDialog = new Lang.Class({
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
if (children[i] != Main.layoutManager.screenShieldGroup) if (children[i] != Main.layoutManager.screenShieldGroup)
children[i].opacity = this.dialogLayout.opacity; children[i].opacity = this.actor.opacity;
} }
}, },
onUpdateScope: this, onUpdateScope: this,
@ -712,6 +790,8 @@ const LoginDialog = new Lang.Class({
this._userManager.disconnect(this._userManagerLoadedId); this._userManager.disconnect(this._userManagerLoadedId);
this._userManagerLoadedId = 0; this._userManagerLoadedId = 0;
} }
Main.ctrlAltTabManager.removeGroup(this.actor);
}, },
_loadUserList: function() { _loadUserList: function() {
@ -734,20 +814,6 @@ const LoginDialog = new Lang.Class({
})); }));
}, },
_onOpened: function() {
Main.ctrlAltTabManager.addGroup(this.dialogLayout,
_("Login Window"),
'dialog-password-symbolic',
{ sortGroup: CtrlAltTab.SortGroup.MIDDLE });
},
close: function() {
this.parent();
Main.ctrlAltTabManager.removeGroup(this.dialogLayout);
},
addCharacter: function(unichar) { addCharacter: function(unichar) {
this._promptEntry.clutter_text.insert_unichar(unichar); this._promptEntry.clutter_text.insert_unichar(unichar);
}, },