From fe0e77077ab2a218001a96dd2932105889276f37 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Wed, 29 Nov 2017 12:18:05 +0100 Subject: [PATCH] SONAR-8829 update the global navigation bar --- server/sonar-web/config/webpack.config.js | 3 +- server/sonar-web/package.json | 1 + .../js/app/components/SimpleContainer.tsx | 3 +- .../app/components/nav/global/GlobalNav.css | 48 +++++++++++-------- .../js/app/components/nav/global/GlobalNav.js | 8 ++-- .../nav/global/GlobalNavExplore.tsx | 12 ++--- .../components/nav/global/GlobalNavUser.js | 7 ++- .../__snapshots__/GlobalNavUser-test.js.snap | 8 ++-- .../main/js/app/components/search/Search.css | 20 ++++++-- server/sonar-web/src/main/js/app/theme.js | 5 ++ server/sonar-web/yarn.lock | 20 ++++++++ 11 files changed, 93 insertions(+), 42 deletions(-) diff --git a/server/sonar-web/config/webpack.config.js b/server/sonar-web/config/webpack.config.js index 8cf804efdb2..f120681011f 100644 --- a/server/sonar-web/config/webpack.config.js +++ b/server/sonar-web/config/webpack.config.js @@ -27,7 +27,8 @@ const postcssLoader = () => ({ require('autoprefixer'), require('postcss-custom-properties')({ variables: require('../src/main/js/app/theme') - }) + }), + require('postcss-calc') ] } }); diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json index 640c3f00eab..1ba78887fc8 100644 --- a/server/sonar-web/package.json +++ b/server/sonar-web/package.json @@ -93,6 +93,7 @@ "html-webpack-plugin": "2.30.1", "jest": "21.2.1", "lint-staged": "4.3.0", + "postcss-calc": "6.0.1", "postcss-custom-properties": "6.2.0", "postcss-loader": "2.0.8", "prettier": "1.7.4", 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 51c4336afde..4e5e35b7cce 100644 --- a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx @@ -19,6 +19,7 @@ */ import * as React from 'react'; import GlobalFooterContainer from './GlobalFooterContainer'; +import * as theme from '../theme'; import NavBar from '../../components/nav/NavBar'; interface Props { @@ -45,7 +46,7 @@ export default class SimpleContainer extends React.PureComponent { return (
- +
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 c391bf81965..ac02282d585 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 @@ -5,16 +5,15 @@ } .navbar-brand { - display: block; - margin-left: -10px; - padding-left: 10px; - padding-right: 10px; - border: none; -} - -.navbar-brand:hover, -.navbar-brand:focus { - background-color: #000; + display: flex; + justify-content: center; + align-items: center; + height: var(--globalNavHeight); + margin-left: calc(-1 * (var(--globalNavHeight) - var(--globalNavContentHeight)) / 2); + padding-top: 4px; + padding-left: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2); + padding-right: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2); + border-bottom: 4px solid transparent; } .navbar-login { @@ -23,37 +22,46 @@ } .navbar-avatar { - margin-right: -3px !important; - padding: 3px !important; + margin-right: calc(-1 * (var(--globalNavHeight) - var(--globalNavContentHeight)) / 2); + padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) !important; + border: none !important; } .navbar-help { - line-height: 16px !important; - padding: 7px !important; + height: var(--globalNavHeight); + padding: calc(var(--globalNavHeight) - var(--globalNavContentHeight)) 12px !important; + border-bottom: none !important; color: #fff !important; } .global-navbar-menu { display: flex; align-items: center; + height: var(--globalNavHeight); } .global-navbar-menu > li > a { display: block; - padding: 8px 10px; - line-height: 14px; - border: none; + height: var(--globalNavHeight); + padding: calc((var(--globalNavHeight) - var(--globalNavContentHeight)) / 2) 10px; + line-height: var(--globalNavContentHeight); + border-bottom: 4px solid transparent; + box-sizing: border-box; color: #ccc; font-size: var(--smallFontSize); letter-spacing: 0.05em; - transition: none; } +.navbar-brand:hover, +.navbar-brand:focus, .global-navbar-menu > li > a.active, .global-navbar-menu > li > a:hover, .global-navbar-menu > li > a:focus { - background-color: var(--blue); - color: #fff; + background-color: #020202; +} + +.global-navbar-menu > li > a.active { + border-bottom-color: #646464; } @media print { diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js index 8823ecd0533..317077eb1af 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js +++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js @@ -26,6 +26,7 @@ import GlobalNavExplore from './GlobalNavExplore'; import GlobalNavUserContainer from './GlobalNavUserContainer'; import Search from '../../search/Search'; import GlobalHelp from '../../help/GlobalHelp'; +import * as theme from '../../../theme'; import NavBar from '../../../../components/nav/NavBar'; import Tooltip from '../../../../components/controls/Tooltip'; import HelpIcon from '../../../../components/icons-components/HelpIcon'; @@ -107,13 +108,13 @@ class GlobalNav extends React.PureComponent { render() { return ( - + - - {this.state.helpOpen && ( -
  • - - {translate('explore')} - -
    • - +
  • + + {translate('explore')} + +
    • ); } diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js index cb70ab05709..3b577558541 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js +++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.js @@ -22,6 +22,7 @@ import React from 'react'; import classNames from 'classnames'; import { sortBy } from 'lodash'; import { Link } from 'react-router'; +import * as theme from '../../../theme'; import Avatar from '../../../../components/ui/Avatar'; import OrganizationIcon from '../../../../components/icons-components/OrganizationIcon'; import OrganizationLink from '../../../../components/ui/OrganizationLink'; @@ -124,7 +125,11 @@ export default class GlobalNavUser extends React.PureComponent { className={classNames('dropdown js-user-authenticated', { open: this.state.open })} ref={node => (this.node = node)}> - + {this.state.open && (
      diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap index fb7c3c4e59e..85ca26d59b2 100644 --- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap +++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavUser-test.js.snap @@ -12,7 +12,7 @@ exports[`should not render the users organizations when they are not activated 1