From c02fa395245f6ccd57a18adc1f9b721b660c798a Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 10 Jul 2017 15:19:08 +0200
Subject: [PATCH] Make drive search bar blue

---
 customize.dist/src/less/mixins.less | 20 ++++++++++++++++++++
 www/drive/file.less                 | 24 +++++++++++++++++++-----
 www/drive/main.js                   |  2 ++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less
index e81f33f76..0719784b9 100644
--- a/customize.dist/src/less/mixins.less
+++ b/customize.dist/src/less/mixins.less
@@ -37,6 +37,26 @@
     background: linear-gradient(@start, @end); /* Standard syntax */
 }
 
+.placeholderColor (@color) {
+    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+        color: @color;;
+    }
+    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: @color;
+        opacity: 1;
+    }
+    &::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: @color;
+        opacity: 1;
+    }
+    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: @color;
+    }
+    &::-ms-input-placeholder { /* Microsoft Edge */
+        color: @color;
+    }
+}
+
 .avatar (@width) {
     &.avatar {
     overflow: hidden;
diff --git a/www/drive/file.less b/www/drive/file.less
index c9e36e7b2..41bc4f1e9 100644
--- a/www/drive/file.less
+++ b/www/drive/file.less
@@ -1,13 +1,14 @@
 @import "/customize/src/less/variables.less";
+@import "/customize/src/less/mixins.less";
 
-@tree-bg: #fff;
+@tree-bg: #eee;
 @tree-fg: #000;
 @tree-lines-col: #888;
 
 @drive-hover: #eee;
 @drive-hover-light: lighten(@drive-hover, 20%);
 
-@content-bg: @tree-bg;
+@content-bg: #fff;
 @content-bg-ro: darken(@content-bg, 10%);
 @content-fg: @tree-fg;
 @info-box-bg: #ddddff;
@@ -163,7 +164,7 @@ span {
 
 
 #tree {
-    border-right: 1px solid #ccc;
+    //border-right: 1px solid #ccc;
     box-sizing: border-box;
     background: @tree-bg;
     overflow: auto;
@@ -230,18 +231,31 @@ span {
         margin-bottom: 20px;
         text-align: center;
         padding: 0;
+        position: relative;
         input {
+            background: lighten(@toolbar-drive-bg, 8%);
+            color: @toolbar-drive-color;
+            .placeholderColor(@toolbar-drive-color);
             outline-width: 0px;
             border-radius: 0;
             width: 100%;
-            border: 1px solid #ccc;
-            border-right: 0;
+            //border: 1px solid #ccc;
+            border: 0;
+            border-right: 1px solid lighten(@toolbar-drive-bg, 16%);
+            //border-right: 0;
             height: 32px;
             padding: 0 5px;
+            padding-left: 45px;
             &:focus {
                 outline-width: 0px;
             }
         }
+        .searchIcon {
+            color: @toolbar-drive-color;
+            position: absolute;
+            left: 20px; // TODO align with drive categories
+            top: 8px;
+        }
     }
     .fa.expcol {
         margin-left: -10px;
diff --git a/www/drive/main.js b/www/drive/main.js
index d43c9e7f9..d96710684 100644
--- a/www/drive/main.js
+++ b/www/drive/main.js
@@ -171,6 +171,7 @@ define([
     var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
     var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
     var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
+    var $searchIcon = $('<span>', {"class": "fa fa-search searchIcon"});
 
     var history = {
         isHistoryMode: false,
@@ -2125,6 +2126,7 @@ define([
                     if (!filesOp.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
                 }, 500);
             }).appendTo($div);
+            $searchIcon.clone().appendTo($div);
             if (isInSearch) { $input.val(currentPath[1] || ''); }
             $container.append($div);
         };