From 923daee2220e7f2876a74f947a135ffa2d04883d Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Thu, 15 May 2014 15:41:14 +0200
Subject: [PATCH] SONAR-5209 UI improvements

---
 .../src/main/hbs/component-viewer/header.hbs  | 12 ++++-----
 .../src/main/less/component-viewer.less       | 26 ++++++++++++++-----
 sonar-server/src/main/less/mixins.less        |  5 ++++
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/sonar-server/src/main/hbs/component-viewer/header.hbs b/sonar-server/src/main/hbs/component-viewer/header.hbs
index 68c96c002b2..1768b84149d 100644
--- a/sonar-server/src/main/hbs/component-viewer/header.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/header.hbs
@@ -32,8 +32,6 @@
     </div>
 
     <div class="component-viewer-header-measures-scope">
-      <a data-scope="issues" title="Toggle issues"
-         class="js-toggle-issues component-viewer-header-measures-toggle-scope {{#if settings.issues}}active{{/if}}"></a>
       <a data-scope="issues" class="component-viewer-header-measures-expand">
         {{#if component.measures.debt}}
           <div class="component-viewer-header-measure">
@@ -63,11 +61,11 @@
         </div>
         <i class="icon-dropdown"></i>
       </a>
+      <a data-scope="issues" title="Toggle issues"
+         class="js-toggle-issues component-viewer-header-measures-toggle-scope {{#if settings.issues}}active{{/if}}"></a>
     </div>
 
     <div class="component-viewer-header-measures-scope">
-      <a data-scope="coverage" title="Toggle coverage"
-         class="js-toggle-coverage component-viewer-header-measures-toggle-scope {{#if settings.coverage}}active{{/if}}"></a>
       <a data-scope="coverage" class="component-viewer-header-measures-expand">
         {{#if component.measures.coverage}}
           <div class="component-viewer-header-measure">
@@ -77,11 +75,11 @@
         {{/if}}
         <i class="icon-dropdown"></i>
       </a>
+      <a data-scope="coverage" title="Toggle coverage"
+         class="js-toggle-coverage component-viewer-header-measures-toggle-scope {{#if settings.coverage}}active{{/if}}"></a>
     </div>
 
     <div class="component-viewer-header-measures-scope">
-      <a data-scope="duplications" title="Toggle duplications"
-         class="js-toggle-duplications component-viewer-header-measures-toggle-scope {{#if settings.duplications}}active{{/if}}"></a>
       <a data-scope="duplications" class="component-viewer-header-measures-expand">
         {{#if component.measures.duplication_density}}
           <div class="component-viewer-header-measure">
@@ -91,6 +89,8 @@
         {{/if}}
         <i class="icon-dropdown"></i>
       </a>
+      <a data-scope="duplications" title="Toggle duplications"
+         class="js-toggle-duplications component-viewer-header-measures-toggle-scope {{#if settings.duplications}}active{{/if}}"></a>
     </div>
   </div>
 </div>
diff --git a/sonar-server/src/main/less/component-viewer.less b/sonar-server/src/main/less/component-viewer.less
index 6c000b4e219..71d22027155 100644
--- a/sonar-server/src/main/less/component-viewer.less
+++ b/sonar-server/src/main/less/component-viewer.less
@@ -257,7 +257,6 @@
 
 .component-viewer-header {
   margin-bottom: 10px;
-  padding-top: 8px;
 }
 
 .component-viewer-header-bar {
@@ -292,18 +291,32 @@
 .component-viewer-header-measures-scope {
   position: relative;
   float: left;
-  border-left: 1px solid transparent;
+//  border-left: 1px solid transparent;
 }
 
 .component-viewer-header-measures-toggle-scope {
   position: absolute;
-  top: -9px;
+  top: 0;
   display: block;
-  .size(100%, 8px);
+  .size(100%, 6px);
+  margin-bottom: -1px;
   background-color: lighten(@blue, 30%);
+  .transform-origin(0 0);
   .trans;
 
-  &:hover { background-color: lighten(@blue, 15%); }
+  &:after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    .size(100%, 4px);
+    background-color: transparent;
+  }
+
+  &:hover {
+    background-color: lighten(@blue, 15%);
+    .scale2(1, 2);
+  }
+
   &.active { background-color: @blue; }
   &.inactive { background-color: transparent; }
 }
@@ -311,6 +324,7 @@
 .component-viewer-header-measures-expand {
   display: block;
   padding: 10px 20px;
+  white-space: nowrap;
   .trans(background);
 
   &:hover { background-color: @barBorderColor; }
@@ -379,7 +393,6 @@
 .component-viewer-header-links {
   float: right;
   padding: 8px 10px;
-  border-left: 1px solid @barBorderColor;
 
   a {
     float: left;
@@ -394,6 +407,7 @@
 .component-viewer-header-expanded-bar {
   display: none;
   .clearfix;
+  margin-top: -1px;
   padding: 10px;
   border: 1px solid @barBorderColor;
   border-top: none;
diff --git a/sonar-server/src/main/less/mixins.less b/sonar-server/src/main/less/mixins.less
index 808128ca0f0..a2ed293ccec 100644
--- a/sonar-server/src/main/less/mixins.less
+++ b/sonar-server/src/main/less/mixins.less
@@ -63,6 +63,11 @@
   -webkit-transform: translate3d(@x, @y, @z);
           transform: translate3d(@x, @y, @z);
 }
+.transform-origin(@origin) {
+  -webkit-transform-origin: @origin;
+      -ms-transform-origin: @origin;
+          transform-origin: @origin;
+}
 
 .box-sizing(@boxmodel) {
   -moz-box-sizing: @boxmodel;
-- 
2.39.5