From c744505c7165e2fae69bcff7617a16d9d66944c1 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Mon, 5 Feb 2024 16:26:24 +0100 Subject: [PATCH] SONAR-21565 Migrate Global Footer to the new UI --- .../design-system/src/helpers/constants.ts | 2 +- .../main/js/app/components/GlobalFooter.tsx | 112 ++++++++++-------- .../app/components/GlobalFooterBranding.tsx | 22 ++-- .../main/js/app/styles/components/page.css | 37 ------ .../js/apps/issues/components/IssuesApp.tsx | 2 +- .../main/js/apps/issues/sidebar/Sidebar.tsx | 24 ++-- .../apps/projects/components/AllProjects.tsx | 3 +- 7 files changed, 85 insertions(+), 117 deletions(-) diff --git a/server/sonar-web/design-system/src/helpers/constants.ts b/server/sonar-web/design-system/src/helpers/constants.ts index b7dbb637131..0b18515f3e5 100644 --- a/server/sonar-web/design-system/src/helpers/constants.ts +++ b/server/sonar-web/design-system/src/helpers/constants.ts @@ -63,7 +63,7 @@ export const LAYOUT_PROJECT_NAV_HEIGHT = 108; export const LAYOUT_LOGO_MARGIN_RIGHT = 45; export const LAYOUT_LOGO_MAX_HEIGHT = 40; export const LAYOUT_LOGO_MAX_WIDTH = 150; -export const LAYOUT_FOOTER_HEIGHT = 60; +export const LAYOUT_FOOTER_HEIGHT = 69; export const LAYOUT_NOTIFICATIONSBAR_WIDTH = 350; export const CORE_CONCEPTS_WIDTH = 350; diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx index 2a613a95828..adee7ea7bcf 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx @@ -17,12 +17,18 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { LargeCenteredLayout } from 'design-system'; +import styled from '@emotion/styled'; +import { + DiscreetLink, + FlagMessage, + LAYOUT_VIEWPORT_MIN_WIDTH, + PageContentFontWrapper, + themeBorder, + themeColor, +} from 'design-system'; import * as React from 'react'; -import DocLink from '../../components/common/DocLink'; import InstanceMessage from '../../components/common/InstanceMessage'; -import Link from '../../components/common/Link'; -import { Alert } from '../../components/ui/Alert'; +import { useDocUrl } from '../../helpers/docs'; import { getEdition } from '../../helpers/editions'; import { translate, translateWithParameters } from '../../helpers/l10n'; import GlobalFooterBranding from './GlobalFooterBranding'; @@ -36,62 +42,66 @@ export default function GlobalFooter({ hideLoggedInInfo }: GlobalFooterProps) { const appState = React.useContext(AppStateContext); const currentEdition = appState?.edition && getEdition(appState.edition); + const docUrl = useDocUrl(); + return ( - + + ); } + +const StyledFooter = styled.div` + box-sizing: border-box; + min-width: ${LAYOUT_VIEWPORT_MIN_WIDTH}px; + border-top: ${themeBorder('default')}; + background-color: ${themeColor('backgroundSecondary')}; +`; diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooterBranding.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooterBranding.tsx index 6b360908496..b9a5ddbf252 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalFooterBranding.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalFooterBranding.tsx @@ -17,6 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { DiscreetLink } from 'design-system'; import * as React from 'react'; import { isOfficial } from '../../helpers/system'; @@ -26,30 +27,21 @@ export default function GlobalFooterBranding() { return official ? (
SonarQube™ technology is powered by{' '} - - SonarSource SA - + SonarSource SA
) : (
This application is based on{' '} - SonarQube™ - {' '} + {' '} but is not an official version provided by{' '} - + SonarSource SA - + .
); diff --git a/server/sonar-web/src/main/js/app/styles/components/page.css b/server/sonar-web/src/main/js/app/styles/components/page.css index 61910dc6b45..812f7cf6cc9 100644 --- a/server/sonar-web/src/main/js/app/styles/components/page.css +++ b/server/sonar-web/src/main/js/app/styles/components/page.css @@ -127,37 +127,6 @@ margin-top: 6px; } -.page-footer { - min-height: 60px; - padding: 10px; - line-height: 1.5; - border-top: 1px solid var(--barBorderColor); - box-sizing: border-box; - background-color: var(--barBackgroundColor); - color: #595959; - font-size: var(--smallFontSize); - text-align: center; -} - -.sidebar-page #footer > div { - padding-left: 410px; -} - -.sidebar-page #footer > div div, -.sidebar-page #footer > div .page-footer-menu { - max-width: 980px; -} - -.page-footer-menu-item { - display: inline-block; -} - -.page-footer-menu-item + .page-footer-menu-item::before { - content: '-'; - padding: 0 calc(0.5 * var(--gridSize)); - user-select: none; -} - .page-with-sidebar { display: flex; } @@ -304,12 +273,6 @@ padding-right: 20px; } -@media (min-width: 1920px) { - .sidebar-page #footer > div { - padding-left: 500px; - } -} - @media (max-width: 1320px) { .layout-page-side-outer { width: 300px; 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 1b1573006e6..f712711fcd7 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 @@ -1093,7 +1093,7 @@ export class App extends React.PureComponent { aria-label={openIssue ? translate('list_of_issues') : translate('filters')} data-testid="issues-nav-bar" className="issues-nav-bar sw-overflow-y-auto issue-filters-list" - style={{ height: `calc((100vh - ${top}px) - 60px)` }} // 60px (footer) + style={{ height: `calc((100vh - ${top}px) - ${LAYOUT_FOOTER_HEIGHT}px)` }} >
{ - +
+ +
)} diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx index 53e91fabb82..e57a7822858 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx @@ -19,6 +19,7 @@ */ import styled from '@emotion/styled'; import { + LAYOUT_FOOTER_HEIGHT, LargeCenteredLayout, PageContentFontWrapper, Spinner, @@ -235,7 +236,7 @@ export class AllProjects extends React.PureComponent {