Commit c1e2cb80 authored by Maxim Babichev's avatar Maxim Babichev Committed by Matija Obreza
Browse files

Theme and common styles

parent 5b7b7b86
Pipeline #4123 passed with stages
in 3 minutes and 58 seconds
......@@ -82,15 +82,6 @@ interface IDescriptorCardProps extends React.ClassAttributes<any> {
}
const styles = (theme) => ({
card: {
// margin: '20px',
},
leftBorder: {
borderLeft: 'solid 1px #eee',
},
blue: {
color: '#006CB4',
},
dataContainer: {
flexWrap: 'nowrap',
marginBottom: '2px',
......@@ -99,27 +90,9 @@ const styles = (theme) => ({
flexWrap: 'wrap',
},
},
/* tslint:disable */
grayRowsOdd: {
'&:nth-child(odd)': {
'& > div': {
backgroundColor: '#f8f7f5',
},
'& div:first-child': {
backgroundColor: '#fff',
'& > h3': {
backgroundColor: '#f8f7f5',
},
},
},
},
/* tslint:enable */
gray: {
backgroundColor: '#f3f2ee',
},
bold: {
fontWeight: 'bold',
},
grayTitleSmall: {
fontSize: '14px',
fontWeight: 'bold',
......@@ -140,17 +113,6 @@ const styles = (theme) => ({
marginRight: '0',
},
},
rightTextWrapper: {
display: 'flex',
justifyContent: 'space-between',
margin: '0 1px',
padding: '10px 20px',
[theme.breakpoints.down('md')]: {
marginLeft: '0',
marginRight: '0',
padding: '10px 14px 18px',
},
},
pdTop0: {
[theme.breakpoints.down('md')]: {
paddingTop: '0',
......@@ -158,39 +120,17 @@ const styles = (theme) => ({
marginRight: '0',
},
},
rightText: {
display: 'inline-flex',
fontSize: '14px',
lineHeight: '25px',
alignItems: 'center',
},
fontNormal: {
fontWeight: 'normal',
},
cardHeader: {
padding: '16px 20px',
},
titleCard: {
[theme.breakpoints.down('md')]: {
fontSize: '20px',
lineHeight: '25px',
},
},
/* tslint:disable */
cardContent: {
padding: '0',
overflow: 'hidden',
'& .markdown': {
padding: '16px 20px 6px 20px',
// fontFamily: 'Roboto-medium',
},
},
/* tslint:enable */
action: {
padding: '20px',
height: 'auto',
},
grayRowsOdd: theme.table.grayRowsOdd,
btnBlue: theme.buttons.blue,
btnDefault: theme.buttons.default,
});
......@@ -222,19 +162,15 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
// console.log('DC displayPref', displayPref, complete, compact);
return (
<Card className={ `${classes.card} ${className}` } square>
<Card className={ `${className}` } square>
<CardHeader
className={ classes.cardHeader }
classes={ {
title: classes.titleCard,
} }
title={ (
<DescriptorLink descriptor={ descriptor }>{ descriptor.title || 'Untitled' }</DescriptorLink>
) }
/>
<Divider />
<CardContent className={ classes.cardContent } >
{ descriptor.description && <Markdown source={ displayPref.textLength ? descriptor.description.substring(0, displayPref.textLength) : descriptor.description }/> }
<CardContent>
{ descriptor.description && <Markdown className="mb-20" source={ displayPref.textLength ? descriptor.description.substring(0, displayPref.textLength) : descriptor.description }/> }
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
{ displayPref.owner && (
......@@ -245,7 +181,7 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.blue}` }>
<Typography type="display3" component="h3" className="blue pt-10 pb-10 pl-15">
{ descriptor.owner ? descriptor.owner.name : '' }
</Typography>
</Grid>
......@@ -259,7 +195,7 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
<Typography type="display3" component="h3" className="pt-10 pb-10 pl-15">
{ descriptor.versionTag }
</Typography>
</Grid>
......@@ -273,7 +209,7 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
<Typography type="display3" component="h3" className="pt-10 pb-10 pl-15">
{ T(`crop.${descriptor.crop}`) || descriptor.crop }
</Typography>
</Grid>
......@@ -287,7 +223,7 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
<Typography type="display3" component="h3" className="pt-10 pb-10 pl-15">
{ T(`descriptor.category.${descriptor.category}`) }
</Typography>
</Grid>
......@@ -301,7 +237,7 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
</Typography>
</Grid>
<Grid item xs={ 12 } md={ 9 } className={ `${classes.gray} ${classes.rightTextWrapper} ${classes.pdTop0}` }>
<Typography type="title" component="h3" className={ `${classes.rightText} ${classes.fontNormal}` }>
<Typography type="display3" component="h3" className="pt-10 pb-10 pl-15">
{ T(`descriptor.dataType.${descriptor.dataType}`) }
</Typography>
</Grid>
......
......@@ -3,6 +3,7 @@ import Grid from 'material-ui/Grid';
import {withStyles} from 'material-ui/styles';
import * as classnames from 'classnames';
import Card, {CardHeader} from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import { Descriptor } from 'model/descriptors.model';
import {IDescriptorFilter} from 'model/filter.model';
......@@ -22,12 +23,6 @@ interface IDescriptorPickerProps extends React.ClassAttributes<any> {
const styles = (theme) => ({
leftPanel: theme.leftPanel.root,
availableHeader: {
margin: '20px',
fontFamily: 'Roboto',
fontWeight: 'bold' as 'bold',
fontSize: '16px',
},
titleCardDisabled: {
fontWeight: 'normal' as 'normal',
fontStyle: 'italic' as 'italic',
......@@ -43,9 +38,6 @@ const styles = (theme) => ({
emptyCardHeader: {
padding: '16px !important',
},
emptyCard: {
margin: '20px',
},
paginationComponent: {
position: 'absolute' as 'absolute',
bottom: '0',
......@@ -102,11 +94,12 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
<DescriptorSearchMenu loadDescriptors={ loadDescriptors } sortBy={ this.state.sortBy } filter={ {} }/>
</Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ classes.grayBackground }>
<div className={ classes.availableHeader }>
<Typography type="title" className="pt-20 pl-20">
{ matchingDescriptors.totalElements || 0 } descriptors available
</div>
</Typography>
{ matchingDescriptors.content.map((descriptor: Descriptor) => (
<DescriptorCard
className="m-20"
key={ descriptor.uuid }
descriptor={ descriptor }
compact
......@@ -131,12 +124,12 @@ class DescriptorPicker extends React.Component<IDescriptorPickerProps, any> {
</div>
</Grid>
<Grid item xs={ 12 } md={ 4 } lg={ 5 } className={ classnames({ [classes.greenBackground]: currentDescriptors.length > 0 }) }>
<div className={ classes.availableHeader }>
<Typography type="title" className="pt-20 pl-20">
{ `${currentDescriptors.length} descriptor${currentDescriptors.length !== 1 ? 's' : '' } selected` }
</div>
</Typography>
{
currentDescriptors.length === 0 && (
<Card square className={ classes.emptyCard }>
<Card square className="m-20">
<CardHeader
className={ classes.emptyCardHeader }
classes={ {
......
......@@ -2,6 +2,7 @@ import * as React from 'react';
import PlayArrow from 'material-ui-icons/PlayArrow';
import {withStyles} from 'material-ui/styles';
import Collapse from 'material-ui/transitions/Collapse';
import Divider from 'material-ui/Divider';
interface ICollapsibleComponentSearch extends React.ClassAttributes<any> {
classes: any;
......@@ -9,26 +10,6 @@ interface ICollapsibleComponentSearch extends React.ClassAttributes<any> {
}
const styles = (theme) => ({
collapseBlockHeader: {
padding: '0px 15px 0px 20px',
background: '#fff',
},
arrowOpened: {
cursor: 'pointer',
transform: 'rotate(270deg)',
float: 'right',
height: '40px',
},
arrowClosed: {
cursor: 'pointer',
transform: 'rotate(90deg)',
float: 'right',
height: '40px',
},
contextBlock: {
background: '#fff',
borderBottom: '1px solid #d5d4d3',
},
title: {
fontSize: '13px',
fontWeight: '400',
......@@ -36,9 +17,9 @@ const styles = (theme) => ({
color: '#81807f',
textTransform: 'uppercase',
},
collapseBlockBody: {
padding: '0 20px 20px 20px',
},
collapseArrow: theme.arrows.collapse,
arrowOpened: theme.arrows.opened,
arrowClosed: theme.arrows.closed,
});
class CollapsibleComponentSearch extends React.Component<ICollapsibleComponentSearch , any> {
......@@ -61,18 +42,19 @@ class CollapsibleComponentSearch extends React.Component<ICollapsibleComponentS
const {classes, title, children} = this.props;
return (
<div className={ classes.contextBlock }>
<div className={ classes.collapseBlockHeader }><span className={ classes.title }>{ title }</span>
<PlayArrow onClick={ this.showBlock } className={ this.state.show ? classes.arrowOpened : classes.arrowClosed }/>
<div>
<div className="pl-20 pr-15">
<span className={ classes.title }>{ title }</span>
<PlayArrow onClick={ this.showBlock } className={ `${ classes.collapseArrow } ${ this.state.show ? classes.arrowOpened : classes.arrowClosed }` } />
</div>
<Collapse
in={ this.state.show }
timeout="auto"
unmountOnExit
>
<div className={ classes.collapseBlockBody }>{ children }</div>
<div className="pr-20 pb-20 pl-20">{ children }</div>
</Collapse>
<Divider/>
</div>
);
}
......
......@@ -15,9 +15,6 @@ interface IDescriptorFilterFormProps extends React.ClassAttributes<any> {
}
const styleSheet = (theme) => ({
buttons: {
padding: '20px 0 20px 20px',
},
btnGreen: theme.buttons.green,
btnReset: theme.buttons.reset,
});
......@@ -52,7 +49,7 @@ class DescriptorFilterForm extends React.Component<IDescriptorFilterFormProps, a
</CollapsibleComponentSearch>
</form>
<div className={ classes.buttons }>
<div className="pt-20 pb-20 pl-20">
<Button raised onClick={ handleSubmit } className={ classes.btnGreen }>Submit</Button>
<Button onClick={ reset } className={ classes.btnReset }>Reset</Button>
</div>
......
......@@ -5,6 +5,8 @@ import withWidth from 'material-ui/utils/withWidth';
import Hidden from 'material-ui/Hidden';
import Collapse from 'material-ui/transitions/Collapse';
import PlayArrow from 'material-ui-icons/PlayArrow';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
interface IExpandFiltersComponentProps extends React.ClassAttributes<any> {
classes: any;
......@@ -13,42 +15,13 @@ interface IExpandFiltersComponentProps extends React.ClassAttributes<any> {
}
const styles = (theme) => ({
root: {
boxShadow: '4px 0px 1px -1px rgba(0, 0, 0, 0.2)',
background: '#fff',
zIndex: 1,
},
expand: {
transform: 'rotate(0deg)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
},
arrowOpened: {
cursor: 'pointer',
transform: 'rotate(270deg)',
float: 'right',
height: '50px',
},
arrowClosed: {
cursor: 'pointer',
transform: 'rotate(90deg)',
float: 'right',
height: '50px',
},
search: {
textTransform: 'uppercase',
color: '#88ba42',
fontSize: '18px',
fontWeight: 'bold' as 'bold',
lineHeight: '50px',
},
wrapperHeader: {
width: '100%',
borderBottom: '1px solid #d5d4d3',
title: {
display: 'inline-block',
padding: '0px 15px 0px 20px',
textTransform: 'uppercase',
},
expandArrow: theme.arrows.expand,
arrowOpened: theme.arrows.opened,
arrowClosed: theme.arrows.closed,
});
class ExpandFiltersComponent extends React.Component<IExpandFiltersComponentProps, any> {
......@@ -72,15 +45,19 @@ class ExpandFiltersComponent extends React.Component<IExpandFiltersComponentProp
}
public render() {
const {classes, title, children} = this.props;
const { classes, title, children} = this.props;
return (
<div>
<div className={ classes.wrapperHeader }>
<span className={ classes.search }>{ title }</span>
<div>
<Typography type="title" color="primary" className={ `pl-20 pt-10 pb-7 ${ classes.title }` }>
{ title }
</Typography>
<Hidden mdUp>
<PlayArrow onClick={ this.handleFilterExpandClick }
className={ this.state.filterExpanded ? classes.arrowOpened : classes.arrowClosed }/>
className={ `${classes.expandArrow} ${ this.state.filterExpanded ? classes.arrowOpened : classes.arrowClosed }` }
/>
</Hidden>
<Divider/>
</div>
<Collapse
in={ this.state.filterExpanded }
......
......@@ -7,9 +7,6 @@ import Button from 'material-ui/Button';
const styles = (theme) => ({
buttons: {
padding: '20px 0 20px 20px',
},
btnGreen: theme.buttons.green,
btnReset: theme.buttons.reset,
});
......@@ -28,7 +25,7 @@ const FiltersBlock = ({ title, children, handleSubmit, initialize, classes }) =>
<ExpandFiltersComponent title={ title || 'Filters' }>
<form onSubmit={ handleSubmit }>
{ children }
<div className={ classes.buttons }>
<div className="pt-20 pb-20 pl-20">
<Button raised onClick={ handleSubmit } type="submit" className={ classes.btnGreen }>Submit</Button>
<Button onClick={ onReset } type="button" className={ classes.btnReset }>Reset</Button>
</div>
......
import * as React from 'react';
import { Field } from 'redux-form';
import {withStyles} from 'material-ui/styles';
import TextField from 'material-ui/TextField';
......@@ -9,16 +8,8 @@ interface IStringArrFilterInternal extends React.ClassAttributes<any> {
input: any;
placeholder: string;
label: string;
classes: any;
}
const styleSheet = {
root: {
width: '100%',
color: 'green',
},
};
class InternalStringArrField extends React.Component<IStringArrFilterInternal, any> {
private constructor(props, context) {
......@@ -59,7 +50,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal, a
public render() {
const { classes, placeholder, label } = this.props;
const { placeholder, label } = this.props;
const generateHandler = (method, value) => (e) => method(e, value);
const { input } = this.props;
......@@ -68,7 +59,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal, a
return (
<div>
<TextField
className={ classes.root }
className="full-width"
label={ label }
value={ this.state.text }
placeholder={ placeholder }
......@@ -80,7 +71,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal, a
}
}
const StringArrFilterInternal = (withStyles as any)(styleSheet)(InternalStringArrField);
const StringArrFilterInternal = InternalStringArrField;
interface IStringArrFilter extends React.ClassAttributes<any> {
name: string;
......
import * as React from 'react';
import { Field } from 'redux-form';
import {withStyles} from 'material-ui/styles';
import TextField from 'material-ui/TextField';
interface IStringFilterInternal extends React.ClassAttributes<any> {
classes: any;
name: string;
input: any;
searchType: string;
......@@ -13,13 +11,6 @@ interface IStringFilterInternal extends React.ClassAttributes<any> {
label: string;
}
const styleSheet = {
root: {
width: '100%',
color: 'green',
},
};
// searchType can be: "contains", "eq"- equals, "sw" - start with
class StringFilterInternal extends React.Component<IStringFilterInternal, any> {
......@@ -59,14 +50,14 @@ class StringFilterInternal extends React.Component<IStringFilterInternal, any> {
public render() {
const {classes, placeholder, label } = this.props;
const { placeholder, label } = this.props;
const generateHandler = (method, value) => (e) => method(e, value);
const { input } = this.props;
const { onChange } = input;
return (
<div>
<TextField
className={ classes.root }
className="full-width"
label={ label }
value={ this.state.text }
placeholder={ placeholder }
......@@ -78,7 +69,7 @@ class StringFilterInternal extends React.Component<IStringFilterInternal, any> {
}
}
const styledStringFilterInternal = (withStyles as any)(styleSheet)(StringFilterInternal);
const styledStringFilterInternal = StringFilterInternal;
interface IStringFilter extends React.ClassAttributes<any> {
name: string;
......
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import Hidden from 'material-ui/Hidden';
const styles = (theme) => ({
root: {
backgroundColor: '#88ba42',
padding: '10px 20px',
color: '#fff',
},
});
interface IContentHeader extends React.ClassAttributes<any> {
classes: any;
title: string;
subTitle?: string;
}
......@@ -26,16 +16,16 @@ class ContentHeader extends React.Component<IContentHeader , any> {
public render() {
const {classes, title, subTitle} = this.props;
const { title, subTitle} = this.props;
return (
<Grid container spacing={ 0 } className={ classes.root }>
<Grid container spacing={ 0 } className={ `back-green pt-10 pb-10 pl-20 pr-20` }>
<Grid item xs={ 12 }>
<Typography type="headline">
<Typography type="headline" color="accent">
{ title }
</Typography>
<Hidden mdDown>
<Typography type="body2">
<Typography type="body2" color="accent">
{ subTitle }
</Typography>
</Hidden>
......@@ -45,4 +35,4 @@ class ContentHeader extends React.Component<IContentHeader , any> {
}
}
export default (withStyles as any)(styles)(ContentHeader);
export default ContentHeader;
......@@ -12,14 +12,7 @@ interface IUserMenuComponentProps extends React.ClassAttributes<any> {
userName: string;
}
const styles = {
root: {
width: '100%',
},
menuButton: {
color: 'white',
},
};
const styles = {};
class UserMenuComponent extends React.Component<IUserMenuComponentProps, any> {
......@@ -42,11 +35,11 @@ class UserMenuComponent extends React.Component<IUserMenuComponentProps, any> {
public render() {