| <style> |
| :host { |
| width: 100%; |
| --gap-size: 12px; |
| } |
| |
| :host-context(.focus-outline-visible) #showAllButton:focus, |
| #showAllButton:focus-visible { |
| box-shadow: var(--ntp-focus-shadow); |
| outline: none; |
| } |
| |
| #showAllButton { |
| background-color: var(--color-new-tab-page-module-background); |
| border: none; |
| color: var(--color-new-tab-page-link); |
| cursor: pointer; |
| font-size: var(--ntp-module-text-size); |
| } |
| |
| .small-tiles { |
| display: flex; |
| flex-direction: row; |
| gap: var(--gap-size); |
| grid-column: 2 / 3; |
| grid-row: 1 / 2; |
| } |
| |
| .layout { |
| display: grid; |
| grid-gap: var(--gap-size) var(--gap-size); |
| grid-template-columns: repeat(2, 1fr); |
| grid-template-rows: repeat(2, 1fr); |
| padding: 0 16px 16px; |
| } |
| |
| .main-tile { |
| grid-column: 1 / 2; |
| grid-row: 1 / 3; |
| } |
| |
| .secondary-tile { |
| grid-column: 2 / 3; |
| grid-row: 1 / 2; |
| } |
| |
| .related-searches-tile { |
| grid-column: 2 / 3; |
| grid-row: 2 / 3; |
| } |
| |
| /* Set styles for high contrast mode in Windows. */ |
| @media (forced-colors: active) { |
| /* Set focus outline since box-shadow isn't visible in hcm */ |
| :host-context(.focus-outline-visible) #showAllButton:focus, |
| #showAllButton:focus-visible { |
| outline: var(--cr-focus-outline-hcm); |
| } |
| } |
| |
| /* At less than 768px + 2*18px side gaps, switch to the one column |
| presentation. */ |
| @media (max-width: 803px) { |
| .small-tiles, |
| .secondary-tile, |
| .related-searches-tile { |
| display: none; |
| } |
| |
| .layout { |
| display: block; |
| } |
| |
| .main-tile { |
| min-height: 100%; |
| } |
| } |
| |
| #layout3 .main-tile { |
| display: flex; |
| flex-direction: column; |
| gap: var(--gap-size); |
| } |
| </style> |
| <div id="content"> |
| <ntp-module-header |
| disable-text="[[i18nRecursive('', |
| 'modulesDisableButtonText', |
| 'modulesJourneyDisable')]]" |
| dismiss-text="[[i18n('modulesDismissButtonText', cluster.label)]]" |
| show-info-button show-dismiss-button |
| on-disable-button-click="onDisableButtonClick_" |
| on-dismiss-button-click="onDismissButtonClick_" |
| on-info-button-click="onInfoButtonClick_" |
| icon-src="chrome://resources/images/icon_journeys.svg"> |
| [[i18n('modulesJourneysResumeJourney', cluster.label)]] |
| <button id="showAllButton" type="button" on-click="onShowAllClick_" |
| slot="title-actions" |
| aria-label$="[[i18n('modulesJourneysShowAllAcc', cluster.label)]]"> |
| [[i18n('modulesJourneysShowAll')]] |
| </button> |
| <button id="openAllInTabGroupButton" class="dropdown-item" |
| on-click="onOpenAllInTabGroupClick_" |
| slot="action-menu-items" type="button"> |
| [[i18n('modulesJourneysOpenAllInNewTabGroupButtonText')]] |
| </button> |
| </ntp-module-header> |
| <template is="dom-if" if="[[isLayout_(1, layoutType)]]" restamp> |
| <div id="layout1" class="layout"> |
| <ntp-history-clusters-tile class="main-tile" large-format |
| visit="[[cluster.visits.0]]" on-click="onVisitTileClick_" |
| on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| <template is="dom-if" if="[[shouldShowCartTile_(cart)]]" restamp> |
| <ntp-history-clusters-cart-tile |
| id="cartTile" cart="[[cart]]" class="secondary-tile"> |
| </ntp-history-clusters-cart-tile> |
| </template> |
| <template is="dom-if" if="[[!shouldShowCartTile_(cart)]]" restamp> |
| <ntp-history-clusters-tile class="secondary-tile" medium-format |
| visit="[[cluster.visits.1]]" on-click="onVisitTileClick_" |
| on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| </template> |
| <ntp-history-clusters-suggest-tile class="related-searches-tile" |
| related-searches="[[cluster.relatedSearches]]" |
| on-click="onSuggestTileClick_" on-aux-click="onSuggestTileClick_"> |
| </ntp-history-clusters-suggest-tile> |
| </div> |
| </template> |
| <template is="dom-if" if="[[isLayout_(2, layoutType)]]" restamp> |
| <div id="layout2" class="layout"> |
| <ntp-history-clusters-tile class="main-tile" large-format |
| visit="[[cluster.visits.0]]" on-click="onVisitTileClick_" |
| on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| <template is="dom-if" if="[[shouldShowCartTile_(cart)]]" restamp> |
| <ntp-history-clusters-cart-tile |
| id="cartTile" cart="[[cart]]" class="secondary-tile"> |
| </ntp-history-clusters-cart-tile> |
| </template> |
| <template is="dom-if" if="[[!shouldShowCartTile_(cart)]]" restamp> |
| <div class="small-tiles"> |
| <ntp-history-clusters-tile small-format visit="[[cluster.visits.1]]" |
| on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| <ntp-history-clusters-tile small-format visit="[[cluster.visits.2]]" |
| on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| </div> |
| </template> |
| <ntp-history-clusters-suggest-tile class="related-searches-tile" |
| related-searches="[[cluster.relatedSearches]]" |
| on-click="onSuggestTileClick_" on-aux-click="onSuggestTileClick_"> |
| </ntp-history-clusters-suggest-tile> |
| </div> |
| </template> |
| <template is="dom-if" if="[[isLayout_(3, layoutType)]]" restamp> |
| <div id="layout3" class="layout"> |
| <div class="main-tile"> |
| <ntp-history-clusters-tile medium-format visit="[[cluster.visits.0]]" |
| on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| <ntp-history-clusters-tile medium-format visit="[[cluster.visits.1]]" |
| on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| </div> |
| <template is="dom-if" if="[[shouldShowCartTile_(cart)]]" restamp> |
| <ntp-history-clusters-cart-tile |
| id="cartTile" cart="[[cart]]" class="secondary-tile"> |
| </ntp-history-clusters-cart-tile> |
| </template> |
| <template is="dom-if" if="[[!shouldShowCartTile_(cart)]]" restamp> |
| <div class="small-tiles"> |
| <ntp-history-clusters-tile small-format visit="[[cluster.visits.2]]" |
| on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| <ntp-history-clusters-tile small-format visit="[[cluster.visits.3]]" |
| on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_"> |
| </ntp-history-clusters-tile> |
| </div> |
| </template> |
| <ntp-history-clusters-suggest-tile class="related-searches-tile" |
| related-searches="[[cluster.relatedSearches]]" |
| on-click="onSuggestTileClick_" on-aux-click="onSuggestTileClick_"> |
| </ntp-history-clusters-suggest-tile> |
| </div> |
| </template> |
| </div> |
| <cr-lazy-render id="infoDialogRender"> |
| <template> |
| <ntp-info-dialog inner-h-t-m-l="[[i18nAdvanced('modulesJourneysInfo')]]"> |
| </ntp-info-dialog> |
| </template> |
| </cr-lazy-render> |