From 4278fd9978bfcf256d7308750ec835a70c3f6b40 Mon Sep 17 00:00:00 2001 From: Mathieu Suen Date: Fri, 17 Feb 2023 12:29:23 +0100 Subject: [PATCH] SONAR-18391 Improve layout landmark --- .../js/app/components/SimpleContainer.tsx | 2 +- .../components/nav/component/ComponentNav.tsx | 2 + .../app/components/nav/global/GlobalNav.css | 36 +++-- .../app/components/nav/global/GlobalNav.tsx | 23 +-- .../components/nav/global/GlobalNavMenu.tsx | 22 +-- .../__snapshots__/GlobalNav-test.tsx.snap | 134 ++++++++++-------- .../components/nav/settings/SettingsNav.tsx | 1 + .../__snapshots__/SettingsNav-test.tsx.snap | 2 + .../main/js/app/components/search/Search.tsx | 2 +- .../components/CodingRulesApp.tsx | 8 +- .../CodingRulesApp-test.tsx.snap | 4 +- .../js/apps/issues/components/IssuesApp.tsx | 4 +- .../main/js/components/ui/ContextNavBar.tsx | 7 +- .../resources/org/sonar/l10n/core.properties | 1 + 14 files changed, 143 insertions(+), 105 deletions(-) diff --git a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx index f00194a3755..c6cf4a771ac 100644 --- a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx @@ -31,7 +31,7 @@ export default function SimpleContainer({ children }: { children?: React.ReactNo return (
- + {children !== undefined ? children : }
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx index 0abf419e1c7..1c65589ead7 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx @@ -20,6 +20,7 @@ import classNames from 'classnames'; import * as React from 'react'; import ContextNavBar from '../../../../components/ui/ContextNavBar'; +import { translate } from '../../../../helpers/l10n'; import { ProjectAlmBindingConfigurationErrors, ProjectAlmBindingResponse, @@ -118,6 +119,7 @@ export default function ComponentNav(props: ComponentNavProps) { {bgTaskNotifComponent} diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css index 0d5dfdf83f0..5013161cc0e 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css +++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css @@ -17,16 +17,32 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -.navbar-global, -.navbar-global .navbar-inner { +.global-navbar, +.global-navbar .global-navbar-inner { background-color: var(--globalNavBarBg); z-index: 421; } -.navbar-global .navbar-limited { +.global-navbar .navbar-limited { display: flex; } +.global-navbar { + position: fixed; + width: 100%; +} + +.global-navbar .global-navbar-inner { + position: static; + display: flex; + max-width: var(--maxPageWidth); + min-width: var(--minPageWidth); + padding-left: var(--pagePadding); + padding-right: var(--pagePadding); + margin-left: auto; + margin-right: auto; +} + .navbar-brand { display: flex; justify-content: center; @@ -66,6 +82,7 @@ .global-navbar-menu { display: flex; align-items: center; + margin-left: auto; height: var(--globalNavHeight); } @@ -101,19 +118,8 @@ margin-left: calc(5 * var(--gridSize)); } -.global-navbar-menu-right .navbar-search { - flex: 0 1 240px; /* Workaround for SONAR-10971 */ - min-width: 0; -} - -.global-navbar-menu-right .navbar-search .search-box, -.global-navbar-menu-right .navbar-search .search-box-input { - min-width: 0; - width: 100%; -} - @media print { - .navbar-global { + .global-navbar { display: none !important; } } diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx index 76f60ff5504..a44493731e6 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx @@ -19,9 +19,8 @@ */ import * as React from 'react'; import EmbedDocsPopupHelper from '../../../../components/embed-docs-modal/EmbedDocsPopupHelper'; -import NavBar from '../../../../components/ui/NavBar'; import { CurrentUser } from '../../../../types/users'; -import { rawSizes } from '../../../theme'; +import { sizes } from '../../../theme'; import withCurrentUserContext from '../../current-user/withCurrentUserContext'; import Search from '../../search/Search'; import './GlobalNav.css'; @@ -37,17 +36,21 @@ export interface GlobalNavProps { export function GlobalNav(props: GlobalNavProps) { const { currentUser, location } = props; return ( - - +
+ ); } diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx index 16abd2d0cf0..2eabde72d79 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx @@ -183,16 +183,18 @@ export class GlobalNavMenu extends React.PureComponent { ); return ( -
    - {this.renderProjects()} - {governanceInstalled && this.renderPortfolios()} - {this.renderIssuesLink()} - {this.renderRulesLink()} - {this.renderProfilesLink()} - {this.renderQualityGatesLink()} - {this.renderAdministrationLink()} - {this.renderMore()} -
+ ); } } diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap index 0a1ec124c79..c0800f1fe8d 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap @@ -1,73 +1,95 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render correctly: anonymous users 1`] = ` - - - + } +>
- +
`; exports[`should render correctly: logged in users 1`] = ` - - - + } +> - + `; diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx index b6aa5af9ef0..369780bbe5e 100644 --- a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx @@ -259,6 +259,7 @@ export class SettingsNav extends React.PureComponent {
diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap index f09713ebd58..01c0bb4afc5 100644 --- a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap @@ -28,6 +28,7 @@ exports[`should render correctly when governance is active 1`] = `
{ render() { const search = ( -
+
{
{({ top }) => ( -
+
+ )} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap index 08da9918375..e89e17bb628 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap @@ -101,7 +101,7 @@ exports[`renderBulkButton should show bulk change button when user has global ad `; exports[`should render correctly: loaded (ScreenPositionHelper) 1`] = ` -
- + `; exports[`should render correctly: loaded 1`] = ` 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 81b9a54f4e3..b9429272f57 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 @@ -967,7 +967,7 @@ export class App extends React.PureComponent { return ( {({ top }) => ( -
{ {openIssue ? this.renderConciseIssuesList() : this.renderFacets()}
- + )} ); diff --git a/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx b/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx index 66a607c1273..812e377476c 100644 --- a/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx +++ b/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx @@ -26,8 +26,11 @@ interface Props extends NavBarProps { className?: string; id?: string; height: number; + label: string; } -export default function ContextNavBar({ className, ...other }: Props) { - return ; +export default function ContextNavBar({ className, label, ...other }: Props) { + return ( + + ); } 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 3242ee0e933..c54379d9344 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -192,6 +192,7 @@ selected=Selected select_tags=Add or remove tags set=Set set_up=Set Up +settings=Settings severity=Severity shared=Shared start_date=Start Date -- 2.39.5