infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add search category in the drive

pull/1/head
yflory 2020-05-14 12:16:12 +02:00
parent 202668f50f
commit d02a012e39
2 changed files with 107 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
customize.dist/src/less2/include/drive.less
View File

@ -216,6 +216,41 @@
}
#cp-app-drive-search {
display: flex;
align-items: center;
max-width: 400px;
font-size: 30px;
margin: 15px;
input {
background: transparent;
color: @colortheme_drive-color;
.tools_placeholder-color(@colortheme_drive-color);
outline-width: 0px;
border-radius: 0;
width: 100%;
border: 0;
border-bottom: 3px solid @colortheme_drive-color;
margin: 0 5px;
flex: 1;
min-width: 0;
&:focus {
outline-width: 0px;
}
&.cp-app-drive-search-active {
& ~ .cp-app-drive-search-cancel {
visibility: visible;
}
}
}
.cp-app-drive-search-cancel {
visibility: hidden;
cursor: pointer;
}
.cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel {
color: @colortheme_drive-color;
}
}
@ -310,51 +345,6 @@
.cp-limit-container {
margin-top: 5px;
}
#cp-app-drive-tree-search {
text-align: center;
padding: 0;
position: relative;
display: flex;
background: @colortheme_drive-bg-light;
border-right: 1px solid @colortheme_drive-bg-light;
input {
background: transparent;
color: @colortheme_drive-color;
.tools_placeholder-color(@colortheme_drive-color);
outline-width: 0px;
border-radius: 0;
width: 100%;
//border: 1px solid #ccc;
border: 0;
//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-icon, .cp-app-drive-search-cancel {
color: @colortheme_drive-color;
position: absolute;
left: 20px; // TODO align with drive categories
top: 8px;
}
}
.fa.cp-app-drive-icon-expcol {
margin-left: -10px;
font-size: 14px;

98
www/common/drive-ui.js
View File

@ -3143,7 +3143,74 @@ define([
});
};
APP.Search = {};
var isCharacterKey = function (e) {
return e.which === "undefined" /* IE */ ||
(e.which > 0 && e.which !== 13 && e.which !== 27 && !e.ctrlKey && !e.altKey);
};
var displaySearch = function ($list, value) {
var search = APP.Search;
var isInSearch = currentPath[0] === SEARCH;
var $div = $('<div>', {'id': 'cp-app-drive-search', 'class': 'cp-unselectable'});
$searchIcon.clone().appendTo($div);
var $input = APP.Search.$input = $('<input>', {
id: 'cp-app-drive-search-input',
type: 'text',
draggable: false,
tabindex: 1,
}).keyup(function (e) {
if (search.to) { window.clearTimeout(search.to); }
if ($input.val().trim() === "") {
search.cursor = 0;
displayDirectory([SEARCH]);
return;
}
if (e.which === 13) {
var newLocation = [SEARCH, $input.val()];
search.cursor = $input[0].selectionStart;
if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
return;
}
if (e.which === 27) {
$input.val('');
search.cursor = 0;
displayDirectory([SEARCH]);
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');
}
search.to = window.setTimeout(function () {
var newLocation = [SEARCH, $input.val()];
search.cursor = $input[0].selectionStart;
if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
}, 500);
}).on('click mousedown mouseup', function (e) {
e.stopPropagation();
}).val(value || '').appendTo($div);
if (value) { $input.addClass('cp-app-drive-search-active'); }
$input[0].selectionStart = search.cursor || 0;
$input[0].selectionEnd = search.cursor || 0;
var cancel = h('span.fa.fa-times.cp-app-drive-search-cancel', {title:Messages.cancel});
cancel.addEventListener('click', function () {
$input.val('');
search.cursor = 0;
displayDirectory([SEARCH]);
});
$div.append(cancel);
$list.append($div);
setTimeout(function () {
$input.focus();
});
getFileListHeader(false).appendTo($list);
$list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list');
var filesList = manager.search(value);
@ -3434,18 +3501,6 @@ define([
// Display the tree and build the content
APP.resetTree();
if (displayedCategories.indexOf(SEARCH) !== -1 && $tree.find('#cp-app-drive-tree-search-input').length) {
// in history mode we want to focus the version number input
if (!history.isHistoryMode && !APP.mobile()) {
var st = $tree.scrollTop() || 0;
if (!$('.alertify').length) {
$tree.find('#cp-app-drive-tree-search-input').focus();
}
$tree.scrollTop(st);
}
$tree.find('#cp-app-drive-tree-search-input')[0].selectionStart = getSearchCursor();
$tree.find('#cp-app-drive-tree-search-input')[0].selectionEnd = getSearchCursor();
}
LS.setLastOpenedFolder(path);
@ -3841,6 +3896,10 @@ define([
name: OWNED_NAME,
$icon: $ownedIcon
};
categories[SEARCH] = {
name: Messages.fm_searchPlaceholder,
$icon: $searchIcon
};
categories[TAGS] = {
name: TAGS_NAME,
$icon: $tagsIcon
@ -3860,9 +3919,9 @@ define([
var s = $categories.scrollTop() || 0;
$tree.html('');
if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
.appendTo($tree);
if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }
if (displayedCategories.indexOf(TAGS) !== -1) { createCategory($div, TAGS); }
if (displayedCategories.indexOf(RECENT) !== -1) { createCategory($div, RECENT); }
if (displayedCategories.indexOf(OWNED) !== -1) { createCategory($div, OWNED); }
@ -4461,19 +4520,6 @@ define([
return;
}
});
var isCharacterKey = function (e) {
return e.which === "undefined" /* IE */ ||
(e.which > 0 && e.which !== 13 && e.which !== 27 && !e.ctrlKey && !e.altKey);
};
$appContainer.on('keypress', function (e) {
var $searchBar = $tree.find('#cp-app-drive-tree-search-input');
if ($searchBar.is(':focus')) { return; }
if (isCharacterKey(e)) {
$searchBar.focus();
e.preventDefault();
return;
}
});
$appContainer.contextmenu(function () {
APP.hideMenu();
return false;