| <style include="common wallpaper"> |
| wallpaper-grid-item[aria-disabled='true'][data-online]::part(image) { |
| filter: grayscale(100%); |
| opacity: 0.3; |
| } |
| |
| wallpaper-grid-item[data-google-photos]::part(image) { |
| height: 64px; |
| margin: 12px; |
| position: absolute; |
| top: 0; |
| width: 64px; |
| } |
| |
| wallpaper-grid-item[data-google-photos][aria-disabled='true']::part(image) { |
| /* Background color should stay light even in dark mode. */ |
| background-color: white; |
| border-radius: 100%; |
| box-sizing: border-box; |
| filter: grayscale(100%); |
| height: 54px; |
| padding: 4px; |
| width: 54px; |
| } |
| |
| wallpaper-grid-item[data-google-photos][aria-disabled='true']::part(textShadow) { |
| display: none; |
| } |
| |
| wallpaper-grid-item[data-google-photos] .primary-text { |
| align-items: center; |
| bottom: calc(8px + var(--cros-annotation-2-line-height)); |
| display: flex; |
| flex-direction: row; |
| } |
| |
| wallpaper-grid-item[data-google-photos] iron-icon[icon='personalization:managed'] { |
| --iron-icon-fill-color: var(--cros-icon-color-secondary); |
| --iron-icon-height: 16px; |
| --iron-icon-width: 16px; |
| display: none; |
| flex: 0 0 auto; |
| margin-inline-end: 8px; |
| } |
| |
| wallpaper-grid-item[data-google-photos][aria-disabled='true'] iron-icon[icon='personalization:managed'] { |
| /* Icon color should stay light even in dark mode. |
| * All of the google photos tile is always light. |
| */ |
| --iron-icon-fill-color: var(--cros-icon-color-secondary-light); |
| display: block; |
| } |
| |
| wallpaper-grid-item[data-google-photos][aria-disabled='true'] p { |
| /* Text color should stay light even in dark mode. |
| * All of the google photos tile is always light. |
| */ |
| color: var(--cros-text-color-secondary-light); |
| text-shadow: none; |
| } |
| |
| .outer-container { |
| height: calc(var(--personalization-app-grid-item-height) + |
| var(--personalization-app-grid-item-spacing)); |
| /* Media queries in trusted and untrusted code will resize to 25% at |
| * correct widths. Subtract 0.34px to fix subpixel rounding issues with |
| * iron-list. This makes sure all photo containers on a row add up to at |
| * least 1px smaller than the parent width.*/ |
| width: calc(100% / 3 - 0.34px); |
| } |
| |
| @media(min-width: 720px) { |
| .outer-container { |
| width: calc(100% / 4 - 0.25px); |
| } |
| } |
| |
| wallpaper-grid-item { |
| --wallpaper-grid-item-width: 100%; |
| } |
| |
| wallpaper-grid-item[data-google-photos]:not([aria-disabled='true']):not([placeholder]) { |
| /* Always white, even in dark mode. |
| * All of the google photos tile is always light. |
| */ |
| --personalization-app-grid-item-background-color: white; |
| } |
| |
| wallpaper-grid-item[data-google-photos][aria-disabled='true']:not([placeholder]) { |
| /* Disabled background color should stay light even in dark mode. |
| * All of the google photos tile is always light. |
| */ |
| --personalization-app-grid-item-background-color: var(--google-grey-200); |
| } |
| |
| wallpaper-grid-item[data-is-time-of-day-collection] { |
| --personalization-app-grid-item-border-radius: 80px; |
| } |
| </style> |
| <template is="dom-if" if="[[hasError_]]"> |
| <wallpaper-error></wallpaper-error> |
| </template> |
| <main aria-label="$i18n{wallpaperCollections}" hidden$="[[hasError_]]"> |
| <iron-list aria-setsize$="[[tiles_.length]]" |
| grid |
| items="[[tiles_]]" |
| role="listbox"> |
| <template> |
| <div class="outer-container"> |
| <template is="dom-if" if="[[isLoadingTile_(item)]]" restamp> |
| <wallpaper-grid-item |
| aria-label="$i18n{ariaLabelLoading}" |
| aria-posinset$="[[getAriaIndex_(index)]]" |
| disabled |
| index="[[index]]" |
| role="option" |
| tabindex$="[[tabIndex]]"> |
| </wallpaper-grid-item> |
| </template> |
| <template is="dom-if" if="[[isGooglePhotosTile_(item)]]"> |
| <wallpaper-grid-item |
| data-google-photos |
| aria-posinset$="[[getAriaIndex_(index)]]" |
| disabled="[[!isSelectableTile_(item)]]" |
| index="[[index]]" |
| primary-text="[[item.name]]" |
| on-wallpaper-grid-item-selected="onCollectionSelected_" |
| role="option" |
| src="[[item.preview]]" |
| tabindex$="[[tabIndex]]"> |
| <template is="dom-if" if="[[!isSelectableTile_(item)]]" restamp> |
| <div slot="text" class="primary-text"> |
| <iron-icon icon="personalization:managed" |
| title$="$i18n{managedSetting}"> |
| </iron-icon> |
| <p title$="[[item.name]]">[[item.name]]</p> |
| </div> |
| </template> |
| </wallpaper-grid-item> |
| </template> |
| <template is="dom-if" if="[[isLocalTile_(item)]]"> |
| <wallpaper-grid-item |
| aria-posinset$="[[getAriaIndex_(index)]]" |
| collage |
| disabled="[[!isSelectableTile_(item)]]" |
| index="[[index]]" |
| on-wallpaper-grid-item-selected="onCollectionSelected_" |
| primary-text="[[item.name]]" |
| role="option" |
| secondary-text="[[item.count]]" |
| src="[[item.preview]]" |
| tabindex$="[[tabIndex]]"> |
| </wallpaper-grid-item> |
| </template> |
| <template is="dom-if" if="[[isOnlineTile_(item)]]"> |
| <wallpaper-grid-item aria-posinset$="[[getAriaIndex_(index)]]" |
| data-online |
| data-is-time-of-day-collection$="[[isTimeOfDayCollection_(item)]]" |
| disabled="[[!isSelectableTile_(item)]]" |
| index="[[index]]" |
| info-text="[[item.info]]" |
| on-wallpaper-grid-item-selected="onCollectionSelected_" |
| primary-text="[[item.name]]" |
| role="option" |
| secondary-text="[[item.count]]" |
| src="[[item.preview]]" |
| tabindex$="[[tabIndex]]"> |
| </wallpaper-grid-item> |
| </template> |
| </div> |
| </template> |
| </iron-list> |
| </main> |