From 4ffe1398a10b007b21dde57c9e337d820343e2b6 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 3 Aug 2018 13:03:51 +0200 Subject: [PATCH 01/11] Add styled-component as a dependency --- gsa/package.json | 1 + gsa/yarn.lock | 50 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 49 insertions(+), 2 deletions(-) diff --git a/gsa/package.json b/gsa/package.json index 8a4c09dec1..f3aeb6fe0e 100644 --- a/gsa/package.json +++ b/gsa/package.json @@ -59,6 +59,7 @@ "redux": "^4.0.0", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0", + "styled-components": "^3.4.0", "uuid": "^3.3.0", "x2js": "^3.2.1" }, diff --git a/gsa/yarn.lock b/gsa/yarn.lock index c76f5fefe3..f538e5a44e 100644 --- a/gsa/yarn.lock +++ b/gsa/yarn.lock @@ -1875,6 +1875,13 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" +buffer@^5.0.3: + version "5.2.0" + resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.0.tgz#53cf98241100099e9eeae20ee6d51d21b16e541e" + dependencies: + base64-js "^1.0.2" + ieee754 "^1.1.4" + builtin-modules@^1.0.0, builtin-modules@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" @@ -2423,6 +2430,10 @@ css-box-model@^0.0.13: version "0.0.13" resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-0.0.13.tgz#e9c2a3b25e48ac786f38b7153eeef785c6658000" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -2488,6 +2499,14 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" +css-to-react-native@^2.0.3: + version "2.2.1" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e" + dependencies: + css-color-keywords "^1.0.0" + fbjs "^0.8.5" + postcss-value-parser "^3.3.0" + css-what@2.1: version "2.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" @@ -3618,7 +3637,7 @@ fbjs@^0.8.16: setimmediate "^1.0.5" ua-parser-js "^0.7.9" -fbjs@^0.8.9: +fbjs@^0.8.5, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" dependencies: @@ -4690,7 +4709,7 @@ is-plain-obj@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" -is-plain-object@^2.0.4: +is-plain-object@^2.0.1, is-plain-object@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" dependencies: @@ -7004,6 +7023,10 @@ react-inspector@^2.2.2: babel-runtime "^6.26.0" is-dom "^1.0.9" +react-is@^16.3.1: + version "16.4.2" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88" + react-is@^16.4.1: version "16.4.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e" @@ -8096,6 +8119,29 @@ style-loader@^0.20.3: loader-utils "^1.1.0" schema-utils "^0.4.5" +styled-components@^3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.3.3.tgz#09e702055ab11f7a8eab8229b1c0d0b855095686" + dependencies: + buffer "^5.0.3" + css-to-react-native "^2.0.3" + fbjs "^0.8.16" + hoist-non-react-statics "^2.5.0" + is-plain-object "^2.0.1" + prop-types "^15.5.4" + react-is "^16.3.1" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + supports-color "^3.2.3" + +stylis-rule-sheet@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" + +stylis@^3.5.0: + version "3.5.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" From 8abd0d0464cfc71d4d2d0dc017c68e33ab9052b2 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Thu, 2 Aug 2018 12:57:44 +0200 Subject: [PATCH 02/11] Update Greenbone Green for gmp logging --- gsa/src/gmp/log.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gsa/src/gmp/log.js b/gsa/src/gmp/log.js index 5a5dcb42aa..fb8f9540d5 100644 --- a/gsa/src/gmp/log.js +++ b/gsa/src/gmp/log.js @@ -23,7 +23,7 @@ import {isDefined, isString} from './utils/identity'; -const GREENBONE_GREEN = '#99CE48'; +const GREENBONE_GREEN = '#66c430'; const LogLevels = { trace: 0, From 16b5a6f94353d10b17d8c66e4207e355bf25fa9c Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Thu, 2 Aug 2018 13:00:11 +0200 Subject: [PATCH 03/11] Update badge color --- gsa/src/web/components/badge/badge.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gsa/src/web/components/badge/badge.js b/gsa/src/web/components/badge/badge.js index b66a9a6e5f..a5a7c7ce1d 100644 --- a/gsa/src/web/components/badge/badge.js +++ b/gsa/src/web/components/badge/badge.js @@ -56,7 +56,7 @@ const BadgeIcon = glamorous.span({ zIndex: Theme.Layers.higher, }, ({ - backgroundColor = '#99CE48', + backgroundColor = Theme.green, color = 'white', position = 'bottom', radius = 8, From ac0e1ed9a2090020b629e2dce312252ff5f61dd0 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Thu, 2 Aug 2018 14:18:10 +0200 Subject: [PATCH 04/11] Use styled-components for TitleBar Also, don't use Sticky anymore --- gsa/src/web/components/bar/titlebar.js | 113 ++++++++++++++----------- 1 file changed, 62 insertions(+), 51 deletions(-) diff --git a/gsa/src/web/components/bar/titlebar.js b/gsa/src/web/components/bar/titlebar.js index 733f179057..8ea8301360 100644 --- a/gsa/src/web/components/bar/titlebar.js +++ b/gsa/src/web/components/bar/titlebar.js @@ -25,7 +25,7 @@ import React from 'react'; import {withRouter} from 'react-router-dom'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import _ from 'gmp/locale'; @@ -42,23 +42,25 @@ import PropTypes from 'web/utils/proptypes'; import Theme from 'web/utils/theme'; import withGmp from 'web/utils/withGmp'; -const LogoutLink = glamorous.a({ - color: Theme.darkGray, - cursor: 'pointer', - '&:link, &:hover': { - color: Theme.darkGray, - }, -}); +const TITLE_BAR_HEIGHT = '42px'; + +const LogoutLink = styled.a` + color: ${Theme.darkGray}; + cursor: pointer; + &:link, &:hover, &:active, &:visited{ + color: ${Theme.darkGray}; + }; +`; const UserLink = LogoutLink.withComponent(Link); -const GreenboneIcon = glamorous(GBIcon)({ - width: '40px', - height: '40px', - marginRight: '4px', - paddingTop: '1px', - paddingBottom: '1px', -}); +const GreenboneIcon = styled(GBIcon)` + width: 40px; + height: 40px; + margin-right: 4px; + margin-top: 1px; + margin-bottom: 1px; +`; const GsaIconComponent = props => ( ( /> ); -const GsaIcon = glamorous(GsaIconComponent)({ - height: '40px', - paddingTop: '1px', - paddingBottom: '1px', -}); +const GsaIcon = styled(GsaIconComponent)` + height: 40px; + padding-top: 1px; + padding-bottom: 1px; +`; const Greenbone = () => { return ( @@ -85,14 +87,20 @@ const Greenbone = () => { }; -const TitlebarLayout = glamorous(Layout)( - 'titlebar', - { - height: '40px', - backgroundColor: '#99CE48', - padding: '0px 5px 0px 5px', - }, -); +const TitlebarLayout = styled(Layout)` + height: ${TITLE_BAR_HEIGHT}; + background-color: ${Theme.green}; + padding: 0px 5px 0px 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: ${Theme.Layers.menu}; +`; + +const TitlebarPlaceholder = styled.div` + height: ${TITLE_BAR_HEIGHT} +`; class Titlebar extends React.Component { @@ -116,30 +124,33 @@ class Titlebar extends React.Component { render() { const {gmp} = this.props; return ( - - {gmp.isLoggedIn() && - + + + + {gmp.isLoggedIn() && + + + + } + {gmp.isLoggedIn() ? + + Logged in as + + {gmp.username} + + | + Logout + : - - } - {gmp.isLoggedIn() ? - - Logged in as - - {gmp.username} - - | - Logout - : - - } - + } + + ); } } From 3ed7b2c1bd243158ea40f4416f218ee377628179 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Thu, 2 Aug 2018 14:27:27 +0200 Subject: [PATCH 05/11] Make TitleBar translatable --- gsa/src/web/components/bar/titlebar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gsa/src/web/components/bar/titlebar.js b/gsa/src/web/components/bar/titlebar.js index 8ea8301360..1571727de5 100644 --- a/gsa/src/web/components/bar/titlebar.js +++ b/gsa/src/web/components/bar/titlebar.js @@ -140,12 +140,12 @@ class Titlebar extends React.Component { } {gmp.isLoggedIn() ? - Logged in as + {_('Logged in as ')} {gmp.username} | - Logout + {_('Logout')} : } From 521bca77945ec51528f7de2c307242582ab24188 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Thu, 2 Aug 2018 14:27:53 +0200 Subject: [PATCH 06/11] Add new Layer to Theme --- gsa/src/web/utils/theme.js | 1 + 1 file changed, 1 insertion(+) diff --git a/gsa/src/web/utils/theme.js b/gsa/src/web/utils/theme.js index 99ea022756..8c7652c187 100644 --- a/gsa/src/web/utils/theme.js +++ b/gsa/src/web/utils/theme.js @@ -50,6 +50,7 @@ const Theme = { darkGreen: '#519032', Layers: { + menu: 600, aboveAll: 500, onTop: 100, belowAll: -100, From 5a18a3b623ad23272b0828a989847aa25277c9ef Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 3 Aug 2018 10:21:44 +0200 Subject: [PATCH 07/11] Use styled-components for MenuBar Also don't use Sticky anymore --- gsa/src/web/components/bar/menubar.js | 518 +++++++++++++------------- 1 file changed, 251 insertions(+), 267 deletions(-) diff --git a/gsa/src/web/components/bar/menubar.js b/gsa/src/web/components/bar/menubar.js index 23cbff4e1f..60f0a2cfab 100644 --- a/gsa/src/web/components/bar/menubar.js +++ b/gsa/src/web/components/bar/menubar.js @@ -2,6 +2,7 @@ * * Authors: * Björn Ricks + * Steffen Waterkamp * * Copyright: * Copyright (C) 2016 - 2018 Greenbone Networks GmbH @@ -22,62 +23,50 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import _ from 'gmp/locale'; import {isDefined} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes.js'; -import withGmp from '../../utils/withGmp.js'; -import withCapabilities from '../../utils/withCapabilities.js'; -import compose from '../../utils/compose.js'; +import PropTypes from 'web/utils/proptypes'; +import withGmp from 'web/utils/withGmp'; +import withCapabilities from 'web/utils/withCapabilities'; +import compose from 'web/utils/compose'; -import GBIcon from '../icon/greenboneicon.js'; +import Theme from 'web/utils/theme'; -import Link from '../link/link.js'; +import Layout from 'web/components/layout/layout'; -import Menu from '../menu/menu.js'; -import MenuEntry from '../menu/menuentry.js'; -import MenuHelpEntry from '../menu/menuhelpentry.js'; -import MenuSection from '../menu/menusection.js'; +import Menu from 'web/components/menu/menu'; +import MenuEntry from 'web/components/menu/menuentry'; +import MenuHelpEntry from 'web/components/menu/menuhelpentry'; +import MenuSection from 'web/components/menu/menusection'; -import Sticky from '../sticky/sticky.js'; +const MENU_BAR_HEIGHT = '35px'; -const GreenboneIcon = glamorous(GBIcon)({ - visibility: 'hidden', - '.sticky &': { - visibility: 'visible', - }, -}); +const Ul = styled.ul` + width: 100%; + display: flex; + flex-direction: row; + margin: 0; + padding: 0; + list-style: none; +`; -const Ul = glamorous.ul({ - width: '100%', - display: 'flex', - flexDirection: 'row', -}); +const Wrapper = styled(Layout)` + background-color: ${Theme.darkGray}; + height: ${MENU_BAR_HEIGHT}; + position: fixed; + top: 42px; + left: 0; + right: 0; + z-index: ${Theme.Layers.menu}; +`; -Ul.displayName = 'StyledUl'; - -const Wrapper = glamorous(Sticky, { - displayName: 'StyledSticky', -})( - 'menubar', - { - backgroundColor: '#393637', - height: '35px', - - '& ul': { - margin: 0, - padding: 0, - listStyle: 'none', - }, - - '& .menu > a:hover ~ ul > .menu-entry:nth-child(2) > a': { - background: '#99CE48', - }, - }, -); +const MenuBarPlaceholder = styled.div` + height: ${MENU_BAR_HEIGHT}; +`; const MenuBar = ({ gmp, @@ -117,279 +106,274 @@ const MenuBar = ({ ].reduce((sum, cur) => sum || capabilities.mayAccess(cur), false) || (capabilities.mayOp('descibe_auth') && capabilities.mayOp('modify_auth')); return ( - -
    -
  • - + + +
      + - - - - - - {may_op_scans && - - - - {capabilities.mayAccess('tasks') && - - } - {capabilities.mayAccess('reports') && + + {may_op_scans && + + + + {capabilities.mayAccess('tasks') && + + } + {capabilities.mayAccess('reports') && + + } + {capabilities.mayAccess('results') && + + } + {capabilities.mayAccess('vulns') && + + } + + + {capabilities.mayAccess('notes') && + + } + {capabilities.mayAccess('overrides') && + + } + + + } + {capabilities.mayAccess('assets') && + + + - } - {capabilities.mayAccess('results') && - } - {capabilities.mayAccess('vulns') && + + + } + {capabilities.mayAccess('info') && + + + - } - - - {capabilities.mayAccess('notes') && - } - {capabilities.mayAccess('overrides') && - } - - - } - {capabilities.mayAccess('assets') && - - - - - - - - } - {capabilities.mayAccess('info') && - - - - - - - - - - - - - - - } - {may_op_configuration && - - {capabilities.mayAccess('targets') && - - } - {capabilities.mayAccess('port_lists') && - - } - {capabilities.mayAccess('credentials') && - - } - {capabilities.mayAccess('configs') && - - } - - {capabilities.mayAccess('alerts') && - } - {capabilities.mayAccess('schedules') && - } - {capabilities.mayAccess('report_formats') && - } - {capabilities.mayAccess('agents') && + + - } - - - {capabilities.mayAccess('scanners') && + + + } + {may_op_configuration && + + {capabilities.mayAccess('targets') && } - {capabilities.mayAccess('filters') && + {capabilities.mayAccess('port_lists') && } - {capabilities.mayAccess('tags') && + {capabilities.mayAccess('credentials') && } - {capabilities.mayAccess('permissions') && + {capabilities.mayAccess('configs') && } - - - } - - - - {capabilities.mayAccess('system_reports') && + + {capabilities.mayAccess('alerts') && + + } + {capabilities.mayAccess('schedules') && + + } + {capabilities.mayAccess('report_formats') && + + } + {capabilities.mayAccess('agents') && + + } + + + {capabilities.mayAccess('scanners') && + + } + {capabilities.mayAccess('filters') && + + } + {capabilities.mayAccess('tags') && + + } + {capabilities.mayAccess('permissions') && + + } + + + } + - } - - {capabilities.mayAccess('feeds') && - } - - {may_op_admin && - - {capabilities.mayAccess('users') && + {capabilities.mayAccess('system_reports') && } - {capabilities.mayAccess('groups') && - - } - {capabilities.mayAccess('roles') && + + {capabilities.mayAccess('feeds') && } - - {capabilities.mayOp('describe_auth') && - capabilities.mayOp('modify_auth') && + + {may_op_admin && + + {capabilities.mayAccess('users') && } - {capabilities.mayOp('describe_auth') && - capabilities.mayOp('modify_auth') && + {capabilities.mayAccess('groups') && } - + {capabilities.mayAccess('roles') && + + } + + {capabilities.mayOp('describe_auth') && + capabilities.mayOp('modify_auth') && + + } + {capabilities.mayOp('describe_auth') && + capabilities.mayOp('modify_auth') && + + } + + + } + + + - } - - - - -
    -     +
+ + ); }; From ba57389391890bf9b31f6cbb34e30103f51c059b Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 3 Aug 2018 12:58:49 +0200 Subject: [PATCH 08/11] Use styled-components for Menu - Re-design the menu's layout - update imports - export StyledMenuEntry to reuse in MenuSection --- gsa/src/web/components/menu/menu.js | 191 ++++++++++++---------------- 1 file changed, 84 insertions(+), 107 deletions(-) diff --git a/gsa/src/web/components/menu/menu.js b/gsa/src/web/components/menu/menu.js index d7d8c3460e..7d631992d0 100644 --- a/gsa/src/web/components/menu/menu.js +++ b/gsa/src/web/components/menu/menu.js @@ -2,6 +2,7 @@ * * Authors: * Björn Ricks + * Steffen Waterkamp * * Copyright: * Copyright (C) 2016 - 2018 Greenbone Networks GmbH @@ -23,115 +24,92 @@ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {isDefined, hasValue} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes.js'; -import Theme from '../../utils/theme.js'; - -import Link from '../link/link.js'; - -const DefaultEntry = glamorous.div('menu-default-entry', { - display: 'flex', - justifyContent: 'center', - flexGrow: '1', - - '& a, & a:hover, & a:focus, & a:link': { - color: '#FFFFFF', - display: 'block', - height: '35px', - lineHeight: '35px', - fontSize: '10px', - fontWeight: 'bold', - textAlign: 'center', - }, - - '.menu:hover & a': { - color: '#393637', - }, -}); - -const MenuPoint = glamorous.li('menu-point', { - background: "url('/img/style/menu_pointy.png') no-repeat", - display: 'block', - height: '15px', - marginTop: '-14px', - marginLeft: '25px', -}); - -const StyledMenuEntry = glamorous.li('menu-entry', { - '& a': { - color: '#3A3A3A', - }, - '&:last-child, &:last-child .menu-entry:last-child': { - borderBottomRightRadius: '8px', - borderBottomLeftRadius: '8px', - }, - '& a, & a:hover, & a:focus, & a:link': { - textDecoration: 'none', - color: '#3A3A3A', - }, - - '& > .menu-section': { - display: 'flex', - flexDirection: 'column', - flexGrow: '1', - borderTop: '1px solid #b0b0b0', - }, -}); - -const MenuList = glamorous.ul('menu-list', { - width: '255px', - zIndex: Theme.Layers.onTop, - position: 'absolute', - display: 'none', - background: '#FAFAFA', - border: '1px solid #3A3A3A', - borderRadius: '0px 0px 8px 8px', - - '& .menu-entry': { - display: 'flex', - alignItems: 'stretch', - textIndent: '12px', - textAlign: 'left', - color: '#3A3A3A', - minHeight: '22px', - fontSize: '10px', - fontWeight: 'bold', - width: '100%', - backgroundColor: 'white', - }, - '& .menu-entry:hover': { - background: '#99CE48', - }, -}); - -const StyledMenu = glamorous.li('menu', { - flexGrow: '1', - flexShrink: '1', - height: '35px', - - '&:hover': { - backgroundColor: '#99ce48', - }, - - '&:hover > .menu-list': { - display: 'block', - }, - - '& a': { - display: 'flex', - flexGrow: 1, - alignItems: 'center', // center text vertically - }, - - '& a, & a:hover, & a:focus, & a:link': { - background: 'none', - textDecoration: 'none', - color: '#3A3A3A', - }, -}); +import PropTypes from 'web/utils/proptypes.js'; +import Theme from 'web/utils/theme.js'; + +import Link from 'web/components/link/link.js'; + +const StyledMenu = styled.li` + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + margin: 1px; + height: 35px; + + &:hover { + border-bottom: 3px solid ${Theme.green}; + }; + + & a { + display: flex; + flex-grow: 1; + align-items: center; ${''/* center text vertically*/} + }; + + & a, & a:hover, & a:focus, & a:link { + text-decoration: none; + }; +`; + +const DefaultEntry = styled.div` + display: flex; + justify-content: center; + flex-grow: 1; + + & a, & a:hover, & a:focus, & a:link { + color: ${Theme.white}; + display: block; + height: 35px; + line-height: 35px; + font-size: 10px; + font-weight: bold; + text-align: center; + }; +`; + +export const StyledMenuEntry = styled.li` + display: flex; + list-style: none; + background: ${Theme.white}; + text-indent: 12px; + text-align: left; + color: ${Theme.darkGray}; + min-height: 22px; + font-size: 10px; + font-weight: bold; + + & a { + color: ${Theme.darkGray}; + }; + + & a:hover { + color: ${Theme.white}; + background: ${Theme.green}; + } +`; + +const MenuList = styled.ul` + width: 255px; + z-index: ${Theme.Layers.menu}; + position: absolute; + display: none; + background: ${Theme.green}; + border-top: 1px solid ${Theme.mediumGray}; + border-left: 1px solid ${Theme.mediumGray}; + border-right: 1px solid ${Theme.mediumGray}; + border-bottom: 1px solid ${Theme.mediumGray}; + list-style: none; + padding-left: 0px; + margin-left: -1px; + + ${StyledMenu}:hover & { + display: block; + } +`; const Menu = ({ children, @@ -161,7 +139,6 @@ const Menu = ({ {isDefined(children) && children.length > 0 && - {menuentries} } From 0ae514dea24118d97e34ec62ab3f4d4060932c8e Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 3 Aug 2018 12:59:21 +0200 Subject: [PATCH 09/11] Use styled-components for MenuEntry --- gsa/src/web/components/menu/menuentry.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/gsa/src/web/components/menu/menuentry.js b/gsa/src/web/components/menu/menuentry.js index 8ca0cdb635..309f1926c7 100644 --- a/gsa/src/web/components/menu/menuentry.js +++ b/gsa/src/web/components/menu/menuentry.js @@ -22,7 +22,7 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {isDefined} from 'gmp/utils/identity'; @@ -34,9 +34,9 @@ import Layout from '../layout/layout.js'; import Link from '../link/link.js'; -const StyledLink = glamorous(Link)({ - height: '100%', -}); +const StyledLink = styled(Link)` + height: 100%; +`; const MenuEntry = ({ children, From 20416016dc6a63da2c81c0fcd051e9b6a90aa4d5 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 3 Aug 2018 13:00:00 +0200 Subject: [PATCH 10/11] Fix link height in MenuHelpEntry --- gsa/src/web/components/menu/menuhelpentry.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/gsa/src/web/components/menu/menuhelpentry.js b/gsa/src/web/components/menu/menuhelpentry.js index a4944e2de5..c9c9b0e63d 100644 --- a/gsa/src/web/components/menu/menuhelpentry.js +++ b/gsa/src/web/components/menu/menuhelpentry.js @@ -23,12 +23,18 @@ import React from 'react'; +import styled from 'styled-components'; + import PropTypes from '../../utils/proptypes.js'; import ManualLink from '../link/manuallink.js'; import MenuEntry from './menuentry.js'; +const StyledManualLink = styled(ManualLink)` + height: 100%; +`; + const MenuHelpEntry = ({ title, ...props @@ -37,12 +43,12 @@ const MenuHelpEntry = ({ {...props} caps="help" > - {title} - + ); From 6390e3f4f2e0dc6e971e4a1befb6375650642ed9 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 3 Aug 2018 13:00:38 +0200 Subject: [PATCH 11/11] Use styled-components for MenuSection --- gsa/src/web/components/menu/menusection.js | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/gsa/src/web/components/menu/menusection.js b/gsa/src/web/components/menu/menusection.js index 17c12a658b..6443d45ae3 100644 --- a/gsa/src/web/components/menu/menusection.js +++ b/gsa/src/web/components/menu/menusection.js @@ -22,21 +22,32 @@ */ import React from 'react'; +import styled from 'styled-components'; + import {hasValue} from 'gmp/utils/identity'; +import {StyledMenuEntry} from 'web/components/menu/menu'; + +const MSection = styled.ul` + display: flex; + flex-direction: column; + flex-grow: 1; + border-top: 1px solid #b0b0b0; + padding: 0; +`; + const MenuSection = ({ children, }) => ( -
    + {React.Children.map(children, child => hasValue(child) ? ( -
  • + {child} -
    • + ) : child)} -
+ ); export default MenuSection; // vim: set ts=2 sw=2 tw=80: -