SONAR-5509 Collapse the component name in the component viewer in there is no enough space

3 files changed, 25 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/coffee/component-viewer/header.coffee b/server/sonar-web/src/main/coffee/component-viewer/header.coffee
index 175a4c59221..f4879161719 100644
--- a/server/sonar-web/src/main/coffee/component-viewer/header.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/header.coffee
@@ -74,6 +74,8 @@ define [
 
     onRender: ->
       @delegateEvents()
+      @cutComponentName()
+      $(window).on 'resize.componentViewerHeader', => @cutComponentName()
       activeHeaderTab = @state.get 'activeHeaderTab'
       activeHeaderItem = @state.get 'activeHeaderItem'
       if activeHeaderTab
@@ -86,6 +88,27 @@ define [
       @silentUpdate = false
 
 
+    onClose: ->
+      $(window).off 'resize.componentViewerHeader'
+
+
+    cutComponentName: ->
+      totalWidth = @$el.width() - @$('.component-viewer-header-measures').width() - 150
+      componentName = @$('.component-viewer-header-component-name span')
+      componentName.text componentName.prop 'title'
+      tokens = (@options.main.component.get('path') || '').split '/'
+      while componentName.width() > totalWidth
+        break if tokens.length == 1
+        tokens.shift()
+        componentName.text '.../' + tokens.join('/')
+      if componentName.width() > totalWidth
+        componentName.text '.../' + tokens.join('/')
+
+      # If measures wraps
+      if @$el.height() > 80
+        componentName.text componentName.prop 'title'
+
+
     toggleFavorite: ->
       component = @component
       if component.get 'fav'
diff --git a/server/sonar-web/src/main/hbs/component-viewer/cw-header.hbs b/server/sonar-web/src/main/hbs/component-viewer/cw-header.hbs
index 441fdc9215d..49b9fbb1561 100644
--- a/server/sonar-web/src/main/hbs/component-viewer/cw-header.hbs
+++ b/server/sonar-web/src/main/hbs/component-viewer/cw-header.hbs
@@ -12,7 +12,7 @@
       {{/if}}
 
       <div class="component-viewer-header-component-name">
-        {{qualifierIcon component.q}} {{default component.path component.longName}}
+        {{qualifierIcon component.q}} <span title="{{default component.path component.longName}}">{{default component.path component.longName}}</span>
 
         {{#if state.canMarkAsFavourite}}
           <a class="js-favorite component-viewer-header-favorite"
diff --git a/server/sonar-web/src/main/less/component-viewer.less b/server/sonar-web/src/main/less/component-viewer.less
index b1268b39243..d4dbe974f8d 100644
--- a/server/sonar-web/src/main/less/component-viewer.less
+++ b/server/sonar-web/src/main/less/component-viewer.less
@@ -339,7 +339,6 @@
 .component-viewer-header-component {
   float: left;
   .component-viewer-header-two-lines-mixin;
-
 }
 
 .component-viewer-header-component-project {
@@ -348,7 +347,7 @@
 }
 
 .component-viewer-header-component-name {
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .component-viewer-header-favorite {