Skip to content

Commit

Permalink
personalization: differentiate collage and thumbnail
Browse files Browse the repository at this point in the history 
Use thumbnail to refer to the small album images under the large album
cover image. Collage is the term we used to describe the 2x2 grid.

BUG=None
TEST=Manually

Change-Id: I80e20f44e8a15555cee996b6a8a595dd91d6f611
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4327208
Reviewed-by: Jason Thai <jasontt@chromium.org>
Commit-Queue: Jerry Liu <pzliu@google.com>
Cr-Commit-Position: refs/heads/main@{#1115946}
  • Loading branch information
@lpzjerry
lpzjerry authored and Chromium LUCI CQ committed Mar 10, 2023
1 parent 6da61cd commit 5ff4fb0
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 28 deletions.
42 changes: 21 additions & 21 deletions ash/webui/personalization_app/resources/js/ambient/ambient_preview_large_element.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
border-radius: 16px;
display: grid;
grid-template-areas:
'. slot slot slot .'
'. image image image .'
'. . . . .'
'. message message message .'
'. mainpage-desc . collage .'
'. . . . .';
'. slot slot slot .'
'. image image image .'
'. . . . .'
'. message message message .'
'. mainpage-desc . thumbnail .'
'. . . . .';
grid-template-columns: 20px auto 192px auto 20px;
grid-template-rows: auto auto 20px 192px auto 20px;
height: 100%;
Expand All @@ -19,7 +19,7 @@
'. slot .'
'. image .'
'. . .'
'. collage .'
'. thumbnail .'
'. mainpage-desc .'
'. . .';
grid-template-columns: 20px minmax(0,1fr) 20px;
Expand All @@ -29,12 +29,12 @@
#container.jelly-disabled {
border: 1px solid var(--cros-separator-color);
grid-template-areas:
'. slot slot slot .'
'. image image image .'
'. . . . .'
'. message message message .'
'. mainpage-desc . collage .'
'. . . . .';
'. slot slot slot .'
'. image image image .'
'. . . . .'
'. message message message .'
'. mainpage-desc . thumbnail .'
'. . . . .';
grid-template-columns: 20px minmax(0, 1fr) 16px 106px 20px;
grid-template-rows: auto minmax(158px, 220px) 20px 106px auto 24px;
}
Expand Down Expand Up @@ -194,7 +194,7 @@
border-radius: 12px;
display: grid;
gap: 2px;
grid-area: collage;
grid-area: thumbnail;
overflow: hidden;
}

Expand Down Expand Up @@ -247,7 +247,7 @@
#thumbnailContainer,
#thumbnailPlaceholder {
display: grid;
grid-area: collage;
grid-area: thumbnail;
justify-self: center;
max-width: 360px;
min-width: 252px;
Expand Down Expand Up @@ -409,11 +409,11 @@ <h2 class="clickable" on-click="onClickAmbientSubpageLink_">
on-keypress="onClickPreviewImage_">
</div>
<div aria-hidden="true"
class$="[[getThumbnailContainerClass_(collageImages_)]]"
class$="[[getThumbnailContainerClass_(thumbnailImages_)]]"
id="thumbnailContainer"
on-click="onClickPhotoCollage_"
on-keypress="onClickPhotoCollage_">
<template is="dom-repeat" items="[[collageImages_]]">
on-click="onClickPhotoThumbnail_"
on-keypress="onClickPhotoThumbnail_">
<template is="dom-repeat" items="[[thumbnailImages_]]">
<div class="thumbnail-item">
<img auto-src="[[item.url]]"
is-google-photos
Expand Down Expand Up @@ -506,8 +506,8 @@ <h2 on-click="onClickAmbientSubpageLink_" class="clickable">
<div aria-hidden="true"
class$="[[getCollageContainerClass_(collageImages_)]]"
id="collageContainer"
on-click="onClickPhotoCollage_"
on-keypress="onClickPhotoCollage_">
on-click="onClickPhotoThumbnail_"
on-keypress="onClickPhotoThumbnail_">
<template is="dom-repeat" items="[[collageImages_]]">
<img auto-src="[[item.url]]"
class="collage-item"
Expand Down
16 changes: 9 additions & 7 deletions ash/webui/personalization_app/resources/js/ambient/ambient_preview_large_element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,17 @@ export class AmbientPreviewLarge extends AmbientPreviewBase {
collageImages_: {
type: Array,
computed:
'computeThumbnailImages_(topicSource_, previewAlbums_, previewImages_)',
'computeCollageImages_(topicSource_, previewAlbums_, previewImages_)',
},
thumbnailImages_: {
type: Array,
computed: 'computeThumbnailImages_(topicSource_, previewImages_)',
},
};
}

private collageImages_: Url[];
private thumbnailImages_: Url[];

/** Returns the array of images that form the collage when Jelly is off. */
private computeCollageImages_(): Url[] {
Expand All @@ -76,9 +81,6 @@ export class AmbientPreviewLarge extends AmbientPreviewBase {

/** Returns the array of thumbnail images. */
private computeThumbnailImages_(): Url[] {
if (!this.isPersonalizationJellyEnabled_) {
return this.computeCollageImages_();
}
if (isNonEmptyArray(this.previewImages_)) {
const maxLength = Math.min(
this.previewImages_.length,
Expand Down Expand Up @@ -110,16 +112,16 @@ export class AmbientPreviewLarge extends AmbientPreviewBase {

/**
* Navigate directly to photo selection subpage. Should only be possible to
* call this function if |topic_source| is set and photo collage is visible.
* call this function if |topic_source| is set and thumbnail is visible.
*/
private onClickPhotoCollage_(event: Event) {
private onClickPhotoThumbnail_(event: Event) {
assert(typeof this.topicSource_ === 'number', 'topic source required');
event.stopPropagation();
PersonalizationRouter.instance().selectAmbientAlbums(this.topicSource_);
}

private getThumbnailContainerClass_(): string {
return `thumbnail-${this.collageImages_.length} clickable`;
return `thumbnail-${this.thumbnailImages_.length} clickable`;
}

private getCollageContainerClass_(): string {
Expand Down

0 comments on commit 5ff4fb0

Please sign in to comment.