From af870c82691fea2cdfe9009863d38ccd4efe5f8f Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 3 Jul 2014 16:18:49 +0100
Subject: [PATCH] Style project name and allow renaming

---
 .../web/app/views/project/editor/header.jade  | 26 +++++++++++++++--
 .../controllers/ProjectNameController.coffee  | 26 +++++++++++++++++
 .../coffee/app/ide/settings/index.coffee      |  2 ++
 .../web/public/stylesheets/app/editor.less    | 29 +++++++++++++++++++
 .../stylesheets/app/editor/toolbar.less       | 11 +++++++
 5 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee

diff --git a/services/web/app/views/project/editor/header.jade b/services/web/app/views/project/editor/header.jade
index cb1dfed94d..cff127cfda 100644
--- a/services/web/app/views/project/editor/header.jade
+++ b/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(
diff --git a/services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee b/services/web/public/coffee/app/ide/settings/controllers/ProjectNameController.coffee
new file mode 100644
index 0000000000..2285f8f029
--- /dev/null
+++ b/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"
+	]
\ No newline at end of file
diff --git a/services/web/public/coffee/app/ide/settings/index.coffee b/services/web/public/coffee/app/ide/settings/index.coffee
index ae5f6a9c66..8ed64432d1 100644
--- a/services/web/public/coffee/app/ide/settings/index.coffee
+++ b/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"
+
 ], () ->
 			
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 3076b2113c..18b0684eb0 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/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;
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index ba3f667d9a..0bc4d0b1cf 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/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;