Search spinner and 'no result'

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 () {
@@ -3230,6 +3230,7 @@ define([
 
             var $input = APP.Search.$input = $('<input>', {
                 id: 'cp-app-drive-search-input',
+                placeholder: Messages.fm_searchName,
                 type: 'text',
                 draggable: false,
                 tabindex: 1,
@@ -3288,8 +3289,24 @@ define([
                 $input.focus();
             });
 
-            $list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list');
+            var $spinnerContainer = $(h('div.cp-app-drive-search-spinner')).appendTo($list);
+
+            var spinner = UI.makeSpinner($spinnerContainer);
+            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) {
@@ -3351,6 +3368,8 @@ define([
                     addEl(obj, false);
                 });
                 setTimeout(collapseDrivePath);
+                spinner.hide();
+            });
         };
 
         var displayRecent = function ($list) {
@@ -3606,13 +3625,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);