chrome/browser/resources/login/user_pod_row.js - Issue 369893005: Implement new design for expanded public session pod design

Unified Diff: chrome/browser/resources/login/user_pod_row.js

Issue 369893005: Implement new design for expanded public session pod design (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src

Patch Set: Fixed kiosk pods with small icons. Created 6 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

Index: chrome/browser/resources/login/user_pod_row.js

diff --git a/chrome/browser/resources/login/user_pod_row.js b/chrome/browser/resources/login/user_pod_row.js

index 34a4858aab6bc0d688e6441772f5e5a0364a85b2..24fdb39d2e63738e83c2acf56c945474b5d73298 100644

--- a/chrome/browser/resources/login/user_pod_row.js

+++ b/chrome/browser/resources/login/user_pod_row.js

@@ -49,9 +49,9 @@ cr.define('login', function() {

* synced with computed CSS sizes of pods.

var POD_WIDTH = 180;

- var PUBLIC_EXPANDED_WIDTH = 420;

+ var PUBLIC_EXPANDED_BASIC_WIDTH = 500;

var CROS_POD_HEIGHT = 213;

- var DESKTOP_POD_HEIGHT = 216;

+ var DESKTOP_POD_HEIGHT = 226;

var POD_ROW_PADDING = 10;

var DESKTOP_ROW_PADDING = 15;

@@ -98,7 +98,7 @@ cr.define('login', function() {

/**

* Supported authentication types. Keep in sync with the enum in

- * chrome/browser/chromeos/login/login_display.h

+ * chrome/browser/signin/screenlock_bridge.h

* @enum {number}

* @const

@@ -107,6 +107,7 @@ cr.define('login', function() {

ONLINE_SIGN_IN: 1,

NUMERIC_PIN: 2,

USER_CLICK: 3,

+ EXPAND_THEN_USER_CLICK: 4,

};

/**

@@ -117,6 +118,7 @@ cr.define('login', function() {

1: 'onlineSignIn',

2: 'numericPin',

3: 'userClick',

+ 4: 'expandThenUserClick',

};

// Focus and tab order are organized as follows:

@@ -196,15 +198,12 @@ cr.define('login', function() {

this.handleRemoveCommandKeyDown_.bind(this));

this.actionBoxMenuRemoveElement.addEventListener('blur',

this.handleRemoveCommandBlur_.bind(this));

- if (this.actionBoxRemoveUserWarningButtonElement) {

- this.actionBoxRemoveUserWarningButtonElement.addEventListener(

- 'click',

- this.handleRemoveUserConfirmationClick_.bind(this));

+ this.actionBoxRemoveUserWarningButtonElement.addEventListener(

+ 'click',

+ this.handleRemoveUserConfirmationClick_.bind(this));

this.actionBoxRemoveUserWarningButtonElement.addEventListener(

'keydown',

this.handleRemoveUserConfirmationKeyDown_.bind(this));

- }

/**

@@ -285,14 +284,6 @@ cr.define('login', function() {

/**

- * Gets signed in indicator element.

- * @type {!HTMLDivElement}

- */

- get signedInIndicatorElement() {

- return this.querySelector('.signed-in-indicator');

- },

- /**

* Gets image element.

* @type {!HTMLImageElement}

@@ -309,6 +300,14 @@ cr.define('login', function() {

/**

+ * Gets the container holding the password field.

+ * @type {!HTMLInputElement}

+ */

+ get passwordEntryContainerElement() {

+ return this.querySelector('.password-entry-container');

+ },

+ /**

* Gets password field.

* @type {!HTMLInputElement}

@@ -326,19 +325,19 @@ cr.define('login', function() {

/**

- * Gets Caps Lock hint image.

- * @type {!HTMLImageElement}

+ * Gets user sign in button.

+ * @type {!HTMLButtonElement}

- get capslockHintElement() {

- return this.querySelector('.capslock-hint');

+ get signinButtonElement() {

+ return this.querySelector('.signin-button');

/**

- * Gets user sign in button.

+ * Gets the container holding the launch app button.

* @type {!HTMLButtonElement}

- get signinButtonElement() {

- return this.querySelector('.signin-button');

+ get launchAppButtonContainerElement() {

+ return this.querySelector('.launch-app-button-container');

/**

@@ -374,30 +373,6 @@ cr.define('login', function() {

/**

- * Gets user type icon.

- * @type {!HTMLDivElement}

- */

- get userTypeIconElement() {

- return this.querySelector('.user-type-icon-image');

- },

- /**

- * Gets action box menu.

- * @type {!HTMLInputElement}

- */

- get actionBoxMenuElement() {

- return this.querySelector('.action-box-menu');

- },

- /**

- * Gets action box menu title.

- * @type {!HTMLInputElement}

- */

- get actionBoxMenuTitleElement() {

- return this.querySelector('.action-box-menu-title');

- },

- /**

* Gets action box menu title, user name item.

* @type {!HTMLInputElement}

@@ -463,22 +438,6 @@ cr.define('login', function() {

/**

- * Gets the locked user indicator box.

- * @type {!HTMLInputElement}

- */

- get lockedIndicatorElement() {

- return this.querySelector('.locked-indicator');

- },

- /**

- * Gets the supervised user indicator box.

- * @type {!HTMLInputElement}

- */

- get supervisedUserIndicatorElement() {

- return this.querySelector('.supervised-indicator');

- },

- /**

* Gets the custom icon. This icon is normally hidden, but can be shown

* using the chrome.screenlockPrivate API.

* @type {!HTMLDivElement}

@@ -495,9 +454,8 @@ cr.define('login', function() {

'?id=' + UserPod.userImageSalt_[this.user.username];

this.nameElement.textContent = this.user_.displayName;

- this.signedInIndicatorElement.hidden = !this.user_.signedIn;

+ this.classList.toggle('signed-in', this.user_.signedIn);

dzhioev (left Google) 2014/07/09 13:49:46 You forgot to remove 'hidden' attribute from 'sign

bartfab (slow) 2014/07/09 19:08:11 Done.

- this.signinButtonElement.hidden = !this.isAuthTypeOnlineSignIn;

dzhioev (left Google) 2014/07/09 13:49:46 You probably need to change some of SAMLPPolicyTes

bartfab (slow) 2014/07/09 19:08:11 Done.

if (this.isAuthTypeUserClick)

this.passwordLabelElement.textContent = this.authValue;

@@ -515,7 +473,6 @@ cr.define('login', function() {

return;

}

- this.actionBoxAreaElement.hidden = false;

this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;

this.actionBoxAreaElement.setAttribute(

@@ -544,7 +501,6 @@ cr.define('login', function() {

this.classList.add('multiprofiles-policy-applied');

this.setUserPodIconType('policy');

- this.querySelector('.mp-policy-title').hidden = false;

if (this.user.multiProfilesPolicy == 'primary-only')

this.querySelector('.mp-policy-primary-only-msg').hidden = false;

else if (this.user.multiProfilesPolicy == 'owner-primary-only')

@@ -612,8 +568,7 @@ cr.define('login', function() {

if (active) {

this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;

- if (this.actionBoxRemoveUserWarningElement)

- this.actionBoxRemoveUserWarningElement.hidden = true;

+ this.actionBoxRemoveUserWarningElement.hidden = true;

// Clear focus first if another pod is focused.

if (!this.parentNode.isFocused(this)) {

@@ -1034,29 +989,6 @@ cr.define('login', function() {

return this.classList.contains('expanded');

- /**

- * During transition final height of pod is not available because of

- * flexbox layout. That's why we have to calculate

- * the final height manually.

- */

- get expandedHeight_() {

- function getTopAndBottomPadding(domElement) {

- return parseInt(window.getComputedStyle(

- domElement).getPropertyValue('padding-top')) +

- parseInt(window.getComputedStyle(

- domElement).getPropertyValue('padding-bottom'));

- };

- var height =

- this.getElementsByClassName('side-pane-contents')[0].offsetHeight +

- this.getElementsByClassName('enter-button')[0].offsetHeight +

- getTopAndBottomPadding(

- this.getElementsByClassName('enter-button')[0]) +

- getTopAndBottomPadding(

- this.getElementsByClassName('side-pane-container')[0]) +

- getTopAndBottomPadding(this);

- return height;

- },

set expanded(expanded) {

if (this.expanded == expanded)

return;

@@ -1070,13 +1002,10 @@ cr.define('login', function() {

POD_ROW_PADDING;

this.usualLeft = this.left;

this.usualTop = this.top;

- if (this.left + PUBLIC_EXPANDED_WIDTH >

+ if (this.left + PUBLIC_EXPANDED_BASIC_WIDTH >

$('pod-row').offsetWidth - rowPadding)

this.left = $('pod-row').offsetWidth - rowPadding -

- PUBLIC_EXPANDED_WIDTH;

- var expandedHeight = this.expandedHeight_;

- if (this.top + expandedHeight > $('pod-row').offsetHeight)

- this.top = $('pod-row').offsetHeight - expandedHeight;

+ PUBLIC_EXPANDED_BASIC_WIDTH;

} else {

if (typeof(this.usualLeft) != 'undefined')

this.left = this.usualLeft;

@@ -1110,7 +1039,6 @@ cr.define('login', function() {

decorate: function() {

UserPod.prototype.decorate.call(this);

- this.classList.remove('need-password');

this.classList.add('public-account');

this.nameElement.addEventListener('keydown', (function(e) {

@@ -1129,7 +1057,7 @@ cr.define('login', function() {

learnMore.addEventListener('click', this.handleLearnMoreEvent);

learnMore.addEventListener('keydown', this.handleLearnMoreEvent);

- learnMore = this.querySelector('.side-pane-learn-more');

+ learnMore = this.querySelector('.expanded-pane-learn-more');

learnMore.addEventListener('click', this.handleLearnMoreEvent);

learnMore.addEventListener('keydown', this.handleLearnMoreEvent);

@@ -1142,7 +1070,7 @@ cr.define('login', function() {

/** @override **/

update: function() {

UserPod.prototype.update.call(this);

- this.querySelector('.side-pane-name').textContent =

+ this.querySelector('.expanded-pane-name').textContent =

this.user_.displayName;

this.querySelector('.info').textContent =

loadTimeData.getStringF('publicAccountInfoFormat',

@@ -1230,29 +1158,21 @@ cr.define('login', function() {

/** @override */

get mainInput() {

- if (!this.passwordElement.hidden)

+ if (this.user.needsSignin)

return this.passwordElement;

else

return this.nameElement;

/** @override */

- decorate: function() {

- UserPod.prototype.decorate.call(this);

- },

- /** @override */

update: function() {

this.imageElement.src = this.user.userImage;

this.nameElement.textContent = this.user.displayName;

var isLockedUser = this.user.needsSignin;

var isSupervisedUser = this.user.locallyManagedUser;

- this.signinButtonElement.hidden = true;

- this.lockedIndicatorElement.hidden = !isLockedUser;

- this.supervisedUserIndicatorElement.hidden = !isSupervisedUser;

- this.passwordElement.hidden = !isLockedUser;

- this.nameElement.hidden = isLockedUser;

+ this.classList.toggle('locked', isLockedUser);

+ this.classList.toggle('supervised-user', isSupervisedUser);

if (this.isAuthTypeUserClick)

this.passwordLabelElement.textContent = this.authValue;

@@ -1266,15 +1186,6 @@ cr.define('login', function() {

/** @override */

focusInput: function() {

- // For focused pods, display the name unless the pod is locked.

- var isLockedUser = this.user.needsSignin;

- var isSupervisedUser = this.user.locallyManagedUser;

- this.signinButtonElement.hidden = true;

- this.lockedIndicatorElement.hidden = !isLockedUser;

- this.supervisedUserIndicatorElement.hidden = !isSupervisedUser;

- this.passwordElement.hidden = !isLockedUser;

- this.nameElement.hidden = isLockedUser;

// Move tabIndex from the whole pod to the main input.

this.tabIndex = -1;

this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;

@@ -1282,16 +1193,8 @@ cr.define('login', function() {

/** @override */

- reset: function(takeFocus) {

- // Always display the user's name for unfocused pods.

- if (!takeFocus)

- this.nameElement.hidden = false;

- UserPod.prototype.reset.call(this, takeFocus);

- },

- /** @override */

activate: function(e) {

- if (this.passwordElement.hidden) {

+ if (!this.user.needsSignin) {

Oobe.launchUser(this.user.emailAddress, this.user.displayName);

} else if (!this.passwordElement.value) {

return false;

@@ -1346,16 +1249,10 @@ cr.define('login', function() {

/** @override */

update: function() {

this.imageElement.src = this.user.iconUrl;

- if (this.user.iconHeight && this.user.iconWidth) {

- this.imageElement.style.height = this.user.iconHeight;

- this.imageElement.style.width = this.user.iconWidth;

- }

this.imageElement.alt = this.user.label;

this.imageElement.title = this.user.label;

- this.passwordElement.hidden = true;

- this.signinButtonElement.hidden = true;

- this.launchAppButtonElement.hidden = false;

- this.signedInIndicatorElement.hidden = true;

+ this.passwordEntryContainerElement.hidden = true;

+ this.launchAppButtonContainerElement.hidden = false;

this.nameElement.textContent = this.user.label;

UserPod.prototype.updateActionBoxArea.call(this);

@@ -1369,10 +1266,6 @@ cr.define('login', function() {

/** @override */

focusInput: function() {

- this.signinButtonElement.hidden = true;

- this.launchAppButtonElement.hidden = false;

- this.passwordElement.hidden = true;

// Move tabIndex from the whole pod to the main input.

this.tabIndex = -1;

this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;

@@ -1460,9 +1353,6 @@ cr.define('login', function() {

// Pods whose initial images haven't been loaded yet.

podsWithPendingImages_: [],

- // Whether pod creation is animated.

- userAddIsAnimated_: false,

// Whether pod placement has been postponed.

podPlacementPostponed_: false,

@@ -1584,15 +1474,9 @@ cr.define('login', function() {

/**

* Add an existing user pod to this pod row.

* @param {!Object} user User info dictionary.

- * @param {boolean} animated Whether to use init animation.

- addUserPod: function(user, animated) {

+ addUserPod: function(user) {

var userPod = this.createUserPod(user);

- if (animated) {

- userPod.classList.add('init');

- userPod.nameElement.classList.add('init');

- }

this.appendChild(userPod);

userPod.initialize();

@@ -1644,42 +1528,11 @@ cr.define('login', function() {

/**

- * Start first time show animation.

- */

- startInitAnimation: function() {

- // Schedule init animation.

- for (var i = 0, pod; pod = this.pods[i]; ++i) {

- window.setTimeout(removeClass, 500 + i * 70, pod, 'init');

- window.setTimeout(removeClass, 700 + i * 70, pod.nameElement, 'init');

- }

- },

- /**

- * Start login success animation.

- */

- startAuthenticatedAnimation: function() {

- var activated = this.indexOf_(this.activatedPod_);

- if (activated == -1)

- return;

- for (var i = 0, pod; pod = this.pods[i]; ++i) {

- if (i < activated)

- pod.classList.add('left');

- else if (i > activated)

- pod.classList.add('right');

- else

- pod.classList.add('zoom');

- }

- },

- /**

* Populates pod row with given existing users and start init animation.

* @param {array} users Array of existing user emails.

- * @param {boolean} animated Whether to use init animation.

- loadPods: function(users, animated) {

+ loadPods: function(users) {

this.users_ = users;

- this.userAddIsAnimated_ = animated;

this.rebuildPods();

@@ -1725,7 +1578,7 @@ cr.define('login', function() {

// Populate the pod row.

for (var i = 0; i < this.users_.length; ++i)

- this.addUserPod(this.users_[i], this.userAddIsAnimated_);

+ this.addUserPod(this.users_[i]);

for (var i = 0, pod; pod = this.pods[i]; ++i)

this.podsWithPendingImages_.push(pod);

@@ -1733,7 +1586,7 @@ cr.define('login', function() {

// TODO(nkostylev): Edge case handling when kiosk apps are not fitting.

if (this.shouldShowApps_) {

for (var i = 0; i < this.apps_.length; ++i)

- this.addUserPod(this.apps_[i], this.userAddIsAnimated_);

+ this.addUserPod(this.apps_[i]);

}

// Make sure we eventually show the pod row, even if some image is stuck.

« no previous file with comments | « chrome/browser/resources/login/user_pod_row.css ('k') | chrome/browser/resources/login/user_pod_template.html » ('j') | no next file with comments »