Merge pull request #922 from swaterkamp/glamorous2styledcomponents

Convert glamorous to styled-components #5
greenbone · Sep 7, 2018 · 2ba01f2 · 2ba01f2
2 parents 0c4f2fc + 1d3f862
commit 2ba01f2
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 232 deletions.
diff --git a/gsa/src/web/components/form/field.js b/gsa/src/web/components/form/field.js
@@ -22,38 +22,37 @@
  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
-import compose from '../../utils/compose.js';
-import Theme from '../../utils/theme.js';
+import compose from 'web/utils/compose';
+import Theme from 'web/utils/theme';
 
-import withLayout from '../layout/withLayout.js';
+import withLayout from 'web/components/layout/withLayout';
 
-import withChangeHandler from './withChangeHandler.js';
+import withChangeHandler from './withChangeHandler';
 
-const StyledInput = glamorous.input({
+const StyledInput = styled.input`
   /* use font and line settings from parents not from browser default */
-  fontamily: 'inherit',
-  fontSize: 'inherit',
-  lineHeight: 'inherit',
-  display: 'block',
-  height: '22px',
-  color: Theme.darkGray,
-  backgroundColor: Theme.white,
-  backgroundImage: 'none',
-  border: '1px solid ' + Theme.inputBorderGray,
-  borderRadius: '4px',
-  padding: '1px 8px',
-  // "hack" to overshadow default color in Chrome's autofilled input fields
-  '&:-webkit-autofill': {
-    boxShadow: '0 0 0 1000px white inset',
-  },
-}, ({disabled}) => disabled ? {cursor: 'not-allowed'} : null,
-  ({disabled, readonly}) => readonly || disabled ? {
-    backgroundColor: Theme.dialogGray,
-    opacity: 1,
-  } : null,
-);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  display: block;
+  height: 22px;
+  color: ${Theme.darkGray};
+  background-color: ${Theme.white};
+  background-image: none;
+  border: 1px solid ${Theme.inputBorderGray};
+  border-radius: 4px;
+  padding: 1px 8px;
+  /* "hack" to overshadow default color in Chrome's autofilled input fields */
+  &:-webkit-autofill {
+    box-shadow: 0 0 0 1000px white inset;
+  };
+  cursor: ${props => props.disabled ? 'not-allowed' : null};
+  background-color: ${props => props.disabled || props.readonly ?
+    Theme.dialogGray : null};
+  opacity: ${props => props.disabled || props.readonly ? 1 : null};
+`;
 
 export default compose(
   withLayout(),

diff --git a/gsa/src/web/components/form/formgroup.js b/gsa/src/web/components/form/formgroup.js
@@ -23,14 +23,14 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {isDefined} from 'gmp/utils/identity';
 
 import {parseInt} from 'gmp/parser';
 
-import Layout from '../layout/layout';
-import PropTypes from '../../utils/proptypes.js';
+import Layout from 'web/components/layout/layout';
+import PropTypes from 'web/utils/proptypes';
 
 const COLUMNS = [
   '8.33333333%',
@@ -47,32 +47,35 @@ const COLUMNS = [
   '100%',
 ];
 
-const FormGroupLayout = glamorous(Layout)({
-  paddingBottom: '10px',
-});
+const FormGroupLayout = styled(Layout)`
+  padding-bottom: 10px;
+`;
 
-const Title = glamorous.label({
-  display: 'inline-block',
-  maxWidth: '100%',
-  fontWeight: 'bold',
-  textAlign: 'right',
-  paddingLeft: '10px',
-  paddingRight: '10px',
-}, ({titleOffset, titleSize}) => ({
-  width: COLUMNS[parseInt(titleSize) - 1],
-  marginLeft: COLUMNS[parseInt(titleOffset) - 1],
-}));
+const Title = styled.label`
+  display: inline-block;
+  max-width: 100%;
+  font-weight: bold;
+  text-align: right;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: ${props => COLUMNS[parseInt(props.titleSize) - 1]};
+  margin-left: ${props => COLUMNS[parseInt(props.titleOffset) - 1]};
+`;
 
-const FormGroupContent = glamorous(Layout)(
-  ({size}) => isDefined(size) ? {
-    width: COLUMNS[parseInt(size) - 1],
-    paddingLeft: '10px',
-    paddingRight: '10px',
-  } : null,
-  ({offset}) => isDefined(offset) ? {
-    marginLeft: COLUMNS[parseInt(offset) - 1],
-  } : null,
-);
+const FormGroupContent = styled(Layout)`
+  ${props => {
+    const ret = {};
+    if (isDefined(props.size)) {
+      ret.width = COLUMNS[parseInt(props.size) - 1];
+      ret.paddingLeft = '10px';
+      ret.paddingRight = '10px';
+    }
+    if (isDefined(props.offset)) {
+      ret.marginLeft = COLUMNS[parseInt(props.offset) - 1];
+    }
+    return ret;
+  }}
+`;
 
 const FormGroup = ({
   children,

diff --git 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 {