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 bdd3dd81fd16b0eec44c1d429a824e6b84c3d041..a5e992ecfc36caf737d383bb4ade801374724a9f 100644 (file)
--- 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 25fd2bb2f8b81387c40d6078e507d4dedbb28483..a2327b5fb26eb36326dc19b76e7d1367753187aa 100644 (file)
--- 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 f33a4f1677c4c562cbe4cb0b909ca08dc460a955..cfc6037198af4826211960c7a24a04ac71a6460f 100644 (file)
--- 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;