Skip to content

GitLab

T
tangled
Commit 0cd94a51 authored by Wenzhao Zang's avatar Wenzhao Zang Committed by Commit Bot
Browse files
Options

cros: Update new wallpaper picker UI (Part I) 

This CL makes the new wallpaper picker fully usable. There're some
corner cases that haven't been determined by UX and they are explicitly
marked as 'TODO'.

Mock: goo.gl/kGgEVr
Spec:
https://drive.google.com/file/d/1nxrxAmlXOMp50IkGFGNobmIS-QpkYtLY/view

Bug: 800945
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I396e5727e2f564623163424de05e86be8ecb4cb0
Reviewed-on: https://chromium-review.googlesource.com/917215Reviewed-by: default avatarAlexander Alekseev <alemate@chromium.org>
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#537551}
parent 786ecd2e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 344 additions and 156 deletions
chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
View file @ 0cd94a51
......@@ -376,7 +376,9 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
background-image: url(../images/ui/checkbox_checked.png);
}
.top-header {
#top-header,
#dialog-header,
#no-images-message {
display: none;
}
......@@ -389,16 +391,33 @@ body.v2 {
.v2 .dialog-container {
background-color: #fff;
flex-direction: row;
height: 450px;
border-radius: 4px;
height: 512px;
position: absolute;
top: 180px;
width: 100%;
width: 768px;
}
.v2 #dialog-header {
display: flex;
height: 40px;
}
.v2 .dialog-body {
display: flex;
height: 476px;
}
.v2 .dialog-topbar {
-webkit-margin-end: 32px;
display: block;
height: 100%;
overflow: visible;
padding: unset;
width: 192px;
}
.v2 .dialog-topbar #bar {
display: none;
}
.v2 .image-picker {
......@@ -411,22 +430,57 @@ body.v2 {
}
.v2 #categories-list > li {
height: 100%;
border-top: unset;
height: 36px;
margin-bottom: 8px;
}
.v2 #categories-list > li > div {
color: rgb(128, 134, 139);
font-family: 'Roboto';
font-size: 13px;
font-weight: 500;
padding: 0 30px;
}
.v2 #categories-list > li[selected] {
background-color: rgb(232, 240, 254);
border-radius: 0 32px 32px 0;
}
.v2 #categories-list > li[selected] > div {
color: #000;
color: rgb(66, 133, 244);
font-weight: 700;
}
.v2 #surprise-me {
display: none;
}
.v2 .image-picker {
-webkit-padding-end: unset;
-webkit-padding-start: unset;
padding-bottom: unset;
padding-top: unset;
}
.v2 .image-picker [role=listitem] {
-webkit-margin-end: 8px;
border-radius: 4px;
height: 160px;
margin-bottom: 8px;
width: 160px;
}
.v2 .image-picker [role=listitem][selected] {
-webkit-margin-end: 24px;
-webkit-margin-start: 16px;
height: 128px;
margin-bottom: 24px;
margin-top: 16px;
width: 128px;
}
.v2 .image-picker img {
height: unset;
overflow: hidden;
......@@ -434,18 +488,77 @@ body.v2 {
width: unset;
}
.v2 .close {
background-color: rgba(128, 134, 139, 0.3);
border-radius: 4px;
left: 734px;
top: -40px;
}
.v2 .image-picker .check,
.v2 .bottom-bar {
display: none;
}
.v2 .top-header {
.v2 #top-header {
background-color: #fff;
border-radius: 0 0 48px 48px;
display: flex;
height: 50px;
height: 33px;
padding-top: 15px;
position: absolute;
width: 760px;
top: 0;
width: 698px;
}
.v2 .top-header .more-options {
.v2 .top-header-contents {
display: none;
font-family: 'Roboto';
font-size: 13px;
font-weight: 500;
}
.v2:not(.no-images) .top-header-contents {
display: flex;
}
.v2 .top-header-contents #image-title {
-webkit-padding-start: 32px;
color: rgb(32, 33, 36);
max-width: 360px;
overflow: hidden;
}
.v2 .top-header-contents #collection-name {
-webkit-padding-start: 24px;
color: rgb(128, 134, 139);
}
.v2 .top-header-contents .more-options {
display: flex;
position: absolute;
right: 0;
}
.v2 .top-header-contents .more-options > div {
-webkit-padding-end: 32px;
color: rgb(66, 133, 244);
display: none;
}
.v2 .top-header-contents .more-options a {
color: inherit;
text-decoration: none;
}
.v2 .top-header-contents.online .online-option,
.v2 .top-header-contents.custom .custom-option {
display: flex;
}
.v2.no-images #no-images-message {
display: block;
left: 180px;
position: absolute;
top: 220px;
}
\ No newline at end of file
chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js
View file @ 0cd94a51
......@@ -323,24 +323,38 @@ chrome.app.runtime.onLaunched.addListener(function() {
}
chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', (result) => {
var windowWidth = result ? 800 : 574;
var windowHeight = result ? 800 : 420;
chrome.app.window.create(
'main.html', {
var options = result ? {
frame: 'none',
state: 'maximized',
resizable: true,
alphaEnabled: true
} :
{
frame: 'none',
width: windowWidth,
height: windowHeight,
width: 574,
height: 420,
resizable: false,
alphaEnabled: true
},
function(w) {
};
chrome.app.window.create('main.html', options, function(w) {
wallpaperPickerWindow = w;
chrome.wallpaperPrivate.minimizeInactiveWindows();
w.onClosed.addListener(function() {
wallpaperPickerWindow = null;
chrome.wallpaperPrivate.restoreMinimizedWindows();
});
if (result) {
// By design, the new wallpaper picker should never be shown on top of
// another window.
wallpaperPickerWindow.contentWindow.addEventListener(
'focus', function() {
chrome.wallpaperPrivate.minimizeInactiveWindows();
});
w.onMinimized.addListener(function() {
chrome.wallpaperPrivate.restoreMinimizedWindows();
});
}
WallpaperUtil.testSendMessage('wallpaper-window-created');
});
});
......
chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js
View file @ 0cd94a51
......@@ -94,21 +94,14 @@ cr.define('wallpapers', function() {
window.setTimeout(this.callback_.bind(this, this.dataModelId_), 0);
break;
case Constants.WallpaperSourceEnum.Custom:
if (loadTimeData.getBoolean('useNewWallpaperPicker')) {
this.decorateCustomWallpaper_(
imageEl, this.dataItem,
this.callback_.bind(this, this.dataModelId_));
} else {
this.decorateCustomWallpaperForOldPicker_(
imageEl, this.dataItem,
this.callback_.bind(this, this.dataModelId_));
}
if (loadTimeData.getBoolean('useNewWallpaperPicker'))
this.decorateCustomWallpaper_(imageEl, this.dataItem);
else
this.decorateCustomWallpaperForOldPicker_(imageEl, this.dataItem);
break;
case Constants.WallpaperSourceEnum.OEM:
case Constants.WallpaperSourceEnum.Online:
this.decorateOnlineOrOEMWallpaper_(
imageEl, this.dataItem,
this.callback_.bind(this, this.dataModelId_));
this.decorateOnlineOrOEMWallpaper_(imageEl, this.dataItem);
break;
case Constants.WallpaperSourceEnum.Daily:
case Constants.WallpaperSourceEnum.ThirdParty:
......@@ -129,10 +122,9 @@ cr.define('wallpapers', function() {
* @param {{filePath: string, baseURL: string, layout: string,
* source: string, availableOffline: boolean}
* dataItem The info related to the wallpaper image.
* @param {function} callback The callback function.
* @private
*/
decorateCustomWallpaper_(imageElement, dataItem, callback) {
decorateCustomWallpaper_(imageElement, dataItem) {
if (dataItem.source != Constants.WallpaperSourceEnum.Custom) {
console.error(
'|decorateCustomWallpaper_| is called but the wallpaper source ' +
......@@ -148,7 +140,8 @@ cr.define('wallpapers', function() {
console.error(
'Initialization of custom wallpaper grid failed for path ' +
dataItem.filePath);
callback(null /*opt_wallpaperId=*/, imageElement);
this.callback_(
this.dataModelId_, null /*opt_wallpaperId=*/, imageElement);
return;
}
......@@ -157,7 +150,9 @@ cr.define('wallpapers', function() {
// frequently.
WallpaperUtil.displayImage(
imageElement, imageData,
callback.bind(null /*opt_wallpaperId=*/, imageElement));
this.callback_.bind(
this, this.dataModelId_, null /*opt_wallpaperId=*/,
imageElement));
});
},
......@@ -168,33 +163,32 @@ cr.define('wallpapers', function() {
* @param {{filePath: string, baseURL: string, layout: string,
* source: string, availableOffline: boolean}
* dataItem The info related to the wallpaper image.
* @param {function} callback The callback function.
* @private
*/
decorateCustomWallpaperForOldPicker_(imageElement, dataItem, callback) {
decorateCustomWallpaperForOldPicker_(imageElement, dataItem) {
if (dataItem.source != Constants.WallpaperSourceEnum.Custom) {
console.error(
'|decorateCustomWallpaperForOldPicker_| is called but the ' +
'wallpaper source is not custom.');
return;
}
var errorHandler = function(e) {
var errorHandler = e => {
console.error('Can not access file system.');
callback();
this.callback_(this.dataModelId_);
};
var setURL = function(fileEntry) {
var setURL = fileEntry => {
imageElement.src = fileEntry.toURL();
callback(dataItem.wallpaperId, imageElement);
this.callback_(this.dataModelId_, dataItem.wallpaperId, imageElement);
};
var wallpaperDirectories = WallpaperDirectories.getInstance();
var fallback = function() {
var fallback = () => {
wallpaperDirectories.getDirectory(
Constants.WallpaperDirNameEnum.ORIGINAL, function(dirEntry) {
dirEntry.getFile(
dataItem.baseURL, {create: false}, setURL, errorHandler);
}, errorHandler);
};
var success = function(dirEntry) {
var success = dirEntry => {
dirEntry.getFile(dataItem.baseURL, {create: false}, setURL, fallback);
};
wallpaperDirectories.getDirectory(
......@@ -207,10 +201,9 @@ cr.define('wallpapers', function() {
* @param {{filePath: string, baseURL: string, layout: string,
* source: string, availableOffline: boolean}
* dataItem The info related to the wallpaper image.
* @param {function} callback The callback function.
* @private
*/
decorateOnlineOrOEMWallpaper_(imageElement, dataItem, callback) {
decorateOnlineOrOEMWallpaper_(imageElement, dataItem) {
if (dataItem.source != Constants.WallpaperSourceEnum.Online &&
dataItem.source != Constants.WallpaperSourceEnum.OEM) {
console.error(
......@@ -224,7 +217,9 @@ cr.define('wallpapers', function() {
if (data) {
WallpaperUtil.displayImage(
imageElement, data,
callback.bind(dataItem.wallpaperId, imageElement));
this.callback_.bind(
this, this.dataModelId_, dataItem.wallpaperId,
imageElement));
} else if (
dataItem.source == Constants.WallpaperSourceEnum.Online) {
var xhr = new XMLHttpRequest();
......@@ -235,15 +230,17 @@ cr.define('wallpapers', function() {
true);
xhr.responseType = 'arraybuffer';
xhr.send(null);
xhr.addEventListener('load', function(e) {
xhr.addEventListener('load', e => {
if (xhr.status === 200) {
chrome.wallpaperPrivate.saveThumbnail(
dataItem.baseURL, xhr.response);
WallpaperUtil.displayImage(
imageElement, xhr.response,
callback.bind(dataItem.wallpaperId, imageElement));
this.callback_.bind(
this, this.dataModelId_, dataItem.wallpaperId,
imageElement));
} else {
callback();
this.callback_(this.dataModelId_);
}
});
}
......@@ -360,6 +357,8 @@ cr.define('wallpapers', function() {
// item is constructed in function itemConstructor below.
this.pendingItems_ = 0;
// Only show the spinner on the old wallpaper picker.
if (!this.useNewWallpaperPicker_) {
this.style.visibility = 'hidden';
// If spinner is hidden, schedule to show the spinner after
// ShowSpinnerDelayMs delay. Otherwise, keep it spinning.
......@@ -368,6 +367,7 @@ cr.define('wallpapers', function() {
$('spinner-container').hidden = false;
}, ShowSpinnerDelayMs);
}
}
} else {
// Sets dataModel to null should hide spinner immediately.
$('spinner-container').hidden = true;
......@@ -431,7 +431,7 @@ cr.define('wallpapers', function() {
if (opt_wallpaperId != null)
this.thumbnailList_[opt_wallpaperId] = opt_thumbnail;
if (opt_thumbnail && loadTimeData.getBoolean('useNewWallpaperPicker'))
if (opt_thumbnail && this.useNewWallpaperPicker_)
this.cropImageToFitGrid_(opt_thumbnail);
if (this.pendingItems_ == 0) {
......@@ -439,6 +439,12 @@ cr.define('wallpapers', function() {
window.clearTimeout(this.spinnerTimeout_);
this.spinnerTimeout_ = 0;
$('spinner-container').hidden = true;
if (this.useNewWallpaperPicker_) {
// TODO(crbug.com/812725): Decide what to show in the top header bar
// if the current wallpaper in use was not selected from the picker.
// For now, show the info of the first wallpaper in this collection.
wallpaperManager.setWallpaperAttribution(this.dataModel.item(0));
}
}
},
......@@ -452,6 +458,8 @@ cr.define('wallpapers', function() {
this.checkmark_.classList.add('check');
this.dataModel = new ArrayDataModel([]);
this.thumbnailList_ = new ArrayDataModel([]);
this.useNewWallpaperPicker_ =
loadTimeData.getBoolean('useNewWallpaperPicker');
var self = this;
this.itemConstructor = function(value) {
var dataModelId = self.dataModelId_;
......
chrome/browser/resources/chromeos/wallpaper_manager/main.html
View file @ 0cd94a51
......@@ -89,6 +89,8 @@ found in the LICENSE file.
</div>
</div>
<div class="dialog-container">
<div id="dialog-header"></div>
<div class="dialog-body">
<div class="dialog-topbar">
<div id="navstrip">
<list id="categories-list"></list>
......@@ -105,6 +107,7 @@ found in the LICENSE file.
<div class="progress-bar" hidden>
<div class="progress-track"></div>
</div>
<div id="no-images-message" i18n-content="noImagesAvailable"></div>
<div class="bottom-bar">
<div id="online-wallpaper-attribute">
<img id="attribute-image" hidden>
......@@ -128,15 +131,22 @@ found in the LICENSE file.
</div>
</div>
</div>
<div class="top-header">
<div id="photographer-name"></div>
</div>
<div id="top-header">
<div class="top-header-contents">
<div id="image-title"></div>
<div id="collection-name"></div>
<div class="more-options">
<div id="refresh"></div>
<div>
<a id="explore" target="_blank"></a>
<div id="refresh" class='online-option' i18n-content="refreshLabel">
</div>
<div class='online-option'>
<a id="explore" i18n-content="exploreLabel" target="_blank"></a>
</div>
<div id="center" class='custom-option' i18n-content="centerLayout">
</div>
<div id="center-cropped" class='custom-option'
i18n-content="centerCroppedLayout"></div>
</div>
<div id="preview"></div>
</div>
</div>
</body>
......
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