Skip to content

GitLab

Commit aabd2355 authored by Oleksii Savran's avatar Oleksii Savran Committed by Viacheslav Pavlov
Browse files

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