Merge pull request #474 from sharelatex/pr-project-name-tooltip

Project name tooltip

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

@@ -30,6 +30,11 @@ header.toolbar.toolbar-header.toolbar-with-labels(
 		span.name(
 			ng-dblclick="!permissions.admin || startRenaming()",
 			ng-show="!state.renaming"
+			tooltip="{{ project.name }}",
+			tooltip-class="project-name-tooltip"
+			tooltip-placement="bottom",
+			tooltip-append-to-body="true",
+			tooltip-enable="state.overflowed"
 		) {{ project.name }}
 
 		input.form-control(

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

@@ -2,9 +2,13 @@ define [
 	"base"
 ], (App) ->
 	MAX_PROJECT_NAME_LENGTH = 150
-	App.controller "ProjectNameController", ["$scope", "settings", "ide", ($scope, settings, ide) ->
+	App.controller "ProjectNameController", ["$scope", "$element", "settings", "ide", ($scope, $element, settings, ide) ->
+		projectNameReadOnlyEl = $element.find(".name")[0]
+
 		$scope.state =
 			renaming: false
+			overflowed: false
+
 		$scope.inputs = {}
 
 		$scope.startRenaming = () ->
@@ -29,4 +33,7 @@ define [
 		$scope.$watch "project.name", (name) ->
 			if name?
 				window.document.title = name + " - Online LaTeX Editor ShareLaTeX"
+				$scope.$applyAsync () ->
+					# This ensures that the element is measured *after* the binding is done (i.e. project name is rendered).
+					$scope.state.overflowed = (projectNameReadOnlyEl.scrollWidth > projectNameReadOnlyEl.clientWidth)
 	]

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

@@ -10,6 +10,12 @@
 	margin-bottom: 30px;
 }
 
+.project-name-tooltip .tooltip-inner {
+	max-width: 80vw;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .project-invite-invalid {
 	.actions {
 		padding-top: 15px;