From c8911391c35e2df3881a1951c75b90da35679fe4 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 7 Sep 2018 09:10:25 +0200 Subject: [PATCH 1/8] Punctuate infopanel strings in EmptyResultsReport Also update imports --- .../web/pages/reports/emptyresultsreport.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/gsa/src/web/pages/reports/emptyresultsreport.js b/gsa/src/web/pages/reports/emptyresultsreport.js index 2f413ab24b..f22bcfe266 100644 --- a/gsa/src/web/pages/reports/emptyresultsreport.js +++ b/gsa/src/web/pages/reports/emptyresultsreport.js @@ -28,13 +28,13 @@ import _ from 'gmp/locale'; import {isDefined} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes.js'; +import PropTypes from 'web/utils/proptypes'; -import Divider from '../../components/layout/divider.js'; +import Divider from 'web/components/layout/divider'; -import InfoPanel from '../../components/panel/infopanel.js'; +import InfoPanel from 'web/components/panel/infopanel'; -import ReportPanel from './reportpanel.js'; +import ReportPanel from './reportpanel'; const EmptyResultsReport = ({ all, @@ -58,7 +58,7 @@ const EmptyResultsReport = ({ @@ -66,7 +66,7 @@ const EmptyResultsReport = ({ {!levels.includes('g') && {_('Include log messages in your filter settings.')} @@ -77,7 +77,7 @@ const EmptyResultsReport = ({ @@ -101,7 +101,7 @@ const EmptyResultsReport = ({ {_('Adjust and update your filter settings.')} @@ -109,7 +109,7 @@ const EmptyResultsReport = ({ {_('Reset the filter settings to the defaults.')} From 227b6e695a490ba5de2bffa39962fd72019a2c07 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 7 Sep 2018 09:14:20 +0200 Subject: [PATCH 2/8] Fix distance of InfoPanels at emptyResultsReport --- gsa/src/web/components/panel/infopanel.js | 1 + gsa/src/web/pages/reports/emptyresultsreport.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/gsa/src/web/components/panel/infopanel.js b/gsa/src/web/components/panel/infopanel.js index 806ad01871..37098cb7e3 100644 --- a/gsa/src/web/components/panel/infopanel.js +++ b/gsa/src/web/components/panel/infopanel.js @@ -35,6 +35,7 @@ import Layout from 'web/components/layout/layout'; const Panel = styled(Layout)` background-color: ${Theme.white}; border: 1px solid ${Theme.lightBlue}; + margin-top: 5px; `; const Heading = styled.div` diff --git a/gsa/src/web/pages/reports/emptyresultsreport.js b/gsa/src/web/pages/reports/emptyresultsreport.js index f22bcfe266..8a00ebc3bd 100644 --- a/gsa/src/web/pages/reports/emptyresultsreport.js +++ b/gsa/src/web/pages/reports/emptyresultsreport.js @@ -31,6 +31,7 @@ import {isDefined} from 'gmp/utils/identity'; import PropTypes from 'web/utils/proptypes'; import Divider from 'web/components/layout/divider'; +import Layout from 'web/components/layout/layout'; import InfoPanel from 'web/components/panel/infopanel'; @@ -50,7 +51,7 @@ const EmptyResultsReport = ({ const min_qod = filter.get('min_qod'); const has_severity_filter = isDefined(severity) && severity.relation === '>'; return ( - - + ); }; From 3158491b5f48c0e24d8404d1024b5d11e08764b9 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 7 Sep 2018 11:09:11 +0200 Subject: [PATCH 3/8] Use styled-components for SelectElements --- gsa/src/web/components/form/selectelements.js | 210 +++++++++--------- 1 file changed, 99 insertions(+), 111 deletions(-) diff --git a/gsa/src/web/components/form/selectelements.js b/gsa/src/web/components/form/selectelements.js index 6cc3069766..00a6e0ebf6 100644 --- a/gsa/src/web/components/form/selectelements.js +++ b/gsa/src/web/components/form/selectelements.js @@ -25,7 +25,7 @@ import 'core-js/fn/string/includes'; import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {isDefined, hasValue} from 'gmp/utils/identity'; @@ -34,99 +34,90 @@ import PropTypes from 'web/utils/proptypes'; import Portal from 'web/components/portal/portal'; -export const Box = glamorous.div({ - border: '1px solid ' + Theme.inputBorderGray, - borderRadius: '4px', - display: 'flex', - flexDirection: 'row', - alignItems: 'stretch', - flexGrow: 1, - padding: '1px 5px', - backgroundColor: Theme.white, - color: Theme.black, - fontWeight: 'normal', -}, ({isOpen}) => isOpen ? { - borderRadius: '4px 4px 0 0', -} : null, ({disabled}) => disabled ? { - backgroundColor: Theme.dialogGray, -} : null); - -export const Input = glamorous.input({ - flexGrow: 1, - padding: '1px', - margin: '5px', +export const Box = styled.div` + border: 1px solid ${Theme.inputBorderGray}; + border-radius: 4px; + display: flex; + flex-direction: row; + align-items: stretch; + flex-grow: 1; + padding: 1px 5px; + background-color: ${Theme.white}; + color: ${Theme.black}; + font-weight: normal; + border-radius: ${props => props.isOpen ? '4px 4px 0 0' : null}; + background-color: ${props => props.disabled ? Theme.dialogGray : null}; +`; + +export const Input = styled.input` + flex-grow: 1; + padding: 1px; + margin: 5px; /* use font and line settings from parents not from browser default */ - fontFamily: 'inherit', - fontSize: 'inherit', - lineHeight: 'inherit', -}); - -export const Item = glamorous.span({ - padding: '1px 5px', - cursor: 'pointer', - '&:hover': { - backgroundColor: Theme.mediumBlue, - color: 'white', - }, -}, ({isSelected}) => isSelected ? { - backgroundColor: Theme.lightGray, -} : null, ({isActive}) => isActive ? { - backgroundColor: Theme.mediumBlue, - color: Theme.white, -} : null); - -export const ItemContainer = glamorous.div({ - maxHeight: '320px', - overflowY: 'auto', - overflowX: 'hidden', - display: 'flex', - flexDirection: 'column', -}); - -const MenuContainer = glamorous.div({ - outline: '0', - borderRadius: '0 0 4px 4px', - transition: 'opacity .1s ease', - boxShadow: '0 2px 3px 0 rgba(34,36,38,.15)', - borderColor: Theme.inputBorderGray, - borderWidth: '1px 1px 1px 1px', - borderStyle: 'solid', - backgroundColor: 'white', - display: 'flex', - flexDirection: 'column', - position: 'absolute', - zIndex: Theme.Layers.onTop, - marginTop: '-1px', // collapse top border - boxSizing: 'border-box', -}, ({ - position, - right, - width, - x, - y, -}) => { - switch (position) { - case 'adjust': - return { - top: y, - left: x, - width, - }; - case 'right': - return { - top: y, - right, - whiteSpace: 'nowrap', - }; - default: - return { - top: y, - left: x, - whiteSpace: 'nowrap', - }; - } -}); + font-family: inherit; + font-size: inherit; + line-height: inherit; +`; + +export const Item = styled.span` + padding: 1px 5px; + cursor: pointer; + &:hover { + background-color: ${Theme.mediumBlue}; + color: ${Theme.white}; + }; + background-color: ${props => props.isSelected ? Theme.lightGray : null}; + {$props => props.isActive ? + { + backgroundColor: Theme.mediumBlue, + color: Theme.white, + } : null; + }; +`; + +export const ItemContainer = styled.div` + max-height: 320px; + overflow-y: auto; + overflow-x: hidden; + display: flex; + flex-direction: column; +`; + +const MenuContainer = styled.div` + outline: 0; + border-radius: 0 0 4px 4px; + transition: opacity .1s ease; + box-shadow: 0 2px 3px 0 rgba(34,36,38,.15); + border: 1px solid ${Theme.inputBorderGray}; + background-color: ${Theme.white}; + display: flex; + flex-direction: column; + position: absolute; + z-index: ${Theme.Layers.onTop}; + margin-top: -1px; /* collapse top border */ + box-sizing: border-box; + top: ${props => props.y}px; + ${props => { + switch (props.position) { + case 'adjust': + return { + left: props.x + 'px', + width: props.width + 'px', + }; + case 'right': + return { + right: props.right + 'px', + whiteSpace: 'nowrap', + }; + default: + return { + left: props.x + 'px', + whiteSpace: 'nowrap', + }; + } + }}; +`; const getParentNode = element => { if (element.nodeName === 'HTML') { @@ -235,25 +226,22 @@ Menu.propTypes = { target: PropTypes.object.isRequired, }; -export const SelectContainer = glamorous.div({ - display: 'flex', - flexDirection: 'column', - position: 'relative', -}, ({width}) => ({ - width, -})); - -export const SelectedValue = glamorous.div({ - display: 'flex', - alignItems: 'center', - flexGrow: 1, - cursor: 'pointer', - wordBreak: 'keep-all', - whiteSpace: 'nowrap', - overflow: 'hidden', -}, ({disabled}) => disabled ? { - cursor: 'default', -} : null); +export const SelectContainer = styled.div` + display: flex; + flex-direction: column; + position: relative; + width: ${props => props.width}; +`; + +export const SelectedValue = styled.div` + display: flex; + align-items: center; + flex-grow: 1; + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + cursor: ${props => props.disabled ? 'default' : 'pointer'}; +`; export const case_insensitive_filter = search => { if (!isDefined(search) || search.length === 0) { From 7106c2c885bae14079ea5ea9005c05304a9a5bc7 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 7 Sep 2018 11:22:50 +0200 Subject: [PATCH 4/8] Use styled-components for MultiSelect --- gsa/src/web/components/form/multiselect.js | 62 +++++++++++----------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/gsa/src/web/components/form/multiselect.js b/gsa/src/web/components/form/multiselect.js index 06b88de3a4..11f84286fc 100644 --- a/gsa/src/web/components/form/multiselect.js +++ b/gsa/src/web/components/form/multiselect.js @@ -24,18 +24,20 @@ import 'core-js/fn/string/includes'; import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import Downshift from 'downshift'; import {arraysEqual} from 'gmp/utils/array'; import {isDefined, isArray} from 'gmp/utils/identity'; -import ArrowIcon from '../icon/arrowicon.js'; +import ArrowIcon from 'web/components/icon/arrowicon'; -import Layout from '../layout/layout.js'; +import Layout from 'web/components/layout/layout'; -import PropTypes from '../../utils/proptypes.js'; +import PropTypes from 'web/utils/proptypes'; + +import Theme from 'web/utils/theme'; import { Box, @@ -47,35 +49,35 @@ import { option_items, SelectContainer, SelectedValue, -} from './selectelements.js'; +} from './selectelements'; const DEFAULT_WIDTH = '250px'; -export const MultiSelectedValue = glamorous(SelectedValue)({ - display: 'inline', - border: '1px solid #aaa', - borderRadius: '3px', - padding: '0 3px', - marginRight: '4px', - marginTop: '1px', - marginBottom: '1px', - backgroundColor: '#ddd', - width: '80px', // acts similar to minWidth? -}); - -const DeleteButton = glamorous.div({ - display: 'inline', - color: '#888', - marginRight: '2px', - '&:hover': { - color: '#000', - }, -}); - -const Label = glamorous.span({ - textOverflow: 'ellipsis', - overflow: 'hidden', -}); +export const MultiSelectedValue = styled(SelectedValue)` + display: inline; + border: 1px solid ${Theme.inputBorderGray}; + border-radius: 3px; + padding: 0 3px; + margin-right: 4px; + margin-top: 1px; + margin-bottom: 1px; + background-color: ${Theme.lightGray}; + width: 80px; /* acts similar to minWidth? */ +`; + +const DeleteButton = styled.div` + display: inline; + color: ${Theme.mediumGray}; + margin-right: 2px; + &:hover { + color: ${Theme.black}; + }; +`; + +const Label = styled.span` + text-overflow: ellipsis; + overflow: hidden; +`; class MultiSelect extends React.Component { From 40ce8da4c20ab5efd8bbf11ca6928b2401377e05 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 7 Sep 2018 11:51:06 +0200 Subject: [PATCH 5/8] Don't use withLayout() in TimeZoneSelect When using TimeZoneSelect within a Formgroup together with withLayout(), margins get crazy. For the cost of automatic width adoption (now fixed to 230px, based on the longest string of options) overlapping of TimeZoneSelect with the title of FormGroup is prevented. --- gsa/src/web/components/form/timezoneselect.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/gsa/src/web/components/form/timezoneselect.js b/gsa/src/web/components/form/timezoneselect.js index 9561bafddf..fef949210a 100644 --- a/gsa/src/web/components/form/timezoneselect.js +++ b/gsa/src/web/components/form/timezoneselect.js @@ -29,11 +29,9 @@ import {map} from 'gmp/utils/array'; import timezones from 'gmp/timezones'; -import PropTypes from '../../utils/proptypes.js'; +import PropTypes from 'web/utils/proptypes'; -import withLayout from '../layout/withLayout.js'; - -import Select from './select.js'; +import Select from './select'; const TimeZoneSelectComponent = ({value = 'UTC', ...props}) => { @@ -53,7 +51,9 @@ const TimeZoneSelectComponent = ({value = 'UTC', ...props}) => {