Skip to content

GitLab

T
tangled
Commit 0863af79 authored by Wenzhao Zang's avatar Wenzhao Zang Committed by Commit Bot
Browse files
Options

cros: Clean up old wallpaper picker code (Part IV) 

Remove the deprecated v2 css class. Also remove unused assets.

Bug: 812085
Change-Id: I2eef2dd7f1e6386e626903cc294b09d50df765c3
Reviewed-on: https://chromium-review.googlesource.com/c/1490738Reviewed-by: default avatarXiaoqian Dai <xdai@chromium.org>
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#635910}
parent 89eb7618
Show whitespace changes
Inline Side-by-side
Showing with 199 additions and 383 deletions
chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
View file @ 0863af79
...@@ -8,6 +8,7 @@ html { ...@@ -8,6 +8,7 @@ html {
body { body {
-webkit-app-region: drag; -webkit-app-region: drag;
background-color: transparent;
color: #999; color: #999;
font-size: 80%; font-size: 80%;
height: 100%; height: 100%;
...@@ -15,38 +16,37 @@ body { ...@@ -15,38 +16,37 @@ body {
padding: 0; padding: 0;
} }
body.v1 {
background-color: rgba(20, 20, 20, 0.93);
}
/* Click events are not received in draggable area. Making all clickable areas /* Click events are not received in draggable area. Making all clickable areas
* not draggable to receive click events. * not draggable to receive click events.
* TODO(bshe): Remove this when http://crbug.com/142275 fixed. */ * TODO(bshe): Remove this when http://crbug.com/142275 fixed. */
.dialog-topbar #navstrip, .dialog-topbar #navstrip,
.dialog-topbar #window-close-button,
.overlay-container .page, .overlay-container .page,
#author-website, #author-website,
/* TODO(bshe): Once http://crbug.com/369651 fixed, use .image-picker instead of /* TODO(bshe): Once http://crbug.com/369651 fixed, use .image-picker instead of
* #category-container. */ * #category-container. */
#category-container, #category-container {
#surprise-me {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.dialog-container { .dialog-container {
background-color: #fff;
border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: absolute;
width: 100%;
} }
.dialog-topbar { .dialog-topbar {
-webkit-box-align: center; -webkit-box-align: center;
display: -webkit-box; display: block;
height: 54px; height: 100%;
overflow: hidden; overflow: visible;
padding: 0 15px; padding: unset;
position: relative; position: relative;
width: 192px;
} }
.dialog-topbar .spacer { .dialog-topbar .spacer {
...@@ -55,18 +55,21 @@ body.v1 { ...@@ -55,18 +55,21 @@ body.v1 {
#categories-list { #categories-list {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
display: -webkit-box; display: block;
height: 54px; height: 100%;
outline: none; outline: none;
pointer-events: none;
width: 100%; width: 100%;
} }
#categories-list > li { #categories-list > li {
-webkit-box-align: center; -webkit-box-align: center;
border-top: 4px solid transparent; border-top: unset;
color: #777; color: #777;
display: -webkit-box; display: -webkit-box;
height: 50px; height: 31px;
margin-top: 8px;
pointer-events: auto;
transition: border-top 130ms ease; transition: border-top 130ms ease;
user-select: none; user-select: none;
} }
...@@ -77,17 +80,31 @@ body.v1 { ...@@ -77,17 +80,31 @@ body.v1 {
} }
#categories-list > li[selected] { #categories-list > li[selected] {
background-color: rgb(210, 227, 252);
border-radius: 0 20px 20px 0;
color: rgb(70, 78, 90); color: rgb(70, 78, 90);
cursor: default; cursor: default;
} }
#categories-list > li > div { #categories-list > li > div {
color: rgb(95, 99, 104);
font-family: 'Roboto';
font-size: 12px;
font-weight: 500;
line-height: 34px; line-height: 34px;
padding: 0 10px; padding: 0 30px;
} }
#categories-list > li[selected] > div { #categories-list > li[selected] > div {
color: #eee; color: rgb(26, 115, 232);
}
#categories-list:focus > li[selected] {
background-color: rgb(210, 227, 252);
}
.preview-animation #categories-list > li {
pointer-events: none;
} }
.close { .close {
...@@ -101,22 +118,6 @@ body.v1 { ...@@ -101,22 +118,6 @@ body.v1 {
width: 14px; width: 14px;
} }
#window-close-button {
background-image: url(../images/ui/close-white.png);
}
#window-close-button:hover {
background-image: url(../images/ui/close-white-hover.png);
}
#bar {
background-color: #eee;
height: 4px;
position: absolute;
top: 0;
transition: left 130ms ease-in-out;
}
.dialog-main { .dialog-main {
display: flex; display: flex;
flex: 1; flex: 1;
...@@ -124,6 +125,7 @@ body.v1 { ...@@ -124,6 +125,7 @@ body.v1 {
#category-container { #category-container {
flex: 1; flex: 1;
overflow-y: hidden;
position: relative; position: relative;
} }
...@@ -133,23 +135,15 @@ body.v1 { ...@@ -133,23 +135,15 @@ body.v1 {
* thumbnails. * thumbnails.
* TODO(bshe): Find the root cause of the margin. */ * TODO(bshe): Find the root cause of the margin. */
font-size: 0; font-size: 0;
height: 287px; height: 100%;
outline: none; outline: none;
overflow-y: auto; overflow-y: auto;
padding-bottom: 15px;
padding-inline-end: 5px;
padding-inline-start: 15px;
padding-top: 5px;
} }
.image-picker .spacer { .image-picker .spacer {
display: block; display: block;
} }
.image-picker.small {
height: 275px;
}
.image-picker > * { .image-picker > * {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
...@@ -158,20 +152,19 @@ body.v1 { ...@@ -158,20 +152,19 @@ body.v1 {
} }
.image-picker [role=listitem] { .image-picker [role=listitem] {
height: 68px; background-color: rgb(241, 243, 244);
margin-bottom: 1px; border-radius: 4px;
margin-inline-end: 1px; height: 160px;
margin-bottom: 8px;
margin-inline-end: 8px;
outline: none;
position: relative; position: relative;
width: 108px; width: 160px;
}
.image-picker:not([disabled]) [role=listitem]:hover {
outline: 3px solid #f1f1f1;
z-index: 1;
} }
.image-picker .check { .image-picker .check {
background-image: url(../images/ui/check.png); background-image: url(../images/ui/check.png);
display: none;
height: 32px; height: 32px;
left: 38px; left: 38px;
position: absolute; position: absolute;
...@@ -192,13 +185,14 @@ body.v1 { ...@@ -192,13 +185,14 @@ body.v1 {
background: #888; background: #888;
} }
/* The width and height of img tag need to be set here. Otherwise, an incorrect
* image size may be used during layout. Some images may be misaligned as a
* result. See http://code.google.com/p/chromium/issues/detail?id=148480 for
* screen shot. */
.image-picker img { .image-picker img {
height: 68px; height: unset;
width: 108px; position: absolute;
width: unset;
}
.image-picker img:not(.slide-show) {
animation: fade-in 250ms;
} }
.image-picker[disabled]~.bottom-bar #online-wallpaper-attribute, .image-picker[disabled]~.bottom-bar #online-wallpaper-attribute,
...@@ -206,8 +200,7 @@ body.v1 { ...@@ -206,8 +200,7 @@ body.v1 {
visibility: hidden; visibility: hidden;
} }
.image-picker[disabled], .image-picker[disabled] {
.image-picker-offline img:not([offline]) {
-webkit-filter: grayscale(1); -webkit-filter: grayscale(1);
} }
...@@ -217,15 +210,7 @@ body.v1 { ...@@ -217,15 +210,7 @@ body.v1 {
} }
.bottom-bar { .bottom-bar {
-webkit-box-align: center; display: none;
-webkit-box-orient: horizontal;
-webkit-box-pack: end;
display: -webkit-box;
padding: 11px 15px 8px 15px;
}
.bottom-bar > .spacer {
-webkit-box-flex: 1;
} }
#online-wallpaper-attribute { #online-wallpaper-attribute {
...@@ -259,14 +244,19 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] { ...@@ -259,14 +244,19 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
.progress-bar { .progress-bar {
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.7);
height: 6px; bottom: 0;
height: 4px;
position: absolute; position: absolute;
top: 62px;
width: 100%; width: 100%;
} }
.image-picker-offline .progress-bar {
display: none;
}
.progress-track { .progress-track {
background-color: rgb(66, 129, 244); background-color: rgb(66, 129, 244);
border-radius: 4px;
height: 100%; height: 100%;
transition: width 1ms linear; transition: width 1ms linear;
width: 0; width: 0;
...@@ -311,15 +301,6 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] { ...@@ -311,15 +301,6 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
background-image: url(../images/ui/close-overlay-hover.png); background-image: url(../images/ui/close-overlay-hover.png);
} }
/* Custom wallpaper thumbnail container. */
#add-new img {
content: url(../images/ui/add-wallpaper-thumbnail.png);
}
.image-picker:not([disabled]) #add-new:hover img {
content: url(../images/ui/add-wallpaper-thumbnail-hover.png);
}
#wallpaper-selection-container #content div { #wallpaper-selection-container #content div {
margin: 20px 0 5px 0; margin: 20px 0 5px 0;
} }
...@@ -340,170 +321,38 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] { ...@@ -340,170 +321,38 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
content: url(../images/ui/remember.png); content: url(../images/ui/remember.png);
} }
#surprise-me #checkbox { #dialog-header {
background-image: url(../images/ui/checkbox_unchecked.png);
display: inline-block;
height: 17px;
margin-right: 4px;
opacity: 0.7;
position: relative;
top: 4px;
width: 17px;
}
#surprise-me #checkbox.checked {
background-image: url(../images/ui/checkbox_checked.png);
}
#top-header,
#dialog-header,
#no-images-message,
#current-wallpaper-info-bar,
#message-container,
#preview-canvas {
display: none;
}
/**** New wallpaper picker rules **********************************************/
body.v2 {
background-color: transparent;
}
.v2 .dialog-container {
background-color: #fff;
border-radius: 4px;
position: absolute;
width: 100%;
}
.v2 #dialog-header {
display: flex; display: flex;
height: 40px; height: 40px;
} }
.v2 .dialog-body { .dialog-body {
display: flex; display: flex;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
} }
.v2 .dialog-topbar { .image-picker [role=listitem].first-row {
display: block;
height: 100%;
overflow: visible;
padding: unset;
width: 192px;
}
.v2 .dialog-topbar #bar {
display: none;
}
.v2 #category-container {
overflow-y: hidden;
}
.v2 #categories-list {
display: block;
height: 100%;
pointer-events: none;
}
.v2 #categories-list > li {
border-top: unset;
height: 31px;
margin-top: 8px;
pointer-events: auto;
}
.v2.preview-animation #categories-list > li {
pointer-events: none;
}
.v2 #categories-list > li > div {
color: rgb(95, 99, 104);
font-family: 'Roboto';
font-size: 12px;
font-weight: 500;
padding: 0 30px;
}
.v2 #categories-list > li[selected] {
background-color: rgb(232, 240, 254);
border-radius: 0 20px 20px 0;
}
.v2 #categories-list:focus > li[selected] {
background-color: rgb(210, 227, 252);
}
.v2 #categories-list > li[selected] > div {
color: rgb(26, 115, 232);
}
.v2 #surprise-me {
display: none;
}
.v2 .image-picker {
height: 100%;
padding-bottom: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding-top: unset;
}
.v2 .image-picker [role=listitem] {
background-color: rgb(241, 243, 244);
border-radius: 4px;
height: 160px;
margin-bottom: 8px;
margin-inline-end: 8px;
outline: none;
width: 160px;
}
.v2 .image-picker [role=listitem].first-row {
margin-top: 132px; margin-top: 132px;
} }
.v2 .image-picker [role=listitem][selected] { .image-picker [role=listitem][selected] {
background-color: rgba(26, 115, 232, 0.08); background-color: rgba(26, 115, 232, 0.08);
} }
.v2 .image-picker [role=listitem]:not([selected]):focus { .image-picker [role=listitem]:not([selected]):focus {
border: 2px solid rgba(26, 115, 232, 0.4); border: 2px solid rgba(26, 115, 232, 0.4);
box-sizing: border-box; box-sizing: border-box;
} }
.v2 .image-picker:not([disabled]) [role=listitem]:hover { .image-picker [role=listitem][selected]:not(.daily-refresh-item) img {
outline: none;
z-index: unset;
}
.v2 .image-picker img {
height: unset;
position: absolute;
width: unset;
}
.v2 .image-picker img:not(.slide-show) {
animation: fade-in 250ms;
}
.v2 .image-picker [role=listitem][selected]:not(.daily-refresh-item) img {
border-radius: 4px; border-radius: 4px;
box-shadow: 0 4px 8px rgba(32, 33, 36, 0.17); box-shadow: 0 4px 8px rgba(32, 33, 36, 0.17);
transform: scale(0.8); transform: scale(0.8);
transition: transform 240ms; transition: transform 240ms;
} }
.v2 .image-picker .check { .image-picker [role=listitem][selected] .check {
display: none;
}
.v2 .image-picker [role=listitem][selected] .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;
display: block; display: block;
...@@ -511,24 +360,20 @@ body.v2 { ...@@ -511,24 +360,20 @@ body.v2 {
top: 8px; top: 8px;
} }
.v2 .image-picker [role=listitem][selected] .check:focus { .image-picker [role=listitem][selected] .check:focus {
outline: none; outline: none;
} }
.v2 .image-picker::-webkit-scrollbar-thumb { .image-picker::-webkit-scrollbar-thumb {
background: #888; background: #888;
display: none; display: none;
} }
.v2 .image-picker.show-scroll-bar::-webkit-scrollbar-thumb { .image-picker.show-scroll-bar::-webkit-scrollbar-thumb {
display: block; display: block;
} }
.v2 #window-close-button { #dialog-header > div {
display: none;
}
.v2 #dialog-header > div {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
display: block; display: block;
height: 24px; height: 24px;
...@@ -537,21 +382,17 @@ body.v2 { ...@@ -537,21 +382,17 @@ body.v2 {
width: 24px; width: 24px;
} }
.v2 #minimize-button { #minimize-button {
background-image: url(../images/ui/button_minimize.png); background-image: url(../images/ui/button_minimize.png);
right: 52px; right: 52px;
} }
.v2 #close-button { #close-button {
background-image: url(../images/ui/button_close.png); background-image: url(../images/ui/button_close.png);
right: 12px; right: 12px;
} }
.v2 .bottom-bar { #top-header {
display: none;
}
.v2 #top-header {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
background-color: #fff; background-color: #fff;
border-radius: 0 0 24px 24px; border-radius: 0 0 24px 24px;
...@@ -564,26 +405,26 @@ body.v2 { ...@@ -564,26 +405,26 @@ body.v2 {
width: 698px; width: 698px;
} }
.v2.preview-mode:not(.wallpaper-set-successfully) #top-header { .preview-mode:not(.wallpaper-set-successfully) #top-header {
visibility: visible; visibility: visible;
} }
.v2 .top-header-contents { .top-header-contents {
display: none; display: none;
font-family: 'Roboto'; font-family: 'Roboto';
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
} }
.v2:not(.no-images) .top-header-contents { :not(.no-images) .top-header-contents {
display: flex; display: flex;
} }
.v2 .top-header-contents > div:not(.divider) { .top-header-contents > div:not(.divider) {
padding-top: 16px; padding-top: 16px;
} }
.v2 .top-header-contents #cancel-preview-wallpaper { .top-header-contents #cancel-preview-wallpaper {
background-image: url(../images/ui/left_arrow.svg); background-image: url(../images/ui/left_arrow.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 20px 20px; background-size: 20px 20px;
...@@ -593,11 +434,11 @@ body.v2 { ...@@ -593,11 +434,11 @@ body.v2 {
padding-inline-start: 32px; padding-inline-start: 32px;
} }
.v2 .top-header-contents #cancel-preview-wallpaper:focus { .top-header-contents #cancel-preview-wallpaper:focus {
outline-color: rgba(26, 115, 232, 0.4); outline-color: rgba(26, 115, 232, 0.4);
} }
.v2 .top-header-contents #image-title { .top-header-contents #image-title {
color: rgb(32, 33, 36); color: rgb(32, 33, 36);
max-width: 148px; max-width: 148px;
overflow: hidden; overflow: hidden;
...@@ -606,13 +447,13 @@ body.v2 { ...@@ -606,13 +447,13 @@ body.v2 {
white-space: nowrap; white-space: nowrap;
} }
.v2 .top-header-contents .divider { .top-header-contents .divider {
border-left: 1px solid rgb(232, 234, 237); border-inline-start: 1px solid rgb(232, 234, 237);
height: 34px; height: 34px;
margin-top: 8px; margin-top: 8px;
} }
.v2 .top-header-contents #wallpaper-description { .top-header-contents #wallpaper-description {
color: rgb(128, 134, 139); color: rgb(128, 134, 139);
max-width: 312px; max-width: 312px;
overflow: hidden; overflow: hidden;
...@@ -621,43 +462,43 @@ body.v2 { ...@@ -621,43 +462,43 @@ body.v2 {
white-space: nowrap; white-space: nowrap;
} }
.v2.daily-wallpaper .top-header-contents #wallpaper-description { .daily-wallpaper .top-header-contents #wallpaper-description {
max-width: 196px; max-width: 196px;
} }
.v2.custom-wallpaper .top-header-contents #wallpaper-description { .custom-wallpaper .top-header-contents #wallpaper-description {
color: rgb(32, 33, 36); color: rgb(32, 33, 36);
} }
.v2.daily-wallpaper .top-header-contents #wallpaper-description { .daily-wallpaper .top-header-contents #wallpaper-description {
max-width: 226px; max-width: 226px;
} }
.v2 .top-header-contents .more-options { .top-header-contents .more-options {
display: flex; display: flex;
position: absolute; position: absolute;
right: 8px; right: 8px;
} }
html[dir='rtl'] .v2 .top-header-contents .more-options { html[dir='rtl'] .top-header-contents .more-options {
padding-inline-start: 96px; padding-inline-start: 96px;
position: unset; position: unset;
} }
.v2 .top-header-contents .more-options > div, .top-header-contents .more-options > div,
.v2 #current-wallpaper-more-options > div { #current-wallpaper-more-options > div {
border: 1px solid rgb(218, 220, 224); border: 1px solid rgb(218, 220, 224);
border-radius: 16px; border-radius: 16px;
} }
.v2 .top-header-contents .more-options > div:focus, .top-header-contents .more-options > div:focus,
.v2 #current-wallpaper-more-options > div:focus { #current-wallpaper-more-options > div:focus {
border: 2px solid rgba(26, 115, 232, 0.4); border: 2px solid rgba(26, 115, 232, 0.4);
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
} }
.v2 .top-header-contents .more-options > div { .top-header-contents .more-options > div {
background-color: #fff; background-color: #fff;
color: rgb(26, 115, 232); color: rgb(26, 115, 232);
display: none; display: none;
...@@ -665,118 +506,122 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -665,118 +506,122 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
padding: 8px 24px; padding: 8px 24px;
} }
.v2 .top-header-contents .icon { .top-header-contents .icon {
background-repeat: no-repeat; background-repeat: no-repeat;
padding-inline-end: 8px; padding-inline-end: 8px;
width: 16px; width: 16px;
} }
.v2 .top-header-contents .more-options .center-button, .top-header-contents .more-options .center-button,
.v2 .top-header-contents .more-options .center-cropped-button { .top-header-contents .more-options .center-cropped-button {
background-color: #fff; background-color: #fff;
color: rgb(128, 134, 139); color: rgb(128, 134, 139);
padding-inline-start: 28px; padding-inline-start: 28px;
z-index: 0; z-index: 0;
} }
.v2 .top-header-contents .more-options .center-button.disabled, .top-header-contents .more-options .center-button.disabled,
.v2 .top-header-contents .more-options .center-cropped-button.disabled { .top-header-contents .more-options .center-cropped-button.disabled {
background-color: rgb(232, 240, 254); background-color: rgb(232, 240, 254);
color: rgb(26, 115, 232); color: rgb(26, 115, 232);
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
.v2 .top-header-contents .more-options .center-button { .top-header-contents .more-options .center-button {
padding-inline-end: 36px; padding-inline-end: 36px;
} }
.v2 .top-header-contents .more-options .center-cropped-button { .top-header-contents .more-options .center-cropped-button {
margin-inline-start: -24px; margin-inline-start: -24px;
} }
.v2 .top-header-contents .center-button .icon, .top-header-contents .center-button .icon,
.v2 #current-wallpaper-more-options #center .icon { #current-wallpaper-more-options #center .icon {
background-image: url(../images/ui/center_layout.svg); background-image: url(../images/ui/center_layout.svg);
} }
.v2 .top-header-contents .center-button.disabled .icon, .top-header-contents .center-button.disabled .icon,
.v2 #current-wallpaper-more-options #center.disabled .icon { #current-wallpaper-more-options #center.disabled .icon {
background-image: url(../images/ui/center_layout_disabled.svg); background-image: url(../images/ui/center_layout_disabled.svg);
} }
.v2 .top-header-contents .center-cropped-button .icon, .top-header-contents .center-cropped-button .icon,
.v2 #current-wallpaper-more-options #center-cropped .icon { #current-wallpaper-more-options #center-cropped .icon {
background-image: url(../images/ui/center_cropped_layout.svg); background-image: url(../images/ui/center_cropped_layout.svg);
} }
.v2 .top-header-contents .center-cropped-button.disabled .icon, .top-header-contents .center-cropped-button.disabled .icon,
.v2 #current-wallpaper-more-options #center-cropped.disabled .icon { #current-wallpaper-more-options #center-cropped.disabled .icon {
background-image: url(../images/ui/center_cropped_layout_disabled.svg); background-image: url(../images/ui/center_cropped_layout_disabled.svg);
} }
.v2 .top-header-contents #confirm-preview-wallpaper { .top-header-contents #confirm-preview-wallpaper {
margin-inline-start: 96px; margin-inline-start: 96px;
} }
.v2.daily-wallpaper .top-header-contents #confirm-preview-wallpaper { .daily-wallpaper .top-header-contents #confirm-preview-wallpaper {
margin-inline-start: 8px; margin-inline-start: 8px;
} }
.v2 .top-header-contents #refresh-wallpaper { .top-header-contents #refresh-wallpaper {
margin-inline-start: 16px; margin-inline-start: 16px;
} }
.v2.preview-mode.custom-wallpaper .more-options .custom-option, .preview-mode.custom-wallpaper .more-options .custom-option,
.v2.preview-mode.daily-wallpaper .more-options .daily-option, .preview-mode.daily-wallpaper .more-options .daily-option,
.v2.preview-mode:not(.custom-wallpaper):not(.daily-option) .more-options :not(.custom-option):not(.daily-option) { .preview-mode:not(.custom-wallpaper):not(.daily-option) .more-options :not(.custom-option):not(.daily-option) {
display: flex; display: flex;
} }
.v2.wallpaper-set-successfully .dialog-container, .wallpaper-set-successfully .dialog-container,
.v2.preview-mode .dialog-container, .preview-mode .dialog-container,
.v2.custom-wallpaper .top-header-contents #image-title, .custom-wallpaper .top-header-contents #image-title,
.v2.custom-wallpaper .top-header-contents .divider { .custom-wallpaper .top-header-contents .divider {
display: none; display: none;
} }
.v2.preview-mode .more-options .preview-option { .preview-mode .more-options .preview-option {
display: flex; display: flex;
} }
.v2.preview-mode:not(.wallpaper-set-successfully) #preview-canvas { #preview-canvas {
display: none;
}
.preview-mode:not(.wallpaper-set-successfully) #preview-canvas {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.v2 #no-images-message { #no-images-message {
display: block; display: block;
position: absolute; position: absolute;
visibility: hidden; /* Need this for correct positioning. */ visibility: hidden; /* Need this for correct positioning. */
} }
.v2.no-images #no-images-message { .no-images #no-images-message {
visibility: visible; visibility: visible;
} }
.v2.no-images #no-images-message .icon { .no-images #no-images-message .icon {
background-image: url(../images/ui/no_images_illustration.png); background-image: url(../images/ui/no_images_illustration.png);
background-repeat: no-repeat; background-repeat: no-repeat;
height: 96px; height: 96px;
width: 96px; width: 96px;
} }
.v2.no-images #no-images-message .text { .no-images #no-images-message .text {
padding-top: 15px; padding-top: 15px;
} }
.v2 .slide-show { .slide-show {
transition: opacity 1000ms; transition: opacity 1000ms;
} }
.v2 .daily-refresh-banner { .daily-refresh-banner {
background-color: rgba(228, 228, 228, 0.9); background-color: rgba(228, 228, 228, 0.9);
bottom: 0; bottom: 0;
height: 40px; height: 40px;
...@@ -784,7 +629,7 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -784,7 +629,7 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
width: 100%; width: 100%;
} }
.v2 .daily-refresh-slider { .daily-refresh-slider {
background-color: rgba(128, 134, 139, 0.4); background-color: rgba(128, 134, 139, 0.4);
border-radius: 6px; border-radius: 6px;
height: 12px; height: 12px;
...@@ -796,25 +641,25 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -796,25 +641,25 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
width: 30px; width: 30px;
} }
.v2 .daily-refresh-slider:focus { .daily-refresh-slider:focus {
outline: none; outline: none;
} }
.v2 .image-picker-offline .daily-refresh-slider, .image-picker-offline .daily-refresh-slider,
.v2 .daily-refresh-disabled .daily-refresh-slider { .daily-refresh-disabled .daily-refresh-slider {
pointer-events: none; pointer-events: none;
} }
.v2 .image-picker-offline img.slide-show, .image-picker-offline img.slide-show,
.v2 .daily-refresh-disabled img.slide-show { .daily-refresh-disabled img.slide-show {
-webkit-filter: grayscale(1); -webkit-filter: grayscale(1);
} }
.v2 .image-picker-offline img:not([offline]) { .image-picker-offline img:not([offline]) {
opacity: 0.5; opacity: 0.5;
} }
.v2 .daily-refresh-slider::before { .daily-refresh-slider::before {
background-color: #fff; background-color: #fff;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
...@@ -826,16 +671,16 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -826,16 +671,16 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
width: 16px; width: 16px;
} }
.v2 .daily-refresh-item.checked .daily-refresh-slider { .daily-refresh-item.checked .daily-refresh-slider {
background-color: rgb(26, 115, 232, 0.6); background-color: rgb(26, 115, 232, 0.6);
} }
.v2 .daily-refresh-item.checked .daily-refresh-slider::before { .daily-refresh-item.checked .daily-refresh-slider::before {
background-color: rgb(26, 115, 232); background-color: rgb(26, 115, 232);
transform: translateX(16px); transform: translateX(16px);
} }
.v2 .daily-refresh-item .daily-refresh-slider .ripple-circle { .daily-refresh-item .daily-refresh-slider .ripple-circle {
background: #000; background: #000;
border-radius: 50%; border-radius: 50%;
height: 36px; height: 36px;
...@@ -847,21 +692,21 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -847,21 +692,21 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
width: 36px; width: 36px;
} }
.v2 .daily-refresh-item.checked .daily-refresh-slider .ripple-circle { .daily-refresh-item.checked .daily-refresh-slider .ripple-circle {
background-color: rgb(30, 144, 255); background-color: rgb(30, 144, 255);
left: 4px; left: 4px;
} }
.v2 .daily-refresh-item.ripple-animation .daily-refresh-slider .ripple-circle { .daily-refresh-item.ripple-animation .daily-refresh-slider .ripple-circle {
animation: ripple 240ms; animation: ripple 240ms;
animation-delay: 120ms; animation-delay: 120ms;
} }
.v2 .daily-refresh-item:not(.ripple-animation) .daily-refresh-slider:focus .ripple-circle { .daily-refresh-item:not(.ripple-animation) .daily-refresh-slider:focus .ripple-circle {
transform: scale(1); transform: scale(1);
} }
.v2 .daily-refresh-label { .daily-refresh-label {
color: rgb(26, 115, 232); color: rgb(26, 115, 232);
font-family: 'Roboto'; font-family: 'Roboto';
font-size: 13px; font-size: 13px;
...@@ -871,7 +716,7 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -871,7 +716,7 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
top: 13px; top: 13px;
} }
.v2 #current-wallpaper-info-bar { #current-wallpaper-info-bar {
background-color: #fff; background-color: #fff;
border-bottom: 1px solid rgb(218, 220, 224); border-bottom: 1px solid rgb(218, 220, 224);
display: flex; display: flex;
...@@ -884,34 +729,34 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -884,34 +729,34 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
visibility: hidden; /* Need this for correct positioning. */ visibility: hidden; /* Need this for correct positioning. */
} }
.v2:not(.preview-mode) #current-wallpaper-info-bar.show-info-bar { :not(.preview-mode) #current-wallpaper-info-bar.show-info-bar {
visibility: visible; visibility: visible;
} }
.v2.preview-animation { .preview-animation {
animation: fade-in 800ms; animation: fade-in 800ms;
animation-direction: reverse; animation-direction: reverse;
} }
.v2 #current-wallpaper-image { #current-wallpaper-image {
border-radius: 4px; border-radius: 4px;
height: 100px; height: 100px;
margin-inline-end: 16px; margin-inline-end: 16px;
width: 100px; width: 100px;
} }
.v2 #currently-set-message { #currently-set-message {
color: rgb(128, 134, 139); color: rgb(128, 134, 139);
font-size: 13px; font-size: 13px;
} }
.v2 #current-wallpaper-title { #current-wallpaper-title {
color: rgb(32, 33, 36); color: rgb(32, 33, 36);
font-size: 14px; font-size: 14px;
padding-top: 9px; padding-top: 9px;
} }
.v2 #current-wallpaper-description { #current-wallpaper-description {
color: rgb(32, 33, 36); color: rgb(32, 33, 36);
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
...@@ -919,17 +764,17 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -919,17 +764,17 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
padding-top: 14px; padding-top: 14px;
} }
.v2 #current-wallpaper-description.small-font { #current-wallpaper-description.small-font {
font-size: 11px; font-size: 11px;
padding-top: 4px; padding-top: 4px;
} }
.v2 #current-wallpaper-more-info { #current-wallpaper-more-info {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.v2 #current-wallpaper-more-options { #current-wallpaper-more-options {
color: rgb(26, 115, 232); color: rgb(26, 115, 232);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -938,46 +783,46 @@ html[dir='rtl'] .v2 .top-header-contents .more-options { ...@@ -938,46 +783,46 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
right: 0; right: 0;
} }
html[dir='rtl'] .v2 #current-wallpaper-more-options { html[dir='rtl'] #current-wallpaper-more-options {
right: 420px; right: 420px;
} }
.v2 #current-wallpaper-more-options > div { #current-wallpaper-more-options > div {
display: flex; display: flex;
padding: 8px 0; padding: 8px 0;
} }
.v2 #current-wallpaper-more-options #center, #current-wallpaper-more-options #center,
.v2 #current-wallpaper-more-options #center-cropped { #current-wallpaper-more-options #center-cropped {
color: rgb(128, 134, 139); color: rgb(128, 134, 139);
} }
.v2 #current-wallpaper-more-options #center.disabled, #current-wallpaper-more-options #center.disabled,
.v2 #current-wallpaper-more-options #center-cropped.disabled { #current-wallpaper-more-options #center-cropped.disabled {
color: rgb(26, 115, 232); color: rgb(26, 115, 232);
pointer-events: none; pointer-events: none;
} }
.v2 #current-wallpaper-more-options .text { #current-wallpaper-more-options .text {
padding-top: 1px; padding-top: 1px;
} }
.v2 #current-wallpaper-more-options .icon { #current-wallpaper-more-options .icon {
background-repeat: no-repeat; background-repeat: no-repeat;
height: 16px; height: 16px;
padding-inline-end: 8px; padding-inline-end: 8px;
width: 16px; width: 16px;
} }
.v2 #current-wallpaper-more-options #refresh .icon { #current-wallpaper-more-options #refresh .icon {
background-image: url(../images/ui/current_wallpaper_refresh.svg); background-image: url(../images/ui/current_wallpaper_refresh.svg);
} }
.v2 #current-wallpaper-more-options #explore .icon { #current-wallpaper-more-options #explore .icon {
background-image: url(../images/ui/current_wallpaper_explore.svg); background-image: url(../images/ui/current_wallpaper_explore.svg);
} }
.v2 #message-container { #message-container {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
border-radius: 16px; border-radius: 16px;
bottom: 12px; bottom: 12px;
...@@ -989,32 +834,18 @@ html[dir='rtl'] .v2 #current-wallpaper-more-options { ...@@ -989,32 +834,18 @@ html[dir='rtl'] .v2 #current-wallpaper-more-options {
z-index: 4; z-index: 4;
} }
.v2 .progress-bar { #preview-spinner,
bottom: 0; #current-wallpaper-spinner {
height: 4px;
top: unset;
}
.v2 .image-picker-offline .progress-bar {
display: none;
}
.v2 .progress-track {
border-radius: 4px;
}
.v2 #preview-spinner,
.v2 #current-wallpaper-spinner {
background: url(chrome://resources/images/throbber_medium.svg) no-repeat; background: url(chrome://resources/images/throbber_medium.svg) no-repeat;
position: absolute; position: absolute;
} }
.v2 #preview-spinner { #preview-spinner {
height: 32px; height: 32px;
width: 32px; width: 32px;
} }
.v2 #current-wallpaper-spinner { #current-wallpaper-spinner {
height: 24px; height: 24px;
left: 38px; left: 38px;
top: 38px; top: 38px;
......
chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js
View file @ 0863af79
...@@ -310,20 +310,20 @@ chrome.storage.onChanged.addListener(function(changes, namespace) { ...@@ -310,20 +310,20 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
var wpDocument = wallpaperPickerWindow.contentWindow.document; var wpDocument = wallpaperPickerWindow.contentWindow.document;
var messageContainer = wpDocument.querySelector('#message-container'); var messageContainer = wpDocument.querySelector('#message-container');
chrome.wallpaperPrivate.getStrings(strings => {
if (appName) { if (appName) {
chrome.wallpaperPrivate.getStrings(function(strings) {
var message = var message =
strings.currentWallpaperSetByMessage.replace(/\$1/g, appName); strings.currentWallpaperSetByMessage.replace(/\$1/g, appName);
messageContainer.textContent = message; messageContainer.textContent = message;
messageContainer.style.visibility = 'visible'; messageContainer.style.visibility = 'visible';
wpDocument.querySelector('#wallpaper-grid').classList.add('small');
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;
});
} else { } else {
if (messageContainer.textContent !=
strings.setSuccessfullyMessage) {
messageContainer.style.visibility = 'hidden'; messageContainer.style.visibility = 'hidden';
wpDocument.querySelector('#wallpaper-grid').classList.remove('small'); }
Constants.WallpaperSyncStorage.get( Constants.WallpaperSyncStorage.get(
Constants.AccessSyncSurpriseMeEnabledKey, function(item) { Constants.AccessSyncSurpriseMeEnabledKey, function(item) {
// TODO(crbug.com/810169): Try to combine this part with // TODO(crbug.com/810169): Try to combine this part with
...@@ -342,6 +342,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) { ...@@ -342,6 +342,7 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
} }
}); });
} }
});
}; };
if (changes[Constants.AccessLocalWallpaperInfoKey]) { if (changes[Constants.AccessLocalWallpaperInfoKey]) {
......
chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js
View file @ 0863af79
...@@ -24,8 +24,6 @@ function WallpaperManager(dialogDom) { ...@@ -24,8 +24,6 @@ function WallpaperManager(dialogDom) {
this.currentWallpaper_ = null; this.currentWallpaper_ = null;
this.wallpaperRequest_ = null; this.wallpaperRequest_ = null;
this.preDownloadDomInit_(); this.preDownloadDomInit_();
// TODO(wzang): Remove this class.
this.document_.body.classList.add('v2');
// The wallpaper picker has two steps of fetching the online images: it first // The wallpaper picker has two steps of fetching the online images: it first
// fetches a list of collection names (ie. categories such as Art, // fetches a list of collection names (ie. categories such as Art,
...@@ -383,10 +381,8 @@ WallpaperManager.prototype.postDownloadDomInit_ = function() { ...@@ -383,10 +381,8 @@ WallpaperManager.prototype.postDownloadDomInit_ = function() {
$('message-container').textContent = $('message-container').textContent =
loadTimeData.getStringF('currentWallpaperSetByMessage', appName); loadTimeData.getStringF('currentWallpaperSetByMessage', appName);
$('message-container').style.visibility = 'visible'; $('message-container').style.visibility = 'visible';
$('wallpaper-grid').classList.add('small');
} else { } else {
$('message-container').style.visibility = 'hidden'; $('message-container').style.visibility = 'hidden';
$('wallpaper-grid').classList.remove('small');
} }
}); });
...@@ -657,8 +653,6 @@ WallpaperManager.prototype.onWallpaperChanged_ = function( ...@@ -657,8 +653,6 @@ WallpaperManager.prototype.onWallpaperChanged_ = function(
this.wallpaperGrid_.activeItem = activeItem; this.wallpaperGrid_.activeItem = activeItem;
this.currentWallpaper_ = currentWallpaperURL; this.currentWallpaper_ = currentWallpaperURL;
this.decorateCurrentWallpaperInfoBar_(); this.decorateCurrentWallpaperInfoBar_();
$('wallpaper-grid').classList.remove('small');
this.wallpaperGrid_.checkmark.focus(); this.wallpaperGrid_.checkmark.focus();
// Disables daily refresh if user selects a non-daily wallpaper. // Disables daily refresh if user selects a non-daily wallpaper.
...@@ -1254,10 +1248,6 @@ WallpaperManager.prototype.onCategoriesChange_ = function() { ...@@ -1254,10 +1248,6 @@ WallpaperManager.prototype.onCategoriesChange_ = function() {
var selectedIndex = categoriesList.selectionModel.selectedIndex; var selectedIndex = categoriesList.selectionModel.selectedIndex;
if (selectedIndex == -1) if (selectedIndex == -1)
return; return;
var selectedListItem = categoriesList.getListItemByIndex(selectedIndex);
var bar = $('bar');
bar.style.left = selectedListItem.offsetLeft + 'px';
bar.style.width = selectedListItem.offsetWidth + 'px';
// Cancel any ongoing wallpaper request if user clicks on another category. // Cancel any ongoing wallpaper request if user clicks on another category.
if (this.wallpaperRequest_) { if (this.wallpaperRequest_) {
this.wallpaperRequest_.abort(); this.wallpaperRequest_.abort();
...@@ -1265,7 +1255,7 @@ WallpaperManager.prototype.onCategoriesChange_ = function() { ...@@ -1265,7 +1255,7 @@ WallpaperManager.prototype.onCategoriesChange_ = function() {
} }
// Always start with the top when showing a new category. // Always start with the top when showing a new category.
this.wallpaperGrid_.scrollTop = 0; this.wallpaperGrid_.scrollTop = 0;
var selectedListItem = categoriesList.getListItemByIndex(selectedIndex);
if (selectedListItem.custom) { if (selectedListItem.custom) {
var wallpapersDataModel = new cr.ui.ArrayDataModel([]); var wallpapersDataModel = new cr.ui.ArrayDataModel([]);
if (loadTimeData.getBoolean('isOEMDefaultWallpaper')) { if (loadTimeData.getBoolean('isOEMDefaultWallpaper')) {
......
chrome/browser/resources/chromeos/wallpaper_manager/main.html
View file @ 0863af79
...@@ -91,10 +91,8 @@ found in the LICENSE file. ...@@ -91,10 +91,8 @@ found in the LICENSE file.
<div class="dialog-topbar"> <div class="dialog-topbar">
<div id="navstrip"> <div id="navstrip">
<list id="categories-list"></list> <list id="categories-list"></list>
<div id="bar"></div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div id="window-close-button" class="close"></div>
</div> </div>
<div class="dialog-main"> <div class="dialog-main">
<div id="category-container"> <div id="category-container">
......
chrome/browser/ui/ash/wallpaper_controller_client.h
View file @ 0863af79
...@@ -111,10 +111,6 @@ class WallpaperControllerClient : public ash::mojom::WallpaperControllerClient { ...@@ -111,10 +111,6 @@ class WallpaperControllerClient : public ash::mojom::WallpaperControllerClient {
// Shows the wallpaper of the first user in |UserManager::GetUsers|, or a // Shows the wallpaper of the first user in |UserManager::GetUsers|, or a
// default signin wallpaper if there's no user. This ensures the wallpaper is // default signin wallpaper if there's no user. This ensures the wallpaper is
// shown right after boot, regardless of when the login screen is available. // shown right after boot, regardless of when the login screen is available.
//
// TODO(wzang|784495): Consider deprecating this method after views-based
// login is enabled. It should be fast enough to request the first wallpaper
// so that there's no visible delay.
void ShowWallpaperOnLoginScreen(); void ShowWallpaperOnLoginScreen();
// ash::mojom::WallpaperControllerClient: // ash::mojom::WallpaperControllerClient:
......
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