web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add an X icon to cancel a search in the drive

Browse Source
This commit is contained in:
yflory 2019-02-26 16:24:38 +01:00
parent 98bf773221
commit 539e784a7a
2 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
www/drive/app-drive.less
View File

@ -269,8 +269,11 @@
text-align: center; text-align: center;
padding: 0; padding: 0;
position: relative; position: relative;
display: flex;
background: lighten(@colortheme_drive-bg, 8%);
border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
input { input {
background: lighten(@colortheme_drive-bg, 8%); background: transparent;
color: @colortheme_drive-color; color: @colortheme_drive-color;
.tools_placeholder-color(@colortheme_drive-color); .tools_placeholder-color(@colortheme_drive-color);
outline-width: 0px; outline-width: 0px;
@ -278,16 +281,29 @@
width: 100%; width: 100%;
//border: 1px solid #ccc; //border: 1px solid #ccc;
border: 0; border: 0;
border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
//border-right: 0; //border-right: 0;
height: @variables_bar-height; height: @variables_bar-height;
padding: 0 5px; padding: 0 5px;
padding-left: 45px; padding-left: 45px;
flex: 1;
min-width: 0;
&:focus { &:focus {
outline-width: 0px; 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-tree-search-con { .cp-app-drive-search-cancel {
display: none;
cursor: pointer;
}
.cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel {
color: @colortheme_drive-color; color: @colortheme_drive-color;
position: absolute; position: absolute;
left: 20px; // TODO align with drive categories left: 20px; // TODO align with drive categories

21
www/drive/inner.js
View File

@ -111,7 +111,7 @@ define([
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"}); var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
var $closeIcon = $('<span>', {"class": "fa fa-window-close"}); var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
//var $backupIcon = $('<span>', {"class": "fa fa-life-ring"}); //var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-con"}); var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-icon"});
var $addIcon = $('<span>', {"class": "fa fa-plus"}); var $addIcon = $('<span>', {"class": "fa fa-plus"});
var $renamedIcon = $('<span>', {"class": "fa fa-flag"}); var $renamedIcon = $('<span>', {"class": "fa fa-flag"});
var $readonlyIcon = $('<span>', {"class": "fa " + faReadOnly}); var $readonlyIcon = $('<span>', {"class": "fa " + faReadOnly});
@ -2971,6 +2971,13 @@ define([
else { displayDirectory([ROOT]); } else { displayDirectory([ROOT]); }
return; 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');
}
if (APP.mobile()) { return; } if (APP.mobile()) { return; }
search.to = window.setTimeout(function () { search.to = window.setTimeout(function () {
if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); } if (!isInSearchTmp) { search.oldLocation = currentPath.slice(); }
@ -2979,8 +2986,18 @@ define([
if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); } if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
}, 500); }, 500);
}).appendTo($div); }).appendTo($div);
var cancel = h('span.fa.fa-times.cp-app-drive-search-cancel', {title:Messages.cancel});
cancel.addEventListener('click', function () {
$input.val('');
setSearchCursor(0);
if (search.oldLocation && search.oldLocation.length) { displayDirectory(search.oldLocation); }
});
$div.append(cancel);
$searchIcon.clone().appendTo($div); $searchIcon.clone().appendTo($div);
if (isInSearch) { $input.val(currentPath[1] || ''); } if (isInSearch) {
$input.val(currentPath[1] || '');
if ($input.val()) { $input.addClass('cp-app-drive-search-active'); }
}
$container.append($div); $container.append($div);
}; };