Added filter in file selector

css/main.css

@@ -139,6 +139,12 @@ input[type="color"]:focus,
     background-color: #888;
 }
 
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+	color: #bbb;
+}
+
 .btn-primary {
     background-color: #777;
 }
@@ -196,6 +202,11 @@ hr {
 #file-selector {
     max-height: 500px;
 	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+#file-selector .stick {
+	padding: 10px 20px 0;
 }
 
 #file-title {

index.html

@@ -33,10 +33,12 @@
 			</ul>
 			<ul class="nav pull-right hide" id="menu-bar">
 				<li class="btn-group">
-					<button class="btn action-force-sync" title="Synchronize">
+					<button class="btn action-force-sync"
+						title="Synchronize all documents">
 						<i class="icon-refresh"></i>
 					</button>
-					<button class="btn action-force-publish" title="Publish">
+					<button class="btn action-force-publish"
+						title="Publish this document">
 						<i class="icon-share"></i>
 					</button>
 					<button class="btn dropdown-toggle" data-toggle="dropdown"
@@ -64,18 +66,24 @@
 						data-toggle="modal" data-target="#modal-remove-file-confirm">
 						<i class="icon-trash"></i>
 					</button>
-					<button class="btn dropdown-toggle" data-toggle="dropdown"
+					<button class="btn dropdown-toggle action-open-file"
-						title="Open local document">
+						data-toggle="dropdown" title="Open local document">
 						<i class="icon-folder-open"></i>
 					</button>
 					<ul id="file-selector" class="dropdown-menu">
+						<li class="stick">
+							<div class="input-prepend">
+								<span class="add-on"><i class="icon-search"></i></span><input
+									type="text" id="file-search" class="span3">
+							</div>
+						</li>
 					</ul></li>
 				<li class="btn-group"><button class="btn dropdown-toggle"
 						data-toggle="dropdown" title="Menu">
 						<i class="icon-stackedit"></i>&nbsp;&nbsp;<b class="caret"></b>
 					</button>
 					<ul class="dropdown-menu">
-						<li><a href="viewer.html" title="Viewer"><i
+						<li><a href="viewer.html" title="StackEdit Viewer"><i
 								class="icon-fullscreen"></i> Open viewer</a></li>
 						<li><a class="action-download-md" href="#"><i
 								class="icon-download-alt"></i> Save as Markdown</a></li>
@@ -181,13 +189,13 @@
 		<div class="modal-header">
 			<button type="button" class="close" data-dismiss="modal"
 				aria-hidden="true">&times;</button>
-			<h3>Remove</h3>
+			<h3>Delete</h3>
 		</div>
 		<div class="modal-body">
-			<p>Are you sure you want to remove "<span class="file-title"></span>"?
+			<p>Are you sure you want to delete "<span class="file-title"></span>"?
 			</p>
 			<blockquote class="muted">
-				<b>NOTE:</b> This will not remove the file on synchronized
+				<b>NOTE:</b> This will not delete the file on synchronized
 				locations.
 			</blockquote>
 		</div>

js/file-manager.js

@@ -133,7 +133,6 @@ define(["jquery", "core", "synchronizer", "publisher", "sharing", "text!../WELCO
 	};
 	
 	fileManager.updateFileTitles = function() {
-		$("#file-selector").empty();
 		fileDescList = _.chain(localStorage["file.list"].split(";")).compact()
 			.reduce(function(fileDescList, fileIndex) {
 				var title = localStorage[fileIndex + ".title"];
@@ -178,7 +177,7 @@ define(["jquery", "core", "synchronizer", "publisher", "sharing", "text!../WELCO
 		$("#file-title-input").val(title);
 		
 		// Update the file selector
-		$("#file-selector").empty();
+		$("#file-selector li:not(.stick)").empty();
 		_.each(fileDescList, function(fileDesc) {
 			var a = $("<a>").html(composeTitle(fileDesc.index));
 			var li = $("<li>").append(a);
@@ -243,6 +242,23 @@ define(["jquery", "core", "synchronizer", "publisher", "sharing", "text!../WELCO
 			}).value();
 	};
 	
+	// Filter for search input in file selector
+	function filterFileSelector(filter) {
+		var liList = $("#file-selector li:not(.stick)");
+		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();
+				}
+			});
+		}
+	}
+	
 	core.onReady(function() {
 		fileManager.selectFile();
 
@@ -287,6 +303,17 @@ define(["jquery", "core", "synchronizer", "publisher", "sharing", "text!../WELCO
 				applyTitle($(this));
 			}
 		});
+		$(".action-open-file").click(function() {
+			filterFileSelector();
+			_.defer(function() {
+				$("#file-search").val("").focus();
+			});
+		});
+		$("#file-search").keyup(function() {
+			filterFileSelector($(this).val());
+		}).click(function(event) {
+			event.stopPropagation();
+		});
 		$(".action-open-stackedit").click(function() {
 			window.location.href = ".";
 		});

viewer.html

@@ -49,11 +49,17 @@
                                 class="icon-download-alt"></i> Save using template</a></li>
 					</ul></li>
 				<li class="btn-group">
-					<button class="btn dropdown-toggle" data-toggle="dropdown"
+					<button class="btn dropdown-toggle action-open-file"
-						title="Open local document">
+						data-toggle="dropdown" title="Open local document">
 						<i class="icon-folder-open"></i>
 					</button>
 					<ul id="file-selector" class="dropdown-menu">
+						<li class="stick">
+							<div class="input-prepend">
+								<span class="add-on"><i class="icon-search"></i></span><input
+									type="text" id="file-search" class="span3">
+							</div>
+						</li>
 					</ul></li>
 				<li class="btn-group"><button class="btn action-open-stackedit"
 					title="Open StackEdit"><i