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

Project name tooltip
This commit is contained in:
James Allen 2017-04-03 14:04:02 +01:00 committed by GitHub
commit 1675185f37
3 changed files with 19 additions and 1 deletions

View file

@ -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(

View file

@ -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)
]

View file

@ -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;