Skip to content

GitLab

T
tangled
Commit 951f2814 authored by Wenzhao Zang's avatar Wenzhao Zang Committed by Commit Bot
Browse files
Options

cros: Update new wallpaper picker UI (Part II) 

Spec:
https://drive.google.com/corp/drive/folders/0B_2Uyb2Rhx2ObU5VTFJVWHR2WW8

Bug: 800945
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9035fb027b998a71af6312a4365c5c85193dbcec
Reviewed-on: https://chromium-review.googlesource.com/982818Reviewed-by: default avatarAlexander Alekseev <alemate@chromium.org>
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#550761}
parent 358729f3
Hide whitespace changes
Inline Side-by-side
Showing with 450 additions and 136 deletions
chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
View file @ 951f2814
......@@ -394,9 +394,8 @@ body.v2 {
.v2 .dialog-container {
background-color: #fff;
border-radius: 4px;
height: 512px;
position: absolute;
width: 768px;
width: 100%;
}
.v2 #dialog-header {
......@@ -406,11 +405,10 @@ body.v2 {
.v2 .dialog-body {
display: flex;
height: 476px;
height: 100%;
}
.v2 .dialog-topbar {
-webkit-margin-end: 32px;
display: block;
height: 100%;
overflow: visible;
......@@ -433,8 +431,9 @@ body.v2 {
.v2 #categories-list > li {
border-top: unset;
height: 36px;
height: 32px;
margin-bottom: 8px;
margin-top: 8px;
}
.v2 #categories-list > li > div {
......@@ -447,7 +446,7 @@ body.v2 {
.v2 #categories-list > li[selected] {
background-color: rgb(232, 240, 254);
border-radius: 0 32px 32px 0;
border-radius: 0 20px 20px 0;
}
.v2 #categories-list > li[selected] > div {
......@@ -495,10 +494,25 @@ body.v2 {
}
.v2 #window-close-button {
background-color: rgba(128, 134, 139, 0.3);
border-radius: 4px;
left: 734px;
top: -40px;
display: none;
}
.v2 #minimize-button {
background-image: url(../images/ui/button_minimize.png);
display: block;
height: 24px;
position: absolute;
right: 38px;
width: 24px;
}
.v2 #close-button {
background-image: url(../images/ui/button_close.png);
display: block;
height: 24px;
position: absolute;
right: 8px;
width: 24px;
}
.v2 .image-picker .check,
......@@ -510,8 +524,7 @@ body.v2 {
background-color: #fff;
border-radius: 0 0 48px 48px;
display: flex;
height: 33px;
padding-top: 15px;
height: 48px;
position: absolute;
top: 0;
visibility: hidden; /* Need this for correct positioning. */
......@@ -533,38 +546,98 @@ body.v2 {
display: flex;
}
.v2 .top-header-contents #image-title {
.v2 .top-header-contents > div:not(.divider) {
padding-top: 15px;
}
.v2 .top-header-contents #cancel-preview-wallpaper {
-webkit-margin-start: 32px;
-webkit-padding-start: 32px;
background-image: url(../images/ui/left_arrow.svg);
background-repeat: no-repeat;
background-size: 16px 16px;
margin-top: 14px;
}
.v2 .top-header-contents #image-title {
-webkit-padding-end: 8px;
-webkit-padding-start: 8px;
color: rgb(32, 33, 36);
max-width: 360px;
overflow: hidden;
}
.v2 .top-header-contents .divider {
border-left: 1px solid rgb(232, 234, 237);
height: 34px;
margin-top: 8px;
}
.v2 .top-header-contents #collection-name {
-webkit-padding-start: 24px;
-webkit-padding-start: 8px;
color: rgb(128, 134, 139);
}
.v2.custom-wallpaper .top-header-contents #collection-name {
color: rgb(32, 33, 36);
}
.v2 .top-header-contents .more-options {
display: flex;
position: absolute;
right: 0;
/* TODO(wzang): Change this to be RTL-friendly. */
right: 32px;
}
.v2 .top-header-contents .more-options > div {
-webkit-padding-end: 32px;
-webkit-padding-end: 16px;
-webkit-padding-start: 16px;
color: rgb(66, 133, 244);
display: none;
}
.v2 .top-header-contents.online .online-option,
.v2 .top-header-contents.custom .custom-option {
.v2 .top-header-contents .more-options > div.disabled {
color: rgb(128, 134, 139);
pointer-events: none;
}
.v2 .top-header-contents .icon {
-webkit-padding-end: 8px;
background-repeat: no-repeat;
width: 16px;
}
.v2 .top-header-contents .center-button .icon,
.v2 #current-wallpaper-more-options #center .icon {
background-image: url(../images/ui/center_layout.svg);
}
.v2 .top-header-contents .center-button.disabled .icon {
background-image: url(../images/ui/center_layout_disabled.svg);
}
.v2 .top-header-contents .center-cropped-button .icon,
.v2 #current-wallpaper-more-options #center-cropped .icon {
background-image: url(../images/ui/center_cropped_layout.svg);
}
.v2 .top-header-contents .center-cropped-button.disabled .icon {
background-image: url(../images/ui/center_cropped_layout_disabled.svg);
}
.v2 .top-header-contents #confirm-preview-wallpaper {
-webkit-padding-start: 96px;
}
.v2.preview-mode.custom-wallpaper .more-options .custom-option,
.v2.preview-mode:not(.custom-wallpaper) .more-options :not(.custom-option) {
display: flex;
}
.v2.wallpaper-set-successfully .dialog-container,
.v2.preview-mode .dialog-container,
.v2.preview-mode .more-options :not(.preview-option) {
.v2.custom-wallpaper .top-header-contents #image-title,
.v2.custom-wallpaper .top-header-contents .divider {
display: none;
}
......@@ -572,11 +645,25 @@ body.v2 {
display: flex;
}
.v2.no-images #no-images-message {
.v2 #no-images-message {
display: block;
left: 180px;
position: absolute;
top: 220px;
visibility: hidden; /* Need this for correct positioning. */
}
.v2.no-images #no-images-message {
visibility: visible;
}
.v2.no-images #no-images-message .icon {
background-image: url(../images/ui/no_images_illustration.png);
background-repeat: no-repeat;
height: 96px;
width: 96px;
}
.v2.no-images #no-images-message .text {
padding-top: 15px;
}
.v2 .slide-show {
......@@ -593,14 +680,14 @@ body.v2 {
.v2 .daily-refresh-slider {
background-color: rgba(128, 134, 139, 0.4);
border-radius: 30%;
height: 10px;
border-radius: 6px;
height: 12px;
left: 116px;
pointer-events: auto;
position: absolute;
top: 15px;
transition: 400ms;
width: 28px;
width: 30px;
}
.v2 .daily-refresh-slider::before {
......@@ -610,7 +697,7 @@ body.v2 {
height: 16px;
left: -2px;
position: absolute;
top: -3px;
top: -2px;
transition: 400ms;
width: 16px;
}
......@@ -631,18 +718,19 @@ body.v2 {
font-weight: 500;
left: 18px;
position: absolute;
top: 12px;
top: 13px;
}
.v2 #current-wallpaper-info-bar {
background-color: #fff;
border-radius: 4px;
bottom: 0;
box-shadow: 0 0 60px;
display: flex;
flex-direction: row;
font-family: 'Roboto';
font-weight: 500;
height: 128px;
left: 32px;
opacity: 0;
position: absolute;
transition: opacity 800ms;
......@@ -682,22 +770,51 @@ body.v2 {
width: 320px;
}
.v2 #current-wallpaper-explore {
-webkit-margin-start: 96px;
.v2 #current-wallpaper-more-options {
-webkit-margin-end: 32px;
color: rgb(66, 133, 244);
font-size: 14px;
padding-top: 45px;
text-decoration: none;
display: flex;
flex-direction: column;
font-size: 12px;
}
.v2 #current-wallpaper-more-options > div {
border: 1px solid;
border-radius: 32px;
display: flex;
padding: 8px 4px;
}
.v2 #current-wallpaper-explore a {
.v2 #current-wallpaper-more-options a {
color: rgb(66, 133, 244);
text-decoration: none;
}
.v2.wallpaper-set-successfully #set-successfully-message {
.v2 #current-wallpaper-more-options .text {
-webkit-margin-end: 16px;
padding-top: 1px;
}
.v2 #current-wallpaper-more-options .icon {
-webkit-margin-start: 16px;
-webkit-padding-end: 8px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
.v2 #current-wallpaper-more-options #refresh .icon {
background-image: url(../images/ui/current_wallpaper_refresh.svg);
}
.v2 #current-wallpaper-more-options #explore .icon {
background-image: url(../images/ui/current_wallpaper_explore.svg);
}
.v2 #set-successfully-message {
background-color: #000;
border-radius: 18px;
bottom: 5px;
bottom: 12px;
color: #fff;
display: block;
padding: 8px 28px;
......
chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_cropped_layout.svg 0 → 100644
View file @ 951f2814
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#1A73E8" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
</svg>
chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_cropped_layout_disabled.svg 0 → 100644
View file @ 951f2814
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#80868B" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
</svg>
chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_layout.svg 0 → 100644
View file @ 951f2814
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#1A73E8" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
</svg>
chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_layout_disabled.svg 0 → 100644
View file @ 951f2814
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#80868B" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
</svg>
chrome/browser/resources/chromeos/wallpaper_manager/images/ui/current_wallpaper_explore.svg 0 → 100644
View file @ 951f2814
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<path fill="#1A73E8" d="M8,7.285 C7.6035,7.285 7.285,7.6035 7.285,8 C7.285,8.3965 7.6035,8.715 8,8.715 C8.3965,8.715 8.715,8.3965 8.715,8 C8.715,7.6035 8.3965,7.285 8,7.285 L8,7.285 Z M8,1.5 C4.412,1.5 1.5,4.412 1.5,8 C1.5,11.588 4.412,14.5 8,14.5 C11.588,14.5 14.5,11.588 14.5,8 C14.5,4.412 11.588,1.5 8,1.5 L8,1.5 Z M9.4235,9.4235 L4.1,11.9 L6.5765,6.5765 L11.9,4.1 L9.4235,9.4235 L9.4235,9.4235 Z"/>
<polygon points="0 0 16 0 16 16 0 16"/>
</g>
</svg>
chrome/browser/resources/chromeos/wallpaper_manager/images/ui/current_wallpaper_refresh.svg 0 → 100644
View file @ 951f2814
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<path fill="#1A73E8" fill-rule="nonzero" d="M11.7666667,4.23333333 C10.8033333,3.26666667 9.47333333,2.66666667 8,2.66666667 C5.05333333,2.66666667 2.67333333,5.05333333 2.67333333,8 C2.67333333,10.9466667 5.05333333,13.3333333 8,13.3333333 C10.4833333,13.3333333 12.5633333,11.6333333 13.1533333,9.33333333 L11.7666667,9.33333333 C11.2166667,10.8866667 9.74333333,12 8,12 C5.79,12 4,10.21 4,8 C4,5.79 5.79,4 8,4 C9.10333333,4 10.0933333,4.46 10.8166667,5.18333333 L8.66666667,7.33333333 L13.3333333,7.33333333 L13.3333333,2.66666667 L11.7666667,4.23333333 Z"/>
<polygon points="0 0 16 0 16 16 0 16"/>
</g>
</svg>
chrome/browser/resources/chromeos/wallpaper_manager/images/ui/left_arrow.svg 0 → 100644
View file @ 951f2814
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#1A73E8" fill-rule="evenodd" d="M18.0415385,11 L2.76923077,11 C2.32122209,11.1648505 2,11.4746322 2,11.9968 C2,12.5189678 2.32122209,12.8351495 2.76923077,13 L18.0307692,13 L11.5676923,19.9184 C11.3685877,20.1551278 11.2338462,20.4615817 11.2338462,20.8016 C11.2338462,21.464 11.7476923,22 12.3830769,22 C12.7744633,22 13.1206827,21.7956341 13.3279245,21.4829586 L21.4954803,13 C21.7999809,12.7838963 22,12.4088436 22,11.9968 C22,11.599147 21.8137082,11.2183924 21.5269978,11 L13.2824295,2.45372669 C13.0720283,2.17730426 12.7470873,2 12.3830769,2 C11.7476923,2 11.2338462,2.5376 11.2338462,3.2 C11.2338462,3.5377701 11.3674549,3.84309007 11.5826573,4.0612278 L18.0415385,10.7968 L18.0415385,11 Z" transform="matrix(-1 0 0 1 24 0)"/>
</svg>
chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js
View file @ 951f2814
......@@ -326,7 +326,7 @@ chrome.app.runtime.onLaunched.addListener(function() {
chrome.commandLinePrivate.hasSwitch('new-wallpaper-picker', (result) => {
var options = result ? {
frame: 'none',
state: 'maximized',
innerBounds: {width: 768, height: 512},
resizable: true,
alphaEnabled: true
} :
......
chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
View file @ 951f2814
......@@ -90,6 +90,12 @@ var AllCategoryIndex = 0;
*/
var OnlineCategoriesOffset = 1;
/**
* The following values should be kept in sync with the style sheet.
*/
var GRID_IMAGE_WIDTH_CSS = 160;
var GRID_IMAGE_PADDING_CSS = 8;
/**
* Returns a translated string.
*
......@@ -120,6 +126,21 @@ function getSelectedLayout() {
return setWallpaperLayout.options[setWallpaperLayout.selectedIndex].value;
}
/**
* Helper function to center the element.
* @param {Object} element The element to be centered.
* @param {number} totalWidth The total width. An empty value disables centering
* horizontally.
* @param {number} totalHeight The total height. An empty value disables
* centering vertically.
*/
function centerElement(element, totalWidth, totalHeight) {
if (totalWidth)
element.style.left = (totalWidth - element.offsetWidth) / 2 + 'px';
if (totalHeight)
element.style.top = (totalHeight - element.offsetHeight) / 2 + 'px';
}
/**
* Loads translated strings.
*/
......@@ -271,18 +292,17 @@ WallpaperManager.prototype.getCollectionsInfo_ = function() {
* @private
*/
WallpaperManager.prototype.showCollection_ = function(index) {
// Clear the 'no images' message if there's any.
this.document_.body.classList.remove('no-images');
var collectionId = this.collectionsInfo_[index]['collectionId'];
if (!(collectionId in this.imagesInfoMap_)) {
console.error('Attempt to display images with an unknown collection id.');
this.toggleNoImagesVisibility_(true);
return;
}
if (this.imagesInfoMap_[collectionId].length == 0) {
// Show a 'no images' message to user.
this.document_.body.classList.add('no-images');
this.toggleNoImagesVisibility_(true);
return;
}
this.toggleNoImagesVisibility_(false);
this.wallpaperGrid_.dataModel = this.imagesInfoMap_[collectionId];
};
......@@ -294,22 +314,39 @@ WallpaperManager.prototype.showCollection_ = function(index) {
WallpaperManager.prototype.placeWallpaperPicker_ = function() {
if (!this.useNewWallpaperPicker_)
return;
var totalWidth = this.document_.body.offsetWidth;
centerElement($('set-successfully-message'), totalWidth, null);
centerElement($('top-header'), totalWidth, null);
centerElement($('current-wallpaper-info-bar'), totalWidth, null);
centerElement(
$('no-images-message'), $('no-images-message').parentNode.offsetWidth,
$('no-images-message').parentNode.offsetHeight);
var icon = $('no-images-message').querySelector('.icon');
var text = $('no-images-message').querySelector('.text');
// Adjust the relative position of the "no images" icon and text.
if (text.offsetWidth > icon.offsetWidth) {
icon.style.WebkitMarginStart =
(text.offsetWidth - icon.offsetWidth) / 2 + 'px';
} else {
text.style.WebkitMarginStart =
(icon.offsetWidth - text.offsetWidth) / 2 + 'px';
}
// Position the entire image grid.
var totalHeight = this.document_.body.offsetHeight;
$('top-header').style.left =
(totalWidth - $('top-header').offsetWidth) / 2 + 'px';
var setSuccessfullyMessage = $('set-successfully-message');
setSuccessfullyMessage.style.left =
(totalWidth - setSuccessfullyMessage.offsetWidth) / 2 + 'px';
setSuccessfullyMessage.style.top =
(totalWidth - setSuccessfullyMessage.offsetHeight) / 2 + 'px';
var dialogContainer = this.document_.querySelector('.dialog-container');
dialogContainer.style.left =
(totalWidth - dialogContainer.offsetWidth) / 2 + 'px';
dialogContainer.style.top =
(totalHeight - dialogContainer.offsetHeight) / 2 + 'px';
var collectionTitleWidth =
this.document_.querySelector('.dialog-topbar').offsetWidth;
var totalPadding = collectionTitleWidth +
(chrome.app.window.current().isFullscreen() && totalWidth > totalHeight ?
88 :
48);
var columnWidth = GRID_IMAGE_WIDTH_CSS + GRID_IMAGE_PADDING_CSS;
var columnCount = Math.floor((totalWidth - totalPadding) / columnWidth);
var imageGridTotalWidth = columnCount * columnWidth;
this.document_.querySelector('.dialog-main').style.WebkitMarginStart =
(totalWidth - imageGridTotalWidth - totalPadding) + 'px';
};
/**
......@@ -395,9 +432,18 @@ WallpaperManager.prototype.toggleSurpriseMe = function() {
* do not depend on the download should be initialized here.
*/
WallpaperManager.prototype.preDownloadDomInit_ = function() {
$('window-close-button').addEventListener('click', function() {
window.close();
});
if (this.useNewWallpaperPicker_) {
$('minimize-button').addEventListener('click', function() {
chrome.app.window.current().minimize();
});
$('close-button').addEventListener('click', function() {
window.close();
});
} else {
$('window-close-button').addEventListener('click', function() {
window.close();
});
}
this.document_.defaultView.addEventListener(
'resize', this.onResize_.bind(this));
this.document_.defaultView.addEventListener(
......@@ -418,6 +464,13 @@ WallpaperManager.prototype.preDownloadDomInit_ = function() {
*/
WallpaperManager.prototype.postDownloadDomInit_ = function() {
i18nTemplate.process(this.document_, loadTimeData);
// TODO(crbug.com/811619): Replace with i18n strings.
if (this.useNewWallpaperPicker_) {
$('currently-set-message').textContent = 'Currently set';
$('confirm-preview-wallpaper').textContent = 'Set Wallpaper';
$('set-successfully-message').textContent = 'Wallpaper set successfully';
}
this.initCategoriesList_();
this.initThumbnailsGrid_();
this.presetCategory_();
......@@ -427,15 +480,6 @@ WallpaperManager.prototype.postDownloadDomInit_ = function() {
$('set-wallpaper-layout')
.addEventListener('change', this.onWallpaperLayoutChanged_.bind(this));
// On the new wallpaper picker, clicking the refresh button will force
// fetching the online wallpapers from scratch.
$('refresh').addEventListener('click', this.getCollectionsInfo_.bind(this));
$('center').addEventListener(
'click', this.setCustomWallpaperLayout_.bind(this, 'CENTER'));
$('center-cropped')
.addEventListener(
'click', this.setCustomWallpaperLayout_.bind(this, 'CENTER_CROPPED'));
// Always prefer the value from local filesystem to avoid the time window
// of setting the third party app name and the third party wallpaper.
var getThirdPartyAppName = function(callback) {
......@@ -528,6 +572,8 @@ WallpaperManager.prototype.postDownloadDomInit_ = function() {
});
}
if (this.useNewWallpaperPicker_)
this.decorateCurrentWallpaperInfoBar_();
this.onResize_();
this.initContextMenuAndCommand_();
WallpaperUtil.testSendMessage('launched');
......@@ -610,7 +656,6 @@ WallpaperManager.prototype.presetCategory_ = function() {
// TODO(crbug.com/812725): Implement preset category for the new picker. For
// now, autoselect the first category.
this.categoriesList_.selectionModel.selectedIndex = 0;
this.decorateCurrentWallpaperInfoBar_();
return;
}
......@@ -664,8 +709,6 @@ WallpaperManager.prototype.presetCategory_ = function() {
* @private
*/
WallpaperManager.prototype.decorateCurrentWallpaperInfoBar_ = function() {
// TODO(crbug.com/811619): Replace with i18n strings.
$('currently-set-message').textContent = 'Currently set';
var image = $('current-wallpaper-image');
var currentWallpaperInfo;
Object.values(this.imagesInfoMap_).forEach(imagesInfo => {
......@@ -674,39 +717,96 @@ WallpaperManager.prototype.decorateCurrentWallpaperInfoBar_ = function() {
currentWallpaperInfo = imagesInfo.item(i);
}
});
if (currentWallpaperInfo) {
WallpaperUtil.displayThumbnail(
image, currentWallpaperInfo.baseURL,
Constants.WallpaperSourceEnum.Online);
// Initialize the "more options" buttons.
var foundImageInList = !!currentWallpaperInfo;
var surpriseMeEnabled =
!this.document_.body.hasAttribute('surprise-me-disabled');
var visibleItemList = [];
$('refresh').hidden = !surpriseMeEnabled;
if (!$('refresh').hidden) {
visibleItemList.push($('refresh'));
// TODO(wzang): Add event listener to this button.
}
$('explore').hidden = !foundImageInList;
if (!$('explore').hidden) {
visibleItemList.push($('explore'));
$('current-wallpaper-explore-link').href =
currentWallpaperInfo.authorWebsite;
}
$('center').hidden = foundImageInList || surpriseMeEnabled;
if (!$('center').hidden) {
visibleItemList.push($('center'));
$('center').addEventListener(
'click', this.setCustomWallpaperLayout_.bind(this, 'CENTER'));
}
$('center-cropped').hidden = foundImageInList || surpriseMeEnabled;
if (!$('center-cropped').hidden) {
visibleItemList.push($('center-cropped'));
$('center-cropped')
.addEventListener(
'click',
this.setCustomWallpaperLayout_.bind(this, 'CENTER_CROPPED'));
}
if (visibleItemList.length == 1) {
visibleItemList[0].style.marginTop =
($('current-wallpaper-info-bar').offsetHeight -
visibleItemList[0].offsetHeight) /
2 +
'px';
} else {
// There are at most two visible elements.
var topMargin =
($('current-wallpaper-info-bar').offsetHeight -
visibleItemList[0].offsetHeight - visibleItemList[1].offsetHeight) *
0.4;
visibleItemList[0].style.marginTop = topMargin + 'px';
visibleItemList[1].style.marginTop = topMargin / 2 + 'px';
// Make sure that all the texts are centered.
for (var item of visibleItemList) {
var totalPadding = $('current-wallpaper-more-options').offsetWidth -
(item.querySelector('.icon').offsetWidth +
item.querySelector('.text').offsetWidth);
item.querySelector('.icon').style.WebkitMarginStart =
totalPadding / 2 + 'px';
}
}
$('current-wallpaper-more-options')
.classList.toggle('custom-wallpaper', !foundImageInList);
if (foundImageInList) {
// Initialize the image title and description.
$('current-wallpaper-title').textContent =
currentWallpaperInfo.displayText[0];
$('current-wallpaper-description').innerHTML = '';
for (var i = 1; i < currentWallpaperInfo.displayText.length; ++i) {
$('current-wallpaper-description')
.appendChild(
document.createTextNode(currentWallpaperInfo.displayText[i]));
}
$('current-wallpaper-explore-link').href =
currentWallpaperInfo.authorWebsite;
return;
WallpaperUtil.displayThumbnail(
image, currentWallpaperInfo.baseURL,
Constants.WallpaperSourceEnum.Online);
} else {
// Show a placeholder as the image title if the current wallpaper is not
// found in the list.
$('current-wallpaper-title').textContent = str('customCategoryLabel');
var onSuccess = fileEntry => {
image.src = fileEntry.toURL();
};
var onError = e => {
console.error('Can not get thumbnail data for the current wallpaper.');
// TODO(crbug.com/824453): Decide the right UI when this error happens.
};
wallpaperDirectories.getDirectory(
Constants.WallpaperDirNameEnum.THUMBNAIL, dirEntry => {
dirEntry.getFile(
getBaseName(this.currentWallpaper_), {create: false}, onSuccess,
onError);
}, onError);
}
// Show a placeholder as the image title if the current wallpaper is not found
// in the list.
$('current-wallpaper-title').textContent = str('customCategoryLabel');
$('current-wallpaper-explore').hidden = true;
var onSuccess = fileEntry => {
image.src = fileEntry.toURL();
};
var onError = e => {
console.error('Can not get thumbnail data for the current wallpaper.');
// TODO(crbug.com/824453): Decide the right UI when this error happens.
};
wallpaperDirectories.getDirectory(
Constants.WallpaperDirNameEnum.THUMBNAIL, dirEntry => {
dirEntry.getFile(
getBaseName(this.currentWallpaper_), {create: false}, onSuccess,
onError);
}, onError);
};
/**
......@@ -852,16 +952,44 @@ WallpaperManager.prototype.setCustomWallpaperSelectedOnNewPicker_ = function(
return;
}
chrome.wallpaperPrivate.setCustomWallpaper(
imageData, selectedItem.layout, true /*generateThumbnail=*/,
selectedItem.baseURL, true /*previewMode=*/, optThumbnailData => {
if (chrome.runtime.lastError) {
onPreviewCustomWallpaperFailure();
} else {
this.onPreviewModeStarted_(
successCallback.bind(null, imageData, optThumbnailData));
}
});
var decorateLayoutButton = layout => {
if (layout != 'CENTER' && layout != 'CENTER_CROPPED') {
console.error('Wallpaper layout ' + layout + ' is not supported.');
return;
}
var previewCallback = optThumbnailData => {
if (chrome.runtime.lastError) {
onPreviewCustomWallpaperFailure();
} else {
this.onPreviewModeStarted_(
Constants.WallpaperSourceEnum.Custom,
successCallback.bind(null, imageData, optThumbnailData));
}
};
var layoutButton = this.document_.querySelector(
layout == 'CENTER' ? '.center-button' : '.center-cropped-button');
var newLayoutButton = layoutButton.cloneNode(true);
layoutButton.parentNode.replaceChild(newLayoutButton, layoutButton);
newLayoutButton.addEventListener('click', () => {
chrome.wallpaperPrivate.setCustomWallpaper(
imageData, layout, true /*generateThumbnail=*/,
selectedItem.baseURL, true /*previewMode=*/,
optThumbnailData => {
this.document_.querySelector('.center-button')
.classList.toggle('disabled', layout == 'CENTER');
this.document_.querySelector('.center-cropped-button')
.classList.toggle('disabled', layout == 'CENTER_CROPPED');
previewCallback(optThumbnailData);
});
});
};
decorateLayoutButton('CENTER');
decorateLayoutButton('CENTER_CROPPED');
// The default layout is CENTER_CROPPED.
this.document_.querySelector('.center-cropped-button').click();
});
};
......@@ -929,8 +1057,10 @@ WallpaperManager.prototype.setSelectedOnlineWallpaper_ = function(
wallpaperUrl, selectedItem.layout, previewMode, exists => {
var successCallback = () => {
if (previewMode) {
this.onPreviewModeStarted_(this.onWallpaperChanged_.bind(
this, selectedItem, wallpaperUrl));
this.onPreviewModeStarted_(
Constants.WallpaperSourceEnum.Online,
this.onWallpaperChanged_.bind(
this, selectedItem, wallpaperUrl));
} else {
this.onWallpaperChanged_(selectedItem, wallpaperUrl);
}
......@@ -975,16 +1105,21 @@ WallpaperManager.prototype.setSelectedOnlineWallpaper_ = function(
/**
* Handles the UI changes when the preview mode is started.
* @param {string} source The source of the wallpaper corresponding to
* |WallpaperSourceEnum|.
* @param {function} confirmPreviewWallpaperCallback The callback after preview
* wallpaper is set.
* @private
*/
WallpaperManager.prototype.onPreviewModeStarted_ = function(
confirmPreviewWallpaperCallback) {
source, confirmPreviewWallpaperCallback) {
if (this.document_.body.classList.contains('preview-mode'))
return;
this.document_.body.classList.add('preview-mode');
// TODO(crbug.com/811619): Replace with i18n strings.
$('confirm-preview-wallpaper').textContent = 'Set Wallpaper';
$('cancel-preview-wallpaper').textContent = 'Cancel';
this.document_.body.classList.toggle(
'custom-wallpaper', source == Constants.WallpaperSourceEnum.Custom);
chrome.app.window.current().fullscreen();
var onConfirmClicked = () => {
chrome.wallpaperPrivate.confirmPreviewWallpaper(() => {
......@@ -1002,6 +1137,8 @@ WallpaperManager.prototype.onPreviewModeStarted_ = function(
// Deselect the image.
this.wallpaperGrid_.selectedItem = null;
this.document_.body.classList.remove('preview-mode');
// Exit full screen.
chrome.app.window.current().restore();
});
};
$('cancel-preview-wallpaper').addEventListener('click', onCancelClicked);
......@@ -1032,13 +1169,13 @@ WallpaperManager.prototype.removeOldestWallpaper_ = function() {
* @private
*/
WallpaperManager.prototype.showSuccessMessageAndQuit_ = function() {
// TODO(crbug.com/811619): Replace with i18n strings.
$('set-successfully-message').textContent = 'Wallpaper set successfully';
this.document_.body.classList.add('wallpaper-set-successfully');
// Success message must be shown in full screen mode.
chrome.app.window.current().fullscreen();
// Close the window after showing the success message.
window.setTimeout(() => {
window.close();
}, 2000);
}, 800);
};
/*
......@@ -1110,12 +1247,6 @@ WallpaperManager.prototype.setWallpaperAttribution = function(selectedItem) {
if (selectedItem.displayText)
$('image-title').textContent = selectedItem.displayText[0];
$('collection-name').textContent = selectedItem.collectionName;
var topHeaderContents =
this.document_.querySelector('.top-header-contents');
topHeaderContents.classList.toggle(
'online', selectedItem.source === Constants.WallpaperSourceEnum.Online);
topHeaderContents.classList.toggle(
'custom', selectedItem.source === Constants.WallpaperSourceEnum.Custom);
return;
}
......@@ -1390,10 +1521,14 @@ WallpaperManager.prototype.onSurpriseMeStateChanged_ = function(enabled) {
else
this.document_.body.setAttribute('surprise-me-disabled', '');
// The wallpaper grid on the new picker contains UI elements that should
// not be disabled.
if (!this.useNewWallpaperPicker_)
if (this.useNewWallpaperPicker_) {
// The surprise me state affects the UI of the current wallpaper info bar.
this.decorateCurrentWallpaperInfoBar_();
} else {
// On the old wallpaper picker, the wallpaper grid should be disabled when
// surprise me is enabled.
$('wallpaper-grid').disabled = enabled;
}
};
/**
......@@ -1415,8 +1550,7 @@ WallpaperManager.prototype.onCategoriesChange_ = function() {
if (this.useNewWallpaperPicker_) {
chrome.wallpaperPrivate.getLocalImagePaths(localImagePaths => {
// Show a 'no images' message to user if there's no local image.
this.document_.body.classList.toggle(
'no-images', localImagePaths.length == 0);
this.toggleNoImagesVisibility_(localImagePaths.length == 0);
var wallpapersDataModel = new cr.ui.ArrayDataModel([]);
for (var imagePath of localImagePaths) {
var wallpaperInfo = {
......@@ -1568,4 +1702,16 @@ WallpaperManager.prototype.onCategoriesChange_ = function() {
}
};
/**
* Toggles the visibility of the "no images" message.
* @param {boolean} visible Whether the message should be visible.
* @private
*/
WallpaperManager.prototype.toggleNoImagesVisibility_ = function(visible) {
if (visible == this.document_.body.classList.contains('no-images'))
return;
this.document_.body.classList.toggle('no-images', visible);
this.placeWallpaperPicker_();
};
})();
chrome/browser/resources/chromeos/wallpaper_manager/main.html
View file @ 951f2814
......@@ -89,7 +89,10 @@ found in the LICENSE file.
</div>
</div>
<div class="dialog-container">
<div id="dialog-header"></div>
<div id="dialog-header">
<div id="minimize-button"></div>
<div id="close-button"></div>
</div>
<div class="dialog-body">
<div class="dialog-topbar">
<div id="navstrip">
......@@ -107,7 +110,10 @@ 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 id="no-images-message">
<div class="icon"></div>
<div class="text" i18n-content="noImagesAvailable"></div>
</div>
<div class="bottom-bar">
<div id="online-wallpaper-attribute">
<img id="attribute-image" hidden>
......@@ -138,25 +144,43 @@ found in the LICENSE file.
<div id="current-wallpaper-title"></div>
<div id="current-wallpaper-description"></div>
</div>
<div id="current-wallpaper-explore">
<a id="current-wallpaper-explore-link" i18n-content="exploreLabel"
target="_blank"></a>
<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 id="top-header">
<div class="top-header-contents">
<div id="cancel-preview-wallpaper" class="preview-option"></div>
<div id="image-title"></div>
<div class="divider"></div>
<div id="collection-name"></div>
<div class="more-options">
<div id="refresh" class='online-option' i18n-content="refreshLabel">
<div class="center-button custom-option">
<div class="icon"></div>
<div class="text" i18n-content="centerLayout"></div>
</div>
<div id="center" class='custom-option' i18n-content="centerLayout">
<div class="center-cropped-button custom-option">
<div class="icon"></div>
<div class="text" i18n-content="centerCroppedLayout"></div>
</div>
<div id="center-cropped" class='custom-option'
i18n-content="centerCroppedLayout"></div>
<div id="cancel-preview-wallpaper" class='preview-option'></div>
<div id="confirm-preview-wallpaper" class='preview-option'></div>
<div id="confirm-preview-wallpaper" class="preview-option"></div>
</div>
</div>
</div>
......
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