Skip to content

Layout changes for motions #1983

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacogr merged 1 commit into from
Dec 2, 2019
Merged

Layout changes for motions #1983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 32 additions & 46 deletions packages/app-council/src/Motions/Motion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import BN from 'bn.js';
import React from 'react';
import { Option } from '@polkadot/types';

import { ActionItem, InputAddress, Labelled, Voting } from '@polkadot/react-components';
import { AddressMini, Voting } from '@polkadot/react-components';
import { withCalls, withMulti } from '@polkadot/react-api';
import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
import { formatNumber } from '@polkadot/util';

import translate from '../translate';

Expand All @@ -29,58 +31,42 @@ function Motion ({ className, hash, proposal, t, votes }: Props): React.ReactEle
const { ayes, index, nays, threshold } = votes;

return (
<ActionItem
className={className}
accessory={
<Voting
hash={hash}
isCouncil
idNumber={index}
proposal={proposal}
/>
}
expandNested
idNumber={index}
proposal={proposal}
>
<div>
<h4>{t('ayes ({{ayes}}/{{threshold}} to approve)', {
replace: {
ayes: ayes.length,
threshold: threshold.toString()
}
})}</h4>
<tr className={className}>
<td className='number top'><h1>{formatNumber(index)}</h1></td>
<ProposalCell proposal={proposal} />
<td className='number top'>
<label>{t('threshold')}</label>
{formatNumber(ayes.length)}/{formatNumber(threshold)}
</td>
<td className='top'>
{ayes.map((address, index): React.ReactNode => (
<Labelled
<AddressMini
key={`${index}:${address}`}
label={t('Aye')}
>
<InputAddress
isDisabled
defaultValue={address}
withLabel={false}
/>
</Labelled>
label={index === 0 ? t('Aye') : undefined}
value={address}
withBalance={false}
/>
))}
<h4>{t('nays ({{nays}})', {
replace: {
nays: nays.length
}
})}</h4>
</td>
<td className='top'>
{nays.map((address, index): React.ReactNode => (
<Labelled
<AddressMini
key={`${index}:${address}`}
label={t('Nay')}
>
<InputAddress
isDisabled
defaultValue={address}
withLabel={false}
/>
</Labelled>
value={address}
withBalance={false}
/>
))}
</div>
</ActionItem>
</td>
<td className='number top together'>
<Voting
hash={hash}
isCouncil
idNumber={index}
proposal={proposal}
/>
</td>
</tr>
);
}

Expand Down
34 changes: 19 additions & 15 deletions packages/app-council/src/Motions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Hash } from '@polkadot/types/interfaces';
import { I18nProps } from '@polkadot/react-components/types';

import React from 'react';
import { CardGrid } from '@polkadot/react-components';
import { Table } from '@polkadot/react-components';

import Motion from './Motion';
import Propose from './Propose';
Expand All @@ -16,22 +16,26 @@ interface Props extends I18nProps {
motions?: Hash[];
}

