diff options
5 files changed, 159 insertions, 21 deletions
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd index ccae68d..b84aefe 100644 --- a/chrome/app/generated_resources.grd +++ b/chrome/app/generated_resources.grd @@ -11494,12 +11494,18 @@ Keep your key file in a safe place. You will need it to create new versions of y <message name="IDS_OPTIONS_CHANGE_PICTURE_TAKE_PHOTO" desc="The text on the button to take photo of the current user."> Take photo </message> - <message name="IDS_OPTIONS_CHANGE_PICTURE_PROFILE_PHOTO" desc="The title of the image with Google profile photo of the user."> + <message name="IDS_OPTIONS_CHANGE_PICTURE_PROFILE_PHOTO" desc="The text on the Google profile photo of the user."> Google Profile photo </message> - <message name="IDS_OPTIONS_CHANGE_PICTURE_PROFILE_LOADING_PHOTO" desc="The title of the image with the loading stub of Google profile image."> + <message name="IDS_OPTIONS_CHANGE_PICTURE_PROFILE_LOADING_PHOTO" desc="The text on the loading stub for Google profile image."> Google Profile photo (loading) </message> + <message name="IDS_IMAGE_SCREEN_PROFILE_PHOTO" desc="The title of the Google profile photo of the user on image selection screen. Please keep in sync with IDS_OPTIONS_CHANGE_PICTURE_PROFILE_PHOTO."> + * Google Profile photo + </message> + <message name="IDS_IMAGE_SCREEN_PROFILE_LOADING_PHOTO" desc="The title of the loading stub for Google profile image on image selection screen. Please keep in sync with IDS_OPTIONS_CHANGE_PICTURE_PROFILE_LOADING_PHOTO."> + * Google Profile photo (loading) + </message> <message name="IDS_OPTIONS_SETTINGS_INTERNET_TAB_WIFI" desc="In settings Internet options, the title for the wifi tab."> Wi-Fi </message> diff --git a/chrome/browser/resources/chromeos/login/oobe.css b/chrome/browser/resources/chromeos/login/oobe.css index 5b960ad5..4b6b6c6 100644 --- a/chrome/browser/resources/chromeos/login/oobe.css +++ b/chrome/browser/resources/chromeos/login/oobe.css @@ -285,15 +285,44 @@ html[dir=rtl] .step.left { #user-image-preview { border-radius: 4px; float: right; - height: 220px; margin: 4px; - width: 220px; + max-width: 220px; } html[dir=rtl] #user-image-preview { float: left; } +#user-image-preview-img { + max-height: 220px; + max-width: 220px; +} + +.default-image #user-image-preview-img { + border: solid 1px #cacaca; + background: white; +} + +#user-image-preview-caption { + color: dimGray; + font-size: smaller; + margin: 8px 4px; + white-space: nowrap; +} + +#user-image-preview-caption .spinner { + display: inline-block; + visibility: hidden; + vertical-align: -6px; + width: 0; +} + +.profile-image.profile-image-loading #user-image-preview-caption .spinner { + margin-right: 2px; + visibility: visible; + width: 22px; +} + #footer { height: 28px; /* Same as button height */ } diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html index e7bf0f6..4e4f5a0 100644 --- a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html +++ b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.html @@ -7,7 +7,13 @@ <div id="user-image-screen-main"> <grid id="user-image-grid"> </grid> - <img id="user-image-preview" alt="" - src="chrome://theme/IDR_LOGIN_DEFAULT_USER"> + <div id="user-image-preview"> + <img id="user-image-preview-img" alt="" + src="chrome://theme/IDR_LOGIN_DEFAULT_USER"> + <div id="user-image-preview-caption"> + <div class="spinner"></div> + <span id="user-image-caption-text"></span> + </div> + </div> </div> </div> diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js index feeab3f..39d9253 100644 --- a/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js +++ b/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js @@ -49,14 +49,24 @@ cr.define('oobe', function() { imageGrid.addEventListener('dblclick', this.handleImageDblClick_.bind(this)); - imageGrid.addItem(ButtonImages.TAKE_PHOTO, - undefined, - this.handleTakePhoto_.bind(this)); + this.buttonImages_ = [ + imageGrid.addItem(ButtonImages.TAKE_PHOTO, + undefined, + this.handleTakePhoto_.bind(this)) + ]; + // Whether a button image is selected. + this.buttonImageSelected_ = false; + // Photo image data (if present). this.photoImage_ = null; // Profile image data (if present). this.profileImage_ = imageGrid.addItem(ButtonImages.PROFILE_PICTURE); + this.profileImageUrl_ = this.profileImage_.url; + + // Initialize profile image state. + this.profileImageSelected = false; + this.profileImageLoading = true; }, /** @@ -80,6 +90,57 @@ cr.define('oobe', function() { }, /** + * The caption to use for the Profile image preview. + * @type {string} + */ + get profileImageCaption() { + return this.profileImageCaption_; + }, + set profileImageCaption(value) { + this.profileImageCaption_ = value; + this.updateCaption_(); + }, + + /** + * True if the Profile image is being loaded. + * @type {boolean} + */ + get profileImageLoading() { + return this.profileImageLoading_; + }, + set profileImageLoading(value) { + this.profileImageLoading_ = value; + $('user-image-preview').classList[ + value ? 'add' : 'remove']('profile-image-loading'); + this.profileImageCaption = localStrings.getString( + value ? 'profilePhotoLoading' : 'profilePhoto'); + this.updateButtons_(); + }, + + /** + * True when a default image is selected (including button images). + * @type {boolean} + */ + set defaultImageSelected(value) { + $('user-image-preview').classList[ + value ? 'add' : 'remove']('default-image'); + }, + + /** + * True when the profile image is selected. + * @type {boolean} + */ + get profileImageSelected() { + return this.profileImageSelected_; + }, + set profileImageSelected(value) { + this.profileImageSelected_ = value; + $('user-image-preview').classList[ + value ? 'add' : 'remove']('profile-image'); + this.updateCaption_(); + }, + + /** * Handles "Take photo" button activation. * @private */ @@ -107,14 +168,26 @@ cr.define('oobe', function() { * @private */ handleSelection_: function() { - var url = $('user-image-grid').selectedItemUrl; - if (url) - $('user-image-preview').src = url; - // Do not send button selections. - if (url == ButtonImages.TAKE_PHOTO) { - $('ok-button').disabled = true; - } else if (url) { - $('ok-button').disabled = false; + var selectedItem = $('user-image-grid').selectedItem; + if (selectedItem === null) + return; + + // Update preview image URL. + var url = selectedItem.url; + $('user-image-preview-img').src = url; + + // Update current selection type. + this.defaultImageSelected = /^chrome:\/\/theme\//.test(url); + // Cannot compare this.profileImage_ itself because it is updated + // by setProfileImage_ after the selection event is fired programmaticaly. + this.profileImageSelected = selectedItem.url == this.profileImageUrl_; + this.buttonImageSelected_ = + this.buttonImages_.indexOf(selectedItem) != -1; + + this.updateButtons_(); + + if (!$('ok-button').disabled) { + // Don't send disabled selections. chrome.send('selectImage', [url]); } }, @@ -164,11 +237,13 @@ cr.define('oobe', function() { }, /** - * Adds or updates image with user profile image and sets it as preview. + * Updates user profile image. * @param {string} imageUrl Image encoded as data URL. * @private */ setProfileImage_: function(imageUrl) { + this.profileImageUrl_ = imageUrl; + this.profileImageLoading = false; this.profileImage_ = $('user-image-grid').updateItem(this.profileImage_, imageUrl); }, @@ -193,6 +268,29 @@ cr.define('oobe', function() { var imageGrid = $('user-image-grid'); imageGrid.selectedItemUrl = url; imageGrid.focus(); + }, + + /** + * Updates the image preview caption. + * @private + */ + updateCaption_: function() { + $('user-image-caption-text').textContent = + this.profileImageSelected ? this.profileImageCaption : ''; + }, + + /** + * Updates the 'OK' button state. + * @private + */ + updateButtons_: function() { + // Do not allow user to choose a button image or the profile image + // while it's loading. + var okButton = $('ok-button'); + if (okButton) + okButton.disabled = + this.buttonImageSelected_ || + this.profileImageSelected && this.profileImageLoading; } }; diff --git a/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc b/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc index 14da9be..3d7381d 100644 --- a/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc +++ b/chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc @@ -45,10 +45,9 @@ void UserImageScreenHandler::GetLocalizedStrings( localized_strings->SetString("takePhoto", l10n_util::GetStringUTF16(IDS_OPTIONS_CHANGE_PICTURE_TAKE_PHOTO)); localized_strings->SetString("profilePhoto", - l10n_util::GetStringUTF16(IDS_OPTIONS_CHANGE_PICTURE_PROFILE_PHOTO)); + l10n_util::GetStringUTF16(IDS_IMAGE_SCREEN_PROFILE_PHOTO)); localized_strings->SetString("profilePhotoLoading", - l10n_util::GetStringUTF16( - IDS_OPTIONS_CHANGE_PICTURE_PROFILE_LOADING_PHOTO)); + l10n_util::GetStringUTF16(IDS_IMAGE_SCREEN_PROFILE_LOADING_PHOTO)); localized_strings->SetString("okButtonText", l10n_util::GetStringUTF16(IDS_OK)); } |