Commit 7d374366 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '59-overviews-drill-down'

* 59-overviews-drill-down:
  Overviews: enable drill-down
  Mobile friendly
parents 23eacf6a 4d39250c
...@@ -6,7 +6,7 @@ const origin = typeof window !== 'undefined' ? ...@@ -6,7 +6,7 @@ const origin = typeof window !== 'undefined' ?
export const API_ROOT = `${origin}/proxy`; export const API_ROOT = `${origin}/proxy`;
export const API_BASE_URL = `${API_ROOT}/api/v0`; export const API_BASE_URL = `${API_ROOT}/api/v0`;
export const SERVER_INFO_URL = `${API_BASE_URL}/info/version`; export const SERVER_INFO_URL = `${API_ROOT}/api/v1/info/version`;
export const LOGIN_URL = `${API_ROOT}/oauth/token`; export const LOGIN_URL = `${API_ROOT}/oauth/token`;
export const LOGOUT_URL = `${API_BASE_URL}/me/logout`; export const LOGOUT_URL = `${API_BASE_URL}/me/logout`;
......
...@@ -32,6 +32,8 @@ class AccessionFilter { ...@@ -32,6 +32,8 @@ class AccessionFilter {
public taxa: TaxonomyFilter; public taxa: TaxonomyFilter;
public uuid: string[]; public uuid: string[];
public version: number[]; public version: number[];
public sgsv: boolean;
public storage: number[];
public NOT: AccessionFilter; public NOT: AccessionFilter;
} }
......
...@@ -12,35 +12,47 @@ import { navigateTo } from 'actions/navigation'; ...@@ -12,35 +12,47 @@ import { navigateTo } from 'actions/navigation';
import MuiTabs from '@material-ui/core/Tabs'; import MuiTabs from '@material-ui/core/Tabs';
import MuiTab from '@material-ui/core/Tab'; import MuiTab from '@material-ui/core/Tab';
import {withStyles} from '@material-ui/core/styles'; import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
/*tslint:disable*/ /*tslint:disable*/
const styles = (theme) => ({ const styles = (theme) => ({
root: { root: {
width: '100%', width: '100%',
height: '48px', display: 'flex' as 'flex',
height: 'auto',
borderBottom: '1px #ccc solid', borderBottom: '1px #ccc solid',
[theme.breakpoints.down('md')]: {
height: '96px',
},
}, },
actionsArea: { actionsArea: {
display: 'flex' as 'flex', display: 'flex' as 'flex',
alignItems: 'center' as 'center', alignItems: 'center' as 'center',
position: 'absolute' as 'absolute', position: 'sticky' as 'sticky',
overflow: 'hidden' as 'hidden', overflow: 'hidden' as 'hidden',
height: '48px', height: '48px',
right: 0, left: '100%',
padding: '0 16px',
'& > * > *': { '& > * > *': {
margin: '0 8px', margin: '8px',
[theme.breakpoints.down('sm')]: {
width: '100%',
margin: '8px 0',
},
}, },
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('sm')]: {
right: 'auto' as 'auto', position: 'initial' as 'initial',
overflow: 'initial' as 'initial',
display: 'initial' as 'initial',
padding: '0',
height: 'auto' as 'auto',
marginTop: '48px',
width: '100%',
'& > *': {
width: '100%',
}
}, },
}, },
tabsArea: { tabsArea: {
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('sm')]: {
position: 'relative' as 'relative', position: 'absolute' as 'absolute',
bottom: '-48px'
}, },
} }
}); });
...@@ -50,7 +62,6 @@ interface ITabProps extends React.Props<any> { ...@@ -50,7 +62,6 @@ interface ITabProps extends React.Props<any> {
name?: string; name?: string;
to: string; to: string;
children: any; children: any;
actions?: any;
} }
class Tab extends React.Component<ITabProps, any> { class Tab extends React.Component<ITabProps, any> {
...@@ -83,16 +94,16 @@ class Tabs extends React.Component<any> { ...@@ -83,16 +94,16 @@ class Tabs extends React.Component<any> {
}; };
return ( return (
<div className={ classes.root }> <Grid container className={ classes.root }>
<div className={ `pr-20 pl-20 float-right ${classes.actionsArea}` }> <Grid item className={ `float-left ${classes.tabsArea}` }>
{ actions }
</div>
<div className={ `float-left ${classes.tabsArea}` }>
<MuiTabs value={ currentTab } indicatorColor="primary" onChange={ tabChange }> <MuiTabs value={ currentTab } indicatorColor="primary" onChange={ tabChange }>
{ tabs.map((tab) => <MuiTab key={ tab.to } label={ tab.label } />) } { tabs.map((tab) => <MuiTab key={ tab.to } label={ tab.label } />) }
</MuiTabs> </MuiTabs>
</div> </Grid>
</div> <Grid item className={ `float-right ${classes.actionsArea}` }>
{ actions }
</Grid>
</Grid>
); );
} }
} }
......
...@@ -78,6 +78,7 @@ class DateFilterInternal extends React.Component<IDateFilterInternal, any> { ...@@ -78,6 +78,7 @@ class DateFilterInternal extends React.Component<IDateFilterInternal, any> {
return ( return (
<div> <div>
<TextField <TextField
style={ {width: '50%'} }
label={ label } label={ label }
type="date" type="date"
value={ this.toDateString(this.state.dateA) } value={ this.toDateString(this.state.dateA) }
...@@ -85,6 +86,7 @@ class DateFilterInternal extends React.Component<IDateFilterInternal, any> { ...@@ -85,6 +86,7 @@ class DateFilterInternal extends React.Component<IDateFilterInternal, any> {
InputLabelProps={ { shrink: true } } InputLabelProps={ { shrink: true } }
/> />
<TextField <TextField
style={ {width: '50%'} }
label={ label } label={ label }
type="date" type="date"
value={ this.toDateString(this.state.dateB) } value={ this.toDateString(this.state.dateB) }
......
...@@ -12,14 +12,17 @@ import {cleanFilters} from 'utilities'; ...@@ -12,14 +12,17 @@ import {cleanFilters} from 'utilities';
const styles = (theme) => ({ const styles = (theme) => ({
filtersBlock: { filtersBlock: {
marginBottom: '75px', overflow: 'visible' as 'visible',
}, },
stickyButtonContainer: { stickyButtonContainer: {
position: 'absolute' as 'absolute', position: 'sticky' as 'sticky',
bottom: '10px', bottom: '2rem',
width: 'calc(100% - 35px)', width: 'calc(100% - 35px)',
backgroundColor: '#fff', backgroundColor: '#fff',
overflow: 'hidden' as 'hidden', overflow: 'hidden' as 'hidden',
[theme.breakpoints.down('sm')]: {
bottom: '3rem',
},
}, },
btnGreen: theme.buttons.green, btnGreen: theme.buttons.green,
btnReset: theme.buttons.reset, btnReset: theme.buttons.reset,
......
...@@ -62,12 +62,14 @@ class NumberFilterInternal extends React.Component<INumberFilterInternal, any> { ...@@ -62,12 +62,14 @@ class NumberFilterInternal extends React.Component<INumberFilterInternal, any> {
return ( return (
<div> <div>
<TextField <TextField
style={ {width: '50%'} }
label={ label } label={ label }
value={ this.state.textA } value={ this.state.textA }
placeholder={ 'From including' } placeholder={ 'From including' }
onChange={ this.textAChange } onChange={ this.textAChange }
/> />
<TextField <TextField
style={ {width: '50%'} }
label={ label } label={ label }
value={ this.state.textB } value={ this.state.textB }
placeholder={ 'To including' } placeholder={ 'To including' }
......
...@@ -10,7 +10,6 @@ import AppBar from '@material-ui/core/AppBar'; ...@@ -10,7 +10,6 @@ import AppBar from '@material-ui/core/AppBar';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {ROLE_ADMINISTRATOR, ROLE_CLIENT, ROLE_USER} from 'constants/userRoles'; import {ROLE_ADMINISTRATOR, ROLE_CLIENT, ROLE_USER} from 'constants/userRoles';
import {saveCookies} from 'utilities'; import {saveCookies} from 'utilities';
...@@ -19,7 +18,7 @@ import UserMenuComponent from './UserMenuComponent'; ...@@ -19,7 +18,7 @@ import UserMenuComponent from './UserMenuComponent';
import LeftMenu from './LeftMenu'; import LeftMenu from './LeftMenu';
import LangListComponent from './LangListComponent'; import LangListComponent from './LangListComponent';
const styleSheet = { const styleSheet = (theme) => ({
root: { root: {
marginTop: 90, marginTop: 90,
width: '100%', width: '100%',
...@@ -30,9 +29,15 @@ const styleSheet = { ...@@ -30,9 +29,15 @@ const styleSheet = {
headerRoot: { headerRoot: {
backgroundColor: '#2b2924', backgroundColor: '#2b2924',
height: 'auto', height: 'auto',
[theme.breakpoints.down('sm')]: {
height: '3.5rem',
},
}, },
blockHeader: { blockHeader: {
padding: '0 20px', padding: '0 20px',
[theme.breakpoints.down('sm')]: {
alignItems: 'baseline' as 'baseline',
},
}, },
/*tslint:disable*/ /*tslint:disable*/
navLogo: { navLogo: {
...@@ -88,8 +93,13 @@ const styleSheet = { ...@@ -88,8 +93,13 @@ const styleSheet = {
backgroundColor: 'transparent' as 'transparent', backgroundColor: 'transparent' as 'transparent',
} }
}, },
mobileHidden: {
[theme.breakpoints.down('sm')]: {
display: 'none'
},
},
/* tslint:enable */ /* tslint:enable */
}; });
interface IHeaderProps extends React.ClassAttributes<any> { interface IHeaderProps extends React.ClassAttributes<any> {
login: any; login: any;
...@@ -150,24 +160,24 @@ class Header extends React.Component<IHeaderProps | any, any> { ...@@ -150,24 +160,24 @@ class Header extends React.Component<IHeaderProps | any, any> {
<Toolbar className={ classes.blockHeader }> <Toolbar className={ classes.blockHeader }>
<div className="mobile-navigation-block"> <div className="mobile-navigation-block">
<IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary" onClick={ this.handleLeftMenuOpen } > <IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary" onClick={ this.handleLeftMenuOpen } >
<MenuIcon /> <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 } />
</div> </div>
<div className={ classes.flex }> <div className={ classes.flex }>
<Link to="/" className={ `float-left ${this.props.classes.navLogo}` }> <Link to="/" className={ `float-left ${this.props.classes.navLogo} ${classes.mobileHidden}` }>
<img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } /> <img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } />
<img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } /> <img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
</Link> </Link>
<div className="navigation-block"> <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="/wiews">{ t('menu.Institutes') }</NavLink> <NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
</div> </div>
</div> </div>
<div>{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div> <div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
<div> <div>
<LangListComponent /> <LangListComponent />
......
...@@ -17,6 +17,9 @@ const styles = (theme) => ({ ...@@ -17,6 +17,9 @@ 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')]: {
paddingTop: '3rem',
},
}, },
content: { content: {
flexGrow: 1, flexGrow: 1,
......
import * as React from 'react'; import * as React from 'react';
import Drawer from '@material-ui/core/Drawer'; import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
const SidebarDrawer = ({variant, className, isOpen, children}) => ( const SidebarDrawer = ({variant, className, isOpen, children}) => (
<Drawer <SwipeableDrawer
variant={ variant } variant={ variant }
className={ className } className={ className }
open={ isOpen } open={ isOpen }
onClose={ () => console.log('Sidebar closed') }
onOpen={ () => console.log('Sidebar opened') }
> >
{ children } { children }
</Drawer> </SwipeableDrawer>
); );
export default SidebarDrawer; export default SidebarDrawer;
import * as React from 'react'; import * as React from 'react';
import {bindActionCreators} from 'redux'; import {bindActionCreators, compose} from 'redux';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {withStyles} from '@material-ui/core/styles'; import {withStyles} from '@material-ui/core/styles';
import SidebarDrawer from './SidebarDrawer'; import SidebarDrawer from './SidebarDrawer';
...@@ -7,26 +7,45 @@ import ChevronRight from '@material-ui/icons/ChevronRight'; ...@@ -7,26 +7,45 @@ import ChevronRight from '@material-ui/icons/ChevronRight';
import ChevronLeft from '@material-ui/icons/ChevronLeft'; import ChevronLeft from '@material-ui/icons/ChevronLeft';
import { collapseSidebar } from 'actions/layout'; import { collapseSidebar } from 'actions/layout';
import withWidth from '@material-ui/core/withWidth/withWidth';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
interface ISidebarProps extends React.ClassAttributes<any> { interface ISidebarProps extends React.ClassAttributes<any> {
classes: any; classes: any;
sidebarContent: any; sidebarContent: any;
collapseSidebar: (isOpen: boolean) => void; collapseSidebar: (isOpen: boolean) => void;
isOpen: boolean; isOpen: boolean;
width: Breakpoint;
} }
const mobile = ['sm', 'xs'] as Breakpoint[];
const styles = (theme) => ({ const styles = (theme) => ({
/* tslint:disable */ /* tslint:disable */
drawer: { drawer: {
position: 'sticky' as 'sticky', position: 'sticky' as 'sticky',
top: '72px', top: '72px',
zIndex: 10,
height: 'calc(100vh - 72px)', height: 'calc(100vh - 72px)',
'& > div': { '& > div': {
top: 'auto' as 'auto', top: 'auto' as 'auto',
position: 'initial' as 'initial', position: 'initial' as 'initial',
height: '100%' as '100%' height: '100%' as '100%'
}, },
[theme.breakpoints.down('sm')]: {
height: 'calc(100vh - 3rem)',
top: '3rem',
maxWidth: '90%',
position: 'fixed' as 'fixed',
zIndex: 15,
}
},
drawerCollapsed: {
[theme.breakpoints.down('sm')]: {
width: 'auto',
position: 'sticky' as 'sticky',
}
}, },
sidebar: { sidebar: {
whiteSpace: 'nowrap' as 'nowrap', whiteSpace: 'nowrap' as 'nowrap',
...@@ -60,13 +79,21 @@ const styles = (theme) => ({ ...@@ -60,13 +79,21 @@ const styles = (theme) => ({
}, },
sidebarContents: { sidebarContents: {
width: '100%', width: '100%',
minHeight: 'calc(100% - 2rem - 75px)', minHeight: 'calc(100% - 2rem)',
height: 'auto' as 'auto', height: 'auto' as 'auto',
[theme.breakpoints.down('sm')]: {
minHeight: 'calc(100% - 3rem)',
},
},
sidebarContentsCollapsed: {
minHeight: 'calc(100% - 52px)',
[theme.breakpoints.down('sm')]: {
minHeight: 'calc(100% - 38px)',
},
}, },
/* tslint:disable */ /* tslint:disable */
collapseButton: { collapseButton: {
width: '100%', width: '100%',
marginTop: '75px',
position: 'sticky' as 'sticky', position: 'sticky' as 'sticky',
backgroundColor: '#e6e6e6', backgroundColor: '#e6e6e6',
height: '2rem', height: '2rem',
...@@ -82,15 +109,22 @@ const styles = (theme) => ({ ...@@ -82,15 +109,22 @@ const styles = (theme) => ({
display: 'flex' as 'flex', display: 'flex' as 'flex',
alignItems: 'center' as 'center', alignItems: 'center' as 'center',
height: '100%', height: '100%',
fontSize: '16px' fontSize: '16px',
[theme.breakpoints.down('sm')]: {
fontSize: '1.5rem',
},
}, },
'& > span > svg':{ '& > span > svg':{
'html[dir="rtl"] &' : { 'html[dir="rtl"] &' : {
transform: 'rotate(180deg)', transform: 'rotate(180deg)',
}, },
} },
[theme.breakpoints.down('sm')]: {
height: '3rem',
},
}, },
buttonCollapsed: { buttonCollapsed: {
top: '100%',
// width: '72px', // width: '72px',
transition: theme.transitions.create('width', { transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
...@@ -101,7 +135,20 @@ const styles = (theme) => ({ ...@@ -101,7 +135,20 @@ const styles = (theme) => ({
transform: 'rotate(180deg)', transform: 'rotate(180deg)',
}, },
} }
} },
pageContent: {
zIndex: -2,
backgroundColor: '#878787',
opacity: 0.4,
position: 'fixed' as 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0,
[theme.breakpoints.up('md')]: {
display: 'none' as 'none',
},
},
}); });
class SidebarWrapper extends React.Component<ISidebarProps, any> { class SidebarWrapper extends React.Component<ISidebarProps, any> {
...@@ -115,11 +162,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> { ...@@ -115,11 +162,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> {
} }
public render() { public render() {
const { sidebarContent, classes, isOpen } = this.props; const { sidebarContent, classes, isOpen, width } = this.props;
const isMobile = mobile.indexOf(width) !== -1;
return ( return (
<SidebarDrawer <SidebarDrawer
className={ classes.drawer } className={ `${classes.drawer} ${!isOpen ? classes.drawerCollapsed : ''}` }
isOpen={ isOpen } isOpen={ isOpen }
variant={ 'permanent' } variant={ 'permanent' }
> >
...@@ -133,11 +181,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> { ...@@ -133,11 +181,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> {
className={ `${classes.collapseButton}` }> className={ `${classes.collapseButton}` }>
<span><ChevronLeft /> Collapse</span> <span><ChevronLeft /> Collapse</span>
</div> </div>
<div className={classes.pageContent} onClick={() => { isMobile ? this.setIsCollapsed(true) : null; } }> </div>
</div> </div>
} }
{ !isOpen && { !isOpen &&
<div className={ `${ classes.sidebar } ${classes.sidebarCollapsed}` }> <div className={ `${ classes.sidebar } ${classes.sidebarCollapsed}` }>