diff --git a/js/extensions/documentManager.js b/js/extensions/documentManager.js
index 45e5b58a..f1602bbd 100644
--- a/js/extensions/documentManager.js
+++ b/js/extensions/documentManager.js
@@ -108,8 +108,6 @@ define([
delete folderList[folderDesc.folderIndex];
});
eventMgr.onFoldersChanged();
-
- refreshManager();
}
var liMoveElt = undefined;
@@ -232,11 +230,10 @@ define([
var fileDesc = fileSystem[parentElt.data('fileIndex')];
if(name && folderDesc && name != folderDesc.name) {
folderDesc.name = name;
- refreshManager();
+ eventMgr.onFoldersChanged();
}
else if(name && fileDesc && name != fileDesc.title) {
fileDesc.title = name;
- refreshManager();
eventMgr.onTitleChanged(fileDesc);
}
else {
@@ -286,6 +283,7 @@ define([
documentManager.onSyncRemoved = refreshManager;
documentManager.onNewPublishSuccess = refreshManager;
documentManager.onPublishRemoved = refreshManager;
+ documentManager.onFoldersChanged = refreshManager;
documentManager.onReady = function() {
modalElt = document.querySelector('.modal-document-manager');
@@ -318,12 +316,11 @@ define([
// Add the index to the folder list
utils.appendIndexToArray("folder.list", folderIndex);
folderList[folderIndex] = folderDesc;
-
- refreshManager();
+ eventMgr.onFoldersChanged();
// Edit the name when folder has just been created
var renameButtonElt = $(modalElt.querySelector('[data-folder-index="' + folderIndex + '"] .button-rename')).click();
- modalElt.scrollTop = modalElt.scrollTop + renameButtonElt.offset().top - 50;
+ modalElt.scrollTop += renameButtonElt.offset().top - 50;
});
// Selection dropdown menu actions
@@ -390,8 +387,6 @@ define([
});
eventMgr.onFoldersChanged();
- refreshManager();
-
$(modalElt.querySelectorAll('.document-list')).removeClass('hide');
$(modalElt.querySelectorAll('.choose-folder, .select-folder-list')).addClass('hide');
});
diff --git a/js/extensions/documentPanel.js b/js/extensions/documentPanel.js
index 75e7ea3b..c3b65968 100644
--- a/js/extensions/documentPanel.js
+++ b/js/extensions/documentPanel.js
@@ -41,6 +41,9 @@ define([
var panelElt = undefined;
var documentListElt = undefined;
+ var $documentListElt = undefined;
+ var documentListFilteredElt = undefined;
+ var $documentListFilteredElt = undefined;
var refreshPanel = function() {
// List orphan documents
@@ -78,7 +81,19 @@ define([
});
documentListElt.innerHTML = documentListHtml;
+
+ // Create filtered list
+ var documentListFilteredHtml = _.chain(fileSystem).sortBy(function(fileDesc) {
+ return fileDesc.title.toLowerCase();
+ }).reduce(function(result, fileDesc) {
+ return result + '' + _.template(documentEltTmpl, {
+ fileDesc: fileDesc,
+ }) + '';
+ }, '').value();
+ documentListFilteredHtml = '' + documentListFilteredHtml + '
';
+ documentListFilteredElt.innerHTML = documentListFilteredHtml;
+
// Add click listeners
_.each(documentListElt.querySelectorAll('.file'), function(fileElt) {
fileElt = $(fileElt);
@@ -107,37 +122,73 @@ define([
documentPanel.onFoldersChanged = refreshPanel;
// Filter for search input in file selector
- function filterFileSelector(filter) {
- var liList = $(".file-selector > li");
- liList.show();
- if(filter) {
- var words = filter.toLowerCase().split(/\s+/);
- liList.each(function() {
- var fileTitle = $(this).text().toLowerCase();
- if(_.some(words, function(word) {
- return fileTitle.indexOf(word) === -1;
- })) {
- $(this).hide();
- }
- });
+ var panelContentElt = undefined;
+ var previousFilterValue = '';
+ function filterFiles(filterValue) {
+ if(filterValue == previousFilterValue) {
+ return;
}
+ previousFilterValue = filterValue;
+
+ // Scroll to top
+ panelContentElt.scrollTop = 0;
+
+ if(!filterValue) {
+ $documentListFilteredElt.addClass('hide');
+ $documentListElt.removeClass('hide');
+ return;
+ }
+ var wordList = filterValue.toLowerCase().split(/\s+/);
+ _.each(documentListFilteredElt.querySelectorAll('.file'), function(fileElt) {
+ var $fileElt = $(fileElt);
+ var fileTitle = $fileElt.text().toLowerCase();
+ $fileElt.toggle(!_.some(wordList, function(word) {
+ return fileTitle.indexOf(word) === -1;
+ }));
+ });
+ $documentListFilteredElt.removeClass('hide');
+ $documentListElt.addClass('hide');
}
documentPanel.onReady = function() {
panelElt = document.querySelector('.document-panel');
- documentListElt = panelElt.querySelector('.list-group');
-
+ panelContentElt = panelElt.querySelector('.panel-content');
+ documentListElt = panelElt.querySelector('.document-list');
+ $documentListElt = $(documentListElt);
+ documentListFilteredElt = panelElt.querySelector('.document-list-filtered');
+ $documentListFilteredElt = $(documentListFilteredElt);
+
// Open current folder before opening
$(panelElt).on('show.bs.collapse', function(e) {
- var folderDesc = selectedFileDesc.folder;
- if(e.target === panelElt && folderDesc !== undefined) {
- $(panelElt.querySelector('.file-list.' + folderDesc.folderIndex.replace('.', ''))).collapse('show');
+ if(e.target === panelElt) {
+ var folderDesc = selectedFileDesc.folder;
+ if(folderDesc !== undefined) {
+ $(panelElt.querySelector('.file-list.' + folderDesc.folderIndex.replace('.', ''))).collapse('show');
+ }
}
}).on('shown.bs.collapse', function(e) {
- // Scroll to the active file
if(e.target === panelElt) {
+ // Unset the filter
+ $filterInputElt.val('');
+ filterFiles('');
+
+ // Scroll to the active file
+ panelContentElt.scrollTop += documentListElt.querySelector('.file.active').getBoundingClientRect().top - 100;
}
});
+
+ // Search bar input change
+ var $filterInputElt = $(panelElt.querySelector('.search-bar .form-control'));
+ $filterInputElt.bind("propertychange keyup input paste", function() {
+ filterFiles($filterInputElt.val());
+ });
+
+ // Clear button
+ $(panelElt.querySelector('.search-bar .close')).click(function() {
+ $filterInputElt.val('');
+ filterFiles('');
+ $filterInputElt.focus();
+ });
};
return documentPanel;
diff --git a/js/html/bodyIndex.html b/js/html/bodyIndex.html
index 7ac188a5..89ef43fb 100644
--- a/js/html/bodyIndex.html
+++ b/js/html/bodyIndex.html
@@ -141,17 +141,21 @@
data-target=".document-panel" title="Select document">
-
diff --git a/js/styles/default.less b/js/styles/default.less
index bc7f1637..09f5ea6d 100644
--- a/js/styles/default.less
+++ b/js/styles/default.less
@@ -5,7 +5,7 @@
@text-light: #888;
@error-border: #ff8661;
@menu-panel-width: 280px;
-@document-panel-width: 330px;
+@document-panel-width: 350px;
@panel-bg: @bg-navbar-hover;
@folder-color: #555;
@transparent: fade(#000, 0%);
@@ -270,7 +270,6 @@ body {
// Common style
.menu-panel, .document-panel {
display: block;
- background-color: @panel-bg;
position: absolute;
height: 100%;
z-index: 10;
@@ -281,8 +280,6 @@ body {
font-size: 18px;
}
.panel-content {
- padding-top: 6px;
- padding-bottom: 25px;
overflow: auto;
height: 100%;
a > i {
@@ -293,6 +290,7 @@ body {
}
.menu-panel {
+ background-color: @panel-bg;
width: @menu-panel-width !important;
margin-left: (-@menu-panel-width - 32);
-webkit-transition: margin-left 0.35s ease;
@@ -313,6 +311,8 @@ body {
z-index: -1;
}
.panel-content {
+ padding-top: 6px;
+ padding-bottom: 25px;
border-right: 5px solid @preview-bg-light;
.nav {
margin-bottom: 20px;
@@ -321,6 +321,7 @@ body {
}
.document-panel {
+ background-color: @list-group-bg;
right: 0;
width: @document-panel-width !important;
margin-right: (-@document-panel-width - 32);
@@ -349,11 +350,27 @@ body {
.icon-layers {
font-size: 135%;
}
- .input-group {
- background-color: @list-group-bg;
- padding: 15px 5px 15px 20px;
- }
}
+ .search-bar {
+ position: absolute;
+ background-color: @panel-bg;
+ margin: -10px 25px 0;
+ padding: 20px 5px 10px 20px;
+ z-index: 3;
+ border: 1px solid #e8e8e8;
+ border-top: 0;
+ border-radius: 6px;
+ .form-control {
+ padding: 8px 30px 8px 12px;
+ }
+ .close {
+ position: absolute;
+ line-height: 10px;
+ margin-left: -30px;
+ margin-top: 5px;
+ padding: 8px;
+ }
+ }
.list-group-item {
margin: 0;
}
@@ -363,10 +380,15 @@ body {
font-size: 15px;
border-bottom-color: @modal-content-separator-color;
}
- .list-group .nav {
- border: 0;
- margin: 0 20px 20px;
- }
+ .list-group {
+ padding-top: 70px;
+ padding-bottom: 30px;
+ margin: 0;
+ .nav {
+ border: 0;
+ margin: 0 20px 20px;
+ }
+ }
}
// Dropdown document selector