From 33977b2282d8891bf507c4d9a1502c644afd6352 Mon Sep 17 00:00:00 2001
From: Benjamin Tissoires <benjamin.tissoires@redhat.com>
Date: Fri, 25 Jan 2019 18:11:40 +0100
Subject: lists-color: only colorize the bottom border

And make the background clearer to visually separate the header from
the list of cards
---
 client/components/lists/list.styl          | 12 +++++++++---
 client/components/lists/listHeader.jade    |  3 ++-
 client/components/swimlanes/swimlanes.jade |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'client/components')

diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index c12a2c73..51ade73c 100644
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@@ -46,11 +46,19 @@
 .list-header-card-count
   height: 35px
 
+.list-header-add
+  flex: 0 0 auto
+  padding: 20px 12px 4px
+  position: relative
+  min-height: 20px
+
 .list-header
   flex: 0 0 auto
   padding: 20px 12px 4px
   position: relative
   min-height: 20px
+  background-color: #e4e4e4;
+  border-bottom: 6px solid #e4e4e4;
 
 
   &.ui-sortable-handle
@@ -204,9 +212,7 @@
   overflow: hidden
 
 list-header-color(background, color...)
-  background: background !important
-  if color
-    color: color !important //overwrite text for better visibility
+  border-bottom: 6px solid background
 
 .list-header-white
   list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade
index eafcc510..aa6d3786 100644
--- a/client/components/lists/listHeader.jade
+++ b/client/components/lists/listHeader.jade
@@ -120,7 +120,8 @@ template(name="wipLimitErrorPopup")
 template(name="setListColorPopup")
   form.edit-label
     .palette-colors: each colors
-      span.card-label.palette-color.js-palette-color(class="list-header-{{color}}")
+      // note: we use the swimlane palette to have more than just the border
+      span.card-label.palette-color.js-palette-color(class="swimlane-{{color}}")
         if(isSelected color)
           i.fa.fa-check
     button.primary.confirm.js-submit {{_ 'save'}}
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade
index cd864a7c..ad61466e 100644
--- a/client/components/swimlanes/swimlanes.jade
+++ b/client/components/swimlanes/swimlanes.jade
@@ -38,7 +38,7 @@ template(name="listsGroup")
 
 template(name="addListForm")
   .list.list-composer.js-list-composer
-    .list-header
+    .list-header-add
       +inlinedForm(autoclose=false)
         input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
           autocomplete="off" autofocus)
-- 
cgit v1.2.3-1-g7c22