Skip to content

GitLab

Commit a44b25d8 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

Merge branch '274-button-bar-spacing' into 'master' 

Button bar spacing

Closes #274

See merge request genesys-pgr/genesys-ui!287
parents 8ae84e60 0e64870a
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 60 deletions
src/crop/ui/DisplayPage.tsx
View file @ a44b25d8
......@@ -24,7 +24,6 @@ import PieChartCard from 'ui/common/pie-chart/PieChartCard';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import Authorize from 'ui/common/authorized/Authorize';
import PageTitle from 'ui/common/PageTitle';
import { CardActions } from 'ui/common/Card';
import { Link } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import BlurbText from 'cms/ui/c/BlurbText';
......@@ -89,7 +88,19 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{ !crop || crop.shortName !== shortName ? (<Loading/>) :
<PageContents className="pt-1rem">
<MainSection title={ t('crop.public.p.display.generalInformation') }>
<MainSection
title={ t('crop.public.p.display.generalInformation') }
cardActions={
<ButtonBar>
<Button onClick={ this.applyCropFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
{ crop._permissions.manage && <Link to={ `/c/${crop.shortName}/edit` }><Button>{ t('common:action.edit') }</Button></Link> }
{ crop._permissions.manage && <Permissions clazz={ Crop.clazz } id={ crop.id }/> }
<Authorize role="ROLE_ADMINISTRATOR">
<Button onClick={ this.relinkAccessions }>{ t('crop.admin.p.link') }</Button>
</Authorize>
</ButtonBar>
}
>
{ cropDetails.blurb && cropDetails.blurb.body &&
<div className="mb-20">
<BlurbText body={ cropDetails.blurb.body } />
......@@ -101,16 +112,6 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<a onClick={ this.applyCropFilter }><Number value={ cropDetails.accessionCount || 0 } /></a>
</PropertiesItem>
</Properties>
<CardActions className="container-spacing-vertical mt-15">
<ButtonBar>
<Button onClick={ this.applyCropFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
{ crop._permissions.manage && <Link to={ `/c/${crop.shortName}/edit` }><Button>{ t('common:action.edit') }</Button></Link> }
{ crop._permissions.manage && <Permissions clazz={ Crop.clazz } id={ crop.id }/> }
<Authorize role="ROLE_ADMINISTRATOR">
<Button onClick={ this.relinkAccessions }>{ t('crop.admin.p.link') }</Button>
</Authorize>
</ButtonBar>
</CardActions>
</MainSection>
{ crop.overview &&
......
src/institutes/ui/DisplayPage.tsx
View file @ a44b25d8
......@@ -26,7 +26,7 @@ import PieChartCard from 'ui/common/pie-chart/PieChartCard';
import PrettyDate from 'ui/common/time/PrettyDate';
import { CountryLink } from 'ui/genesys/Links';
import BarChart from 'ui/common/bar-chart';
import { CardActions } from 'ui/common/Card';
// 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';
......@@ -151,7 +151,50 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{ institute &&
<PageContents className="pt-1rem">
<MainSection title={ t('institutes.public.p.display.title') }>
<MainSection
title={ t('institutes.public.p.display.title') }
cardActions={
<ButtonBar barLabelText={ t('institutes.public.p.display.actions') }>
<Button onClick={ this.applyInstituteCodeFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
{ (userRoles.findIndex((role) => role === 'ROLE_ADMINISTRATOR') !== -1 || institute.details._permissions.manage) &&
<Link to={ `/dashboard/wiews/${institute.details.code}/files/` }>
<Button>{ t('institutes.public.p.display.browseFiles') }</Button>
</Link>
}
<Button onClick={ this.applyFilterForOverview }>{ t('accessions.tab.overview') }</Button>
{ this.state.authenticated &&
<DownloadDialog
downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
slug={ slug }
postParams={ { mcpd: 'mcpd' } }
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` }
/>
}
{ this.state.authenticated &&
<DownloadDialog
downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
slug={ slug }
postParams={ { pdci: 'pdci' } }
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` }
/>
}
<DownloadDialog
downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
slug={ slug }
postParams={ { dwca: 'dwca' } }
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.zip')}` }
/>
{ 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>
}
>
{ institute.blurb && institute.blurb.body &&
<div className="mb-20">
<BlurbText body={ institute.blurb.body } />
......@@ -175,36 +218,6 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<a onClick={ this.applyInstituteCodeFilter }><Number value={ institute.details.accessionCount } /></a>
</PropertiesItem>
</Properties>
<CardActions className="container-spacing-vertical mt-15">
<ButtonBar barLabelText={ t('institutes.public.p.display.actions') }>
<Button onClick={ this.applyInstituteCodeFilter }>{ t('institutes.public.p.display.browseAccessions') }</Button>
{ (userRoles.findIndex((role) => role === 'ROLE_ADMINISTRATOR') !== -1 || institute.details._permissions.manage) &&
<Link to={ `/dashboard/wiews/${institute.details.code}/files/` }>
<Button>{ t('institutes.public.p.display.browseFiles') }</Button>
</Link>
}
<Button onClick={ this.applyFilterForOverview }>{ t('accessions.tab.overview') }</Button>
{ this.state.authenticated &&
<DownloadDialog downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
slug={ slug }
postParams={ { mcpd: 'mcpd' } }
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.MCPD')}` } />
}
{ this.state.authenticated &&
<DownloadDialog downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
slug={ slug }
postParams={ { pdci: 'pdci' } }
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.PDCI_short')}` } />
}
<DownloadDialog downloadUrl={ `/proxy/api/v1/wiews/${code}/download` }
slug={ slug }
postParams={ { dwca: 'dwca' } }
buttonTitle={ `${t('common:action.download')} ${t('institutes.public.p.display.zip')}` } />
{ 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>
{ institute.details.latitude !== null && institute.details.longitude !== null &&
......
src/networks/ui/DisplayPage.tsx
View file @ a44b25d8
......@@ -27,7 +27,6 @@ import PagedLoader from 'ui/common/PagedLoader';
import {InstituteLink} from 'ui/genesys/Links';
import { PropertiesItem, Properties } from 'ui/common/Properties';
import BlurbText from 'cms/ui/c/BlurbText';
import { CardActions } from 'ui/common/Card';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import { Button } from '@material-ui/core';
import confirmAlert from 'utilities/confirmAlert';
......@@ -119,7 +118,18 @@ class DisplayPage extends React.Component<IDisplayPageProps> {
{ error && <div>{ JSON.stringify(error) }</div> }
{ network &&
<PageContents className="pt-1rem">
<MainSection title={ t('networks.public.p.display.title') }>
<MainSection
title={ t('networks.public.p.display.title') }
cardActions={
<ButtonBar barLabelText={ t('networks.public.p.display.actions') }>
<Button onClick={ this.applyNetworkFilter }>{ t('networks.public.p.display.browseAccessions') }</Button>
<Button onClick={ this.applyNetworkOverviewFilter }>{ t('networks.public.p.display.overview') }</Button>
<Authorize role="ROLE_ADMINISTRATOR">
<Button onClick={ this.onDelete }>{ t('common:action.delete') }</Button>
</Authorize>
</ButtonBar>
}
>
{ blurb &&
<div className="mb-20">
<BlurbText body={ blurb.body } />
......@@ -129,15 +139,6 @@ class DisplayPage extends React.Component<IDisplayPageProps> {
<PropertiesItem title={ t('networks.public.c.card.title') }>{ network.title }</PropertiesItem>
<PropertiesItem title={ t('networks.public.c.card.slug') }>{ network.slug }</PropertiesItem>
</Properties>
<CardActions className="container-spacing-vertical mt-15">
<ButtonBar barLabelText={ t('networks.public.p.display.actions') }>
<Button onClick={ this.applyNetworkFilter }>{ t('networks.public.p.display.browseAccessions') }</Button>
<Button onClick={ this.applyNetworkOverviewFilter }>{ t('networks.public.p.display.overview') }</Button>
<Authorize role="ROLE_ADMINISTRATOR">
<Button onClick={ this.onDelete }>{ t('common:action.delete') }</Button>
</Authorize>
</ButtonBar>
</CardActions>
</MainSection>
{ institutes && institutes.content && institutes.content.length > 0 &&
<PageSection title={ t('networks.common.locations') }>
......
src/ui/common/buttons/ButtonBar.tsx
View file @ a44b25d8
......@@ -135,12 +135,12 @@ class ButtonBar extends React.Component<IButtonBarProps, any> {
}
private handleMenuItemClick = (event, index) => {
// this.setState({ anchorEl: null });
this.setState({ anchorEl: null });
this.setState({ hidden: true });
}
private handleClose = () => {
// this.setState({ anchorEl: null });
this.setState({ anchorEl: null });
this.setState({ hidden: true });
}
......
src/ui/layout/PageLayout.tsx
View file @ a44b25d8
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Card, {CardHeader, CardContent} from 'ui/common/Card';
import Card, {CardHeader, CardContent, CardActions} from 'ui/common/Card';
// import * as classnames from 'classnames';
import Footer from './Footer';
......@@ -85,10 +85,13 @@ const Layout = ({classes, children = null, sidebar = null, withFooter = false}:
);
const Contents = ({classes, style = {}, children = null, className = ''}) => children && <div style={ style } className={ `${className} ${classes.pageContents}` }>{ children }</div>;
const Section1 = ({classes, className = '', title, children = null}) => children && (
const Section1 = ({classes, className = '', title, children = null, cardActions = null}) => children && (
<Card className={ classes.mainSection }>
<CardHeader classes={ { title: classes.mainSectionTitle } } className={ className } title={ title } />
<CardContent>{ children }</CardContent>
{ cardActions &&
<CardActions>{ cardActions }</CardActions>
}
</Card>
);
......
src/user/ui/dashboard/c/FtpPasswordDialog.tsx
View file @ a44b25d8
......@@ -32,7 +32,7 @@ class ChangePasswordPage extends React.Component<IFtpPasswordPage> {
const { userProfile, t } = this.props;
return (
<div>
<Button className="m-20" onClick={ this.show }>{ t('user.dashboard.p.ftpPassword.generatePassword') }</Button>
<Button onClick={ this.show }>{ t('user.dashboard.p.ftpPassword.generatePassword') }</Button>
<Dialog open={ this.state.open } onClose={ this.hide } maxWidth="sm" fullWidth>
<DialogTitle>{ this.state.generatedPassword ? t('user.dashboard.p.ftpPassword.newCredentials') : t('user.dashboard.p.ftpPassword.credentials') }</DialogTitle>
<DialogContent>
......
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