From 5d50f22bede8033551a8e5d0a048394252fe696c Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Fri, 17 Mar 2023 16:54:45 +0100 Subject: [PATCH] SONAR-18776 New layout for project header --- .../src/components/InteractiveIcon.tsx | 1 - .../src/components/MainAppBar.tsx | 2 +- .../design-system/src/components/TopBar.tsx | 50 +++++++++++++++++++ .../src/components/icons/Icon.tsx | 1 + .../design-system/src/components/index.ts | 1 + .../components/nav/component/ComponentNav.tsx | 24 +++------ .../components/nav/component/HeaderMeta.tsx | 2 +- .../js/components/controls/HomePageSelect.tsx | 11 ++-- 8 files changed, 67 insertions(+), 25 deletions(-) create mode 100644 server/sonar-web/design-system/src/components/TopBar.tsx diff --git a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx index 03bbe3bdf6e..0a9b068bd48 100644 --- a/server/sonar-web/design-system/src/components/InteractiveIcon.tsx +++ b/server/sonar-web/design-system/src/components/InteractiveIcon.tsx @@ -50,7 +50,6 @@ export interface InteractiveIconProps { export class InteractiveIconBase extends React.PureComponent { handleClick = (event: React.MouseEvent) => { const { disabled, onClick, stopPropagation = true } = this.props; - event.currentTarget.blur(); if (stopPropagation) { event.stopPropagation(); diff --git a/server/sonar-web/design-system/src/components/MainAppBar.tsx b/server/sonar-web/design-system/src/components/MainAppBar.tsx index 97303a00158..6de796006c2 100644 --- a/server/sonar-web/design-system/src/components/MainAppBar.tsx +++ b/server/sonar-web/design-system/src/components/MainAppBar.tsx @@ -37,8 +37,8 @@ const MainAppBarDiv = styled.div` ${tw`sw-flex`}; ${tw`sw-items-center`}; ${tw`sw-left-0`}; - ${tw`sw-px-6`}; ${tw`sw-right-0`}; + ${tw`sw-px-6`}; ${tw`sw-w-full`}; ${tw`sw-box-border`}; ${tw`sw-z-global-navbar`}; diff --git a/server/sonar-web/design-system/src/components/TopBar.tsx b/server/sonar-web/design-system/src/components/TopBar.tsx new file mode 100644 index 00000000000..a35bd832632 --- /dev/null +++ b/server/sonar-web/design-system/src/components/TopBar.tsx @@ -0,0 +1,50 @@ +/* + * SonarQube + * Copyright (C) 2009-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import styled from '@emotion/styled'; +import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react'; +import tw from 'twin.macro'; +import { LAYOUT_GLOBAL_NAV_HEIGHT } from '../helpers'; +import { themeColor, themeContrast } from '../helpers/theme'; + +interface Props { + id?: string; +} + +export function TopBar({ + children, + ...props +}: PropsWithChildren & DetailedHTMLProps, HTMLElement>) { + return ( + + {children} + + ); +} + +const BaseStyle = styled.nav` + ${tw`sw-sticky`} + ${tw`sw-z-top-navbar`} + ${tw`sw-px-6 sw-pt-4`} + ${tw`sw-font-sans`} + ${tw`sw-text-sm`} + + background-color: ${themeColor('backgroundPrimary')}; + color: ${themeContrast('backgroundPrimary')}; +`; diff --git a/server/sonar-web/design-system/src/components/icons/Icon.tsx b/server/sonar-web/design-system/src/components/icons/Icon.tsx index 0f5f743f4d4..5edea8c38c0 100644 --- a/server/sonar-web/design-system/src/components/icons/Icon.tsx +++ b/server/sonar-web/design-system/src/components/icons/Icon.tsx @@ -71,6 +71,7 @@ export function OcticonHoc( ): React.ComponentType { function IconWrapper({ fill, ...props }: IconProps) { const theme = useTheme(); + return ( {prDecoNotifComponent}} - > -
0, - })} - > + +
setDisplayProjectInfo(false)} + onClose={() => { + setDisplayProjectInfo(false); + }} top={globalNavHeightRaw + contextNavHeight} > - + {prDecoNotifComponent} + ); } diff --git a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx index 1cff50e993b..f706073a9de 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/HeaderMeta.tsx @@ -76,7 +76,7 @@ export function HeaderMeta(props: HeaderMetaProps) { )} {isLoggedIn(currentUser) && currentPage !== undefined && !isPullRequest(branchLike) && ( - + )}
); diff --git a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx index cb65d92527a..18d52363492 100644 --- a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx +++ b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import classNames from 'classnames'; -import { BareButton, HomeFillIcon, HomeIcon, Tooltip } from 'design-system'; +import { DiscreetInteractiveIcon, HomeFillIcon, HomeIcon, Tooltip } from 'design-system'; import * as React from 'react'; import { setHomePage } from '../../api/users'; import { CurrentUserContextInterface } from '../../app/components/current-user/CurrentUserContext'; @@ -73,19 +73,18 @@ export class HomePageSelect extends React.PureComponent { {isDefault ? ( ) : ( - - {isChecked ? : } - + /> )} ); -- 2.39.5