New Issues Page: improve rendering of sidebar items

6 files changed, 90 insertions, 90 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb
index 9cd21c89fd7..0cc63fe2f66 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issue.hbs.erb
@@ -19,6 +19,6 @@
       {{#unless singleProject}}
         <div class="subtitle">{{projectLongName}}</div>
       {{/unless}}
-      <div class="subtitle">{{componentLongName}}</div>
+      <div class="subtitle component">{{componentLongName}}</div>
     </div>
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
index 442c668b20e..784e4c0ea1c 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_issues_actions.hbs.erb
@@ -2,7 +2,7 @@
   {{#unless maxResultsReached}}
     <div class="navigator-actions-order">
       {{#if sorting}}
-        Ordered by {{sorting.sortText}} {{#if sorting.asc}}<i class="icon-arrow-up"></i>{{else}}<i class="icon-arrow-down"></i>{{/if}}
+        Ordered by <strong>{{sorting.sortText}}</strong> {{#if sorting.asc}}<i class="icon-arrow-up"></i>{{else}}<i class="icon-arrow-down"></i>{{/if}}
       {{else}}
         Order
       {{/if}}
@@ -17,7 +17,7 @@
     </ul>
   {{/unless}}
   <div class="navigator-actions-total">
-    Found: {{paging.total}}
+    Found: <strong>{{paging.total}}</strong>
     {{#if appState.canBulkChange}}
       <a href="<%= url_for params.merge({:action => 'bulk_change_form'}) -%>?{{query}}"
          class="navigator-actions-bulk open-modal"
diff --git a/sonar-server/src/main/webapp/javascripts/navigator/issues.js b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
index 7d53ff98209..54358aca1ae 100644
--- a/sonar-server/src/main/webapp/javascripts/navigator/issues.js
+++ b/sonar-server/src/main/webapp/javascripts/navigator/issues.js
@@ -150,6 +150,11 @@ jQuery(function() {
     tagName: 'li',
 
 
+    ui: {
+      component: '.component'
+    },
+
+
     events: {
       'click': 'showDetails'
     },
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.css b/sonar-server/src/main/webapp/stylesheets/navigator.css
index 9006b453d65..d57c487e2dc 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.css
@@ -35,8 +35,8 @@
   z-index: 2;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  top: 104px;
-  bottom: 30px;
+  top: 134px;
+  bottom: 0;
   left: 0;
   width: 320px;
 }
@@ -55,7 +55,7 @@
   z-index: 2;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  bottom: 0;
+  top: 104px;
   left: 0;
   width: 320px;
   height: 30px;
@@ -167,26 +167,19 @@
   overflow-y: auto;
 }
 .navigator-results-list > li {
-  padding-top: 10px;
+  padding: 5px 0;
   cursor: pointer;
+  transition: all 0.3s ease;
 }
 .navigator-results-list > li:first-child {
-  padding-top: 0;
+  border-top: 1px solid transparent;
 }
-.navigator-results-list > li:first-child:hover .line:first-child {
-  border-top-color: transparent;
+.navigator-results-list > li:first-child.active {
+  border-top-color: #4B9FD5;
 }
 .navigator-results-list > li .line {
   padding: 5px 10px;
   line-height: 1;
-  transition: all 0.3s ease;
-}
-.navigator-results-list > li .line:first-child {
-  border-top: 1px solid transparent;
-  background-color: #efefef;
-}
-.navigator-results-list > li .line:last-child {
-  border-bottom: 1px solid transparent;
 }
 .navigator-results-list > li .line-small {
   font-size: 11px;
@@ -200,17 +193,18 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.navigator-results-list > li:hover .line,
-.navigator-results-list > li.active .line {
+.navigator-results-list > li:hover {
   background-color: #efefef;
 }
-.navigator-results-list > li:hover .line:first-child,
-.navigator-results-list > li.active .line:first-child {
-  border-top-color: #e1e1e1;
+.navigator-results-list > li.active {
+  background-color: #CAE3F2;
+  border-color: #4B9FD5;
+}
+.navigator-results-list > li + li {
+  border-top: 1px solid #e1e1e1;
 }
-.navigator-results-list > li:hover .line:last-child,
-.navigator-results-list > li.active .line:last-child {
-  border-bottom-color: #e1e1e1;
+.navigator-results-list > li.active + li {
+  border-top-color: #4B9FD5;
 }
 .navigator-results-no-issues {
   padding-top: 20%;
@@ -251,14 +245,18 @@
 }
 .navigator-actions {
   padding: 0 10px 0 0;
-  line-height: 30px;
   border-right: 1px solid #e1e1e1;
-  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
   background-color: #ffffff;
+  font-size: 11px;
+}
+.navigator-actions strong {
+  font-weight: bold;
 }
 .navigator-actions-order {
   float: left;
   padding: 0 10px;
+  line-height: 30px;
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -270,11 +268,11 @@
   z-index: 2;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  bottom: 30px;
+  top: 134px;
   left: 0;
   min-width: 160px;
   background-color: #fff;
-  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
   border-right: 1px solid #e1e1e1;
   overflow: scroll;
   display: none;
@@ -294,6 +292,7 @@
 }
 .navigator-actions-total {
   float: right;
+  line-height: 26px;
 }
 .navigator-actions-bulk {
   position: relative;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.css b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
index f3e6c83887d..abd78b59ff6 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
@@ -35,8 +35,8 @@
   z-index: 2;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  top: 104px;
-  bottom: 30px;
+  top: 134px;
+  bottom: 0;
   left: 0;
   width: 320px;
 }
@@ -55,7 +55,7 @@
   z-index: 2;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  bottom: 0;
+  top: 104px;
   left: 0;
   width: 320px;
   height: 30px;
@@ -167,26 +167,19 @@
   overflow-y: auto;
 }
 .navigator-results-list > li {
-  padding-top: 10px;
+  padding: 5px 0;
   cursor: pointer;
+  transition: all 0.3s ease;
 }
 .navigator-results-list > li:first-child {
-  padding-top: 0;
+  border-top: 1px solid transparent;
 }
-.navigator-results-list > li:first-child:hover .line:first-child {
-  border-top-color: transparent;
+.navigator-results-list > li:first-child.active {
+  border-top-color: #4B9FD5;
 }
 .navigator-results-list > li .line {
   padding: 5px 10px;
   line-height: 1;
-  transition: all 0.3s ease;
-}
-.navigator-results-list > li .line:first-child {
-  border-top: 1px solid transparent;
-  background-color: #efefef;
-}
-.navigator-results-list > li .line:last-child {
-  border-bottom: 1px solid transparent;
 }
 .navigator-results-list > li .line-small {
   font-size: 11px;
@@ -200,17 +193,18 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.navigator-results-list > li:hover .line,
-.navigator-results-list > li.active .line {
+.navigator-results-list > li:hover {
   background-color: #efefef;
 }
-.navigator-results-list > li:hover .line:first-child,
-.navigator-results-list > li.active .line:first-child {
-  border-top-color: #e1e1e1;
+.navigator-results-list > li.active {
+  background-color: #CAE3F2;
+  border-color: #4B9FD5;
+}
+.navigator-results-list > li + li {
+  border-top: 1px solid #e1e1e1;
 }
-.navigator-results-list > li:hover .line:last-child,
-.navigator-results-list > li.active .line:last-child {
-  border-bottom-color: #e1e1e1;
+.navigator-results-list > li.active + li {
+  border-top-color: #4B9FD5;
 }
 .navigator-results-no-issues {
   padding-top: 20%;
@@ -251,14 +245,18 @@
 }
 .navigator-actions {
   padding: 0 10px 0 0;
-  line-height: 30px;
   border-right: 1px solid #e1e1e1;
-  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
   background-color: #ffffff;
+  font-size: 11px;
+}
+.navigator-actions strong {
+  font-weight: bold;
 }
 .navigator-actions-order {
   float: left;
   padding: 0 10px;
+  line-height: 30px;
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -270,11 +268,11 @@
   z-index: 2;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  bottom: 30px;
+  top: 134px;
   left: 0;
   min-width: 160px;
   background-color: #fff;
-  border-top: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
   border-right: 1px solid #e1e1e1;
   overflow: scroll;
   display: none;
@@ -294,6 +292,7 @@
 }
 .navigator-actions-total {
   float: right;
+  line-height: 26px;
 }
 .navigator-actions-bulk {
   position: relative;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.less b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
index 36207aa7b2e..3089076a1ac 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.less
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
@@ -29,8 +29,8 @@
 
 .navigator-results {
   .navigator-element;
-  top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight;
-  bottom: @navigatorStatusHeight;
+  top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight;
+  bottom: 0;
   left: 0;
   width: @navigatorResultsWidth;
 }
@@ -45,7 +45,7 @@
 
 .navigator-actions {
   .navigator-element;
-  bottom: 0;
+  top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight;
   left: 0;
   .size(@navigatorResultsWidth, @navigatorStatusHeight);
 }
@@ -190,30 +190,21 @@
 .navigator-results-list {
 
   & > li {
-    padding-top: @navigatorPadding;
+    padding: @navigatorPadding / 2 0;
     cursor: pointer;
+    .trans;
 
     &:first-child {
-      padding-top: 0;
+      border-top: 1px solid transparent;
 
-      &:hover .line:first-child {
-        border-top-color: transparent;
+      &.active {
+        border-top-color: #4B9FD5;
       }
     }
 
     .line {
       padding: @navigatorPadding / 2 @navigatorPadding;
       line-height: 1;
-      .trans;
-
-      &:first-child {
-        border-top: 1px solid transparent;
-        background-color: @navigatorBarBackground;
-      }
-
-      &:last-child {
-        border-bottom: 1px solid transparent;
-      }
     }
 
     .line-small {
@@ -231,21 +222,22 @@
       white-space: nowrap;
     }
 
-    &:hover,
-    &.active {
-      .line {
-        background-color: @navigatorBarBackground;
-
-        &:first-child {
-          border-top-color: @navigatorBorderLightColor;
-        }
+    &:hover {
+      background-color: @navigatorBarBackground;
+    }
 
-        &:last-child {
-          border-bottom-color: @navigatorBorderLightColor;
-        }
-      }
+    &.active {
+      background-color: #CAE3F2;
+      border-color: #4B9FD5;
     }
+  }
 
+  & > li + li {
+    border-top: 1px solid @navigatorBorderLightColor;
+  }
+
+  & > li.active + li {
+    border-top-color: #4B9FD5;
   }
 }
 
@@ -302,15 +294,19 @@
 // Status
 .navigator-actions {
   padding: 0 @navigatorPadding 0 0;
-  line-height: @navigatorStatusHeight;
+
   border-right: 1px solid @navigatorBorderLightColor;
-  border-top: 1px solid @navigatorBorderLightColor;
+  border-bottom: 1px solid @navigatorBorderLightColor;
   background-color: @white;
+  font-size: @smallFontSize;
+
+  strong { font-weight: bold; }
 }
 
 .navigator-actions-order {
   float: left;
   padding: 0 @navigatorPadding;
+  line-height: @navigatorStatusHeight;
   cursor: pointer;
   .trans;
 
@@ -321,11 +317,11 @@
 
 .navigator-actions-order-choices {
   .navigator-element;
-  bottom: @navigatorStatusHeight;
+  top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight;
   left: 0;
   min-width: @navigatorResultsWidth / 2;
   background-color: #fff;
-  border-top: 1px solid @navigatorBorderLightColor;
+  border-bottom: 1px solid @navigatorBorderLightColor;
   border-right: 1px solid @navigatorBorderLightColor;
   overflow: scroll;
   display: none;
@@ -349,6 +345,7 @@
 
 .navigator-actions-total {
   float: right;
+  line-height: @navigatorStatusHeight - 4px;
 }
 
 .navigator-actions-bulk {