Skip to content

GitLab

T
tangled
Commit 2ac3dbed authored by wutao's avatar wutao Committed by Commit Bot
Browse files
Options

ambient: Impl art albums spec 

Art albums will use grid layout.

Screenshot before: https://screenshot.googleplex.com/9YTwncEZ8n0
Screenshot after: https://screenshot.googleplex.com/6dQb75nzTSvst6g

Bug: b/167080802
Test: added new js tests
Change-Id: If086169782cddaff87199405b12d713f39c54d58
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2384331Reviewed-by: default avatarJimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarXiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Tao Wu <wutao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805149}
parent 4c8e707a
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 30 deletions
chrome/browser/resources/settings/chromeos/ambient_mode_page/album_item.html
View file @ 2ac3dbed
......@@ -23,45 +23,44 @@
#albumContainer.art-album {
margin: 8px auto;
width: 512px;
width: 280px;
}
#imageContainer {
background-color: rgba(var(--google-blue-50-rgb), .8);
border-radius: 4px;
display: block;
margin: 0 12px;
}
#imageContainer.personal-album {
height: 160px;
margin: 0 12px;
width: 160px;
}
#imageContainer.art-album {
height: 320px;
width: 512px;
height: 160px;
width: 256px;
}
#albumInfo.personal-album {
#albumInfo {
margin: 0 12px;
}
#image {
border-radius: 4px;
display: block;
height: 160px;
transform: scale(1.0);
transition: transform 240ms;
}
#image.personal-album {
height: 160px;
width: 160px;
}
#image.art-album {
height: 320px;
width: 512px;
width: 256px;
}
.selected-circle {
......@@ -72,17 +71,18 @@
display: none;
height: 22px;
position: absolute;
top: 13px;
width: 22px;
z-index: 1;
}
.selected-circle.personal-album {
left: 144px;
top: 12px;
}
.selected-circle.art-album {
left: 558px;
left: 240px;
top: 8px;
}
.check {
......@@ -91,7 +91,6 @@
display: none;
height: 10px;
position: absolute;
top: 17px;
transform: rotate(45deg);
width: 5px;
z-index: 2;
......@@ -99,10 +98,12 @@
.check.personal-album {
left: 152px;
top: 16px;
}
.check.art-album {
left: 566px;
left: 248px;
top: 12px;
}
:host([checked]) #image {
......@@ -117,7 +118,7 @@
}
:host([checked]) #image.art-album {
transform: scale(0.9);
transform: scale(0.875);
}
:host([checked]) .selected-circle {
......
chrome/browser/resources/settings/chromeos/ambient_mode_page/album_list.html
View file @ 2ac3dbed
......@@ -29,8 +29,7 @@
</style>
<paper-spinner-lite active="[[!albums]]"></paper-spinner-lite>
<iron-list grid="[[computeLayout_(topicSource)]]" scrollable
scroll-target="document" items="{{albums}}">
<iron-list grid scrollable scroll-target="document" items="{{albums}}">
<template>
<album-item album="{{item}}" checked="{{item.checked}}"
topic-source="[[topicSource]]" tabindex$="[[tabIndex]]">
......
chrome/browser/resources/settings/chromeos/ambient_mode_page/album_list.js
View file @ 2ac3dbed
......@@ -29,14 +29,6 @@ Polymer({
},
},
/**
* @return {boolean} Whether the iron-list layout is grid.
* @private
*/
computeLayout_() {
return this.topicSource === AmbientModeTopicSource.GOOGLE_PHOTOS;
},
/**
* @return {boolean}
* @private
......
chrome/test/data/webui/settings/chromeos/ambient_mode_photos_page_test.js
View file @ 2ac3dbed
......@@ -71,7 +71,7 @@ suite('AmbientModeHandler', function() {
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(2, albumItems.length);
const album0 = albumItems[0];
......@@ -84,6 +84,50 @@ suite('AmbientModeHandler', function() {
assertEquals('album1', album1.album.title);
});
test('personalPhotosImageContainerHasCorrectSize', function() {
ambientModePhotosPage.albums = [
{albumId: 'id0', checked: true, title: 'album0'},
{albumId: 'id1', checked: false, title: 'album1'},
{albumId: 'id2', checked: false, title: 'album2'}
];
ambientModePhotosPage.topicSource = AmbientModeTopicSource.GOOGLE_PHOTOS;
Polymer.dom.flush();
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
assertTrue(ironList.grid);
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(3, albumItems.length);
albumItems.forEach((album) => {
const imageContainer = album.$$('#imageContainer');
assertEquals(160, imageContainer.clientHeight);
assertEquals(160, imageContainer.clientWidth);
});
});
test('artImageContainerHasCorrectSize', function() {
ambientModePhotosPage.albums = [
{albumId: 'id0', checked: true, title: 'album0'},
{albumId: 'id1', checked: false, title: 'album1'},
{albumId: 'id2', checked: false, title: 'album2'}
];
ambientModePhotosPage.topicSource = AmbientModeTopicSource.ART_GALLERY;
Polymer.dom.flush();
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
assertTrue(ironList.grid);
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(3, albumItems.length);
albumItems.forEach((album) => {
const imageContainer = album.$$('#imageContainer');
assertEquals(160, imageContainer.clientHeight);
assertEquals(256, imageContainer.clientWidth);
});
});
test('toggleAlbumSelectionByClick', function() {
ambientModePhotosPage.albums = [
{albumId: 'id0', checked: true, title: 'album0'},
......@@ -93,7 +137,7 @@ suite('AmbientModeHandler', function() {
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(2, albumItems.length);
const album0 = albumItems[0];
......@@ -138,7 +182,7 @@ suite('AmbientModeHandler', function() {
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(2, albumItems.length);
const album0 = albumItems[0];
......@@ -176,7 +220,7 @@ suite('AmbientModeHandler', function() {
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(1, albumItems.length);
const album0 = albumItems[0];
......@@ -203,7 +247,7 @@ suite('AmbientModeHandler', function() {
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(1, albumItems.length);
const album0 = albumItems[0];
......@@ -238,7 +282,7 @@ suite('AmbientModeHandler', function() {
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(1, albumItems.length);
const album0 = albumItems[0];
......@@ -263,7 +307,7 @@ suite('AmbientModeHandler', function() {
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(1, albumItems.length);
const album0 = albumItems[0];
......
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