From c889f5e0f9bda5487b376ad13dda253dfa394605 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Wed, 25 Oct 2017 14:26:57 +0200 Subject: better rendering of long versions --- .../components/nav/component/ComponentNavMeta.tsx | 14 +++++- .../__snapshots__/ComponentNavMeta-test.tsx.snap | 15 +++++- .../src/main/js/apps/overview/events/Event.js | 6 ++- .../__tests__/__snapshots__/Event-test.js.snap | 14 ++++-- .../sonar-web/src/main/js/apps/overview/styles.css | 5 ++ .../components/ProjectActivityAnalysesList.js | 7 ++- .../ProjectActivityAnalysesList-test.js.snap | 56 +++++++++++++++------- .../projectActivity/components/projectActivity.css | 4 ++ 8 files changed, 96 insertions(+), 25 deletions(-) (limited to 'server/sonar-web') diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx index 43540593843..1a2b4bd1cd8 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx @@ -21,7 +21,9 @@ import * as React from 'react'; import BranchStatus from '../../../../components/common/BranchStatus'; import { Branch, Component } from '../../../types'; import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter'; +import Tooltip from '../../../../components/controls/Tooltip'; import { isShortLivingBranch } from '../../../../helpers/branches'; +import { translate } from '../../../../helpers/l10n'; interface Props { branch?: Branch; @@ -41,7 +43,17 @@ export default function ComponentNavMeta(props: Props) { } if (props.component.version && !shortBranch) { - metaList.push(
  • Version {props.component.version}
    • ); + metaList.push( +
  • + + + {translate('version')} {props.component.version} + + +
    • + ); } return ( diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap index 905f83959b1..a1dd339dfce 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap @@ -13,8 +13,19 @@ exports[`renders meta for long-living branch 1`] = ` />
  • - Version - 0.0.1 + + + version + + 0.0.1 + +
    • diff --git a/server/sonar-web/src/main/js/apps/overview/events/Event.js b/server/sonar-web/src/main/js/apps/overview/events/Event.js index becf8b33e56..fa1b09e0af3 100644 --- a/server/sonar-web/src/main/js/apps/overview/events/Event.js +++ b/server/sonar-web/src/main/js/apps/overview/events/Event.js @@ -27,7 +27,11 @@ export default function Event(props /*: { event: EventType } */) { const { event } = props; if (event.category === 'VERSION') { - return {props.event.name}; + return ( + + {props.event.name} + + ); } return ( diff --git a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap index b14322d6f2a..f6b5bdfc0e6 100644 --- a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap +++ b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap @@ -1,11 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render a version correctly 1`] = ` - - 6.5-SNAPSHOT - + + 6.5-SNAPSHOT + + `; exports[`should render an event correctly 1`] = ` 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 10ee754e011..8dfefbd5d3c 100644 --- a/server/sonar-web/src/main/js/apps/overview/styles.css +++ b/server/sonar-web/src/main/js/apps/overview/styles.css @@ -397,11 +397,16 @@ .overview-analysis-event.badge { vertical-align: middle; + /* 260px to match the sidebar width on project dashboard */ + max-width: 260px; padding: 4px 14px; + box-sizing: border-box; border-radius: 2px; font-weight: bold; font-size: 12px; letter-spacing: 0; + overflow: hidden; + text-overflow: ellipsis; } .overview-analysis-event + .overview-analysis-event { diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js index 2b740b2004b..451abec9008 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js @@ -23,6 +23,7 @@ import classNames from 'classnames'; import { throttle } from 'lodash'; import ProjectActivityAnalysis from './ProjectActivityAnalysis'; import DateFormatter from '../../../components/intl/DateFormatter'; +import Tooltip from '../../../components/controls/Tooltip'; import { translate } from '../../../helpers/l10n'; import { toShortNotSoISOString } from '../../../helpers/dates'; import { @@ -187,7 +188,11 @@ export default class ProjectActivityAnalysesList extends React.PureComponent {
  • {version.version && (
    - {version.version} + + {version.version} +
    )}