| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://downloads/browser_proxy.html"> |
| <link rel="import" href="chrome://downloads/constants.html"> |
| <link rel="import" href="chrome://downloads/i18n_setup.html"> |
| <link rel="import" href="chrome://downloads/item.html"> |
| <link rel="import" href="chrome://downloads/search_service.html"> |
| <link rel="import" href="chrome://downloads/toolbar.html"> |
| <link rel="import" href="chrome://resources/cr_components/managed_footnote/managed_footnote.html"> |
| <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui/command.html"> |
| <link rel="import" href="chrome://resources/html/util.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> |
| |
| <dom-module id="downloads-manager"> |
| <template> |
| <style include="cr-hidden-style"> |
| :host { |
| display: flex; |
| flex: 1 0; |
| flex-direction: column; |
| height: 100%; |
| overflow: hidden; |
| z-index: 0; |
| |
| @apply --cr-page-host; |
| } |
| |
| :host-context([dark]) { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| #toolbar { |
| z-index: 1; |
| } |
| |
| #drop-shadow { |
| @apply --cr-container-shadow; |
| } |
| |
| :host([has-shadow_]) #drop-shadow { |
| opacity: var(--cr-container-shadow-max-opacity); |
| } |
| |
| downloads-item, |
| #downloadsList { |
| --downloads-card-margin: 24px; |
| --downloads-card-width: 680px; |
| } |
| |
| #downloadsList { |
| min-width: calc( |
| var(--downloads-card-width) + 2 * var(--downloads-card-margin)); |
| } |
| |
| #no-downloads, |
| #downloadsList { |
| flex: 1; |
| } |
| |
| :host([loading]) #no-downloads, |
| :host([loading]) #downloadsList { |
| display: none; |
| } |
| |
| #no-downloads { |
| align-items: center; |
| color: #6e6e6e; |
| display: flex; |
| font-size: 123.1%; |
| font-weight: 500; |
| justify-content: center; |
| /* To avoid overlapping with the header, we need this min-height |
| * until bug 596743 is fixed. */ |
| min-height: min-content; |
| } |
| |
| :host-context([dark]) #no-downloads { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| #no-downloads .illustration { |
| background: -webkit-image-set( |
| url(chrome://downloads/1x/no_downloads.png) 1x, |
| url(chrome://downloads/2x/no_downloads.png) 2x) |
| no-repeat center center; |
| height: 144px; /* Matches natural image height. */ |
| margin-bottom: 32px; |
| } |
| |
| #mainContainer { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| height: 100%; |
| overflow-y: overlay; |
| } |
| |
| managed-footnote { |
| border-top: none; |
| /* margin-bottom is needed to compensate for the next element's 21px |
| * margin at the top and 8px padding at the top. This leaves a 12px |
| * padding between this element's content and the top of the next |
| * element's text. */ |
| margin-bottom: calc(-21px - 8px); |
| min-width: calc( |
| var(--downloads-card-width) + 2 * var(--downloads-card-margin)); |
| padding-bottom: 12px; |
| padding-top: 12px; |
| /* The next element spills over this element. This ensures the link |
| * is clickable. */ |
| z-index: 1; |
| } |
| </style> |
| |
| <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}" |
| role="none" on-search-changed="onSearchChanged_"> |
| </downloads-toolbar> |
| <div id="drop-shadow"></div> |
| <div id="mainContainer" on-scroll="onScroll_"> |
| <managed-footnote hidden="[[inSearchMode_]]"></managed-footnote> |
| <iron-list id="downloadsList" items="[[items_]]" |
| hidden="[[!hasDownloads_]]" scroll-target="mainContainer"> |
| <template> |
| <downloads-item data="[[item]]"></downloads-item> |
| </template> |
| </iron-list> |
| <div id="no-downloads" hidden="[[hasDownloads_]]"> |
| <div> |
| <div class="illustration"></div> |
| <span>[[noDownloadsText_(inSearchMode_)]]</span> |
| </div> |
| </div> |
| </div> |
| </template> |
| <script src="chrome://downloads/manager.js"></script> |
| </dom-module> |