From 90ed118a35ce03cd51794271ff4865e4e9c46584 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Tue, 18 Dec 2018 11:19:49 +0100 Subject: [PATCH] SONARCLOUD-264 Add pages helper with function manage page classes --- .../main/js/app/styles/components/page.css | 8 +-- .../js/apps/about/components/AboutApp.tsx | 17 +++---- .../main/js/apps/about/sonarcloud/Home.tsx | 13 ++--- .../main/js/apps/about/sonarcloud/Pricing.tsx | 13 ++--- .../sonarcloud/components/SQPageContainer.tsx | 13 ++--- .../js/apps/coding-rules/components/App.tsx | 28 +++++------ .../component-measures/components/App.tsx | 29 ++++------- .../organization/CreateOrganization.tsx | 13 ++--- .../apps/create/project/CreateProjectPage.tsx | 13 ++--- .../main/js/apps/issues/components/App.tsx | 49 +++++++------------ .../apps/projects/components/AllProjects.tsx | 22 +++------ .../components/QualityGatesApp.tsx | 27 ++++------ .../js/apps/web-api/components/WebApiApp.tsx | 19 +++---- server/sonar-web/src/main/js/helpers/pages.ts | 45 +++++++++++++++++ 14 files changed, 140 insertions(+), 169 deletions(-) create mode 100644 server/sonar-web/src/main/js/helpers/pages.ts 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 994c4d37f30..c0c2125fb9e 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 @@ -151,12 +151,12 @@ color: var(--blue); } -.page-footer-with-sidebar { +.sidebar-page #footer { padding-left: calc(50vw - 370px + 10px) !important; } -.page-footer-with-sidebar div, -.page-footer-with-sidebar .page-footer-menu { +.sidebar-page #footer div, +.sidebar-page #footer .page-footer-menu { max-width: 980px; } @@ -333,7 +333,7 @@ left: 301px; } - .page-footer-with-sidebar { + .sidebar-page #footer { padding-left: 310px !important; } } diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.tsx b/server/sonar-web/src/main/js/apps/about/components/AboutApp.tsx index eb452a2ff8b..5ef36a05dce 100644 --- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.tsx +++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.tsx @@ -23,7 +23,6 @@ import { keyBy } from 'lodash'; import { Link } from 'react-router'; import { Location } from 'history'; import AboutProjects from './AboutProjects'; -import EntryIssueTypes from './EntryIssueTypes'; import AboutLanguages from './AboutLanguages'; import AboutCleanCode from './AboutCleanCode'; import AboutQualityModel from './AboutQualityModel'; @@ -31,9 +30,11 @@ import AboutQualityGates from './AboutQualityGates'; import AboutLeakPeriod from './AboutLeakPeriod'; import AboutStandards from './AboutStandards'; import AboutScanners from './AboutScanners'; +import EntryIssueTypes from './EntryIssueTypes'; +import GlobalContainer from '../../../app/components/GlobalContainer'; import { searchProjects } from '../../../api/components'; import { getFacet } from '../../../api/issues'; -import GlobalContainer from '../../../app/components/GlobalContainer'; +import { fetchAboutPageSettings } from '../actions'; import { getAppState, getCurrentUser, @@ -41,7 +42,7 @@ import { Store } from '../../../store/rootReducer'; import { translate } from '../../../helpers/l10n'; -import { fetchAboutPageSettings } from '../actions'; +import { addWhitePageClass, removeWhitePageClass } from '../../../helpers/pages'; import '../styles.css'; interface Props { @@ -69,18 +70,12 @@ class AboutApp extends React.PureComponent { componentDidMount() { this.mounted = true; this.loadData(); - document.body.classList.add('white-page'); - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } + addWhitePageClass(); } componentWillUnmount() { this.mounted = false; - document.body.classList.remove('white-page'); - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } + removeWhitePageClass(); } loadProjects() { diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/Home.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/Home.tsx index ff83a9021dd..7d18e25a696 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/Home.tsx +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/Home.tsx @@ -22,10 +22,11 @@ import Helmet from 'react-helmet'; import { FixedNavBar, TopNavBar } from './components/NavBars'; import FeaturedProjects from './components/FeaturedProjects'; import Footer from './components/Footer'; -import Statistics from './components/Statistics'; import { Languages } from './components/Languages'; import LoginButtons from './components/LoginButtons'; +import Statistics from './components/Statistics'; import { requestHomepageData, HomepageData, FeaturedProject } from './utils'; +import { addWhitePageClass, removeWhitePageClass } from '../../../helpers/pages'; import { getBaseUrl } from '../../../helpers/urls'; import './new_style.css'; @@ -37,18 +38,12 @@ export default class Home extends React.PureComponent<{}, State> { state: State = {}; componentDidMount() { - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } - document.body.classList.add('white-page'); + addWhitePageClass(); this.fetchData(); } componentWillUnmount() { - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } - document.body.classList.remove('white-page'); + removeWhitePageClass(); } fetchData = () => { diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx index 76fb85d2770..5fd1ba25f07 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx @@ -21,25 +21,20 @@ import * as React from 'react'; import Helmet from 'react-helmet'; import Footer from './components/Footer'; import { TopNavBar, FixedNavBar } from './components/NavBars'; -import { getBaseUrl } from '../../../helpers/urls'; +import { addWhitePageClass, removeWhitePageClass } from '../../../helpers/pages'; import { scrollToElement } from '../../../helpers/scrolling'; +import { getBaseUrl } from '../../../helpers/urls'; import './new_style.css'; export default class Pricing extends React.PureComponent { container?: HTMLElement | null; componentDidMount() { - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } - document.body.classList.add('white-page'); + addWhitePageClass(); } componentWillUnmount() { - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } - document.body.classList.remove('white-page'); + removeWhitePageClass(); } handleClick = (event: React.MouseEvent) => { diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/SQPageContainer.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/SQPageContainer.tsx index dee101afa87..30aab7a934e 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/SQPageContainer.tsx +++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/SQPageContainer.tsx @@ -21,8 +21,9 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { withRouter, WithRouterProps } from 'react-router'; import Footer from './Footer'; -import { getCurrentUser, getMyOrganizations, Store } from '../../../../store/rootReducer'; import GlobalContainer from '../../../../app/components/GlobalContainer'; +import { getCurrentUser, getMyOrganizations, Store } from '../../../../store/rootReducer'; +import { addWhitePageClass, removeWhitePageClass } from '../../../../helpers/pages'; interface StateProps { currentUser: T.CurrentUser; @@ -37,17 +38,11 @@ type Props = StateProps & WithRouterProps & OwnProps; class SQPageContainer extends React.Component { componentDidMount() { - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } - document.body.classList.add('white-page'); + addWhitePageClass(); } componentWillUnmount() { - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } - document.body.classList.remove('white-page'); + removeWhitePageClass(); } render() { diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx index 7fc402e7416..b07d42e8152 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/App.tsx @@ -58,11 +58,17 @@ import { getAppState } from '../../../store/rootReducer'; import { translate } from '../../../helpers/l10n'; +import { hasPrivateAccess } from '../../../helpers/organizations'; +import { + addSideBarClass, + addWhitePageClass, + removeSideBarClass, + removeWhitePageClass +} from '../../../helpers/pages'; import { RawQuery } from '../../../helpers/query'; import { scrollToElement } from '../../../helpers/scrolling'; import '../../../components/search-navigator.css'; import '../styles.css'; -import { hasPrivateAccess } from '../../../helpers/organizations'; const PAGE_SIZE = 100; const LIMIT_BEFORE_LOAD_MORE = 5; @@ -114,14 +120,8 @@ export class App extends React.PureComponent { componentDidMount() { this.mounted = true; - document.body.classList.add('white-page'); - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.add('page-footer-with-sidebar'); - } + addWhitePageClass(); + addSideBarClass(); this.attachShortcuts(); this.fetchInitialData(); } @@ -153,14 +153,8 @@ export class App extends React.PureComponent { componentWillUnmount() { this.mounted = false; - document.body.classList.remove('white-page'); - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.remove('page-footer-with-sidebar'); - } + removeWhitePageClass(); + removeSideBarClass(); this.detachShortcuts(); } diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx index 25348fb55db..9c1f1eef713 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx @@ -49,6 +49,12 @@ import { translateWithParameters, translate } from '../../../helpers/l10n'; +import { + addSideBarClass, + addWhitePageClass, + removeSideBarClass, + removeWhitePageClass +} from '../../../helpers/pages'; import { RawQuery } from '../../../helpers/query'; import '../../../components/search-navigator.css'; import '../style.css'; @@ -107,30 +113,15 @@ export default class App extends React.PureComponent { componentDidUpdate(_prevProps: Props, prevState: State) { if (prevState.measures.length === 0 && this.state.measures.length > 0) { - document.body.classList.add('white-page'); - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.add('page-footer-with-sidebar'); - } + addWhitePageClass(); + addSideBarClass(); } } componentWillUnmount() { this.mounted = false; - - document.body.classList.remove('white-page'); - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } - - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.remove('page-footer-with-sidebar'); - } - + removeWhitePageClass(); + removeSideBarClass(); key.deleteScope('measures-files'); } diff --git a/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx b/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx index 9b348bd2717..7ccc09db294 100644 --- a/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx +++ b/server/sonar-web/src/main/js/apps/create/organization/CreateOrganization.tsx @@ -50,13 +50,14 @@ import { listUnboundApplications } from '../../../api/alm-integration'; import { getSubscriptionPlans } from '../../../api/billing'; +import * as api from '../../../api/organizations'; import { hasAdvancedALMIntegration, isPersonal } from '../../../helpers/almIntegrations'; import { translate } from '../../../helpers/l10n'; +import { addWhitePageClass, removeWhitePageClass } from '../../../helpers/pages'; import { get, remove } from '../../../helpers/storage'; import { slugify } from '../../../helpers/strings'; import { getOrganizationUrl } from '../../../helpers/urls'; import { skipOnboarding } from '../../../store/users'; -import * as api from '../../../api/organizations'; import * as actions from '../../../store/organizations'; import '../../tutorials/styles.css'; // TODO remove me @@ -104,10 +105,7 @@ export class CreateOrganization extends React.PureComponent { diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx index 12904001e99..c5198efe73b 100644 --- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx @@ -27,11 +27,12 @@ import DeferredSpinner from '../../../components/common/DeferredSpinner'; import Tabs from '../../../components/controls/Tabs'; import { whenLoggedIn } from '../../../components/hoc/whenLoggedIn'; import { withUserOrganizations } from '../../../components/hoc/withUserOrganizations'; -import { skipOnboarding } from '../../../store/users'; import { getAlmAppInfo } from '../../../api/alm-integration'; import { hasAdvancedALMIntegration } from '../../../helpers/almIntegrations'; import { translate } from '../../../helpers/l10n'; +import { addWhitePageClass, removeWhitePageClass } from '../../../helpers/pages'; import { getProjectUrl, getOrganizationUrl } from '../../../helpers/urls'; +import { skipOnboarding } from '../../../store/users'; import './style.css'; interface Props { @@ -64,18 +65,12 @@ export class CreateProjectPage extends React.PureComponent { diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.tsx b/server/sonar-web/src/main/js/apps/issues/components/App.tsx index 275eeb83903..cc7faa4af89 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/App.tsx @@ -18,8 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import Helmet from 'react-helmet'; import * as key from 'keymaster'; +import Helmet from 'react-helmet'; import { keyBy, omit, union, without } from 'lodash'; import BulkChangeModal from './BulkChangeModal'; import ComponentBreadcrumbs from './ComponentBreadcrumbs'; @@ -32,7 +32,6 @@ import PageActions from './PageActions'; import ConciseIssuesList from '../conciseIssuesList/ConciseIssuesList'; import ConciseIssuesListHeader from '../conciseIssuesList/ConciseIssuesListHeader'; import Sidebar from '../sidebar/Sidebar'; -import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; import * as actions from '../actions'; import { areMyIssuesSelected, @@ -52,12 +51,17 @@ import { STANDARDS, ReferencedRule } from '../utils'; -import handleRequiredAuthentication from '../../../app/utils/handleRequiredAuthentication'; +import { Button } from '../../../components/ui/buttons'; +import Checkbox from '../../../components/controls/Checkbox'; +import DeferredSpinner from '../../../components/common/DeferredSpinner'; import Dropdown from '../../../components/controls/Dropdown'; -import ListFooter from '../../../components/controls/ListFooter'; +import DropdownIcon from '../../../components/icons-components/DropdownIcon'; +import EmptySearch from '../../../components/common/EmptySearch'; import FiltersHeader from '../../../components/common/FiltersHeader'; +import handleRequiredAuthentication from '../../../app/utils/handleRequiredAuthentication'; +import ListFooter from '../../../components/controls/ListFooter'; import ScreenPositionHelper from '../../../components/common/ScreenPositionHelper'; -import { Button } from '../../../components/ui/buttons'; +import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; import { isShortLivingBranch, isSameBranchLike, @@ -67,12 +71,14 @@ import { } from '../../../helpers/branches'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { RawQuery } from '../../../helpers/query'; +import { + addSideBarClass, + addWhitePageClass, + removeSideBarClass, + removeWhitePageClass +} from '../../../helpers/pages'; import { scrollToElement } from '../../../helpers/scrolling'; -import EmptySearch from '../../../components/common/EmptySearch'; -import Checkbox from '../../../components/controls/Checkbox'; -import DropdownIcon from '../../../components/icons-components/DropdownIcon'; import { isSonarCloud } from '../../../helpers/system'; -import DeferredSpinner from '../../../components/common/DeferredSpinner'; import { withRouter, Location, Router } from '../../../components/hoc/withRouter'; import '../../../components/search-navigator.css'; import '../styles.css'; @@ -164,16 +170,8 @@ export class App extends React.PureComponent { return; } - document.body.classList.add('white-page'); - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } - - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.add('page-footer-with-sidebar'); - } - + addWhitePageClass(); + addSideBarClass(); this.attachShortcuts(); this.fetchFirstIssues(); } @@ -223,18 +221,9 @@ export class App extends React.PureComponent { componentWillUnmount() { this.detachShortcuts(); - - document.body.classList.remove('white-page'); - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } - - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.remove('page-footer-with-sidebar'); - } - this.mounted = false; + removeWhitePageClass(); + removeSideBarClass(); } attachShortcuts() { 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 7c3fa2102a8..94f52fe4461 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 @@ -23,18 +23,19 @@ import { omitBy } from 'lodash'; import PageHeader from './PageHeader'; import ProjectsList from './ProjectsList'; import PageSidebar from './PageSidebar'; -import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; -import Visualizations from '../visualizations/Visualizations'; import handleRequiredAuthentication from '../../../app/utils/handleRequiredAuthentication'; import DeferredSpinner from '../../../components/common/DeferredSpinner'; import ListFooter from '../../../components/controls/ListFooter'; import ScreenPositionHelper from '../../../components/common/ScreenPositionHelper'; -import { translate } from '../../../helpers/l10n'; -import { get, save } from '../../../helpers/storage'; -import { RawQuery } from '../../../helpers/query'; +import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; +import Visualizations from '../visualizations/Visualizations'; import { Project, Facets } from '../types'; import { fetchProjects, parseSorting, SORTING_SWITCH } from '../utils'; import { parseUrlQuery, Query, hasFilterParams, hasVisualizationParams } from '../query'; +import { translate } from '../../../helpers/l10n'; +import { addSideBarFooterClass, removeSideBarFooterClass } from '../../../helpers/pages'; +import { RawQuery } from '../../../helpers/query'; +import { get, save } from '../../../helpers/storage'; import { isSonarCloud } from '../../../helpers/system'; import { isLoggedIn } from '../../../helpers/users'; import { withRouter, Location, Router } from '../../../components/hoc/withRouter'; @@ -80,10 +81,7 @@ export class AllProjects extends React.PureComponent { return; } this.handleQueryChange(true); - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.add('page-footer-with-sidebar'); - } + addSideBarFooterClass(); } componentDidUpdate(prevProps: Props) { @@ -94,11 +92,7 @@ export class AllProjects extends React.PureComponent { componentWillUnmount() { this.mounted = false; - - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.remove('page-footer-with-sidebar'); - } + removeSideBarFooterClass(); } getView = () => this.state.query.view || 'overall'; diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx index 8961c35c9c2..f3841a730ad 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatesApp.tsx @@ -26,6 +26,12 @@ import ScreenPositionHelper from '../../../components/common/ScreenPositionHelpe import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; import { fetchQualityGates } from '../../../api/quality-gates'; import { translate } from '../../../helpers/l10n'; +import { + addSideBarClass, + addWhitePageClass, + removeSideBarClass, + removeWhitePageClass +} from '../../../helpers/pages'; import { getQualityGateUrl } from '../../../helpers/urls'; import '../../../components/search-navigator.css'; import '../styles.css'; @@ -51,27 +57,14 @@ class QualityGatesApp extends React.PureComponent { componentDidMount() { this.mounted = true; this.fetchQualityGates(); - - document.body.classList.add('white-page'); - if (document.documentElement) { - document.documentElement.classList.add('white-page'); - } - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.add('page-footer-with-sidebar'); - } + addWhitePageClass(); + addSideBarClass(); } componentWillUnmount() { this.mounted = false; - document.body.classList.remove('white-page'); - if (document.documentElement) { - document.documentElement.classList.remove('white-page'); - } - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.remove('page-footer-with-sidebar'); - } + removeWhitePageClass(); + removeSideBarClass(); } fetchQualityGates = () => { diff --git a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx index 437b2b78fbd..9e055ea0372 100644 --- a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx +++ b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx @@ -20,15 +20,16 @@ import * as React from 'react'; import Helmet from 'react-helmet'; import { Link, withRouter, WithRouterProps } from 'react-router'; +import Domain from './Domain'; import Menu from './Menu'; import Search from './Search'; -import Domain from './Domain'; -import { Domain as DomainType, fetchWebApi } from '../../../api/web-api'; import ScreenPositionHelper from '../../../components/common/ScreenPositionHelper'; +import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; +import { Domain as DomainType, fetchWebApi } from '../../../api/web-api'; import { getActionKey, isDomainPathActive, Query, serializeQuery, parseQuery } from '../utils'; -import { scrollToElement } from '../../../helpers/scrolling'; import { translate } from '../../../helpers/l10n'; -import Suggestions from '../../../app/components/embed-docs-modal/Suggestions'; +import { addSideBarClass, removeSideBarClass } from '../../../helpers/pages'; +import { scrollToElement } from '../../../helpers/scrolling'; import '../styles/web-api.css'; type Props = WithRouterProps; @@ -44,10 +45,7 @@ class WebApiApp extends React.PureComponent { componentDidMount() { this.mounted = true; this.fetchList(); - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.add('page-footer-with-sidebar'); - } + addSideBarClass(); } componentDidUpdate() { @@ -57,10 +55,7 @@ class WebApiApp extends React.PureComponent { componentWillUnmount() { this.mounted = false; - const footer = document.getElementById('footer'); - if (footer) { - footer.classList.remove('page-footer-with-sidebar'); - } + removeSideBarClass(); } fetchList() { diff --git a/server/sonar-web/src/main/js/helpers/pages.ts b/server/sonar-web/src/main/js/helpers/pages.ts new file mode 100644 index 00000000000..5258cdee5e0 --- /dev/null +++ b/server/sonar-web/src/main/js/helpers/pages.ts @@ -0,0 +1,45 @@ +/* + * SonarQube + * Copyright (C) 2009-2018 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. + */ + +const CLASS_SIDEBAR_PAGE = 'sidebar-page'; +const CLASS_WHITE_PAGE = 'white-page'; + +export function addSideBarClass() { + toggleBodyClass(CLASS_SIDEBAR_PAGE, true); +} + +export function addWhitePageClass() { + toggleBodyClass(CLASS_WHITE_PAGE, true); +} + +export function removeSideBarClass() { + toggleBodyClass(CLASS_SIDEBAR_PAGE, false); +} + +export function removeWhitePageClass() { + toggleBodyClass(CLASS_WHITE_PAGE, false); +} + +function toggleBodyClass(className: string, force?: boolean) { + document.body.classList.toggle(className, force); + if (document.documentElement) { + document.documentElement.classList.toggle(className, force); + } +} -- 2.39.5