diff options
9 files changed, 57 insertions, 24 deletions
diff --git a/chrome/browser/resources/md_downloads/item.css b/chrome/browser/resources/md_downloads/item.css index b80cbac..0f39c80 100644 --- a/chrome/browser/resources/md_downloads/item.css +++ b/chrome/browser/resources/md_downloads/item.css @@ -23,7 +23,7 @@ } #date-container > * { - color: #5a5a5a; + color: #7c7c7c; font-size: 92.3%; font-weight: 500; } @@ -34,30 +34,42 @@ #content { background: white; - border-radius: 2px; /* TODO(dbeam): why does this differ from Polymer? */ + border-radius: 2px; /* TODO(dbeam): change to paper-card instead. */ display: flex; flex: none; min-height: 103px; width: var(--downloads-item-width); } +#content[elevation='1'] { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08), + 0 3px 1px -2px rgba(0, 0, 0, .2); +} + #details { -webkit-border-start: 1px #d8d8d8 solid; + -webkit-padding-end: 16px; + -webkit-padding-start: 24px; display: flex; flex: 1; flex-direction: column; - padding: 16px 16px 12px 16px; + padding-bottom: 12px; + padding-top: 16px; } #content:not(.is-active) #details { color: #bababa; } +#content:not(.is-active) #name { + text-decoration: line-through; +} + .icon-wrapper { align-self: center; flex: none; justify-content: center; - margin: 0 32px; + margin: 0 24px; } .icon { @@ -73,6 +85,7 @@ #content:not(.is-active) .icon { -webkit-filter: grayscale(100%); + opacity: .5; } #warning { @@ -144,6 +157,10 @@ display: none; } +.controls { + -webkit-margin-start: -8px; +} + #cancel, #retry, .keep, @@ -157,17 +174,17 @@ } #remove { - --iron-icon-height: 20px; - --iron-icon-width: 20px; + --iron-icon-height: 16px; + --iron-icon-width: 16px; --paper-icon-button: { - height: 20px; - padding: 6px; - width: 20px; + height: 16px; + padding: 8px; + width: 16px; }; } #incognito { - bottom: 16px; + bottom: 20px; content: -webkit-image-set(url(1x/incognito_marker.png) 1x, url(2x/incognito_marker.png) 2x); position: absolute; diff --git a/chrome/browser/resources/md_downloads/item.html b/chrome/browser/resources/md_downloads/item.html index 6588516..22c5212 100644 --- a/chrome/browser/resources/md_downloads/item.html +++ b/chrome/browser/resources/md_downloads/item.html @@ -39,7 +39,7 @@ <div id="safe" class="controls" hidden$="[[isDangerous_]]"> <cr-button id="show" focus-type="show" on-click="onShowClick_" i18n-content="controlShowInFolder" - lowercase></cr-button> + noink lowercase></cr-button> <cr-button id="retry" focus-type="retry" on-click="onRetryClick_" i18n-content="controlRetry"></cr-button> <cr-button id="pause" focus-type="pause" on-click="onPauseClick_" diff --git a/chrome/browser/resources/md_downloads/item.js b/chrome/browser/resources/md_downloads/item.js index 62eb9ba..478667b 100644 --- a/chrome/browser/resources/md_downloads/item.js +++ b/chrome/browser/resources/md_downloads/item.js @@ -88,7 +88,7 @@ cr.define('downloads', function() { this.$.progress.value = data.percent; } - var disableRemove; + var hideRemove; if (this.isDangerous_) { this.isMalware_ = @@ -96,7 +96,7 @@ cr.define('downloads', function() { data.danger_type == downloads.DangerType.DANGEROUS_HOST || data.danger_type == downloads.DangerType.DANGEROUS_URL || data.danger_type == downloads.DangerType.POTENTIALLY_UNWANTED; - disableRemove = true; + hideRemove = true; } else { /** @const */ var completelyOnDisk = data.state == downloads.States.COMPLETE && @@ -121,7 +121,7 @@ cr.define('downloads', function() { /** @const */ var showCancel = isPaused || isInProgress; this.$.cancel.hidden = !showCancel; - disableRemove = showCancel || + hideRemove = showCancel || !loadTimeData.getBoolean('allowDeletingHistory'); /** @const */ var controlledByExtension = data.by_ext_id && @@ -138,7 +138,7 @@ cr.define('downloads', function() { this.iconLoader_.loadScaledIcon(this.$['file-icon'], icon); } - this.$.remove.disabled = disableRemove; + this.$.remove.style.visibility = hideRemove ? 'hidden' : ''; }, /** diff --git a/chrome/browser/resources/md_downloads/manager.css b/chrome/browser/resources/md_downloads/manager.css index 189a131..b2505a0 100644 --- a/chrome/browser/resources/md_downloads/manager.css +++ b/chrome/browser/resources/md_downloads/manager.css @@ -12,7 +12,7 @@ @media screen and (max-width: 1024px) { :host { - flex-basis: 670px; + flex-basis: 670px; /* 622 card width + 24 left margin + 24 right margin. */ } } diff --git a/chrome/browser/resources/md_downloads/shared_style.css b/chrome/browser/resources/md_downloads/shared_style.css index 124498b..dd1f6ea 100644 --- a/chrome/browser/resources/md_downloads/shared_style.css +++ b/chrome/browser/resources/md_downloads/shared_style.css @@ -3,11 +3,11 @@ * found in the LICENSE file. */ * { - --downloads-item-width: 606px; + --downloads-item-width: 622px; --downloads-shared-style: { }; - /* (1024 total width - 606 item width) / 2 = 209 room to play. */ - --downloads-side-column-basis: 209px; + /* (1024 total width - 622 item width) / 2 = 201 room to play. */ + --downloads-side-column-basis: 201px; } cr-button:not([lowercase]) { diff --git a/chrome/browser/resources/md_downloads/toolbar.css b/chrome/browser/resources/md_downloads/toolbar.css index 57c7f9b..63e7037 100644 --- a/chrome/browser/resources/md_downloads/toolbar.css +++ b/chrome/browser/resources/md_downloads/toolbar.css @@ -32,8 +32,12 @@ width: var(--downloads-item-width); } +#actions cr-button { + -webkit-margin-end: 8px; +} + #actions, -#search { +#search-term { color: rgb(192, 199, 205); } @@ -58,12 +62,12 @@ color: inherit; font-family: inherit; font-size: inherit; - font-weight: 500; }; --paper-input-container-input-color: rgb(192, 199, 205); z-index: 0; } +#search-term input[type='search']::-webkit-search-decoration, #search-term input[type='search']::-webkit-search-cancel-button, #search-term input[type='search']::-webkit-search-results-button { -webkit-appearance: none; @@ -99,10 +103,11 @@ paper-icon-button { right: auto; } -paper-menu-button { +#more { --paper-menu-button: { padding: 0; }; + -webkit-margin-start: 16px; } paper-item { diff --git a/chrome/browser/resources/md_downloads/toolbar.html b/chrome/browser/resources/md_downloads/toolbar.html index 68c1a0f..bfb4d98 100644 --- a/chrome/browser/resources/md_downloads/toolbar.html +++ b/chrome/browser/resources/md_downloads/toolbar.html @@ -32,7 +32,7 @@ on-click="toggleShowingSearch_" hidden$="[[!showingSearch_]]"></paper-icon-button> </paper-input-container> - <paper-menu-button horizontal-align="right"> + <paper-menu-button id="more" horizontal-align="right"> <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button> <paper-menu class="dropdown-content"> diff --git a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html index 842f040..d6bda38 100644 --- a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html +++ b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html @@ -5,7 +5,8 @@ <link rel="import" type="css" href="cr_button.css"> <template> <paper-button active="{{active}}" disabled="[[disabled]]" - raised="[[raised]]" toggles="[[toggles]]" noink$="[[toggles]]"> + raised="[[raised]]" toggles="[[toggles]]" + noink$="[[computeNoInk_(toggles, noink)]]"> <content></content> </paper-button> </template> diff --git a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js index f1dab20..38b46f1 100644 --- a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js +++ b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js @@ -47,6 +47,11 @@ Polymer({ value: false }, + noink: { + type: Boolean, + value: false, + }, + /** * If true, the button is in the active state. Mostly useful when * |toggles| is true. @@ -57,4 +62,9 @@ Polymer({ notify: true } }, + + /** @private */ + computeNoInk_: function() { + return this.toggles || this.noink; + }, }); |