From a3aacbe95a00ea7df7239e38b3281431e4428437 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Wed, 14 Jun 2023 12:09:05 +0200 Subject: [PATCH] SONAR-19345 Layout fixes for issue page with small styling fixes --- .../src/components/KeyboardHintKeys.tsx | 1 + .../__snapshots__/KeyboardHint-test.tsx.snap | 48 ++++++++++- .../KeyboardHintKeys-test.tsx.snap | 38 +++++++- .../__snapshots__/LineFinding-test.tsx.snap | 2 + .../src/components/code-line/LineFinding.tsx | 1 + .../design-system/src/helpers/keyboard.ts | 1 + .../js/apps/issues/components/IssuesApp.tsx | 86 ++++++++++--------- .../js/apps/issues/components/PageActions.tsx | 2 +- .../issues/sidebar/MultipleSelectionHint.tsx | 5 +- .../resources/org/sonar/l10n/core.properties | 1 + 10 files changed, 139 insertions(+), 46 deletions(-) diff --git a/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx index 230a5dc7231..7d2129e5c27 100644 --- a/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx +++ b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx @@ -33,6 +33,7 @@ export const mappedKeys = { [Key.Command]: '⌘', [Key.Control]: 'Ctrl', [Key.Option]: '⌥', + [Key.Click]: 'click', }; export function KeyboardHintKeys({ command }: { command: string }) { diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap index 6ac0d945eef..798c34a273f 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap @@ -171,6 +171,26 @@ exports[`renders with title 1`] = ` color: rgb(106,117,144); } +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding-left: 0.125rem; + padding-right: 0.125rem; + border-radius: 0.125rem; + background-color: rgb(225,230,243); + color: rgb(62,67,87); +} +
- + click
@@ -209,6 +231,26 @@ exports[`renders without title 1`] = ` color: rgb(106,117,144); } +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding-left: 0.125rem; + padding-right: 0.125rem; + border-radius: 0.125rem; + background-color: rgb(225,230,243); + color: rgb(62,67,87); +} +
- + click
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap index be6c83072f5..337d1b9b385 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap @@ -226,6 +226,40 @@ exports[`should render ArrowUp 1`] = `
`; +exports[`should render Click 1`] = ` +.emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding-left: 0.125rem; + padding-right: 0.125rem; + border-radius: 0.125rem; + background-color: rgb(225,230,243); + color: rgb(62,67,87); +} + +
+
+ + click + +
+
+`; + exports[`should render Command 1`] = ` .emotion-0 { display: -webkit-box; @@ -361,7 +395,9 @@ exports[`should render a default text if no keys match 1`] = ` + - + click
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap index b72c648fe60..9607fc62ac6 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap @@ -27,6 +27,7 @@ exports[`should render correctly 1`] = ` box-sizing: border-box; border: 1px solid rgb(253,162,155); color: rgb(62,67,87); + font-weight: 600; word-break: break-word; background-color: rgb(255,255,255); } @@ -76,6 +77,7 @@ exports[`should render correctly when issueType is provided 1`] = ` box-sizing: border-box; border: 1px solid rgb(253,162,155); color: rgb(62,67,87); + font-weight: 600; word-break: break-word; background-color: rgb(255,255,255); } diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx index 052ea396271..65bb88cc93d 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx @@ -71,6 +71,7 @@ const LineFindingStyled = styled(BareButton)<{ selected: boolean }>` ? themeBorder('default', 'issueBoxSelectedBorder') : themeBorder('default', 'issueBoxBorder')}; color: ${themeContrast('pageBlock')}; + font-weight: ${(props) => (props.selected ? 600 : 400)}; word-break: break-word; background-color: ${themeColor('pageBlock')}; diff --git a/server/sonar-web/design-system/src/helpers/keyboard.ts b/server/sonar-web/design-system/src/helpers/keyboard.ts index 5a96c128628..dd6f1c9a515 100644 --- a/server/sonar-web/design-system/src/helpers/keyboard.ts +++ b/server/sonar-web/design-system/src/helpers/keyboard.ts @@ -40,6 +40,7 @@ export enum Key { Shift = 'Shift', Space = ' ', Tab = 'Tab', + Click = 'Click', } export function isShortcut(event: KeyboardEvent): boolean { diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx index 6843a7d2b93..87184179c23 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx @@ -1040,47 +1040,51 @@ export class App extends React.PureComponent { ); return ( - - {({ top }) => ( - + )} + + ); } @@ -1293,7 +1297,7 @@ export class App extends React.PureComponent { {this.renderSide(openIssue)} - + {this.renderHeader({ openIssue, paging, selectedIndex })} {this.renderPage()} diff --git a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx index e5ffb197962..6af94914793 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx @@ -36,7 +36,7 @@ export default function PageActions(props: PageActionsProps) { const { canSetHome, effortTotal, paging, selectedIndex } = props; return ( -
+
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx index e7bcaa4a91b..130a936b1dd 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/MultipleSelectionHint.tsx @@ -31,7 +31,10 @@ export function MultipleSelectionHint({ }) { return nbSelectedItems > 0 && nbSelectedItems < nbSelectableItems ? (
- +
) : null; } 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 60b70f46889..f30ff60f835 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -1593,6 +1593,7 @@ shortcuts.section.global.search=quickly open search bar shortcuts.section.global.shortcuts=open this window shortcuts.section.global.facets.multiselection=Press Ctrl to add to selection shortcuts.section.global.facets.multiselection.mac=Press \u2318 to add to selection +shortcuts.section.global.facets.multiselection.title=Add to selection shortcuts.section.issues=Issues Page shortcuts.section.issues.navigate_between_issues=navigate between issues -- 2.39.5