Merge branch 'search2' into staging

customize.dist/src/less2/include/alertify.less

@@ -227,16 +227,7 @@
                 }
             }
 
-            ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-                color: @cryptpad_color_grey;
-                opacity: 1; /* Firefox */
-            }
-            :-ms-input-placeholder { /* Internet Explorer 10-11 */
-                color: @cryptpad_color_grey;
-            }
-            ::-ms-input-placeholder { /* Microsoft Edge */
-                color: @cryptpad_color_grey;
-            }
+            .tools_placeholder-color(@cryptpad_color_grey);
 
             span.cp-password-container {
                 display: flex;

customize.dist/src/less2/include/drive.less

@@ -222,7 +222,7 @@
 
 
     #cp-app-drive-search {
-        display: flex;
+        display: inline-flex;
         align-items: center;
         max-width: 400px;
         font-size: 30px;
@@ -230,7 +230,7 @@
         input {
             background: transparent;
             color: @colortheme_drive-color;
-            .tools_placeholder-color(@colortheme_drive-color);
+            .tools_placeholder-color(@cryptpad_color_grey);
             outline-width: 0px;
             border-radius: 0;
             width: 100%;
@@ -256,7 +256,19 @@
             color: @colortheme_drive-color;
         }
     }
-
+    .cp-app-drive-search-spinner {
+        display: inline-flex;
+        color: @colortheme_drive-color;
+        font-size: 40px;
+        align-items: center;
+        justify-content: center;
+    }
+    .cp-app-drive-search-noresult {
+        font-size: 30px;
+        padding: 15px;
+        font-style: italic;
+        color: @cryptpad_color_grey;
+    }
 
 
     /* TREE */

customize.dist/src/less2/include/tools.less

@@ -2,13 +2,9 @@
     &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
         color: @color;;
     }
-    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
         color: @color;
-        opacity: 1;
-    }
-    &::-moz-placeholder { /* Mozilla Firefox 19+ */
-        color: @color;
-        opacity: 1;
+        opacity: 1; /* Firefox */
     }
     &:-ms-input-placeholder { /* Internet Explorer 10-11 */
         color: @color;

www/common/drive-ui.js

@@ -234,9 +234,9 @@ define([
         return LS;
     };
 
-    var getViewModeClass = function () {
+    var getViewModeClass = function (forceList) {
         var mode = APP.store[LS_VIEWMODE];
-        if (mode === 'list') { return 'cp-app-drive-content-list'; }
+        if (mode === 'list' || forceList) { return 'cp-app-drive-content-list'; }
         return 'cp-app-drive-content-grid';
     };
     var getViewMode = function () {
@@ -3234,18 +3234,26 @@ define([
 
             $searchIcon.clone().appendTo($div);
 
+            var $spinnerContainer = $(h('div.cp-app-drive-search-spinner'));
+            var spinner = UI.makeSpinner($spinnerContainer);
             var $input = APP.Search.$input = $('<input>', {
                 id: 'cp-app-drive-search-input',
+                placeholder: Messages.fm_searchName,
                 type: 'text',
                 draggable: false,
                 tabindex: 1,
             }).keyup(function (e) {
+                var lastValue = search.value;
+                search.value = $input.val().trim();
+                if (lastValue === search.value) { return; }
+
                 if (search.to) { window.clearTimeout(search.to); }
-                if ($input.val().trim() === "") {
+                if (search.value === "") {
                     search.cursor = 0;
                     APP.displayDirectory([SEARCH]);
                     return;
                 }
+                spinner.spin();
                 if (e.which === 13) {
                     var newLocation = [SEARCH, $input.val()];
                     search.cursor = $input[0].selectionStart;
@@ -3290,12 +3298,26 @@ define([
             $div.append(cancel);
 
             $list.append($div);
+            $spinnerContainer.appendTo($list);
             setTimeout(function () {
                 $input.focus();
             });
 
-            $list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list');
+            if (typeof(value) === "string" && value.trim()) {
+                spinner.spin();
+            } else {
+                return;
+            }
+
+            setTimeout(function () {
+                //$list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list');
                 var filesList = manager.search(value);
+                if (!filesList.length) {
+                    Messages.fm_noResult = "No result found"; // XXX
+                    $list.append(h('div.cp-app-drive-search-noresult', Messages.fm_noResult));
+                    spinner.hide();
+                    return;
+                }
                 var sortable = {};
                 var sortableFolders = [];
                 filesList.forEach(function (r) {
@@ -3357,6 +3379,8 @@ define([
                     addEl(obj, false);
                 });
                 setTimeout(collapseDrivePath);
+                spinner.hide();
+            });
         };
 
         var displayRecent = function ($list) {
@@ -3612,13 +3636,12 @@ define([
 
             var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
             $dirContent.data('path', path);
-            if (!isSearch && !isTags) {
-                var mode = getViewMode();
-                if (mode) {
-                    $dirContent.addClass(getViewModeClass());
-                }
+            if (!isTags) {
+                $dirContent.addClass(getViewModeClass(isSearch));
+                if (!isSearch) {
                     createViewModeButton(APP.toolbar.$bottomR);
                 }
+            }
 
             var $list = $('<ul>').appendTo($dirContent);