Allow project search to be cleared

services/web/app/views/project/list.jade

@@ -150,13 +150,19 @@ block content
 						.row
 							.col-md-12
 								form.project-search.form-horizontal(role="form")
-									.form-group.has-feedback.col-md-7
+									.form-group.has-feedback.has-feedback-left.col-md-7
 										input.form-control.col-md-7(
 											placeholder='Search projects…',
 											autofocus='autofocus',
-											ng-model="searchText"
+											ng-model="searchText",
+											focus-on='search:clear'
+										)
+										i.fa.fa-search.form-control-feedback-left
+										i.fa.fa-times.form-control-feedback(
+											ng-click="clearSearchText()",
+											style="cursor: pointer;",
+											ng-show="searchText.length > 0"
 										)
-										i.fa.fa-search.form-control-feedback
 									//- i.fa.fa-remove
 
 								.project-tools.js-toggle-tools
@@ -302,7 +308,7 @@ block content
 					placeholder="New Folder Name",
 					ng-model="inputs.newTagName",
 					ng-enter="create()",
-					ng-focus-on="open"
+					focus-on="open"
 				)
 			.modal-footer
 				button.btn.btn-default(ng-click="cancel()") Cancel
@@ -317,7 +323,7 @@ block content
 					placeholder="Project Name",
 					ng-model="inputs.projectName",
 					ng-enter="rename()",
-					ng-focus-on="open"
+					focus-on="open"
 				)
 			.modal-footer
 				button.btn.btn-default(ng-click="cancel()") Cancel
@@ -334,7 +340,7 @@ block content
 						placeholder="New Project Name",
 						ng-model="inputs.projectName",
 						ng-enter="clone()",
-						ng-focus-on="open"
+						focus-on="open"
 					)
 			.modal-footer
 				button.btn.btn-default(
@@ -357,7 +363,7 @@ block content
 					placeholder="Project Name",
 					ng-model="inputs.projectName",
 					ng-enter="create()",
-					ng-focus-on="open"
+					focus-on="open"
 				)
 			.modal-footer
 				button.btn.btn-default(

services/web/public/coffee/app/directives/focusInput.coffee

@@ -0,0 +1,9 @@
+define [
+	"base"
+], (App) ->
+	App.directive "focusInput", ($timeout) ->
+		return (scope, element, attr) ->
+			scope.$watch attr.focusInput, (value) ->
+				if value
+					$timeout ->
+						element.select()

services/web/public/coffee/app/directives/focusOn.coffee

@@ -0,0 +1,10 @@
+define [
+	"base"
+], (App) ->
+	App.directive 'focusOn', ($timeout) ->
+		return {
+			restrict: 'AC'
+			link: (scope, element, attrs) ->
+				scope.$on attrs.focusOn, () ->
+					element.focus()
+		}

services/web/public/coffee/app/directives/stopPropagation.coffee

@@ -2,12 +2,9 @@ define [
 	"base"
 ], (App) ->
 	App.directive "stopPropagation", ($http) ->
-		console.log "Registering"
 		return {
 			restrict: "A",
 			link: (scope, element, attrs) ->
-				console.log "linking"
 				element.bind attrs.stopPropagation, (e) ->
-					console.log "click"
 					e.stopPropagation()
 		}

services/web/public/coffee/app/main.coffee

@@ -3,5 +3,7 @@ define [
 	"user-details"
 	"directives/asyncForm"
 	"directives/stopPropagation"
+	"directives/focusInput"
+	"directives/focusOn"
 ], () ->
 	angular.bootstrap(document.body, ["SharelatexApp"])

services/web/public/coffee/app/project-list.coffee

@@ -10,13 +10,6 @@ define [
 						scope.$eval(attrs.ngEnter, event: event)
 					event.preventDefault()
 
-	App.directive 'ngFocusOn', ($timeout) ->
-		return {
-			restrict: 'AC'
-			link: (scope, element, attrs) ->
-				scope.$on attrs.ngFocusOn, () ->
-					element.focus()
-		}
 
 	App.filter "formatDate", () ->
 		(date, format = "Do MMM YYYY, h:mm a") ->
@@ -57,6 +50,10 @@ define [
 		$scope.$watch "searchText", (value) ->
 			$scope.updateVisibleProjects()
 
+		$scope.clearSearchText = () ->
+			$scope.searchText = ""
+			$scope.$emit "search:clear"
+
 		$scope.setFilter = (filter) ->
 			$scope.filter = filter
 			$scope.updateVisibleProjects()
@@ -448,7 +445,7 @@ define [
 			if $scope.areSelectedProjectsInTag and partialSelection
 				$scope.areSelectedProjectsInTag = "partial"
 
-		$scope.addOrRemoveProjectsFromTag = (e) ->
+		$scope.addOrRemoveProjectsFromTag = () ->
 			if $scope.areSelectedProjectsInTag == true
 				$scope.removeSelectedProjectsFromTag($scope.tag)
 				$scope.areSelectedProjectsInTag = false

services/web/public/coffee/app/user-details.coffee

@@ -5,13 +5,6 @@ define [
 	app.factory "Institutions", ->
 		new AlgoliaSearch(window.algolia.institutions.app_id, window.algolia.institutions.api_key).initIndex("institutions")
 
-	App.directive "focusInput", ($timeout) ->
-		return (scope, element, attr) ->
-			scope.$watch attr.focusInput, (value) ->
-				if value
-					$timeout ->
-						element.select()
-
 	App.controller "UpdateForm", ($scope, $http, Institutions)->
 		$scope.institutions = []
 		$scope.formVisable = false

services/web/public/stylesheets/components/forms.less

@@ -285,6 +285,23 @@ input[type="checkbox"],
   }
 }
 
+.has-feedback-left {
+  position: relative;
+  .form-control {
+    padding-left: @input-height-base;
+  }
+  .form-control-feedback-left {
+    position: absolute;
+    top: (@line-height-computed + 5); // Height of the `label` and its margin
+    left: 0;
+    display: block;
+    width: @input-height-base;
+    height: @input-height-base;
+    line-height: @input-height-base;
+    text-align: center;
+  }
+}
+
 // Feedback states
 .has-success {
   .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
@@ -445,4 +462,8 @@ input[type="checkbox"],
     top: 0;
     right: (@grid-gutter-width / 2);
   }
+  .has-feedback-left .form-control-feedback-left {
+    top: 0;
+    left: (@grid-gutter-width / 2);
+  }
 }