| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html"> |
| <link rel="import" href="item.html"> |
| |
| <dom-module id="extensions-item-list"> |
| <template> |
| <style include="cr-shared-style"> |
| .items-container, |
| #content-wrapper { |
| --extensions-card-width: 400px; |
| } |
| |
| #container { |
| box-sizing: border-box; |
| height: 100%; |
| overflow: auto; |
| } |
| |
| #content-wrapper { |
| min-width: var(--extensions-card-width); |
| padding: 24px 60px 64px; |
| } |
| |
| .empty-list-message { |
| color: #6e6e6e; |
| font-size: 123%; /* Should be 16px when 100% is 13px. */ |
| font-weight: 500; |
| margin-top: 80px; |
| text-align: center; |
| } |
| |
| .items-container { |
| --grid-gutter: 12px; |
| --max-columns: 3; |
| display: grid; |
| grid-column-gap: var(--grid-gutter); |
| grid-row-gap: var(--grid-gutter); |
| grid-template-columns: repeat(auto-fill, var(--extensions-card-width)); |
| justify-content: center; |
| margin: auto; |
| max-width: calc(var(--extensions-card-width) * var(--max-columns) + |
| var(--grid-gutter) * var(--max-columns)); |
| } |
| |
| extensions-item { |
| grid-column-start: auto; |
| grid-row-start: auto; |
| } |
| |
| #app-title { |
| @apply --cr-section-text; |
| font-size: 123%; |
| font-weight: 400; |
| letter-spacing: .25px; |
| margin-bottom: 12px; |
| margin-top: 21px; |
| padding-bottom: 4px; |
| padding-top: 8px; |
| } |
| </style> |
| <div id="container"> |
| <div id="content-wrapper"> |
| <div id="no-items" class="empty-list-message" |
| hidden$="[[!shouldShowEmptyItemsMessage_( |
| apps.length, extensions.length)]]"> |
| <span on-click="onNoExtensionsTap_"> |
| $i18nRaw{noExtensionsOrApps} |
| </span> |
| </div> |
| <div id="no-search-results" class="empty-list-message" |
| hidden$="[[!shouldShowEmptySearchMessage_( |
| shownAppsCount_, shownExtensionsCount_, apps, extensions)]]"> |
| <span>$i18n{noSearchResults}</span> |
| </div> |
| <div class="items-container" hidden="[[!shownExtensionsCount_]]"> |
| <!-- Render only a few items first, to improve initial render time, |
| then render the remaining items on a different frame. Value of 3 |
| was chosen by experimentation, and it is a good trade-off between |
| initial render time and total render time. --> |
| <template is="dom-repeat" items="[[extensions]]" initial-count="3" |
| filter="[[computedFilter_]]" |
| rendered-item-count="{{shownExtensionsCount_::dom-change}}" |
| notify-dom-change> |
| <extensions-item id="[[item.id]]" data="[[item]]" |
| delegate="[[delegate]]" in-dev-mode="[[inDevMode]]"> |
| </extensions-item> |
| </template> |
| </div> |
| <div hidden="[[!shownAppsCount_]]"> |
| <!-- app-title needs to left-align with the grid content below, and |
| the easiest way to achieve this is to make it a grid as well. --> |
| <h2 id="app-title" class="items-container">$i18n{appsTitle}</h2> |
| <div class="items-container"> |
| <template is="dom-repeat" items="[[apps]]" initial-count="3" |
| filter="[[computedFilter_]]" |
| rendered-item-count="{{shownAppsCount_::dom-change}}" |
| notify-dom-change> |
| <extensions-item id="[[item.id]]" data="[[item]]" |
| delegate="[[delegate]]" in-dev-mode="[[inDevMode]]"> |
| </extensions-item> |
| </template> |
| </div> |
| </div> |
| </div> |
| </div> |
| </template> |
| <script src="item_list.js"></script> |
| </dom-module> |