Add an X icon to cancel a search in the drive

www/drive/app-drive.less

@@ -269,8 +269,11 @@
             text-align: center;
             padding: 0;
             position: relative;
-            input {
+            display: flex;
             background: lighten(@colortheme_drive-bg, 8%);
+            border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
+            input {
+                background: transparent;
                 color: @colortheme_drive-color;
                 .tools_placeholder-color(@colortheme_drive-color);
                 outline-width: 0px;
@@ -278,16 +281,29 @@
                 width: 100%;
                 //border: 1px solid #ccc;
                 border: 0;
-                border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
                 //border-right: 0;
                 height: @variables_bar-height;
                 padding: 0 5px;
                 padding-left: 45px;
+                flex: 1;
+                min-width: 0;
                 &:focus {
                     outline-width: 0px;
                 }
+                &.cp-app-drive-search-active {
+                    & ~ .cp-app-drive-tree-search-icon {
+                        display: none;
+                    }
+                    & ~ .cp-app-drive-search-cancel {
+                        display: inline-block;
+                    }
+                }
+            }
+            .cp-app-drive-search-cancel {
+                display: none;
+                cursor: pointer;
             }
-            .cp-app-drive-tree-search-con {
+            .cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel {
                 color: @colortheme_drive-color;
                 position: absolute;
                 left: 20px; // TODO align with drive categories

www/drive/inner.js

@@ -111,7 +111,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 cp-app-drive-tree-search-con"});
+    var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-icon"});
     var $addIcon = $('<span>', {"class": "fa fa-plus"});
     var $renamedIcon = $('<span>', {"class": "fa fa-flag"});
     var $readonlyIcon = $('<span>', {"class": "fa " + faReadOnly});
@@ -2971,6 +2971,13 @@ define([
                     else { displayDirectory([ROOT]); }
                     return;
                 }
+                if ($input.val()) {
+                    if (!$input.hasClass('cp-app-drive-search-active')) {
+                        $input.addClass('cp-app-drive-search-active');
+                    }
+                } else {
+                    $input.removeClass('cp-app-drive-search-active');
+                }
                 if (APP.mobile()) { return; }
                 search.to = window.setTimeout(function () {
                     if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
@@ -2979,8 +2986,18 @@ define([
                     if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
                 }, 500);
             }).appendTo($div);
+            var cancel = h('span.fa.fa-times.cp-app-drive-search-cancel', {title:Messages.cancel});
+            cancel.addEventListener('click', function () {
+                $input.val('');
+                setSearchCursor(0);
+                if (search.oldLocation && search.oldLocation.length) { displayDirectory(search.oldLocation); }
+            });
+            $div.append(cancel);
             $searchIcon.clone().appendTo($div);
-            if (isInSearch) { $input.val(currentPath[1] || ''); }
+            if (isInSearch) {
+                $input.val(currentPath[1] || '');
+                if ($input.val()) { $input.addClass('cp-app-drive-search-active'); }
+            }
             $container.append($div);
         };