Fix tooltip and events icon styling on project activity page

9 files changed, 119 insertions, 16 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js b/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js
index 13152f46f94..c6c5f8f09c1 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.js
@@ -32,7 +32,7 @@ export default function EventInner(props: { event: EventType }) {
       <div className="project-activity-event-inner">
         <div className="project-activity-event-inner-icon little-spacer-right">
           <ProjectEventIcon
-            className={'text-text-bottom project-activity-event-icon ' + event.category}
+            className={'project-activity-event-icon margin-align ' + event.category}
           />
         </div>
         <span className="project-activity-event-inner-text">
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js
index 589d607d2d8..4348f21e872 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentEvents.js
@@ -33,12 +33,16 @@ export default function GraphsTooltipsContentEvents({ events }: Props) {
       <tr><td className="project-activity-graph-tooltip-separator" colSpan="3"><hr /></td></tr>
       {events.map(event => (
         <tr key={event.key} className="project-activity-graph-tooltip-line">
-          <td className="spacer-right thin">
-            <ProjectEventIcon className={'project-activity-event-icon ' + event.category} />
+          <td className="text-top spacer-right thin">
+            <ProjectEventIcon
+              className={'project-activity-event-icon margin-align ' + event.category}
+            />
           </td>
           <td colSpan="2">
-            <span>{translate('event.category', event.category)}:</span>
-            {' '} {event.name}
+            <span className="little-spacer-right">
+              {translate('event.category', event.category)}:
+            </span>
+            {event.name}
           </td>
         </tr>
       ))}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentOverview.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentOverview.js
index cd9c643710f..f16476bd41e 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentOverview.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltipsContentOverview.js
@@ -56,7 +56,7 @@ export default function GraphsTooltipsContentOverview(props: Props) {
           )}
         />
       </td>
-      <td className="text-right spacer-right thin">
+      <td className="text-right spacer-right">
         <span className="project-activity-graph-tooltip-value">{props.value}</span>
         {ratingValue && <Rating className="spacer-left" small={true} value={ratingValue} />}
       </td>
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js
index 4ccb7cb9718..842b3ff8a44 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.js
@@ -60,12 +60,9 @@ export default class ProjectActivityAnalysis extends React.PureComponent {
         role="listitem"
         tabIndex="0">
         <div className="project-activity-time spacer-right">
-          <FormattedDate date={date} format="LT" tooltipFormat="LTS" />
+          <FormattedDate className="text-middle" date={date} format="LT" tooltipFormat="LTS" />
         </div>
-        <div
-          className="project-activity-analysis-icon little-spacer-top big-spacer-right"
-          title={analysisTitle}
-        />
+        <div className="project-activity-analysis-icon big-spacer-right" title={analysisTitle} />
 
         {canAdmin &&
           <div className="project-activity-analysis-actions spacer-left">
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js
new file mode 100644
index 00000000000..0dc9d74cdb6
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsTooltipsContentEvents-test.js
@@ -0,0 +1,39 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import GraphsTooltipsContentEvents from '../GraphsTooltipsContentEvents';
+
+const EVENTS = [
+  {
+    key: '1',
+    category: 'VERSION',
+    name: '6.5'
+  },
+  {
+    key: '2',
+    category: 'OTHER',
+    name: 'Foo'
+  }
+];
+
+it('should render correctly', () => {
+  expect(shallow(<GraphsTooltipsContentEvents events={EVENTS} />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentEvents-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentEvents-test.js.snap
new file mode 100644
index 00000000000..af1efe60bde
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentEvents-test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<tbody>
+  <tr>
+    <td
+      className="project-activity-graph-tooltip-separator"
+      colSpan="3"
+    >
+      <hr />
+    </td>
+  </tr>
+  <tr
+    className="project-activity-graph-tooltip-line"
+  >
+    <td
+      className="text-top spacer-right thin"
+    >
+      <ProjectEventIcon
+        className="project-activity-event-icon margin-align VERSION"
+      />
+    </td>
+    <td
+      colSpan="2"
+    >
+      <span
+        className="little-spacer-right"
+      >
+        event.category.VERSION
+        :
+      </span>
+      6.5
+    </td>
+  </tr>
+  <tr
+    className="project-activity-graph-tooltip-line"
+  >
+    <td
+      className="text-top spacer-right thin"
+    >
+      <ProjectEventIcon
+        className="project-activity-event-icon margin-align OTHER"
+      />
+    </td>
+    <td
+      colSpan="2"
+    >
+      <span
+        className="little-spacer-right"
+      >
+        event.category.OTHER
+        :
+      </span>
+      Foo
+    </td>
+  </tr>
+</tbody>
+`;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentOverview-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentOverview-test.js.snap
index 71b89ced18e..e7f3e105fca 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentOverview-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltipsContentOverview-test.js.snap
@@ -12,7 +12,7 @@ exports[`should render correctly 1`] = `
     />
   </td>
   <td
-    className="text-right spacer-right thin"
+    className="text-right spacer-right"
   >
     <span
       className="project-activity-graph-tooltip-value"
@@ -44,7 +44,7 @@ exports[`should render correctly when rating data is missing 1`] = `
     />
   </td>
   <td
-    className="text-right spacer-right thin"
+    className="text-right spacer-right"
   >
     <span
       className="project-activity-graph-tooltip-value"
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
index 903bd9ff4f9..35b51275992 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
@@ -153,7 +153,7 @@
   float: left;
   width: 10px;
   height: 10px;
-  margin-top: 4px;
+  margin-top: 5px;
   border: 2px solid #4b9fd5;
   border-radius: 10px;
   box-sizing: border-box;
@@ -199,6 +199,10 @@
   margin-left: 4px;
 }
 
+.project-activity-event-icon.margin-align {
+  margin-top: 3px;
+}
+
 .project-activity-event-icon.VERSION {
   color: #4b9fd5;
 }
diff --git a/server/sonar-web/src/main/js/components/ui/FormattedDate.js b/server/sonar-web/src/main/js/components/ui/FormattedDate.js
index 3c67005b7bf..04b0abc49ae 100644
--- a/server/sonar-web/src/main/js/components/ui/FormattedDate.js
+++ b/server/sonar-web/src/main/js/components/ui/FormattedDate.js
@@ -23,6 +23,7 @@ import moment from 'moment';
 
 export default class FormattedDate extends React.PureComponent {
   props: {
+    className?: string,
     date: string | number,
     format?: string,
     tooltipFormat?: string
@@ -33,14 +34,14 @@ export default class FormattedDate extends React.PureComponent {
   };
 
   render() {
-    const { date, format, tooltipFormat } = this.props;
+    const { className, date, format, tooltipFormat } = this.props;
 
     const m = moment(date);
 
     const title = tooltipFormat ? m.format(tooltipFormat) : undefined;
 
     return (
-      <time dateTime={m.format()} title={title}>
+      <time className={className} dateTime={m.format()} title={title}>
         {m.format(format)}
       </time>
     );