SONAR-6331 apply feedback

7 files changed, 43 insertions, 23 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/common-components.js b/server/sonar-web/src/main/js/apps/overview/common-components.js
index 993b98bc672..da03da65c2a 100644
--- a/server/sonar-web/src/main/js/apps/overview/common-components.js
+++ b/server/sonar-web/src/main/js/apps/overview/common-components.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { formatMeasure, formatMeasureVariation, localizeMetric } from '../../helpers/measures';
 import DrilldownLink from './helpers/drilldown-link';
 import { getShortType } from './helpers/metrics';
+import { DomainLeakTitle } from './main/components';
 
 
 export const DetailedMeasure = React.createClass({
@@ -36,3 +37,17 @@ export const DetailedMeasure = React.createClass({
     </div>;
   }
 });
+
+
+export const Legend = React.createClass({
+  render() {
+    if (!this.props.leakPeriodDate) {
+      return null;
+    }
+    return <ul className="overview-legend list-inline">
+      <li><span className="overview-legend-nutshell"/> Nutshell</li>
+      <li><span className="overview-legend-leak"/> <DomainLeakTitle label={this.props.leakPeriodLabel}
+                                                                    date={this.props.leakPeriodDate}/></li>
+    </ul>;
+  }
+});
diff --git a/server/sonar-web/src/main/js/apps/overview/main/components.js b/server/sonar-web/src/main/js/apps/overview/main/components.js
index 6371375dc2e..b8bdf111c53 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/components.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/components.js
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Timeline } from './timeline';
 import { navigate } from '../../../components/router/router';
+import { Legend } from '../common-components';
 
 
 export const Domain = React.createClass({
@@ -13,8 +14,23 @@ export const Domain = React.createClass({
 
 
 export const DomainTitle = React.createClass({
+  handleClick(e) {
+    e.preventDefault();
+    navigate(this.props.linkTo);
+  },
+
   render () {
-    return <div className="overview-title">{this.props.children}</div>;
+    if (this.props.linkTo) {
+      return <div>
+        <div className="overview-title">
+          {this.props.children}
+          <a onClick={this.handleClick} className="small big-spacer-left link-no-underline" href="#">
+            More <i className="icon-chevron-right" style={{ position: 'relative', top: -1 }}/></a>
+        </div>
+      </div>;
+    } else {
+      return <div className="overview-title">{this.props.children}</div>;
+    }
   }
 });
 
@@ -33,17 +49,10 @@ export const DomainLeakTitle = React.createClass({
 
 
 export const DomainHeader = React.createClass({
-  handleClick(e) {
-    e.preventDefault();
-    navigate(this.props.linkTo);
-  },
-
   render () {
     return <div className="overview-domain-header">
-      <DomainTitle>
-        <a onClick={this.handleClick} href="#">{this.props.title}</a>
-      </DomainTitle>
-      <DomainLeakTitle label={this.props.leakPeriodLabel} date={this.props.leakPeriodDate}/>
+      <DomainTitle linkTo={this.props.linkTo}>{this.props.title}</DomainTitle>
+      <Legend leakPeriodLabel={this.props.leakPeriodLabel} leakPeriodDate={this.props.leakPeriodDate}/>
     </div>;
   }
 });
diff --git a/server/sonar-web/src/main/js/apps/overview/main/coverage.js b/server/sonar-web/src/main/js/apps/overview/main/coverage.js
index 2af648184ac..fa265140f0e 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/coverage.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/coverage.js
@@ -45,8 +45,7 @@ export const GeneralCoverage = React.createClass({
     }
 
     return <Domain>
-      <DomainHeader title="Tests"
-                    leakPeriodLabel={this.props.leakPeriodLabel} leakPeriodDate={this.props.leakPeriodDate}/>
+      <DomainHeader title="Tests"/>
 
       <DomainPanel domain="coverage">
         <DomainNutshell>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/duplications.js b/server/sonar-web/src/main/js/apps/overview/main/duplications.js
index bd95a2d4a39..4ae63e785bd 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/duplications.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/duplications.js
@@ -31,8 +31,7 @@ export const GeneralDuplications = React.createClass({
 
   render () {
     return <Domain>
-      <DomainHeader title="Duplications"
-                    leakPeriodLabel={this.props.leakPeriodLabel} leakPeriodDate={this.props.leakPeriodDate}/>
+      <DomainHeader title="Duplications"/>
 
       <DomainPanel domain="duplications">
         <DomainNutshell>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/size.js b/server/sonar-web/src/main/js/apps/overview/main/size.js
index a9e207d5908..1c2f9fd6536 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/size.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/size.js
@@ -40,7 +40,7 @@ export const GeneralSize = React.createClass({
 
   render () {
     return <Domain>
-      <DomainHeader {...this.props} title="Size" linkTo="/size"/>
+      <DomainHeader title="Size" linkTo="/size"/>
 
       <DomainPanel domain="size">
         <DomainNutshell>
diff --git a/server/sonar-web/src/main/js/apps/overview/size/main.js b/server/sonar-web/src/main/js/apps/overview/size/main.js
index a140c986873..d54f3894926 100644
--- a/server/sonar-web/src/main/js/apps/overview/size/main.js
+++ b/server/sonar-web/src/main/js/apps/overview/size/main.js
@@ -10,6 +10,7 @@ import { DomainTreemap } from '../domain/treemap';
 import { getPeriodLabel, getPeriodDate } from './../helpers/period-label';
 import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
 import { filterMetrics, filterMetricsForDomains } from '../helpers/metrics';
+import { Legend } from '../common-components';
 
 
 export const SizeMain = React.createClass({
@@ -64,14 +65,7 @@ export const SizeMain = React.createClass({
   },
 
   renderLegend () {
-    if (!this.state.leakPeriodDate) {
-      return null;
-    }
-    return <ul className="overview-legend list-inline">
-      <li><span className="overview-legend-nutshell"/> Nutshell</li>
-      <li><span className="overview-legend-leak"/> <DomainLeakTitle label={this.state.leakPeriodLabel}
-                                                                    date={this.state.leakPeriodDate}/></li>
-    </ul>;
+    return <Legend leakPeriodDate={this.state.leakPeriodDate} leakPeriodLabel={this.state.leakPeriodLabel}/>;
   },
 
   renderOtherMeasures(domain, hiddenMetrics) {
diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 86067345095..9c23f36a4cd 100644
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -148,6 +148,10 @@
   border: 1px solid @barBorderColor;
   background-color: #fff;
   overflow: hidden;
+
+  .overview-bar-chart {
+    padding: 0;
+  }
 }
 
 .overview-domain-nutshell,