Commit 7d03af00 authored by Wenzhao Zang's avatar Wenzhao Zang Committed by Commit Bot

cros: Additional UI polishing for new wallpaper picker

1) Add animation for showing preview wallpaper/wallpaper thumbnails.

2) Set min height/width for the picker window.

3) Add "Preset category" for the new picker.

Bug: 837485, 837329, 836848, 835352, 835196
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ifddc5e2af900b7c9b9f8e0001b605f70d2f9b079
Reviewed-on: https://chromium-review.googlesource.com/1054141
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Reviewed-by: default avatarAlexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#558396}
parent 09ffb174
...@@ -466,6 +466,7 @@ body.v2 { ...@@ -466,6 +466,7 @@ body.v2 {
.v2 .image-picker [role=listitem] { .v2 .image-picker [role=listitem] {
-webkit-margin-end: 8px; -webkit-margin-end: 8px;
background-color: rgb(241, 243, 244);
border-radius: 4px; border-radius: 4px;
height: 160px; height: 160px;
margin-bottom: 8px; margin-bottom: 8px;
...@@ -490,6 +491,10 @@ body.v2 { ...@@ -490,6 +491,10 @@ body.v2 {
width: unset; width: unset;
} }
.v2 .image-picker img:not(.slide-show) {
animation: fade-in 250ms;
}
.v2 .image-picker .check { .v2 .image-picker .check {
background-image: url(../images/ui/selected_wallpaper_checkmark.svg); background-image: url(../images/ui/selected_wallpaper_checkmark.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -745,16 +750,21 @@ body.v2 { ...@@ -745,16 +750,21 @@ body.v2 {
height: 128px; height: 128px;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
transition: opacity 800ms; transition: opacity 250ms;
width: 704px; width: 704px;
z-index: -1; z-index: -1;
} }
.v2 #current-wallpaper-info-bar.show-info-bar { .v2:not(.preview-animation):not(.preview-mode) #current-wallpaper-info-bar.show-info-bar {
opacity: 1; opacity: 1;
z-index: 4; z-index: 4;
} }
.v2.preview-animation {
animation: fade-in 800ms;
animation-direction: reverse;
}
.v2 #current-wallpaper-image { .v2 #current-wallpaper-image {
-webkit-margin-end: 16px; -webkit-margin-end: 16px;
-webkit-margin-start: 8px; -webkit-margin-start: 8px;
...@@ -783,6 +793,10 @@ body.v2 { ...@@ -783,6 +793,10 @@ body.v2 {
width: 320px; width: 320px;
} }
.v2 #current-wallpaper-description.small-font {
font-size: 11px;
}
.v2 #current-wallpaper-more-options { .v2 #current-wallpaper-more-options {
-webkit-margin-end: 32px; -webkit-margin-end: 32px;
color: rgb(66, 133, 244); color: rgb(66, 133, 244);
...@@ -847,3 +861,12 @@ body.v2 { ...@@ -847,3 +861,12 @@ body.v2 {
bottom: 0; bottom: 0;
top: unset; top: unset;
} }
@keyframes fade-in {
from { filter: blur(15px);
opacity: 0;
}
to { filter: none;
opacity: 1;
}
}
...@@ -323,10 +323,10 @@ chrome.app.runtime.onLaunched.addListener(function() { ...@@ -323,10 +323,10 @@ chrome.app.runtime.onLaunched.addListener(function() {
return; return;
} }
chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', (result) => { chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', result => {
var options = result ? { var options = result ? {
frame: 'none', frame: 'none',
innerBounds: {width: 768, height: 512}, innerBounds: {width: 768, height: 512, minWidth: 480, minHeight: 480},
resizable: true, resizable: true,
alphaEnabled: true alphaEnabled: true
} : } :
...@@ -416,6 +416,17 @@ chrome.storage.onChanged.addListener(function(changes, namespace) { ...@@ -416,6 +416,17 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
if (!wallpaperPickerWindow) if (!wallpaperPickerWindow)
return; return;
var wpDocument = wallpaperPickerWindow.contentWindow.document; var wpDocument = wallpaperPickerWindow.contentWindow.document;
var hideCheckMarkIfNeeded = () => {
chrome.commandLinePrivate.hasSwitch(
'new-wallpaper-picker', result => {
// Do not hide the check mark on the new picker.
if (!result && wpDocument.querySelector('.check')) {
wpDocument.querySelector('.check').style.visibility =
'hidden';
}
});
};
if (!!appName) { if (!!appName) {
chrome.wallpaperPrivate.getStrings(function(strings) { chrome.wallpaperPrivate.getStrings(function(strings) {
var message = var message =
...@@ -423,8 +434,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) { ...@@ -423,8 +434,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
wpDocument.querySelector('#wallpaper-set-by-message').textContent = wpDocument.querySelector('#wallpaper-set-by-message').textContent =
message; message;
wpDocument.querySelector('#wallpaper-grid').classList.add('small'); wpDocument.querySelector('#wallpaper-grid').classList.add('small');
if (wpDocument.querySelector('.check')) hideCheckMarkIfNeeded();
wpDocument.querySelector('.check').style.visibility = 'hidden';
wpDocument.querySelector('#checkbox').classList.remove('checked'); wpDocument.querySelector('#checkbox').classList.remove('checked');
wpDocument.querySelector('#categories-list').disabled = false; wpDocument.querySelector('#categories-list').disabled = false;
wpDocument.querySelector('#wallpaper-grid').disabled = false; wpDocument.querySelector('#wallpaper-grid').disabled = false;
...@@ -442,9 +452,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) { ...@@ -442,9 +452,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
if (enable) { if (enable) {
wpDocument.querySelector('#checkbox') wpDocument.querySelector('#checkbox')
.classList.add('checked'); .classList.add('checked');
if (wpDocument.querySelector('.check')) hideCheckMarkIfNeeded();
wpDocument.querySelector('.check').style.visibility =
'hidden';
} else { } else {
wpDocument.querySelector('#checkbox') wpDocument.querySelector('#checkbox')
.classList.remove('checked'); .classList.remove('checked');
......
...@@ -372,7 +372,9 @@ cr.define('wallpapers', function() { ...@@ -372,7 +372,9 @@ cr.define('wallpapers', function() {
* @type {Array<Object>} * @type {Array<Object>}
*/ */
get dailyRefreshImages() { get dailyRefreshImages() {
return this.dailyRefreshItem.querySelectorAll('.slide-show'); return this.dailyRefreshItem ?
this.dailyRefreshItem.querySelectorAll('.slide-show') :
{};
}, },
/** /**
...@@ -702,7 +704,7 @@ cr.define('wallpapers', function() { ...@@ -702,7 +704,7 @@ cr.define('wallpapers', function() {
*/ */
showNextImage_: function(index) { showNextImage_: function(index) {
var images = this.dailyRefreshImages; var images = this.dailyRefreshImages;
if (images.length == 0) if (images.length <= index)
return; return;
images[index].style.opacity = 1; images[index].style.opacity = 1;
......
...@@ -315,6 +315,13 @@ WallpaperManager.prototype.placeWallpaperPicker_ = function() { ...@@ -315,6 +315,13 @@ WallpaperManager.prototype.placeWallpaperPicker_ = function() {
if (!this.useNewWallpaperPicker_) if (!this.useNewWallpaperPicker_)
return; return;
// Wallpaper preview must always be in full screen. Exit preview if the
// window is not in full screen for any reason (e.g. when device locks).
if (!chrome.app.window.current().isFullscreen() &&
this.document_.body.classList.contains('preview-mode')) {
$('cancel-preview-wallpaper').click();
}
var totalWidth = this.document_.body.offsetWidth; var totalWidth = this.document_.body.offsetWidth;
centerElement($('set-successfully-message'), totalWidth, null); centerElement($('set-successfully-message'), totalWidth, null);
centerElement($('top-header'), totalWidth, null); centerElement($('top-header'), totalWidth, null);
...@@ -419,11 +426,6 @@ WallpaperManager.prototype.toggleSurpriseMe = function() { ...@@ -419,11 +426,6 @@ WallpaperManager.prototype.toggleSurpriseMe = function() {
WallpaperUtil.saveToLocalStorage( WallpaperUtil.saveToLocalStorage(
Constants.AccessLocalSurpriseMeEnabledKey, shouldEnable, onSuccess); Constants.AccessLocalSurpriseMeEnabledKey, shouldEnable, onSuccess);
}); });
// Show a success message and quit after the user enables surprime me on
// the new picker.
if (shouldEnable && this.useNewWallpaperPicker_)
this.showSuccessMessageAndQuit_();
}; };
/** /**
...@@ -655,9 +657,23 @@ WallpaperManager.prototype.presetCategory_ = function() { ...@@ -655,9 +657,23 @@ WallpaperManager.prototype.presetCategory_ = function() {
// custom wallpaper file name. // custom wallpaper file name.
this.currentWallpaper_ = str('currentWallpaper'); this.currentWallpaper_ = str('currentWallpaper');
if (this.useNewWallpaperPicker_) { if (this.useNewWallpaperPicker_) {
// TODO(crbug.com/812725): Implement preset category for the new picker. For // The default category is the last one (the custom category).
// now, autoselect the first category. var categoryIndex = this.categoriesList_.dataModel.length - 1;
this.categoriesList_.selectionModel.selectedIndex = 0; Object.entries(this.imagesInfoMap_).forEach(([
collectionId, imagesInfo
]) => {
for (var i = 0; i < imagesInfo.length; ++i) {
if (this.currentWallpaper_.includes(imagesInfo.item(i).baseURL)) {
for (var index = 0; index < this.collectionsInfo_.length; ++index) {
// Find the index of the category which the current wallpaper
// belongs to based on the collection id.
if (this.collectionsInfo_[index]['collectionId'] == collectionId)
categoryIndex = index;
}
}
}
});
this.categoriesList_.selectionModel.selectedIndex = categoryIndex;
return; return;
} }
...@@ -789,10 +805,15 @@ WallpaperManager.prototype.decorateCurrentWallpaperInfoBar_ = function() { ...@@ -789,10 +805,15 @@ WallpaperManager.prototype.decorateCurrentWallpaperInfoBar_ = function() {
$('current-wallpaper-title').textContent = $('current-wallpaper-title').textContent =
currentWallpaperInfo.displayText[0]; currentWallpaperInfo.displayText[0];
$('current-wallpaper-description').innerHTML = ''; $('current-wallpaper-description').innerHTML = '';
$('current-wallpaper-description')
.classList.toggle(
'small-font', currentWallpaperInfo.displayText.length > 2);
for (var i = 1; i < currentWallpaperInfo.displayText.length; ++i) { for (var i = 1; i < currentWallpaperInfo.displayText.length; ++i) {
$('current-wallpaper-description') $('current-wallpaper-description')
.appendChild( .appendChild(
document.createTextNode(currentWallpaperInfo.displayText[i])); document.createTextNode(currentWallpaperInfo.displayText[i]));
$('current-wallpaper-description')
.appendChild(document.createElement('br'));
} }
} else { } else {
// Request the thumbnail of the current wallpaper as fallback, since the // Request the thumbnail of the current wallpaper as fallback, since the
...@@ -1127,10 +1148,13 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function( ...@@ -1127,10 +1148,13 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
if (this.document_.body.classList.contains('preview-mode')) if (this.document_.body.classList.contains('preview-mode'))
return; return;
this.document_.body.classList.add('preview-mode'); this.document_.body.classList.add('preview-animation');
this.document_.body.classList.toggle( window.setTimeout(() => {
'custom-wallpaper', source == Constants.WallpaperSourceEnum.Custom); chrome.app.window.current().fullscreen();
chrome.app.window.current().fullscreen(); this.document_.body.classList.add('preview-mode');
this.document_.body.classList.toggle(
'custom-wallpaper', source == Constants.WallpaperSourceEnum.Custom);
}, 800);
var onConfirmClicked = () => { var onConfirmClicked = () => {
chrome.wallpaperPrivate.confirmPreviewWallpaper(() => { chrome.wallpaperPrivate.confirmPreviewWallpaper(() => {
...@@ -1148,8 +1172,12 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function( ...@@ -1148,8 +1172,12 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
// Deselect the image. // Deselect the image.
this.wallpaperGrid_.selectedItem = null; this.wallpaperGrid_.selectedItem = null;
this.document_.body.classList.remove('preview-mode'); this.document_.body.classList.remove('preview-mode');
// Exit full screen. this.document_.body.classList.remove('preview-animation');
chrome.app.window.current().restore(); // Exit full screen, but the window should still be maximized.
chrome.app.window.current().maximize();
// TODO(crbug.com/841968): This is a workaround until the issue is fixed.
if (this.wallpaperGrid_.scrollTop == 0)
this.wallpaperGrid_.scrollTop = 1;
}); });
}; };
$('cancel-preview-wallpaper').addEventListener('click', onCancelClicked); $('cancel-preview-wallpaper').addEventListener('click', onCancelClicked);
...@@ -1254,10 +1282,12 @@ WallpaperManager.prototype.onSelectedItemChanged_ = function() { ...@@ -1254,10 +1282,12 @@ WallpaperManager.prototype.onSelectedItemChanged_ = function() {
*/ */
WallpaperManager.prototype.setWallpaperAttribution = function(selectedItem) { WallpaperManager.prototype.setWallpaperAttribution = function(selectedItem) {
if (this.useNewWallpaperPicker_) { if (this.useNewWallpaperPicker_) {
// The first element in |displayText| is used as title. if (selectedItem) {
if (selectedItem.displayText) $('collection-name').textContent = selectedItem.collectionName;
$('image-title').textContent = selectedItem.displayText[0]; // The first element in |displayText| is used as title.
$('collection-name').textContent = selectedItem.collectionName; if (selectedItem.displayText)
$('image-title').textContent = selectedItem.displayText[0];
}
return; return;
} }
......
...@@ -137,33 +137,6 @@ found in the LICENSE file. ...@@ -137,33 +137,6 @@ found in the LICENSE file.
</div> </div>
</div> </div>
</div> </div>
<div id="current-wallpaper-info-bar">
<img id="current-wallpaper-image"></img>
<div>
<div id="currently-set-message" i18n-content="currentlySetLabel"></div>
<div id="current-wallpaper-title"></div>
<div id="current-wallpaper-description"></div>
</div>
<div id="current-wallpaper-more-options">
<div id="refresh">
<div class="icon"></div>
<div class="text" i18n-content="refreshLabel"></div>
</div>
<div id="explore">
<div class="icon"></div>
<a class="text" id="current-wallpaper-explore-link"
i18n-content="exploreLabel" target="_blank"></a>
</div>
<div id="center">
<div class="icon"></div>
<div class="text" i18n-content="centerLayout"></div>
</div>
<div id="center-cropped">
<div class="icon"></div>
<div class="text" i18n-content="centerCroppedLayout"></div>
</div>
</div>
</div>
</div> </div>
<div id="top-header"> <div id="top-header">
<div class="top-header-contents"> <div class="top-header-contents">
...@@ -185,6 +158,33 @@ found in the LICENSE file. ...@@ -185,6 +158,33 @@ found in the LICENSE file.
</div> </div>
</div> </div>
</div> </div>
<div id="current-wallpaper-info-bar">
<img id="current-wallpaper-image"></img>
<div>
<div id="currently-set-message" i18n-content="currentlySetLabel"></div>
<div id="current-wallpaper-title"></div>
<div id="current-wallpaper-description"></div>
</div>
<div id="current-wallpaper-more-options">
<div id="refresh">
<div class="icon"></div>
<div class="text" i18n-content="refreshLabel"></div>
</div>
<div id="explore">
<div class="icon"></div>
<a class="text" id="current-wallpaper-explore-link"
i18n-content="exploreLabel" target="_blank"></a>
</div>
<div id="center">
<div class="icon"></div>
<div class="text" i18n-content="centerLayout"></div>
</div>
<div id="center-cropped">
<div class="icon"></div>
<div class="text" i18n-content="centerCroppedLayout"></div>
</div>
</div>
</div>
<div id="set-successfully-message" <div id="set-successfully-message"
i18n-content="setSuccessfullyMessage"></div> i18n-content="setSuccessfullyMessage"></div>
<div class="daily-refresh-banner" hidden> <div class="daily-refresh-banner" hidden>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment