SONAR-5718 Align files on right in the facet

diff --git a/server/sonar-web/src/main/coffee/issues/facets/component-facet.coffee b/server/sonar-web/src/main/coffee/issues/facets/component-facet.coffee
index 752f4ee286a4372550b8989306c6703d0ab93729..0a993c7345410f1f0d5574a2e2d90bf4fafc99f3 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/facets/component-facet.coffee
+++ b/server/sonar-web/src/main/coffee/issues/facets/component-facet.coffee
@@ -1,11 +1,23 @@
 define [
   'issues/facets/base-facet'
+  'templates/issues'
 ], (
   BaseFacet
+  Templates
 ) ->
 
+  $ = jQuery
+
 
   class extends BaseFacet
+    template: Templates['issues-component-facet']
+
+
+    onRender: ->
+      super
+      maxValueWidth = _.max @$('.facet-stat').map(-> $(@).outerWidth()).get()
+      @$('.facet-name').css 'padding-right', maxValueWidth
+
 
     getValuesWithLabels: ->
       values = @model.getValues()

diff --git a/server/sonar-web/src/main/hbs/issues/facets/issues-component-facet.hbs b/server/sonar-web/src/main/hbs/issues/facets/issues-component-facet.hbs
new file mode 100644 (file)
index 0000000..ec0d1bd
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/issues/facets/issues-component-facet.hbs
@@ -0,0 +1,10 @@
+{{> '_issues-facet-header'}}
+
+<div class="issues-facet-list issues-facet-list-align-right">
+  {{#each values}}
+    <a class="facet issues-facet js-issues-facet" data-value="{{val}}" title="{{default label val}}">
+      <span class="facet-name">{{default label val}}</span>
+      <span class="facet-stat">{{count}}</span>
+    </a>
+  {{/each}}
+</div>

diff --git a/server/sonar-web/src/main/less/issues.less b/server/sonar-web/src/main/less/issues.less
index 53e5a8078f7f5d3ea301ed11a7bc5d0a7fb1d380..357b939a1778a82e8ce1af49b293d0d980194238 100644 (file)
--- a/server/sonar-web/src/main/less/issues.less
+++ b/server/sonar-web/src/main/less/issues.less
@@ -123,6 +123,30 @@
   font-size: 0;
 }
 
+.issues-facet-list-align-right {
+
+  .facet-name {
+    float: right;
+
+    &:before {
+      content: " ";
+      position: absolute;
+      top: 0; bottom: 0; left: 0;
+      width: 10px;
+      background-image: linear-gradient(to left, fade(@barBackgroundColor, 0%), @barBackgroundColor 75%);
+    }
+  }
+
+  .facet-stat:before {
+    display: none;
+  }
+
+  .facet.active .facet-name:before {
+    background-image: linear-gradient(to left, fade(@lightBlue, 0%), @lightBlue 75%);
+  }
+
+}
+
 .issues-facet-container {
   margin-top: 6px;
   padding: 0 10px 16px;