Skip to content

GitLab

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

Button bar spacing 

Fixed UserProfileCard actions margin
parent 8ae84e60
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 60 deletions
src/crop/ui/DisplayPage.tsx
View file @ 0e64870a
......@@ -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 @ 0e64870a
......@@ -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 @ 0e64870a
......@@ -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 @ 0e64870a
......@@ -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 @ 0e64870a
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 @ 0e64870a
......@@ -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