From fd9e8166aeeb6b107b670f98fcc9656dbe231f78 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Wed, 17 Jun 2015 19:59:18 -0700
Subject: [PATCH] fix(selection): Thread mulit-selection should appear with
 focused style in split mode

Fixes T1983

Summary: Give classes handler nomenclature

Test Plan: Run tests

Reviewers: evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D1653
---
 .../thread-list/stylesheets/thread-list.less  | 59 ++++++++++++-------
 ...ultiselect-list-interaction-handler.coffee |  3 +
 src/components/multiselect-list.cjsx          |  1 +
 ...ltiselect-split-interaction-handler.coffee |  3 +
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less
index 2070f16eb..ca0a2f23e 100644
--- a/internal_packages/thread-list/stylesheets/thread-list.less
+++ b/internal_packages/thread-list/stylesheets/thread-list.less
@@ -1,6 +1,34 @@
 @import "ui-variables";
 @import "ui-mixins";
 
+// MIXINS
+
+.inverseContent() {
+  // Note: these styles are also applied below 
+  // subpixel antialiasing looks awful against dark background colors
+  -webkit-font-smoothing: antialiased;
+
+  .participants {
+    color: @text-color-inverse;
+    .unread-true {
+      font-weight: @font-weight-normal;
+    }
+  }
+  .subject {
+    color: @text-color-inverse;
+    font-weight: @font-weight-normal;
+  }
+  .snippet, .timestamp {
+    color: @text-color-inverse-subtle;
+  }
+
+  .thread-icon, .draft-icon {
+    -webkit-filter: brightness(600%) grayscale(100%);
+  }
+}
+
+// STYLES
+
 *:focus, input:focus {
   outline:none;
 }
@@ -105,26 +133,7 @@
   }
 
   .focused {
-    // subpixel antialiasing looks awful against dark background colors
-    -webkit-font-smoothing: antialiased;
-
-    .participants {
-      color: @text-color-inverse;
-      .unread-true {
-        font-weight: @font-weight-normal;
-      }
-    }
-    .subject {
-      color: @text-color-inverse;
-      font-weight: @font-weight-normal;
-    }
-    .snippet, .timestamp {
-      color: @text-color-inverse-subtle;
-    }
-
-    .thread-icon, .draft-icon {
-      -webkit-filter: brightness(600%) grayscale(100%);
-    }
+    .inverseContent;
   }
 
   .thread-icon {
@@ -252,3 +261,13 @@
     margin-left:30px;
   }
 }
+
+.thread-list.handler-split {
+  .list-item {
+    &.selected {
+      background: @list-focused-bg;
+      color: @list-focused-color;
+      .inverseContent;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/multiselect-list-interaction-handler.coffee b/src/components/multiselect-list-interaction-handler.coffee
index eb5405570..4d6d47282 100644
--- a/src/components/multiselect-list-interaction-handler.coffee
+++ b/src/components/multiselect-list-interaction-handler.coffee
@@ -7,6 +7,9 @@ module.exports =
 class MultiselectListInteractionHandler
   constructor: (@dataView, @collection) ->
 
+  cssClass: ->
+    'handler-list'
+
   shouldShowFocus: ->
     false
 
diff --git a/src/components/multiselect-list.cjsx b/src/components/multiselect-list.cjsx
index d398c9bfe..cda87db82 100644
--- a/src/components/multiselect-list.cjsx
+++ b/src/components/multiselect-list.cjsx
@@ -97,6 +97,7 @@ class MultiselectList extends React.Component
     #
     className = @props.className
     className += " ready" if @state.ready
+    className += " " + @state.handler.cssClass()
 
     @itemPropsProvider ?= (item) =>
       props = @props.itemPropsProvider(item)
diff --git a/src/components/multiselect-split-interaction-handler.coffee b/src/components/multiselect-split-interaction-handler.coffee
index 6f0218566..bf4a9df74 100644
--- a/src/components/multiselect-split-interaction-handler.coffee
+++ b/src/components/multiselect-split-interaction-handler.coffee
@@ -7,6 +7,9 @@ module.exports =
 class MultiselectSplitInteractionHandler
   constructor: (@dataView, @collection) ->
 
+  cssClass: ->
+    'handler-split'
+
   shouldShowFocus: ->
     true