From c193bb26e716d54d0efbd54fba7b01c07494e1e0 Mon Sep 17 00:00:00 2001
From: dbeam <dbeam@chromium.org>
Date: Thu, 17 Sep 2015 17:53:25 -0700
Subject: [PATCH] MD Downloads: UI review feedback

1) Make dates always above items
2) Remove horizontal date rules

R=groby@chromium.org
BUG=425626

Review URL: https://codereview.chromium.org/1356753002

Cr-Commit-Position: refs/heads/master@{#349556}
---
 chrome/browser/resources/md_downloads/item.css     | 60 +++-------------------
 chrome/browser/resources/md_downloads/item.html    | 10 ++--
 chrome/browser/resources/md_downloads/item.js      |  1 -
 .../resources/md_downloads/shared_style.css        |  2 -
 chrome/browser/resources/md_downloads/toolbar.css  |  3 +-
 5 files changed, 11 insertions(+), 65 deletions(-)

diff --git a/chrome/browser/resources/md_downloads/item.css b/chrome/browser/resources/md_downloads/item.css
index c9c495cf1b9f..af2410ce665f 100644
--- a/chrome/browser/resources/md_downloads/item.css
+++ b/chrome/browser/resources/md_downloads/item.css
@@ -4,30 +4,15 @@
 
 :host {
   display: flex;
-  margin: 24px 0;
-}
-
-:host([hide-date]) {
-  margin-top: -12px;
-}
-
-:host(:first-of-type),
-:host(:not(:first-of-type):not([hide-date])) {
-  margin-top: 30px;
-}
-
-#date-container,
-#end-cap {
-  flex: 1 0 var(--downloads-side-column-basis);
+  flex-direction: column;
+  margin: 12px 0;
 }
 
-#date-container > * {
+#date {
   color: #7c7c7c;
   font-weight: 500;
-}
-
-:host([hide-date]) #date-container {
-  visibility: hidden;
+  margin: 18px auto 16px;  /* This top margin + :host top margin = 30px. */
+  width: var(--downloads-item-width);
 }
 
 #content {
@@ -35,6 +20,7 @@
   border-radius: 2px;  /* TODO(dbeam): change to paper-card instead. */
   display: flex;
   flex: none;
+  margin: 0 auto;
   min-height: 103px;
   width: var(--downloads-item-width);
 }
@@ -183,37 +169,3 @@
   position: absolute;
   right: 10px;
 }
-
-@media not all and (max-width: 1024px) {
-  /* Only show rule separators in wide mode. */
-  :host(:not(:first-of-type):not([hide-date])) {
-    border-top: 1px solid rgba(0, 0, 0, .14);
-    padding-top: 30px;
-  }
-
-  #date-container > * {
-    -webkit-margin-start: 24px;
-  }
-}
-
-@media all and (max-width: 1024px) {
-  /* In narrow windows, put the dates on top instead of on the side. */
-  :host {
-    flex-direction: column;
-  }
-
-  :host([hide-date]) #date-container,
-  #end-cap {
-    display: none;
-  }
-
-  #content {
-    margin: 0 auto;
-  }
-
-  #date-container {
-    flex: none !important;
-    margin: 0 auto 16px;
-    width: var(--downloads-item-width);
-  }
-}
diff --git a/chrome/browser/resources/md_downloads/item.html b/chrome/browser/resources/md_downloads/item.html
index ad2e7d00eb34..5c43a5f4ffdb 100644
--- a/chrome/browser/resources/md_downloads/item.html
+++ b/chrome/browser/resources/md_downloads/item.html
@@ -11,11 +11,9 @@
 
 <dom-module id="downloads-item">
   <template>
-    <div id="date-container">
-      <template is="dom-if" if="[[!hideDate]]">
-        <div>[[computeDate_(data_.since_string, data_.date_string)]]</div>
-      </template>
-    </div>
+    <template is="dom-if" if="[[!hideDate]]">
+      <div id="date">[[computeDate_(data_.since_string, data_.date_string)]]</div>
+    </template>
 
     <paper-material id="content" on-dragstart="onDragStart_"
         elevation$="[[computeElevation_(isActive_)]]"
@@ -102,8 +100,6 @@
       <div id="incognito" hidden$="[[!data_.otr]]"></div>
     </paper-material>
 
-    <div id="end-cap"></div>
-
   </template>
   <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <link rel="import" type="css" href="chrome://downloads/shared_style.css">
diff --git a/chrome/browser/resources/md_downloads/item.js b/chrome/browser/resources/md_downloads/item.js
index 603b1cd7a42c..c4d3c221cea6 100644
--- a/chrome/browser/resources/md_downloads/item.js
+++ b/chrome/browser/resources/md_downloads/item.js
@@ -20,7 +20,6 @@ cr.define('downloads', function() {
 
     properties: {
       hideDate: {
-        reflectToAttribute: true,
         type: Boolean,
         value: true,
       },
diff --git a/chrome/browser/resources/md_downloads/shared_style.css b/chrome/browser/resources/md_downloads/shared_style.css
index 3aae4d7b5bda..95de68740aac 100644
--- a/chrome/browser/resources/md_downloads/shared_style.css
+++ b/chrome/browser/resources/md_downloads/shared_style.css
@@ -4,8 +4,6 @@
 
 * {
   --downloads-item-width: 622px;
-  /* (1024 total width - 622 item width) / 2 = 201 room to play. */
-  --downloads-side-column-basis: 201px;
 }
 
 paper-button {
diff --git a/chrome/browser/resources/md_downloads/toolbar.css b/chrome/browser/resources/md_downloads/toolbar.css
index 4dbd506df871..76e3fe4a5872 100644
--- a/chrome/browser/resources/md_downloads/toolbar.css
+++ b/chrome/browser/resources/md_downloads/toolbar.css
@@ -47,7 +47,8 @@
 
 #title,
 #search {
-  flex: 1 0 var(--downloads-side-column-basis);
+  /* (1024 total width - 622 item width) / 2 = 201 room to play. */
+  flex: 1 0 201px;
 }
 
 paper-icon-button {
-- 
2.11.4.GIT