Commit ff939438 authored by Maxym Borodenko's avatar Maxym Borodenko
Browse files

Merge branch '97-add-number-indicator-to-my-list' into 'master'

Resolve "Add number indicator to My List"

Closes #97

See merge request genesys-pgr/genesys-ui!93
parents 16a2c31b 471eefe7
...@@ -10,7 +10,6 @@ import TableRow from '@material-ui/core/TableRow'; ...@@ -10,7 +10,6 @@ import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import * as PropTypes from 'prop-types';
import * as moment from 'moment'; import * as moment from 'moment';
import Page from 'model/Page'; import Page from 'model/Page';
...@@ -78,11 +77,6 @@ const styles = (theme) => ({ ...@@ -78,11 +77,6 @@ const styles = (theme) => ({
class DataTable extends React.Component<IDataTableProps, any> { class DataTable extends React.Component<IDataTableProps, any> {
public static propTypes = {
pageObj: PropTypes.object.isRequired,
path: PropTypes.string.isRequired,
};
public render() { public render() {
const {classes, pageObj, path, showStatus} = this.props; const {classes, pageObj, path, showStatus} = this.props;
return ( return (
...@@ -142,7 +136,7 @@ class DataTable extends React.Component<IDataTableProps, any> { ...@@ -142,7 +136,7 @@ class DataTable extends React.Component<IDataTableProps, any> {
</Table> </Table>
</Paper> </Paper>
); );
}; }
} }
......
import * as React from 'react'; import * as React from 'react';
import { withStyles} from '@material-ui/core/styles'; import { withStyles} from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import Drawer from '@material-ui/core/Drawer'; import Drawer from '@material-ui/core/Drawer';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import { NavLink, Link } from 'react-router-dom'; import { NavLink, Link } from 'react-router-dom';
import Close from '@material-ui/icons/Close'; import Close from '@material-ui/icons/Close';
import MyListCount from './MyListCount';
import {compose} from 'redux';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
const mobile = ['md', 'sm', 'xs'] as Breakpoint[];
const styleSheet = (theme) => ({ const styleSheet = (theme) => ({
flex: { flex: {
flex: 1, flex: 1,
}, },
myListCount: {
[theme.breakpoints.up('lg')]: {
display: 'none' as 'none',
},
},
/* tslint:disable */ /* tslint:disable */
leftMenu: { leftMenu: {
height: '100%', height: '100%',
...@@ -61,15 +72,25 @@ const styleSheet = (theme) => ({ ...@@ -61,15 +72,25 @@ const styleSheet = (theme) => ({
interface ILeftMenuProps extends React.ClassAttributes<any> { interface ILeftMenuProps extends React.ClassAttributes<any> {
open: any; open: any;
myListItemsCount: number;
closeMenu: (flag) => any; closeMenu: (flag) => any;
classes: any; classes: any;
width: Breakpoint;
t: any; t: any;
} }
class LeftMenu extends React.Component<ILeftMenuProps, any> { class LeftMenu extends React.Component<ILeftMenuProps, any> {
public componentWillReceiveProps(nextProps) {
const {width, closeMenu, open} = nextProps;
const isMobile = mobile.indexOf(width) !== -1;
if (open && !isMobile) {
closeMenu();
}
}
public render() { public render() {
const { t } = this.props; const { t, myListItemsCount, classes } = this.props;
const closeBtn = { const closeBtn = {
color: '#fff', color: '#fff',
...@@ -104,6 +125,12 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> { ...@@ -104,6 +125,12 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
<ListItem button> <ListItem button>
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink> <NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
</ListItem> </ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/sel">
{ t('menu.My List') }
<MyListCount count={ myListItemsCount } classes={ {root: classes.myListCount} }/>
</NavLink>
</ListItem>
</div> </div>
</Drawer> </Drawer>
</div> </div>
...@@ -111,4 +138,4 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> { ...@@ -111,4 +138,4 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
} }
} }
export default translate()((withStyles as any)(styleSheet)(LeftMenu)); export default translate()(compose(withStyles(styleSheet), withWidth())(LeftMenu));
import * as React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
const styles = (theme) => ({
root: {
backgroundColor: 'grey',
borderRadius: '50%',
marginLeft: '10px',
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
top: 'calc(50% - 9px)',
position: 'absolute' as 'absolute',
fontSize: '11px',
minHeight: '1.6em',
minWidth: '1.6em',
padding: '3px',
[theme.breakpoints.down('md')]: {
transform: 'scale(0.7)',
position: 'initial' as 'initial',
margin: '4px 0',
padding: '0 10px',
fontSize: 'initial',
minHeight: '2rem',
},
[theme.breakpoints.down('xs')]: {
float: 'right' as 'right',
},
},
});
const MyListCount = ({count, classes, classname = '', style = {}}) => (
<span style={ style } className={ `${classes.root} ${classname}` }>{ count }</span>
);
export default withStyles(styles)(MyListCount);
...@@ -18,6 +18,7 @@ import UserLoginMenuComponent from './UserLoginMenu'; ...@@ -18,6 +18,7 @@ import UserLoginMenuComponent from './UserLoginMenu';
import UserMenuComponent from './UserMenuComponent'; import UserMenuComponent from './UserMenuComponent';
import LeftMenu from './LeftMenu'; import LeftMenu from './LeftMenu';
import LangListComponent from './LangListComponent'; import LangListComponent from './LangListComponent';
import MyListCount from './MyListCount';
const styleSheet = (theme) => ({ const styleSheet = (theme) => ({
root: { root: {
...@@ -30,13 +31,13 @@ const styleSheet = (theme) => ({ ...@@ -30,13 +31,13 @@ const styleSheet = (theme) => ({
headerRoot: { headerRoot: {
backgroundColor: '#2b2924', backgroundColor: '#2b2924',
height: 'auto', height: 'auto',
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('md')]: {
height: '3.5rem', height: '3.5rem',
}, },
}, },
blockHeader: { blockHeader: {
padding: '0 20px', padding: '0 20px',
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('md')]: {
alignItems: 'baseline' as 'baseline', alignItems: 'baseline' as 'baseline',
}, },
}, },
...@@ -95,7 +96,7 @@ const styleSheet = (theme) => ({ ...@@ -95,7 +96,7 @@ const styleSheet = (theme) => ({
} }
}, },
mobileHidden: { mobileHidden: {
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('md')]: {
display: 'none' display: 'none'
}, },
}, },
...@@ -108,6 +109,7 @@ interface IHeaderProps extends React.ClassAttributes<any> { ...@@ -108,6 +109,7 @@ interface IHeaderProps extends React.ClassAttributes<any> {
loginAppRequest: () => Promise<any>; loginAppRequest: () => Promise<any>;
history: any; history: any;
classes?: any; classes?: any;
myListItemsCount: number;
} }
class Header extends React.Component<IHeaderProps | any, any> { class Header extends React.Component<IHeaderProps | any, any> {
...@@ -151,7 +153,7 @@ class Header extends React.Component<IHeaderProps | any, any> { ...@@ -151,7 +153,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
public render() { public render() {
const { classes, t } = this.props; const { classes, myListItemsCount, t } = this.props;
return ( return (
<div className="header-bar"> <div className="header-bar">
...@@ -162,7 +164,7 @@ class Header extends React.Component<IHeaderProps | any, any> { ...@@ -162,7 +164,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
<img src="images/GENESYS-ICON.svg" className={ classes.logoIcon } /> <img src="images/GENESYS-ICON.svg" className={ classes.logoIcon } />
</IconButton> </IconButton>
<LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } /> <LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } myListItemsCount={ myListItemsCount }/>
</div> </div>
<div className={ classes.flex }> <div className={ classes.flex }>
...@@ -173,9 +175,10 @@ class Header extends React.Component<IHeaderProps | any, any> { ...@@ -173,9 +175,10 @@ class Header extends React.Component<IHeaderProps | any, any> {
<div className="navigation-block float-right"> <div className="navigation-block float-right">
<NavLink activeClassName="active" to="/a">{ t('menu.Accessions') }</NavLink> <NavLink activeClassName="active" to="/a">{ t('menu.Accessions') }</NavLink>
<NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink> <NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink>
<NavLink activeClassName="active" to="/countries">Countries</NavLink>
<NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink> <NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink> <NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
<NavLink activeClassName="active" to="/sel">{ t('menu.My List') }</NavLink> <NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount count={ myListItemsCount }/></NavLink>
</div> </div>
</div> </div>
<div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div> <div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
...@@ -193,6 +196,7 @@ class Header extends React.Component<IHeaderProps | any, any> { ...@@ -193,6 +196,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
login: state.login, login: state.login,
myListItemsCount: state.list.public.myList.count,
}); });
const mapDispatchToProps = (dispatch) => bindActionCreators({ const mapDispatchToProps = (dispatch) => bindActionCreators({
......
...@@ -17,7 +17,7 @@ const styles = (theme) => ({ ...@@ -17,7 +17,7 @@ const styles = (theme) => ({
width: '100%', width: '100%',
overflow: 'visible' as 'visible', overflow: 'visible' as 'visible',
position: 'absolute' as 'absolute', position: 'absolute' as 'absolute',
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('md')]: {
paddingTop: '3rem', paddingTop: '3rem',
}, },
}, },
......
...@@ -105,7 +105,7 @@ $mui-breakpoints: ( ...@@ -105,7 +105,7 @@ $mui-breakpoints: (
display: inline-block; display: inline-block;
position: absolute; position: absolute;
height: 100%; height: 100%;
@media (max-width: 959px) { @media (max-width: 1279px) {
display: none; display: none;
} }
a { a {
...@@ -128,7 +128,7 @@ $mui-breakpoints: ( ...@@ -128,7 +128,7 @@ $mui-breakpoints: (
} }
.mobile-navigation-block { .mobile-navigation-block {
display: none; display: none;
@media (max-width: 959px) { @media (max-width: 1279px) {
display: inline-block; display: inline-block;
} }
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment