Search spinner and 'no result'

pull/1/head
yflory 5 years ago
parent f421a7099d
commit f3f1fd1c81

@ -227,16 +227,7 @@
} }
} }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ .tools_placeholder-color(@cryptpad_color_grey);
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;
}
span.cp-password-container { span.cp-password-container {
display: flex; display: flex;

@ -222,7 +222,7 @@
#cp-app-drive-search { #cp-app-drive-search {
display: flex; display: inline-flex;
align-items: center; align-items: center;
max-width: 400px; max-width: 400px;
font-size: 30px; font-size: 30px;
@ -230,7 +230,7 @@
input { input {
background: transparent; background: transparent;
color: @colortheme_drive-color; color: @colortheme_drive-color;
.tools_placeholder-color(@colortheme_drive-color); .tools_placeholder-color(@cryptpad_color_grey);
outline-width: 0px; outline-width: 0px;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
@ -256,7 +256,19 @@
color: @colortheme_drive-color; 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 */ /* TREE */

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

@ -234,9 +234,9 @@ define([
return LS; return LS;
}; };
var getViewModeClass = function () { var getViewModeClass = function (forceList) {
var mode = APP.store[LS_VIEWMODE]; 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'; return 'cp-app-drive-content-grid';
}; };
var getViewMode = function () { var getViewMode = function () {
@ -3230,6 +3230,7 @@ define([
var $input = APP.Search.$input = $('<input>', { var $input = APP.Search.$input = $('<input>', {
id: 'cp-app-drive-search-input', id: 'cp-app-drive-search-input',
placeholder: Messages.fm_searchName,
type: 'text', type: 'text',
draggable: false, draggable: false,
tabindex: 1, tabindex: 1,
@ -3288,69 +3289,87 @@ define([
$input.focus(); $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 filesList = manager.search(value);
var sortable = {}; var spinner = UI.makeSpinner($spinnerContainer);
var sortableFolders = []; if (typeof(value) == "string" && value.trim()) {
filesList.forEach(function (r) { spinner.spin();
// if r.id === null, then it's a folder, not a file } else {
r.paths.forEach(function (path) { return;
if (!r.inSharedFolder && }
APP.hideDuplicateOwned && manager.isDuplicateOwned(path)) { return; }
var _path = path.slice(); setTimeout(function () {
var key = path.pop(); //$list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list');
var root = manager.find(path); var filesList = manager.search(value);
var obj = { if (!filesList.length) {
path: path, Messages.fm_noResult = "No result found"; // XXX
_path: _path, $list.append(h('div.cp-app-drive-search-noresult', Messages.fm_noResult));
key: key, spinner.hide();
root: root, return;
data: r.data
};
if (manager.isFolder(root[key])) {
sortableFolders.push(obj);
return;
}
sortable[root[key]] = obj;
});
});
var _folders = sortElements(true, [ROOT], sortableFolders, null, !getSortFolderDesc(), true);
var sortableKeys = Object.keys(sortable).map(Number);
var _files = sortElements(false, [ROOT], sortableKeys, APP.store[SORT_FILE_BY], !getSortFileDesc(), true);
var addEl = function (obj, folder) {
var $element = createElement(obj.path, obj.key, obj.root, folder);
$element.addClass('cp-app-drive-element-notrash cp-app-drive-search-result');
$element.off('contextmenu');
$element.contextmenu(openContextMenu('default'));
$element.data('context', 'default');
if (folder) {
$element.find('.cp-app-drive-element-list').css({
visibility: 'hidden'
}).text('');
}
if (manager.isPathIn(obj._path, ['hrefArray'])) {
obj._path.pop();
obj._path.push(obj.data.title);
} }
var $path = $('<span>', { var sortable = {};
'class': 'cp-app-drive-search-path' var sortableFolders = [];
}).appendTo($element.find('.cp-app-drive-element-name')); filesList.forEach(function (r) {
createTitle($path, obj._path); // if r.id === null, then it's a folder, not a file
r.paths.forEach(function (path) {
if (!r.inSharedFolder &&
APP.hideDuplicateOwned && manager.isDuplicateOwned(path)) { return; }
var _path = path.slice();
var key = path.pop();
var root = manager.find(path);
var obj = {
path: path,
_path: _path,
key: key,
root: root,
data: r.data
};
if (manager.isFolder(root[key])) {
sortableFolders.push(obj);
return;
}
sortable[root[key]] = obj;
});
});
var _folders = sortElements(true, [ROOT], sortableFolders, null, !getSortFolderDesc(), true);
var sortableKeys = Object.keys(sortable).map(Number);
var _files = sortElements(false, [ROOT], sortableKeys, APP.store[SORT_FILE_BY], !getSortFileDesc(), true);
var addEl = function (obj, folder) {
var $element = createElement(obj.path, obj.key, obj.root, folder);
$element.addClass('cp-app-drive-element-notrash cp-app-drive-search-result');
$element.off('contextmenu');
$element.contextmenu(openContextMenu('default'));
$element.data('context', 'default');
if (folder) {
$element.find('.cp-app-drive-element-list').css({
visibility: 'hidden'
}).text('');
}
if (manager.isPathIn(obj._path, ['hrefArray'])) {
obj._path.pop();
obj._path.push(obj.data.title);
}
var $path = $('<span>', {
'class': 'cp-app-drive-search-path'
}).appendTo($element.find('.cp-app-drive-element-name'));
createTitle($path, obj._path);
$list.append($element); $list.append($element);
}; };
if (_folders.length) { getFolderListHeader(true, true).appendTo($list); } if (_folders.length) { getFolderListHeader(true, true).appendTo($list); }
_folders.forEach(function (el) { _folders.forEach(function (el) {
var obj = el; var obj = el;
addEl(obj, true); addEl(obj, true);
}); });
if (_files.length) { getFileListHeader(true).appendTo($list); } if (_files.length) { getFileListHeader(true).appendTo($list); }
_files.forEach(function (el) { _files.forEach(function (el) {
var obj = sortable[el]; var obj = sortable[el];
addEl(obj, false); addEl(obj, false);
});
setTimeout(collapseDrivePath);
spinner.hide();
}); });
setTimeout(collapseDrivePath);
}; };
var displayRecent = function ($list) { var displayRecent = function ($list) {
@ -3606,12 +3625,11 @@ define([
var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID}); var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
$dirContent.data('path', path); $dirContent.data('path', path);
if (!isSearch && !isTags) { if (!isTags) {
var mode = getViewMode(); $dirContent.addClass(getViewModeClass(isSearch));
if (mode) { if (!isSearch) {
$dirContent.addClass(getViewModeClass()); createViewModeButton(APP.toolbar.$bottomR);
} }
createViewModeButton(APP.toolbar.$bottomR);
} }
var $list = $('<ul>').appendTo($dirContent); var $list = $('<ul>').appendTo($dirContent);

Loading…
Cancel
Save