Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert glamorous to styled-components #5 #922

Merged
merged 8 commits into from
Sep 7, 2018
Merged

Convert glamorous to styled-components #5 #922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c891139
Punctuate infopanel strings in EmptyResultsReport
swaterkamp Sep 7, 2018
227b6e6
Fix distance of InfoPanels at emptyResultsReport
swaterkamp Sep 7, 2018
3158491
Use styled-components for SelectElements
swaterkamp Sep 7, 2018
7106c2c
Use styled-components for MultiSelect
swaterkamp Sep 7, 2018
40ce8da
Don't use withLayout() in TimeZoneSelect
swaterkamp Sep 7, 2018
47d64e2
Use styled-components for FormGroup
swaterkamp Sep 7, 2018
6ba217d
Use styled-components for TextArea
swaterkamp Sep 7, 2018
1d3f862
Use styled-components for Field
swaterkamp Sep 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 26 additions & 27 deletions gsa/src/web/components/form/field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
57 changes: 30 additions & 27 deletions gsa/src/web/components/form/formgroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand All @@ -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,
Expand Down
62 changes: 32 additions & 30 deletions gsa/src/web/components/form/multiselect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {

Expand Down
Loading