From 29997bf05aea661222d80ea48163554dc7ced826 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Wed, 3 Aug 2022 11:24:28 +0200 Subject: [PATCH] SONAR-16731 [891515] Sidebar Contrast --- .../js/apps/projects/filters/CoverageFilter.tsx | 4 ++-- .../projects/filters/DuplicationsFilter.tsx | 4 ++-- .../js/apps/projects/filters/IssuesFilter.tsx | 3 +++ .../js/apps/projects/filters/SizeFilter.tsx | 4 ++-- .../__snapshots__/CoverageFilter-test.tsx.snap | 6 ++++-- .../DuplicationsFilter-test.tsx.snap | 12 ++++++++---- .../__snapshots__/IssuesFilter-test.tsx.snap | 5 +++++ .../__snapshots__/SizeFilter-test.tsx.snap | 6 ++++-- .../src/main/js/apps/projects/styles.css | 2 +- .../main/js/components/ui/CoverageRating.tsx | 17 ++++++++++------- .../js/components/ui/DuplicationsRating.css | 10 +++++----- .../js/components/ui/DuplicationsRating.tsx | 2 +- .../src/main/js/components/ui/Level.css | 3 ++- .../src/main/js/components/ui/Rating.css | 11 ++++++----- .../src/main/js/components/ui/SizeRating.css | 10 +++++----- .../ui/__tests__/CoverageRating-test.tsx | 4 ++-- .../resources/org/sonar/l10n/core.properties | 1 + 17 files changed, 63 insertions(+), 41 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx index cf2d6e41163..a93ca431ea0 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx @@ -63,7 +63,7 @@ function getFacetValueForOption(facet: Facet, option: number): number { function renderOption(option: number, selected: boolean) { return ( - +
{option < 6 && ( {translate('no_data')} )} - +
); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx index ec19bb10a1c..c3821b81ed4 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/DuplicationsFilter.tsx @@ -65,7 +65,7 @@ function getFacetValueForOption(facet: Facet, option: number) { function renderOption(option: number, selected: boolean) { return ( - +
{option < 6 && ( {translate('no_data')} )} - +
); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx index a8b41df5a28..28ec1bbf4cb 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx @@ -61,6 +61,9 @@ function renderOption(option: number, selected: boolean) { return ( + + {translateWithParameters('projects.facets.rating_x', formatMeasure(option, 'RATING'))} + ); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx index 939eb2f5c07..529d33ce4d2 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx @@ -62,9 +62,9 @@ function getFacetValueForOption(facet: Facet, option: number) { function renderOption(option: number, selected: boolean) { return ( - +
{getSizeRatingLabel(option)} - +
); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap index 9c45a22ef8e..a77a3e20f95 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap @@ -27,7 +27,9 @@ exports[`renders 1`] = ` `; exports[`renders 2`] = ` - +
70% - 80% - +
`; diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap index a0c1acb0b3c..4672e648690 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/DuplicationsFilter-test.tsx.snap @@ -27,7 +27,9 @@ exports[`renders 1`] = ` `; exports[`renders 2`] = ` - +
3% - 5% - +
`; exports[`renders 3`] = ` - +
@@ -52,5 +56,5 @@ exports[`renders 3`] = ` no_data - +
`; diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap index 518429562a1..64e83a0b6a2 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap @@ -30,5 +30,10 @@ exports[`renders 2`] = ` small={true} value={2} /> + + projects.facets.rating_x.B + `; diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap index a950d21b0d1..24fa109ec75 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap @@ -25,7 +25,9 @@ exports[`renders 1`] = ` `; exports[`renders 2`] = ` - +
1k - 10k - +
`; diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css index e6881bc56a7..6e226a562ed 100644 --- a/server/sonar-web/src/main/js/apps/projects/styles.css +++ b/server/sonar-web/src/main/js/apps/projects/styles.css @@ -78,7 +78,7 @@ .projects-facet-bar-inner { min-width: 1px; height: 10px; - background-color: var(--gray71); + background-color: var(--gray60); transition: width 0.3s ease; } diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx index 3c4f2d3de9e..cad8dfba2f9 100644 --- a/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx +++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.tsx @@ -21,14 +21,17 @@ import * as React from 'react'; import { colors } from '../../app/theme'; import DonutChart from '../../components/charts/DonutChart'; -const SIZE_TO_WIDTH_MAPPING = { small: 16, normal: 24, big: 40, huge: 60 }; +const SIZE_TO_WIDTH_MAPPING = { small: 20, normal: 24, big: 40, huge: 60 }; +const SIZE_TO_THICKNESS_MAPPING = { small: 3, normal: 3, big: 3, huge: 4 }; -const SIZE_TO_THICKNESS_MAPPING = { small: 2, normal: 3, big: 3, huge: 4 }; +const FULL_PERCENT = 100; + +type SIZE = 'small' | 'normal' | 'big' | 'huge'; export interface CoverageRatingProps { muted?: boolean; - size?: 'small' | 'normal' | 'big' | 'huge'; - value: number | string | null | undefined; + size?: SIZE; + value?: number | string; } export default function CoverageRating({ @@ -36,16 +39,16 @@ export default function CoverageRating({ size = 'normal', value }: CoverageRatingProps) { - let data = [{ value: 100, fill: '#ccc ' }]; + let data = [{ value: FULL_PERCENT, fill: colors.gray71 }]; let padAngle = 0; if (value != null) { const numberValue = Number(value); data = [ { value: numberValue, fill: muted ? colors.gray71 : colors.green }, - { value: 100 - numberValue, fill: muted ? colors.barBackgroundColor : colors.lineCoverageRed } + { value: FULL_PERCENT - numberValue, fill: muted ? 'transparent' : colors.lineCoverageRed } ]; - if (numberValue !== 0 && numberValue < 100) { + if (numberValue !== 0 && numberValue < FULL_PERCENT) { padAngle = 0.1; // Same for all sizes, because it scales automatically } } diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css index d126113cd50..d5b24f7c8b1 100644 --- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css +++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css @@ -31,9 +31,9 @@ } .duplications-rating-small { - width: 16px; - height: 16px; - border-width: 2px; + width: 20px; + height: 20px; + border-width: 3px; } .duplications-rating-big { @@ -50,11 +50,11 @@ } .duplications-rating-muted { - border-color: #bdbdbd !important; + border-color: var(--gray71) !important; } .duplications-rating-muted:after { - background-color: #bdbdbd !important; + background-color: var(--gray71) !important; } .duplications-rating:after { diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx index 89ddd77af2d..4c7581e0c51 100644 --- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx +++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.tsx @@ -25,7 +25,7 @@ import './DuplicationsRating.css'; interface Props { muted?: boolean; size?: 'small' | 'normal' | 'big' | 'huge'; - value: number | null | undefined; + value?: number; } export default function DuplicationsRating({ muted = false, size = 'normal', value }: Props) { diff --git a/server/sonar-web/src/main/js/components/ui/Level.css b/server/sonar-web/src/main/js/components/ui/Level.css index 2974a1f9ffa..f711d858103 100644 --- a/server/sonar-web/src/main/js/components/ui/Level.css +++ b/server/sonar-web/src/main/js/components/ui/Level.css @@ -45,10 +45,11 @@ height: var(--smallControlHeight); line-height: var(--smallControlHeight); font-size: var(--smallFontSize); + font-weight: bold; } .level-muted { - background-color: #bdbdbd !important; + background-color: var(--gray60) !important; } a > .level { diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css index 8229a957380..58c687c4ac3 100644 --- a/server/sonar-web/src/main/js/components/ui/Rating.css +++ b/server/sonar-web/src/main/js/components/ui/Rating.css @@ -32,7 +32,7 @@ } .rating-muted { - background-color: #bdbdbd !important; + background-color: var(--gray71) !important; color: #fff !important; text-shadow: 0 0 1px rgba(0, 0, 0, 0.35) !important; } @@ -89,10 +89,11 @@ a .rating-E { } .rating-small { - width: 18px; - height: 18px; - line-height: 18px; + width: 20px; + height: 20px; + line-height: 20px; margin-top: -1px; margin-bottom: -1px; - font-size: var(--smallFontSize); + font-size: var(--mediumFontSize); + font-weight: bold; } diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.css b/server/sonar-web/src/main/js/components/ui/SizeRating.css index 4f288c22d2f..b6730dba61e 100644 --- a/server/sonar-web/src/main/js/components/ui/SizeRating.css +++ b/server/sonar-web/src/main/js/components/ui/SizeRating.css @@ -27,19 +27,19 @@ background-color: var(--blue); color: #fff; font-size: var(--smallFontSize); + font-weight: bold; text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.35); } .size-rating-small { - width: 18px; - height: 18px; - line-height: 18px; + width: 20px; + height: 20px; + line-height: 20px; margin-top: -1px; margin-bottom: -1px; - font-size: 10px; } .size-rating-muted { - background-color: #bdbdbd; + background-color: var(--gray71); } diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx index f9ed02d54e4..c2fb9644e56 100644 --- a/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx +++ b/server/sonar-web/src/main/js/components/ui/__tests__/CoverageRating-test.tsx @@ -32,7 +32,7 @@ it('should render with muted style', () => { .prop('data') ).toEqual([ { fill: '#b4b4b4', value: 25 }, - { fill: '#f3f3f3', value: 75 } + { fill: 'transparent', value: 75 } ]); }); @@ -41,7 +41,7 @@ it('should render with small size', () => { shallowRender({ size: 'small' }) .find('DonutChart') .props() - ).toMatchObject({ height: 16, padAngle: 0.1, thickness: 2, width: 16 }); + ).toMatchObject({ height: 20, padAngle: 0.1, thickness: 3, width: 20 }); }); it('should correctly handle padAngle for 0% and 100% coverage', () => { diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 33b62b45f1b..daba2a880ff 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -1059,6 +1059,7 @@ projects.worse_of_reliablity_and_security=Worse of Reliability and Security projects.limited_set_of_projects=Displayed project set limited to the top {0} projects based on current sort: {1}. projects.facets.quality_gate=Quality Gate projects.facets.quality_gate.warning_help=Warning status is deprecated. This filter will disappear when no Warning Quality Gate remains. +projects.facets.rating_x={0} rating projects.facets.languages=Languages projects.facets.new_lines=New Lines projects.facets.tags=Tags -- 2.39.5