blob: 015710be621743fbc082460a4203b67d8d76372c [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="browser_proxy.html">
<link rel="import" href="constants.html">
<link rel="import" href="i18n_setup.html">
<link rel="import" href="item.html">
<link rel="import" href="search_service.html">
<link rel="import" href="toolbar.html">
<link rel="import" href="chrome://resources/cr_components/managed_footnote/managed_footnote.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast_manager.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/find_shortcut_behavior.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: url(images/no_downloads.svg) no-repeat
center center;
background-size: contain;
height: 144px;
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"
preserve-focus>
<template>
<downloads-item data="[[item]]" tabindex$="[[tabIndex]]"
iron-list-tab-index="[[tabIndex]]" last-focused="{{lastFocused_}}"
list-blurred="{{listBlurred_}}">
</downloads-item>
</template>
</iron-list>
<div id="no-downloads" hidden="[[hasDownloads_]]">
<div>
<div class="illustration"></div>
<span>[[noDownloadsText_(inSearchMode_)]]</span>
</div>
</div>
</div>
<cr-toast-manager on-undo-click="onUndoClick_" undo-label="$i18n{undo}"
undo-description="$i18n{undoDescription}" duration="10000">
</cr-toast-manager>
</template>
<script src="manager.js"></script>
</dom-module>