From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Wed, 18 Oct 2017 15:28:12 +0000 (+0200)
Subject: better rendering of long events on project activity page
X-Git-Tag: 6.7-RC1~179
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=350d53a5f25a1ad8438ba73faad78846e7e2c590;p=sonarqube.git

better rendering of long events on project activity page
---

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 bdd3dd81fd1..a5e992ecfc3 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
@@ -19,8 +19,8 @@
  */
 // @flow
 import React from 'react';
+import Tooltip from '../../../components/controls/Tooltip';
 import ProjectEventIcon from '../../../components/icons-components/ProjectEventIcon';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { translate } from '../../../helpers/l10n';
 /*:: import type { Event as EventType } from '../types'; */
 
@@ -28,20 +28,18 @@ export default function EventInner(props /*: { event: EventType } */) {
   const { event } = props;
 
   return (
-    <TooltipsContainer>
-      <div className="project-activity-event-inner">
-        <div className="project-activity-event-inner-icon little-spacer-right">
-          <ProjectEventIcon
-            className={'project-activity-event-icon margin-align ' + event.category}
-          />
-        </div>
+    <div className="project-activity-event-inner">
+      <div className="project-activity-event-inner-icon little-spacer-right">
+        <ProjectEventIcon
+          className={'project-activity-event-icon margin-align ' + event.category}
+        />
+      </div>
+      <Tooltip mouseEnterDelay={0.5} overlay={event.name}>
         <span className="project-activity-event-inner-text">
           <span className="note">{translate('event.category', event.category)}:</span>{' '}
-          <strong title={event.description} data-toggle="tooltip">
-            {event.name}
-          </strong>
+          <strong title={event.description}>{event.name}</strong>
         </span>
-      </div>
-    </TooltipsContainer>
+      </Tooltip>
+    </div>
   );
 }
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 25fd2bb2f8b..a2327b5fb26 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
@@ -205,6 +205,7 @@
   flex: 1;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
 }
 
 .project-activity-event-inner-icon {
@@ -213,6 +214,9 @@
 
 .project-activity-event-inner-text {
   flex: 1;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .project-activity-event-actions {
diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
index f33a4f1677c..cfc6037198a 100644
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import TooltipCore from 'rc-tooltip';
 
 interface Props {
+  mouseEnterDelay?: number;
   overlay: React.ReactNode;
   placement?: string;
   [attr: string]: any;