function Proposals ({ motions, t }: Props): React.ReactElement<Props> {
function Proposals ({ className, motions, t }: Props): React.ReactElement<Props> {
return (
<CardGrid
emptyText={t('No council motions')}
headerText={t('Motions')}
buttons={
<Propose />
<div className={className}>
<Propose />
{motions?.length
? (
<Table>
<Table.Body>
{motions?.map((hash: Hash): React.ReactNode => (
<Motion
hash={hash.toHex()}
key={hash.toHex()}
/>
))}
</Table.Body>
</Table>
)
: t('No council motions')
}
>
{motions?.map((hash: Hash): React.ReactNode => (
<Motion
hash={hash.toHex()}
key={hash.toHex()}
/>
))}
</CardGrid>
</div>
);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/app-democracy/src/Overview/Proposal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ interface Props extends I18nProps {
function Proposal ({ className, t, value: { balance, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
return (
<tr className={className}>
<td className='number toppad'>{formatNumber(index)}</td>
<td className='number top'><h1>{formatNumber(index)}</h1></td>
<td className='top'>
<AddressSmall value={proposer} />
</td>
Expand Down
1 change: 1 addition & 0 deletions packages/app-democracy/src/Overview/ProposalCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ function ProposalCell ({ className, proposal, t }: Props): React.ReactElement<Pr
: t('Details')
}</summary>
<Call
labelHash={t('proposal hash')}
value={proposal}
withHash
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/app-democracy/src/Overview/Referendum.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d

return (
<tr className={className}>
<td className='number toppad'>{formatNumber(value.index)}</td>
<td className='number top'><h1>{formatNumber(value.index)}</h1></td>
<ProposalCell className='top' proposal={value.proposal} />
<td className='number together top'>
<label>{t('remaining')}</label>
Expand Down
77 changes: 31 additions & 46 deletions packages/app-tech-comm/src/Proposals/Proposal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { useApi, trackStream } from '@polkadot/react-hooks';
import { Option } from '@polkadot/types';

import { ActionItem, InputAddress, Labelled, Voting } from '@polkadot/react-components';
import { AddressMini } from '@polkadot/react-components';
import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
import { formatNumber } from '@polkadot/util';

import translate from '../translate';
import Voting from './Voting';

interface Props extends I18nProps {
hash: string;
Expand All @@ -29,57 +31,40 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | n
const { ayes, index, nays, threshold } = votes.unwrap();

return (
<ActionItem
className={className}
accessory={
<Voting
hash={hash}
proposalId={index}
proposal={proposal}
/>
}
expandNested
idNumber={index}
proposal={proposal}
>
<div>
<h4>{t('ayes ({{ayes}}/{{threshold}} to approve)', {
replace: {
ayes: ayes.length,
threshold: threshold.toString()
}
})}</h4>
<tr className={className}>
<td className='number top'><h1>{formatNumber(index)}</h1></td>
<ProposalCell proposal={proposal} />
<td className='number top'>
<label>{t('threshold')}</label>
{formatNumber(ayes.length)}/{formatNumber(threshold)}
</td>
<td className='top'>
{ayes.map((address, index): React.ReactNode => (
<Labelled
<AddressMini
key={`${index}:${address}`}
label={t('Aye')}
>
<InputAddress
isDisabled
defaultValue={address}
withLabel={false}
/>
</Labelled>
label={index === 0 ? t('Aye') : undefined}
value={address}
withBalance={false}
/>
))}
<h4>{t('nays ({{nays}})', {
replace: {
nays: nays.length
}
})}</h4>
</td>
<td className='top'>
{nays.map((address, index): React.ReactNode => (
<Labelled
<AddressMini
key={`${index}:${address}`}
label={t('Nay')}
>
<InputAddress
isDisabled
defaultValue={address}
withLabel={false}
/>
</Labelled>
value={address}
withBalance={false}
/>
))}
</div>
</ActionItem>
</td>
<td className='number top together'>
<Voting
hash={hash}
proposalId={index}
/>
</td>
</tr>
);
}

Expand Down
34 changes: 20 additions & 14 deletions packages/app-tech-comm/src/Proposals/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Hash } from '@polkadot/types/interfaces';
import { I18nProps } from '@polkadot/react-components/types';

import React from 'react';
import { CardGrid } from '@polkadot/react-components';
import { Table } from '@polkadot/react-components';

import Proposal from './Proposal';
import translate from '../translate';
Expand All @@ -15,20 +15,26 @@ interface Props extends I18nProps {
proposals?: Hash[];
}

function Proposals ({ proposals, t }: Props): React.ReactElement<Props> {
function Proposals ({ className, proposals, t }: Props): React.ReactElement<Props> {
return (
<CardGrid
emptyText={t('No committee proposals')}
headerText={t('Proposals')}
// buttons={<Propose />}
>
{proposals?.map((hash: Hash): React.ReactNode => (
<Proposal
hash={hash.toHex()}
key={hash.toHex()}
/>
))}
</CardGrid>
<div className={className}>
{/* <Propose /> */}
{proposals?.length
? (
<Table>
<Table.Body>
{proposals?.map((hash: Hash): React.ReactNode => (
<Proposal
hash={hash.toHex()}
key={hash.toHex()}
/>
))}
</Table.Body>
</Table>
)
: t('No committee proposals')
}
</div>
);
}

Expand Down
5 changes: 3 additions & 2 deletions packages/react-components/src/Call.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@ import translate from './translate';

export interface Props extends I18nProps, BareProps {
children?: React.ReactNode;
labelHash?: React.ReactNode;
value: IExtrinsic | IMethod;
withHash?: boolean;
mortality?: string;
tip?: BN;
}

function Call ({ children, className, style, mortality, tip, value, withHash, t }: Props): React.ReactElement<Props> {
function Call ({ children, className, labelHash, style, mortality, tip, value, withHash, t }: Props): React.ReactElement<Props> {
const params = GenericCall.filterOrigin(value.meta).map(({ name, type }): { name: string; type: TypeDef } => ({
name: name.toString(),
type: getTypeDef(type.toString())
Expand All @@ -46,7 +47,7 @@ function Call ({ children, className, style, mortality, tip, value, withHash, t
{hash && (
<Static
className='hash'
label={t('extrinsic hash')}
label={labelHash || t('extrinsic hash')}
>
{hash.toHex()}
</Static>
Expand Down