SONAR-8119 apply feedback

diff --git a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
index 811e6fc61a821f72966506d23a5f3c5c0e98f7d9..06280ad7a528dd8728b271a008582b43b358a8f0 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
+++ b/server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateCondition.js
@@ -25,7 +25,6 @@ import Measure from '../../component-measures/components/Measure';
 import { getPeriodValue, isDiffMetric, formatMeasure } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
 import { getPeriod, getPeriodDate } from '../../../helpers/periods';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 
 const QualityGateCondition = ({ component, periods, condition }) => {
   const { measure } = condition;
@@ -46,7 +45,7 @@ const QualityGateCondition = ({ component, periods, condition }) => {
   const periodDate = getPeriodDate(period);
   const operator = isRating ?
       translate('quality_gates.operator', condition.op, 'rating') :
-      translate('quality_gates.operator', condition.op, 'short');
+      translate('quality_gates.operator', condition.op);
 
   const className = classNames(
       'overview-quality-gate-condition',
@@ -55,35 +54,34 @@ const QualityGateCondition = ({ component, periods, condition }) => {
   );
 
   return (
-      <TooltipsContainer>
-        <li className={className}>
-          <div className="overview-quality-gate-condition-container"
-               title={`${operator} ${formatMeasure(threshold, metric.type)}`}
-               data-toggle="tooltip">
-            <div className="overview-quality-gate-condition-value">
-              <DrilldownLink
-                  className={isRating ? 'link-no-underline' : null}
-                  component={component.key}
-                  metric={metric.key}
-                  period={condition.period}
-                  periodDate={periodDate}>
-                <Measure measure={{ value: actual, leak: actual }} metric={metric}/>
-              </DrilldownLink>
-            </div>
+      <li className={className}>
+        <div className="overview-quality-gate-condition-container">
+          <div className="overview-quality-gate-condition-value">
+            <DrilldownLink
+                className={isRating ? 'link-no-underline' : null}
+                component={component.key}
+                metric={metric.key}
+                period={condition.period}
+                periodDate={periodDate}>
+              <Measure measure={{ value: actual, leak: actual }} metric={metric}/>
+            </DrilldownLink>
+          </div>
 
-            <div>
-              <div className="overview-quality-gate-condition-metric">
-                {metric.name}
-              </div>
-              {!isDiff && period != null && (
-                  <div className="overview-quality-gate-condition-period">
-                    {translate('quality_gates.conditions.leak')}
-                  </div>
-              )}
+          <div>
+            <div className="overview-quality-gate-condition-metric">
+              {metric.name}
+            </div>
+            {!isDiff && period != null && (
+                <div className="overview-quality-gate-condition-period">
+                  {translate('quality_gates.conditions.leak')}
+                </div>
+            )}
+            <div className="overview-quality-gate-threshold">
+              {operator} {formatMeasure(threshold, metric.type)}
             </div>
           </div>
-        </li>
-      </TooltipsContainer>
+        </div>
+      </li>
   );
 };
 

diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 06a39e2023b20715e91a86604220a69cc4331d25..cb9c344b814ae0be68f8a17324369119fdba4f05 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -72,17 +72,23 @@
 }
 
 .overview-quality-gate-condition-container {
-  float: left;
   display: flex;
   align-items: center;
-  padding: 10px 10px 10px 20px;
+  min-width: 150px;
+  /* three lines by 16px and 4px margin */
+  min-height: 52px;
+  padding: 10px;
 }
 
 .overview-quality-gate-condition-value {
   line-height: 1;
-  margin-right: 20px;
+  margin-right: 10px;
   font-size: 24px;
   font-weight: normal;
+
+  /* for consistency with ratings */
+  min-width: 24px;
+  text-align: center;
 }
 
 .overview-quality-gate-condition-value span {
@@ -90,6 +96,11 @@
   vertical-align: top;
 }
 
+.overview-quality-gate-threshold {
+  margin-top: 4px;
+  font-size: 12px;
+}
+
 .overview-quality-gate-warning {
   margin: 15px 0 0;
 }
@@ -102,6 +113,14 @@
   border-color: #f90;
 }
 
+.overview-quality-gate-condition-error .overview-quality-gate-threshold {
+  color: #d4333f;
+}
+
+.overview-quality-gate-condition-warn .overview-quality-gate-threshold {
+  color: #f90;
+}
+
 
 /*
  * Domain