From 03a33e5270a16b88ea44d34b457292d79e897eae Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Thu, 11 Feb 2016 15:24:33 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8:=20Fixes,=20labels=20in=20narrow?=
 =?UTF-8?q?=20thread=20view,=20better=20label=20wrap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message-list/lib/message-list.cjsx        |  6 +-
 .../stylesheets/message-list.less             |  7 +-
 .../thread-list/lib/thread-list-columns.cjsx  | 19 ++++-
 .../thread-list/lib/thread-list.cjsx          |  4 +-
 .../thread-list/stylesheets/thread-list.less  | 69 ++++++++++---------
 static/components/disclosure-triangle.less    |  2 +-
 static/components/extra.less                  |  9 ++-
 static/components/list-tabular.less           | 52 ++++----------
 static/components/outline-view.less           | 15 ++--
 static/mixins/common-ui-elements.less         |  4 +-
 static/workspace.less                         |  2 +-
 11 files changed, 90 insertions(+), 99 deletions(-)

diff --git a/internal_packages/message-list/lib/message-list.cjsx b/internal_packages/message-list/lib/message-list.cjsx
index 7712e4ce7..1169b68ba 100755
--- a/internal_packages/message-list/lib/message-list.cjsx
+++ b/internal_packages/message-list/lib/message-list.cjsx
@@ -216,8 +216,10 @@ class MessageList extends React.Component
 
     <div className="message-subject-wrap">
       <MailImportantIcon thread={@state.currentThread}/>
