From f3f1fd1c8171351810434f74b81d4876b8fef0b1 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 6 Jul 2020 15:07:19 +0200 Subject: [PATCH 1/2] Search spinner and 'no result' --- .../src/less2/include/alertify.less | 11 +- customize.dist/src/less2/include/drive.less | 18 ++- customize.dist/src/less2/include/tools.less | 8 +- www/common/drive-ui.js | 152 ++++++++++-------- 4 files changed, 103 insertions(+), 86 deletions(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 2a7fd3761..db951613c 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/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; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index e1790787f..5b98d026b 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/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 */ diff --git a/customize.dist/src/less2/include/tools.less b/customize.dist/src/less2/include/tools.less index b8c36cbcd..68feb9314 100644 --- a/customize.dist/src/less2/include/tools.less +++ b/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; diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 0d3e49169..958e948bb 100644 --- a/www/common/drive-ui.js +++ b/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 = $('', { id: 'cp-app-drive-search-input', + placeholder: Messages.fm_searchName, type: 'text', draggable: false, tabindex: 1, @@ -3288,69 +3289,87 @@ define([ $input.focus(); }); - $list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list'); - var filesList = manager.search(value); - var sortable = {}; - var sortableFolders = []; - filesList.forEach(function (r) { - // 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 $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 $path = $('', { - 'class': 'cp-app-drive-search-path' - }).appendTo($element.find('.cp-app-drive-element-name')); - createTitle($path, obj._path); + var sortable = {}; + var sortableFolders = []; + filesList.forEach(function (r) { + // 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 = $('', { + 'class': 'cp-app-drive-search-path' + }).appendTo($element.find('.cp-app-drive-element-name')); + createTitle($path, obj._path); - $list.append($element); - }; - if (_folders.length) { getFolderListHeader(true, true).appendTo($list); } - _folders.forEach(function (el) { - var obj = el; - addEl(obj, true); - }); - if (_files.length) { getFileListHeader(true).appendTo($list); } - _files.forEach(function (el) { - var obj = sortable[el]; - addEl(obj, false); + $list.append($element); + }; + if (_folders.length) { getFolderListHeader(true, true).appendTo($list); } + _folders.forEach(function (el) { + var obj = el; + addEl(obj, true); + }); + if (_files.length) { getFileListHeader(true).appendTo($list); } + _files.forEach(function (el) { + var obj = sortable[el]; + addEl(obj, false); + }); + setTimeout(collapseDrivePath); + spinner.hide(); }); - setTimeout(collapseDrivePath); }; var displayRecent = function ($list) { @@ -3606,12 +3625,11 @@ define([ var $dirContent = $('
', {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); } - createViewModeButton(APP.toolbar.$bottomR); } var $list = $('
    ').appendTo($dirContent); From c3a950380970c413628cc989db8c8c0a7d9d4a3b Mon Sep 17 00:00:00 2001 From: ansuz Date: Wed, 8 Jul 2020 12:31:08 -0400 Subject: [PATCH 2/2] show the spinner sooner after searching, lint compliance --- www/common/drive-ui.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 958e948bb..35805e29b 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -3228,6 +3228,8 @@ define([ $searchIcon.clone().appendTo($div); + var $spinnerContainer = $(h('div.cp-app-drive-search-spinner')); + var spinner = UI.makeSpinner($spinnerContainer); var $input = APP.Search.$input = $('', { id: 'cp-app-drive-search-input', placeholder: Messages.fm_searchName, @@ -3235,12 +3237,17 @@ define([ 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; @@ -3285,14 +3292,12 @@ define([ $div.append(cancel); $list.append($div); + $spinnerContainer.appendTo($list); setTimeout(function () { $input.focus(); }); - var $spinnerContainer = $(h('div.cp-app-drive-search-spinner')).appendTo($list); - - var spinner = UI.makeSpinner($spinnerContainer); - if (typeof(value) == "string" && value.trim()) { + if (typeof(value) === "string" && value.trim()) { spinner.spin(); } else { return;