Skip to content

GitLab

G
Genesys Website
Commit aabd2355 authored by Oleksii Savran's avatar Oleksii Savran Committed by Viacheslav Pavlov
Browse files
Options

ButtonBar component 

ButtonBar component fixed
parent a4da5efc
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 30 deletions
locales/en/translations.json
View file @ aabd2355
......@@ -372,7 +372,8 @@
},
"browse": {
"title": "Accession browser",
"subTitle": "Explore curated sets of accessions"
"subTitle": "Explore curated sets of accessions",
"kml": "KML"
}
}
},
......
src/accessions/translations.json
View file @ aabd2355
......@@ -53,7 +53,8 @@
},
"browse": {
"title": "Accession browser",
"subTitle": "Explore curated sets of accessions"
"subTitle": "Explore curated sets of accessions",
"kml": "KML"
}
}
},
......
src/accessions/ui/BrowsePage.tsx
View file @ aabd2355
......@@ -24,6 +24,7 @@ import Tabs, { Tab } from 'ui/common/Tabs';
import AccessionFilters from './c/Filters';
// TODO only for demo
import Button from '@material-ui/core/Button';
import ButtonBar from 'ui/common/buttons/ButtonBar';
class BrowsePage extends BrowsePageTemplate<Accession> {
protected static needs = [
......@@ -59,11 +60,11 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
<Tabs
tab={ currentTab }
actions={
<span>
<ButtonBar>
<Button variant="contained">{ t('TODO-Demo Share') }</Button>
<Button variant="contained">{ t('TODO-Demo Select all') }</Button>
<Button variant="contained">{ t('TODO-Demo Delete') }</Button>
<Button variant="contained">{ t('TODO-Demo Share') }</Button>
</span>
</ButtonBar>
}
>
<Tab name="data" to={ `/a/${filterCode || ''}` }>{ t('accessions.tab.data') }</Tab>
......
src/accessions/ui/MapPage.tsx
View file @ aabd2355
......@@ -12,6 +12,7 @@ import ContentHeader from 'ui/common/heading/ContentHeader';
import Button from '@material-ui/core/Button';
import Tabs, { Tab } from 'ui/common/Tabs';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import ButtonBar from 'ui/common/buttons/ButtonBar';
let Map;
......@@ -88,12 +89,14 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
<Tabs
tab={ currentTab }
actions={
<ButtonBar>
<span>
<form method="post" action="/proxy/api/v1/acn/downloadKml">
<input type="hidden" name="f" value={ filterCode } />
<Button type="submit">Download KML</Button>
<Button type="submit">{ `${t('common:action.download')} ${t('accessions.public.p.browse.kml')}` }</Button>
</form>
</span>
</ButtonBar>
}
>
<Tab name="data" to={ `/a/${filterCode || ''}` }>{ t('accessions.tab.data') }</Tab>
......
src/institutes/ui/DisplayPage.tsx
View file @ aabd2355
......@@ -31,6 +31,7 @@ import { CardActions } from 'ui/common/Card';
import Button from '@material-ui/core/Button';
import Permissions from 'ui/common/permission/Permissions';
import FaoInstitute from 'model/genesys/FaoInstitute';
import ButtonBar from 'ui/common/buttons/ButtonBar';
interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any;
......@@ -140,18 +141,15 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</Properties>
<CardActions className="container-spacing-vertical mt-15">
<Button onClick={ this.applyInstituteCodeFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
<Button onClick={ this.applyFilterForOverview }>{ t('accessions.tab.overview') }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.zip')}` }</Button>
{ institute.details._permissions.manage &&
<Link to={ `/dashboard/wiews/${institute.details.code}/edit` }>
<Button variant="contained">{ t('common:action.edit') }</Button>
</Link> }
{ institute.details._permissions.manage &&
<Permissions clazz={ FaoInstitute.clazz } id={ institute.details.id }/>
}
<ButtonBar>
<Button onClick={ this.applyInstituteCodeFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
<Button onClick={ this.applyFilterForOverview }>{ t('accessions.tab.overview') }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` }</Button>
<Button onClick={ () => null }>{ `${t('common:action.download')} ${t('institutes.public.p.display.zip')}` }</Button>
{ institute.details._permissions.manage && <Link to={ `/dashboard/wiews/${institute.details.code}/edit` }><Button>{ t('common:action.edit') }</Button></Link> }
{ institute.details._permissions.manage && <Permissions clazz={ FaoInstitute.clazz } id={ institute.details.id }/> }
</ButtonBar>
</CardActions>
</MainSection>
......
src/ui/common/Tabs.tsx
View file @ aabd2355
......@@ -22,6 +22,8 @@ const styles = (theme) => ({
display: 'flex' as 'flex',
height: 'auto',
borderBottom: '1px #ccc solid',
alignItems: 'center' as 'center',
justifyContent: 'space-between' as 'space-between',
},
actionsArea: {
display: 'flex' as 'flex',
......@@ -30,31 +32,28 @@ const styles = (theme) => ({
overflow: 'hidden' as 'hidden',
height: '48px',
left: '100%',
padding: '0 16px',
'& > * > *': {
margin: '8px',
'& > * > button': {
marginLeft: '15px',
[theme.breakpoints.down('sm')]: {
marginTop: '5px',
marginBottom: '5px',
},
[theme.breakpoints.down('xs')]: {
marginLeft: '5px',
width: '100%',
margin: '8px 0',
},
},
[theme.breakpoints.down('sm')]: {
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: {
[theme.breakpoints.down('sm')]: {
position: 'absolute' as 'absolute',
},
alignSelf: 'flex-end' as 'flex-end',
}
});
/*tslint:enable*/
......@@ -95,7 +94,7 @@ class Tabs extends React.Component<any> {
};
return (
<Grid container className={ classes.root }>
<Grid container className={ `pr-10 ${classes.root}` }>
<Grid item className={ `float-left ${classes.tabsArea}` }>
<MuiTabs value={ currentTab } indicatorColor="primary" onChange={ tabChange }>
{ tabs.map((tab) => <MuiTab key={ tab.to } label={ typeof tab.label === 'string' ? t(tab.label) : tab.label } />) }
......
src/ui/common/buttons/ButtonBar.tsx 0 → 100644
View file @ aabd2355
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ReorderIcon from '@material-ui/icons/Reorder';
import Button from '@material-ui/core/Button';
const styles = (theme) => ({
root: {
width: '100%',
display: 'flex' as 'flex',
flexFlow: 'row wrap' as 'row wrap',
justifyContent: 'flex-start' as 'flex-start',
[theme.breakpoints.down('md')]: {
justifyContent: 'flex-end' as 'flex-end',
},
},
/* tslint:disable */
selected: {
padding: '0',
'& > *:first-child': {
display: 'block',
'@media (min-width: 940px) and (max-width: 1060px)': {
display: 'none',
},
[theme.breakpoints.down('xs')]: {
display: 'none',
},
},
},
menuItem: {
padding: '6px 0',
'& > button': {
width: '100%',
height: '100%',
'& > span': {
justifyContent: 'flex-start' as 'flex-start',
}
},
'& > a': {
width: '100%',
'& > button': {
width: '100%',
'& > span': {
justifyContent: 'flex-start' as 'flex-start',
}
},
},
'& > span': {
width: '100%',
'& > button': {
width: '100%',
margin: '0',
'& > span': {
justifyContent: 'flex-start' as 'flex-start',
}
},
}
},
mobile: {
display: 'none',
[theme.breakpoints.down('md')]: {
display: 'block',
},
},
desktop: {
display: 'block',
'& > *': {
display: 'inline-flex',
marginRight: '10px',
},
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
icon: {
margin: '5px',
[theme.breakpoints.down('xs')]: {
margin: '10px',
}
},
list: {
'& > div > ul': {
padding: '0',
'& button': {
boxShadow: 'none',
backgroundColor: 'transparent',
}
},
},
firstAction: {
padding: '0',
'& > span': {
color: 'rgba(0, 0, 0, 0.87)',
'& > button': {
boxShadow: 'none',
backgroundColor: 'transparent',
}
},
}
/* tslint:enable */
});
interface IButtonBarProps extends React.Props<any> {
classes?: any;
children?: any[];
}
class ButtonBar extends React.Component<IButtonBarProps, any> {
constructor(props: any) {
super(props);
this.state = {
anchorEl: null,
selectedIndex: 0,
};
}
private handleClickListItem = (event) => {
this.setState({ anchorEl: event.currentTarget });
}
private handleMenuItemClick = (event, index) => {
this.setState({ selectedIndex: index, anchorEl: null });
}
private handleClose = () => {
this.setState({ anchorEl: null });
}
public render() {
const { classes, children } = this.props;
const { anchorEl } = this.state;
const childrenArr = React.Children.toArray(children);
return (
<div className={ classes.root }>
<div className={ classes.mobile }>
<List className={ `p-0` }>
<ListItem
className={ `p-0 ${ classes.selected }` }
button
aria-haspopup="true"
aria-controls="button-menu"
onClick={ this.handleClickListItem }
>
<Button disabled className={ classes.firstAction }>{ childrenArr[this.state.selectedIndex] }</Button>
<ListItemIcon className={ `${classes.icon}` }>
<ReorderIcon />
</ListItemIcon>
</ListItem>
</List>
<Menu
id="button-menu"
anchorEl={ anchorEl }
open={ Boolean(anchorEl) }
onClose={ this.handleClose }
className={ classes.list }
>
{ childrenArr.map((button, index) => (
button && (
<MenuItem
key={ index }
selected={ null }
onClick={ (event) => this.handleMenuItemClick(event, index) }
className={ classes.menuItem }
>
{ button }
</MenuItem>
)
)) }
</Menu>
</div>
<div className={ classes.desktop }>
{ children }
</div>
</div>
);
}
}
export default withStyles(styles)(ButtonBar);
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