-      <span className="message-subject">{subject}</span>
-      {@_renderLabels()}
+      <div style={flex: 1}>
+        <span className="message-subject">{subject}</span>
+        {@_renderLabels()}
+      </div>
       {@_renderIcons()}
     </div>
 
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index 2e9c726cf..b7e75c427 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -17,7 +17,7 @@ body.platform-win32 {
   .sheet-toolbar {
     .message-toolbar-arrow.down {
       margin: 0 0 0 1px;
-      padding: 6px 5px 0 5px;
+      padding: 0 5px;
       .windows-btn-bg;
       &:hover {
         background: #e5e5e5;
@@ -29,7 +29,7 @@ body.platform-win32 {
     }
     .message-toolbar-arrow.up {
       margin: 0 0 0 1px;
-      padding: 6px 5px 0 5px;
+      padding: 0 5px;
       .windows-btn-bg;
       &.btn-icon:hover {
         color: @text-color;
@@ -126,7 +126,6 @@ body.platform-win32 {
     width: calc(~"100% - 12px");
     max-width: @message-max-width;
     margin: 11px auto 10px auto;
-    padding-left: 20px;
     -webkit-user-select: text;
     line-height: @font-size-large * 1.8;
     display: flex;
@@ -134,7 +133,7 @@ body.platform-win32 {
   }
   .mail-important-icon {
     margin-right:@spacing-half;
-    margin-bottom:2px;
+    margin-bottom:1px;
     flex-shrink: 0;
   }
   .message-subject {
diff --git a/internal_packages/thread-list/lib/thread-list-columns.cjsx b/internal_packages/thread-list/lib/thread-list-columns.cjsx
index 41da71248..49ef1d90a 100644
--- a/internal_packages/thread-list/lib/thread-list-columns.cjsx
+++ b/internal_packages/thread-list/lib/thread-list-columns.cjsx
@@ -121,8 +121,19 @@ cNarrow = new ListTabular.Column
     if hasDraft
       pencil = <RetinaImg name="icon-draft-pencil.png" className="draft-icon" mode={RetinaImg.Mode.ContentPreserve} />
 
+    labels = []
+    if AccountStore.accountForId(thread.accountId).usesLabels()
+      currentCategories = FocusedPerspectiveStore.current().categories() ? []
+      ignored = [].concat(currentCategories, CategoryStore.hiddenCategories(thread.accountId))
+      ignoredIds = _.pluck(ignored, 'id')
+
+      for label in (thread.sortedCategories())
+        continue if label.id in ignoredIds
+        c3LabelComponentCache[label.id] ?= <MailLabel label={label} key={label.id} />
+        labels.push c3LabelComponentCache[label.id]
+
     <div>
-      <div style={display: 'flex'}>
+      <div style={display: 'flex', alignItems: 'center'}>
         <ThreadListIcon thread={thread} />
         <ThreadListParticipants thread={thread} />
         {pencil}
@@ -134,7 +145,11 @@ cNarrow = new ListTabular.Column
         thread={thread}
         showIfAvailableForAnyAccount={true} />
       <div className="subject">{subject(thread.subject)}</div>
-      <div className="snippet">{thread.snippet}</div>
+      <div className="snippet-and-labels">
+        <div className="snippet">{thread.snippet}&nbsp;</div>
+        <div style={flex: 1, flexShrink: 1}></div>
+        {labels}
+      </div>
     </div>
 
 module.exports =
diff --git a/internal_packages/thread-list/lib/thread-list.cjsx b/internal_packages/thread-list/lib/thread-list.cjsx
index a3537198c..5050a6cee 100644
--- a/internal_packages/thread-list/lib/thread-list.cjsx
+++ b/internal_packages/thread-list/lib/thread-list.cjsx
@@ -71,10 +71,10 @@ class ThreadList extends React.Component
   render: ->
     if @state.style is 'wide'
       columns = ThreadListColumns.Wide
-      itemHeight = 39
+      itemHeight = 36
     else
       columns = ThreadListColumns.Narrow
-      itemHeight = 90
+      itemHeight = 85
 
     <FluxContainer
       stores=[ThreadListStore]
diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less
index b6143081f..061096350 100644
--- a/internal_packages/thread-list/stylesheets/thread-list.less
+++ b/internal_packages/thread-list/stylesheets/thread-list.less
@@ -28,8 +28,8 @@
   .mail-label {
     // Note - these !important styles override values set by a style tag
     // since the color of the label is detemined programatically.
-    background: none !important;
-    box-shadow: 0 0.5px 0 @text-color-inverse, 0 -0.5px 0 @text-color-inverse, 0.5px 0 0 @text-color-inverse, -0.5px 0 0 @text-color-inverse !important;
+    background: fade(@text-color-inverse, 20%) !important;
+    box-shadow: none !important;
     -webkit-filter: brightness(600%) grayscale(100%);
   }
 
@@ -50,14 +50,11 @@
 
   .list-item {
     background-color: darken(@background-primary, 2%);
-  }
-
-  .list-column {
     border-bottom: 1px solid fade(@list-border, 60%);
+    line-height: 36px;
   }
 
   .mail-important-icon {
-    margin-top:1px;
     margin-left:6px;
     padding: 12px;
     vertical-align: initial;
@@ -85,8 +82,6 @@
     text-overflow: ellipsis;
     text-align: left;
     overflow: hidden;
-    position: relative;
-    top:2px;
 
     &.no-recipients {
       color: @text-color-very-subtle;
@@ -95,14 +90,14 @@
 
   .details {
     display:flex;
+    align-items: center;
+
     .subject {
       font-size:   @font-size-small;
       font-weight: @font-weight-normal;
       padding-right: @padding-base-horizontal;
-      position: relative;
       text-overflow: ellipsis;
       overflow: hidden;
-      top:2px;
 
       // Shrink, but only after snippet has shrunk
       flex-shrink:0.1;
@@ -110,11 +105,9 @@
     .snippet {
       font-size:   @font-size-small;
       font-weight: @font-weight-normal;
-      position: relative;
       text-overflow: ellipsis;
       overflow: hidden;
       opacity: 0.62;
-      top:2px;
       flex: 1;
     }
     .thread-icon {
@@ -126,8 +119,6 @@
   .timestamp {
     font-size:   @font-size-small;
     font-weight: @font-weight-normal;
-    position: relative;
-    top:2px;
     text-align: right;
     min-width:70px;
     margin-right:@scrollbar-margin;
@@ -146,9 +137,7 @@
   }
 
   .unread:not(.focused):not(.selected):not(.next-is-selected) {
-    .list-column {
-      border-bottom: 1px solid @list-border;
-    }
+    border-bottom: 1px solid @list-border;
   }
 
   .unread:not(.focused) {
@@ -171,11 +160,10 @@
 
   .thread-injected-icons {
     vertical-align: top;
-    line-height: 26px;
   }
   .thread-icon {
-    width:26px;
-    height:26px;
+    width:25px;
+    height:24px;
     flex-shrink:0;
     background-size: 15px;
     display:inline-block;
@@ -321,18 +309,24 @@ body.platform-win32 {
 }
 
 .thread-list-narrow {
+  .list-column {
+    display:block;
+  }
+  .list-tabular-item {
+    line-height: 21px;
+  }
   .timestamp {
     order: 100;
+    min-width: 0;
   }
   .participants {
     font-size: @font-size-base;
   }
   .thread-icon {
-    margin-right:4px;
+    margin-right:5px;
   }
 
   .mail-important-icon {
-    margin-top:1px;
     margin-left:1px;
     float:left;
     padding: 12px;
@@ -344,19 +338,30 @@ body.platform-win32 {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-    padding-top:2px;
-    padding-bottom:2px;
     margin-left:30px;
     margin-right:@scrollbar-margin;
   }
-  .snippet {
-    font-size: @font-size-small;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    opacity: 0.7;
-    text-align: left;
+  .snippet-and-labels {
     margin-left:30px;
     margin-right:@scrollbar-margin;
+    display: flex;
+    align-items: baseline;
+    overflow: hidden;
+
+    .mail-label {
+      padding: 1px 8px;
+      font-size: 0.8em;
+      line-height: 17px;
+    }
+    .snippet {
+      font-size: @font-size-small;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      opacity: 0.7;
+      text-align: left;
+      min-height: 21px;
+      margin-right:4px;
+    }
   }
 }
 
@@ -388,10 +393,8 @@ body.is-blurred {
     .list-item {
       &.selected {
         background: fadeout(desaturate(@list-focused-bg, 100%), 65%);
+        border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
         color: @text-color;
-        .list-column {
-          border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
-        }
       }
     }
   }
diff --git a/static/components/disclosure-triangle.less b/static/components/disclosure-triangle.less
index 2be189f7a..a54bd9bf9 100644
--- a/static/components/disclosure-triangle.less
+++ b/static/components/disclosure-triangle.less
@@ -4,7 +4,7 @@
 .disclosure-triangle {
   flex-shrink: 0;
   padding:7px;
-  padding-top:12px;
+  padding-top:11px;
   width:20px;
   visibility: hidden;
 
diff --git a/static/components/extra.less b/static/components/extra.less
index de80dc8ca..00d2fb865 100644
--- a/static/components/extra.less
+++ b/static/components/extra.less
@@ -51,6 +51,10 @@ body.platform-win32 {
   cursor:default;
   line-height: 22px;
   -webkit-user-select: none;
+
+  &:last-child {
+    margin-right: 0;
+  }
 }
 .mail-label.removable {
   padding-left:12px;
@@ -80,9 +84,8 @@ body.platform-win32 {
 
 
 .mail-important-icon {
-  width:16px;
-  height:16px;
-  vertical-align: middle;
+  width: 25px;
+  height: 25px;
   display:inline-block;
   background-repeat: no-repeat;
   background-position:center;
diff --git a/static/components/list-tabular.less b/static/components/list-tabular.less
index e5a6c7d04..e03df0f68 100644
--- a/static/components/list-tabular.less
+++ b/static/components/list-tabular.less
@@ -48,7 +48,7 @@
     left: -1px;
     right:-1px;
     top: 0;
-    height:49px;
+    height:37px;
     border-left:1px solid @border-color-divider;
     border-right:1px solid @border-color-divider;
     background-color: @background-primary;
@@ -66,7 +66,7 @@
         cursor:default;
         text-align: center;
         color:@text-color-subtle;
-        padding-top: 15px;
+        line-height: 38px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -80,7 +80,6 @@
 .list-container {
   .list-item {
     font-size: @font-size-base;
-    line-height: @line-height-computed;
     color: @text-color;
     background: @list-bg;
 
@@ -91,23 +90,17 @@
     &.selected {
       background: @list-selected-bg;
       color: @list-selected-color;
-      .list-column {
-        border-bottom: 1px solid @list-selected-border;
-      }
+      border-bottom: 1px solid @list-selected-border;
     }
 
     &.next-is-selected {
-      .list-column {
-        border-bottom: 1px solid @list-selected-border;
-      }
+      border-bottom: 1px solid @list-selected-border;
     }
 
     &.focused {
       background: @list-focused-bg;
       color: @list-focused-color;
-      .list-column {
-        border-bottom: 1px solid @list-focused-border;
-      }
+      border-bottom: 1px solid @list-focused-border;
     }
   }
 }
@@ -117,18 +110,14 @@ body.is-blurred {
     .list-item {
       &.selected {
         background: fadeout(desaturate(@list-selected-bg, 100%), 65%);
+        border-bottom: 1px solid fadeout(desaturate(@list-selected-border, 100%), 65%);
         color: @text-color;
-        .list-column {
-          border-bottom: 1px solid fadeout(desaturate(@list-selected-border, 100%), 65%);
-        }
       }
 
       &.focused {
         background: fadeout(desaturate(@list-focused-bg, 100%), 65%);
+        border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
         color: @text-color;
-        .list-column {
-          border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
-        }
       }
     }
   }
@@ -143,6 +132,9 @@ body.is-blurred {
     position: relative;
     width: 100%;
     display: flex;
+    align-items: center;
+    border-bottom: 1px solid @list-border;
+
     &:hover {
       cursor: default;
     }
@@ -178,7 +170,7 @@ body.is-blurred {
     }
 
     .checkmark {
-      padding: 12px;
+      padding: 11px;
       position: absolute;
       top: 0;
       left: 0;
@@ -197,32 +189,14 @@ body.is-blurred {
 
   .list-column {
     // The width is set by React.
-    display: inline-block;
-    padding: @padding-base-vertical @padding-base-horizontal @padding-base-vertical @padding-base-horizontal;
+    display: inherit;
+    padding: 0 @padding-base-horizontal;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    border-bottom: 1px solid @list-border;
 
     &:last-child {
       text-align: right;
     }
   }
-
-  .list-headers {
-    display: flex;
-    position: absolute;
-    width: 100%;
-    top: 0;
-    position: absolute;
-    background: fade(@list-bg,90%);
-    font-size: @font-size-base;
-    line-height: @font-size-base * 1.6;
-    height:@font-size-base * 2;
-    z-index: 3;
-  }
-
-  .list-header {
-  }
-
 }
diff --git a/static/components/outline-view.less b/static/components/outline-view.less
index 9a19fc826..f0ceed460 100644
--- a/static/components/outline-view.less
+++ b/static/components/outline-view.less
@@ -71,16 +71,18 @@
     color: @text-color-subtle;
     flex: 1;
     display: flex;
-    img.content-mask {
-      background-color: @text-color-subtle;
-      vertical-align: text-bottom;
-    }
+    align-items: baseline;
     font-size: @font-size-small;
     font-weight: 400;
     padding-right: @spacing-standard;
     line-height: @line-height-large * 1.1;
     clear: both;
 
+    img.content-mask {
+      background-color: @text-color-subtle;
+      vertical-align: text-bottom;
+    }
+
     .icon {
       flex-shrink: 0;
       order: 1;
@@ -88,11 +90,7 @@
     .name {
       order: 2;
       padding-left: @padding-small-horizontal * 0.85;
-      position:relative;
-      top:1px;
       overflow: hidden;
-      padding-top: @padding-small-vertical;
-      padding-bottom:@padding-small-vertical;
       line-height: @line-height-small;
       text-overflow: ellipsis;
     }
@@ -103,7 +101,6 @@
       color: @count-color;
       margin-left: @padding-small-horizontal * 0.8;
       box-shadow: 0 0.5px 0 @count-color, 0 -0.5px 0 @count-color, 0.5px 0 0 @count-color, -0.5px 0 0 @count-color;
-
     }
     .item-count-box.alt-count {
       color: @source-list-active-bg;
diff --git a/static/mixins/common-ui-elements.less b/static/mixins/common-ui-elements.less
index 51f85d852..266f91be7 100644
--- a/static/mixins/common-ui-elements.less
+++ b/static/mixins/common-ui-elements.less
@@ -5,15 +5,13 @@
 // A box to hold counts of things (like number of items in a tag, or
 // number of messages in a thread)
 .item-count-box {
-  float: right;
   min-width: 15px;
   height: 15px;
   text-align: center;
   display: inline;
   font-size: @font-size-tiny;
   padding: 0 0.286em 0 0.286em;
-  margin-top: floor(@line-height-large*1.1 - @font-size)/2 + 1;
-  line-height: @font-size;
+  line-height: 15px;
   border-radius: @border-radius-small;
 }
 body.platform-win32 {
diff --git a/static/workspace.less b/static/workspace.less
index 5bde6ff48..d2a4c2ed4 100644
--- a/static/workspace.less
+++ b/static/workspace.less
@@ -160,7 +160,7 @@ body.is-blurred {
 
 .sheet-toolbar-container {
   background-image: -webkit-linear-gradient(top, lighten(@toolbar-background-color, 9%), @toolbar-background-color);
-  box-shadow: inset 0 1px 0 lighten(@toolbar-background-color, 15%);
+  box-shadow: inset 0 1px 0 lighten(@toolbar-background-color, 10%);
   color:@text-color-heading;
 }