| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/action_link.html"> |
| <link rel="import" href="chrome://resources/html/action_link_css.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.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/icon_loader.html"> |
| <link rel="import" href="chrome://downloads/icons.html"> |
| |
| <dom-module id="downloads-item"> |
| <template> |
| <style include="action-link cr-hidden-style cr-icons paper-button-style"> |
| :host { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| paper-button { |
| font-weight: 500; |
| margin: 0; |
| min-width: auto; |
| } |
| |
| #date { |
| font-size: 0.875rem; |
| font-weight: 400; |
| letter-spacing: .25px; |
| margin: 21px auto 6px; |
| padding-bottom: 4px; |
| padding-top: 8px; |
| width: var(--downloads-card-width); |
| } |
| |
| #date:empty { |
| display: none; |
| } |
| |
| #content { |
| background: var(--cr-card-background-color); |
| border-radius: var(--cr-card-border-radius); |
| display: flex; |
| flex: none; |
| margin: 6px auto; |
| min-height: 103px; |
| position: relative; |
| width: var(--downloads-card-width); |
| } |
| |
| #content.is-active { |
| @apply --cr-card-elevation; |
| } |
| |
| #content:not(.is-active) { |
| background: rgba(255, 255, 255, .6); |
| border: 1px var(--google-grey-300) solid; |
| } |
| |
| #details { |
| border-inline-start: 1px #d8d8d8 solid; |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| min-width: 0; /* This allows #url to ellide correctly. */ |
| padding-bottom: 12px; |
| padding-inline-end: 16px; |
| padding-inline-start: var(--downloads-card-margin); |
| padding-top: 16px; |
| } |
| |
| #content:not(.is-active) #details { |
| color: rgba(27, 27, 27, .6); |
| } |
| |
| #content:not(.is-active) #name { |
| text-decoration: line-through; |
| } |
| |
| .icon-wrapper { |
| align-self: center; |
| flex: none; |
| justify-content: center; |
| margin: 0 24px; |
| } |
| |
| .icon, |
| #file-icon-wrapper { |
| height: 32px; |
| width: 32px; |
| } |
| |
| #file-icon-wrapper { |
| overflow: hidden; /* Reduces file icon flicker on initial load. */ |
| } |
| |
| #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper { |
| /* TODO(dbeam): animate from top-aligned to centered when items finish? |
| */ |
| align-self: flex-start; |
| padding-top: 16px; |
| } |
| |
| #content:not(.is-active) .icon { |
| -webkit-filter: grayscale(100%); |
| opacity: .5; |
| } |
| |
| #file-icon-wrapper iron-icon[icon='cr:insert-drive-file'] { |
| color: var(--paper-grey-400); |
| } |
| |
| #file-icon-wrapper iron-icon[icon='cr:warning'], |
| .dangerous #description { |
| color: var(--google-red-700); |
| } |
| |
| #name, |
| #file-link, |
| #url { |
| max-width: 100%; |
| } |
| |
| #name, |
| #file-link { |
| font-weight: 500; |
| word-break: break-all; |
| } |
| |
| .is-active :-webkit-any(#name, #file-link, #show) { |
| color: var(--google-blue-600); |
| } |
| |
| #name { |
| margin-inline-end: 12px; /* Only really affects #tag. */ |
| } |
| |
| #tag { |
| color: #5a5a5a; |
| font-weight: 500; |
| } |
| |
| #url { |
| color: inherit; |
| margin-top: 6px; |
| min-height: 0; |
| overflow: hidden; |
| text-decoration: none; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .is-active #url { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| #progress, |
| #description:not(:empty), |
| .controls { |
| margin-top: 16px; |
| } |
| |
| .is-active #description { |
| color: #616161; |
| } |
| |
| #progress { |
| --paper-progress-active-color: var(--google-blue-600); |
| --paper-progress-container-color: rgb(223, 222, 223); |
| width: auto; |
| } |
| |
| #show { |
| margin: .7em 0; |
| } |
| |
| #controlled-by { |
| margin-inline-start: 8px; |
| } |
| |
| #controlled-by, |
| #controlled-by a { |
| color: #5a5a5a; |
| } |
| |
| .is-active #controlled-by { |
| color: #333; |
| } |
| |
| .is-active #controlled-by a { |
| color: var(--google-blue-600); |
| } |
| |
| #remove-wrapper { |
| align-self: flex-start; |
| margin: 0; |
| } |
| |
| #remove-wrapper > paper-icon-button-light { |
| --cr-icon-size: 16px; |
| color: var(--google-grey-refresh-700); |
| height: 32px; |
| margin-inline-end: 8px; |
| margin-inline-start: 0; |
| margin-top: 8px; |
| width: 32px; |
| } |
| |
| #incognito { |
| bottom: 20px; |
| content: -webkit-image-set( |
| url(chrome://downloads/1x/incognito_marker.png) 1x, |
| url(chrome://downloads/2x/incognito_marker.png) 2x); |
| position: absolute; |
| right: 16px; |
| } |
| |
| :host-context([dir='rtl']) #incognito { |
| left: 16px; |
| right: initial; |
| } |
| |
| paper-button.action-button, |
| paper-button.pause-button { |
| margin-inline-end: 8px; |
| } |
| </style> |
| |
| <h3 id="date">[[computeDate_(data.hideDate, |
| data.sinceString, |
| data.dateString)]]</h3> |
| |
| <div id="content" on-dragstart="onDragStart_" |
| class$="[[computeClass_(isActive_, isDangerous_, showProgress_)]]"> |
| <div id="file-icon-wrapper" class="icon-wrapper"> |
| <img class="icon" id="file-icon" alt="" hidden="[[!useFileIcon_]]"> |
| <iron-icon class="icon" icon$="[[computeIcon_( |
| isDangerous_, data.dangerType, useFileIcon_)]]" |
| hidden="[[useFileIcon_]]"></iron-icon> |
| </div> |
| |
| <div id="details"> |
| <div id="title-area"><!-- |
| Can't have any line breaks. |
| --><a is="action-link" id="file-link" href="[[data.url]]" |
| on-click="onFileLinkTap_" |
| hidden="[[!completelyOnDisk_]]">[[data.fileName]]</a><!-- |
| Before #name. |
| --><span id="name" |
| hidden="[[completelyOnDisk_]]">[[data.fileName]]</span> |
| <span id="tag">[[computeTag_(data.state, |
| data.lastReasonText, |
| data.fileExternallyRemoved)]]</span> |
| </div> |
| |
| <a id="url" target="_blank">[[chopUrl_(data.url)]]</a> |
| |
| <div id="description">[[computeDescription_( |
| data.state, |
| data.dangerType, |
| data.fileName, |
| data.progressStatusText)]]</div> |
| |
| <template is="dom-if" if="[[showProgress_]]"> |
| <paper-progress id="progress" |
| indeterminate="[[isIndeterminate_(data.percent)]]" |
| value="[[data.percent]]"></paper-progress> |
| </template> |
| |
| <div id="safe" class="controls" hidden="[[isDangerous_]]"> |
| <a is="action-link" id="show" on-click="onShowTap_" |
| hidden="[[!completelyOnDisk_]]">$i18n{controlShowInFolder}</a> |
| <template is="dom-if" if="[[data.retry]]"> |
| <paper-button class="action-button" on-click="onRetryTap_"> |
| $i18n{controlRetry} |
| </paper-button> |
| </template> |
| <template is="dom-if" if="[[pauseOrResumeText_]]"> |
| <paper-button class$="[[pauseOrResumeClass_]]" |
| on-click="onPauseOrResumeTap_"> |
| [[pauseOrResumeText_]] |
| </paper-button> |
| </template> |
| <template is="dom-if" if="[[showCancel_]]"> |
| <paper-button on-click="onCancelTap_"> |
| $i18n{controlCancel} |
| </paper-button> |
| </template> |
| <span id="controlled-by"><!-- Text populated dynamically. --></span> |
| </div> |
| |
| <template is="dom-if" if="[[isDangerous_]]"> |
| <div id="dangerous" class="controls"> |
| <!-- Dangerous file types (e.g. .exe, .jar). --> |
| <template is="dom-if" if="[[!isMalware_]]"> |
| <paper-button on-click="onDiscardDangerousTap_" |
| class="action-button">$i18n{dangerDiscard}</paper-button> |
| <paper-button on-click="onSaveDangerousTap_"> |
| $i18n{dangerSave}</paper-button> |
| </template> |
| |
| <!-- Things that safe browsing has determined to be dangerous. --> |
| <template is="dom-if" if="[[isMalware_]]"> |
| <paper-button on-click="onDiscardDangerousTap_" |
| class="action-button"> |
| $i18n{controlRemoveFromList}</paper-button> |
| <paper-button on-click="onSaveDangerousTap_"> |
| $i18n{dangerRestore}</paper-button> |
| </template> |
| </div> |
| </template> |
| </div> |
| |
| <div id="remove-wrapper" class="icon-wrapper "> |
| <paper-icon-button-light class="icon-clear" |
| style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]"> |
| <button id="remove" |
| title="$i18n{controlRemoveFromList}" |
| aria-label$="[[controlRemoveFromListAriaLabel_]]" |
| on-click="onRemoveTap_"></button> |
| </paper-icon-button-light> |
| </div> |
| |
| <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]"> |
| </div> |
| </div> |
| |
| </template> |
| <script src="chrome://downloads/item.js"></script> |
| </dom-module> |