Style project name and allow renaming

services/web/app/views/project/editor/header.jade

@@ -7,10 +7,30 @@ header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
 	)
 		i.fa.fa-fw.fa-bars
 
-	span.name {{ project.name }}
+	.toolbar-center.project-name(ng-controller="ProjectNameController")
+		span.name(
+			ng-dblclick="startRenaming()",
+			ng-show="!state.renaming"
+		) {{ project.name }}
 
-	a(href='#', data-toggle="tooltip", title="Rename")
-		i.fa.fa-pencil
+		input.form-control(
+			type="text"
+			ng-model="inputs.name",
+			ng-show="state.renaming",
+			on-enter="finishRenaming()",
+			ng-blur="finishRenaming()",
+			select-name-when="state.renaming"
+		)
+
+		a.rename(
+			href='#',
+			tooltip-placement="bottom",
+			tooltip="Rename",
+			tooltip-append-to-body="true",
+			ng-click="startRenaming()",
+			ng-show="!state.renaming"
+		)
+			i.fa.fa-pencil
 
 	.toolbar-right
 		a.btn.btn-full-height(

services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee

@@ -0,0 +1,26 @@
+define [
+	"base"
+], (App) ->
+	App.controller "ProjectNameController", ["$scope", "settings", "ide", ($scope, settings, ide) ->
+		$scope.state =
+			renaming: false
+		$scope.inputs = {}
+
+		$scope.startRenaming = () ->
+			$scope.inputs.name = $scope.project.name
+			$scope.state.renaming = true
+			$scope.$emit "project:rename:start"
+
+		$scope.finishRenaming = () ->
+			$scope.project.name = $scope.inputs.name
+			settings.saveProjectSettings({name: $scope.inputs.name})
+			$scope.state.renaming = false
+
+		ide.socket.on "projectNameUpdated", (name) ->
+			$scope.$apply () ->
+				$scope.project.name = name
+
+		$scope.$watch "project.name", (name) ->
+			if name?
+				window.document.title = name + " - Online LaTeX Editor ShareLaTeX"
+	]

services/web/public/coffee/app/ide/settings/index.coffee

@@ -1,5 +1,7 @@
 define [
 	"ide/settings/services/settings"
 	"ide/settings/controllers/SettingsController"
+	"ide/settings/controllers/ProjectNameController"
+
 ], () ->
 			

services/web/public/stylesheets/app/editor.less

@@ -62,6 +62,35 @@
 	}
 }
 
+.project-name {
+	.name {
+		display: inline-block;
+		max-width: 250px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		vertical-align: top;
+		padding: 6px;
+		color: @gray;
+		font-weight: 700;
+		white-space: nowrap;
+	}
+	input {
+		height: 30px;
+		margin-top: 4px;
+		text-align: center;
+		padding: 6px;
+		font-weight: 700;
+	}
+	a.rename {
+		visibility: hidden;
+	}
+	&:hover {
+		a.rename {
+			visibility: visible;
+		}
+	}
+}
+
 // The internal components of the aceEditor directive
 .ace-editor-wrapper {
 	.full-size;

services/web/public/stylesheets/app/editor/toolbar.less

@@ -47,6 +47,17 @@
 		}
 	}
 
+	.toolbar-center {
+		width: 300px;
+		position: absolute;
+		top: 0;
+		left: 50%;
+		margin-left: -150px;
+		text-align: center;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
 	&.toolbar-header {
 		box-shadow: 0 0 2px #ccc;
 		position: absolute;