From 7e95518d0e40e4d16e8ef415edf021237587cfa6 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 23 Aug 2013 16:31:07 -0700
Subject: [PATCH] Style the select-lists

---
 src/select-list.coffee                |  2 +-
 static/select-list.less               | 38 +--------------------------
 themes/neue-dark-ui/lists.less        | 20 ++++++++------
 themes/neue-dark-ui/overlay.less      | 20 +++++++++++---
 themes/neue-dark-ui/package.cson      |  1 +
 themes/neue-dark-ui/ui-variables.less |  1 +
 6 files changed, 33 insertions(+), 49 deletions(-)

diff --git a/src/select-list.coffee b/src/select-list.coffee
index 8b92a5615..78fc7db0d 100644
--- a/src/select-list.coffee
+++ b/src/select-list.coffee
@@ -16,7 +16,7 @@ class SelectList extends View
       @div class: 'loading', outlet: 'loadingArea', =>
         @span class: 'loading-message', outlet: 'loading'
         @span class: 'badge', outlet: 'loadingBadge'
-      @ol outlet: 'list'
+      @ol class: 'list-group highlight-selected', outlet: 'list'
 
   # Private:
   @viewClass: -> 'select-list'
diff --git a/static/select-list.less b/static/select-list.less
index 153969ef4..e071ec172 100644
--- a/static/select-list.less
+++ b/static/select-list.less
@@ -18,57 +18,21 @@
     }
   }
 
-  ol {
+  ol.list-group {
     position: relative;
     overflow-y: auto;
     max-height: 312px;
     margin: 0;
     padding: 0;
 
-    &:empty {
-      border: none;
-    }
-
     li {
-      padding: 10px;
       display: block;
 
-      &.two-lines {
-        padding: 5px 10px 5px 10px;
-      }
-
       .primary-line, .secondary-line {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
       }
     }
-
-    li:last-child {
-      border-bottom: none;
-    }
-
-    li.active-item {
-      .octicon(check, 14px);
-
-      &:before {
-        margin-right: 5px;
-      }
-    }
-
-    li.inactive-item {
-      padding-left: 29px;
-    }
-
-    li .right {
-      float: right;
-    }
-
-    .key-binding {
-      border-radius: 2px;
-      margin-left: 5px;
-      padding: 3px;
-      font-size: 11px;
-    }
   }
 }
diff --git a/themes/neue-dark-ui/lists.less b/themes/neue-dark-ui/lists.less
index a54a9fb29..9b4b1a46e 100644
--- a/themes/neue-dark-ui/lists.less
+++ b/themes/neue-dark-ui/lists.less
@@ -6,15 +6,15 @@
   margin: 0;
   list-style: none;
 
-  .list-item,
-  .list-nested-item > .list-item {
+  li:not(.list-nested-item),
+  li.list-nested-item > .list-item {
     .text(normal);
     line-height: @component-line-height;
   }
 
   .generate-list-item-text-color(@class) {
-    .list-item.@{class},
-    .list-nested-item.@{class} > .list-item {
+    li:not(.list-nested-item).@{class},
+    li.list-nested-item.@{class} > .list-item {
       .text(@class);
     }
   }
@@ -25,10 +25,10 @@
   .generate-list-item-text-color(error);
   .generate-list-item-text-color(selected);
 
-  .list-item:hover,
-  .list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file
-  .list-nested-item .list-item:hover,
-  .list-nested-item .list-item:hover .disclosure-arrow,
+  li:not(.list-nested-item):hover,
+  li.list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file
+  li.list-nested-item .list-item:hover,
+  li.list-nested-item .list-item:hover .disclosure-arrow,
   .selected > .list-nested-item > .list-item .disclosure-arrow,
   .selected > .list-nested-item > .list-item:hover .disclosure-arrow  {
     .text(highlighted);
@@ -49,6 +49,10 @@
     right: 0;
     height: @component-line-height;
   }
+
+  &.highlight-selected .selected{
+    background-color: @tool-panel-background-highlight-color;
+  }
 }
 
 // Handle indentation of the tree. Assume disclosure arrows.
diff --git a/themes/neue-dark-ui/overlay.less b/themes/neue-dark-ui/overlay.less
index 08ddb7267..e26d3066c 100644
--- a/themes/neue-dark-ui/overlay.less
+++ b/themes/neue-dark-ui/overlay.less
@@ -7,8 +7,22 @@
   border: 1px solid @overlay-border-color;
   box-shadow: 0 0 10px @overlay-shadow-color;
   border-radius: @component-border-radius;
-}
 
-.overlay .editor.mini {
-  margin-bottom: @component-padding;
+  .editor.mini {
+    margin-bottom: @component-padding;
+  }
+
+  &.select-list, .select-list {
+
+    ol.list-group {
+      background-color: @overlay-inner-background-color;
+
+      li {
+        padding: @component-padding;
+        border-bottom: 1px solid @overlay-background-color;
+
+        &.two-lines { padding: @component-padding/2 @component-padding; }
+      }
+    }
+  }
 }
diff --git a/themes/neue-dark-ui/package.cson b/themes/neue-dark-ui/package.cson
index 5903f589d..ec9730835 100644
--- a/themes/neue-dark-ui/package.cson
+++ b/themes/neue-dark-ui/package.cson
@@ -9,4 +9,5 @@
   'editor'
   'tabs'
   'overlay'
+  'popover-list'
 ]
diff --git a/themes/neue-dark-ui/ui-variables.less b/themes/neue-dark-ui/ui-variables.less
index f286608b4..25d817f62 100644
--- a/themes/neue-dark-ui/ui-variables.less
+++ b/themes/neue-dark-ui/ui-variables.less
@@ -33,6 +33,7 @@
 @panel-heading-background-color: #43484d;
 
 @overlay-background-color: #202123;
+@overlay-inner-background-color: #27292b;
 @overlay-border-color: rgba(255, 255, 255, 0.05);
 @overlay-shadow-color: rgba(0, 0, 0, 0.5);