From 53339e5f1bcfe10fcfe08ad4ee3d5a5607183ccd Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 19 Jun 2019 13:13:48 +0200 Subject: [PATCH] Democracy layout changes (#1309) * Democracy layout changes * Select democarcy.propose as default * Revert default, blonde moment * Remove min-height for ui--Card * Extract Item styles * Extract all styles into styled-components * lint hack * Update Row.tsx * Update Address.tsx * Small layout cleanups --- packages/app-democracy/src/Overview/Item.tsx | 65 +++++++++++------- .../app-democracy/src/Overview/Proposal.tsx | 5 +- .../app-democracy/src/Overview/Proposals.tsx | 12 ++-- .../app-democracy/src/Overview/Referendum.tsx | 22 ++++-- .../src/Overview/Referendums.tsx | 10 ++- packages/app-democracy/src/Overview/index.tsx | 9 +-- packages/app-democracy/src/Propose.tsx | 4 +- packages/app-democracy/src/index.css | 68 ------------------- packages/app-democracy/src/index.tsx | 2 - packages/app-staking/src/Overview/Address.tsx | 17 +++-- packages/ui-app/src/AddressCard.tsx | 6 +- packages/ui-app/src/Card.tsx | 1 - packages/ui-app/src/Row.tsx | 1 - 13 files changed, 88 insertions(+), 134 deletions(-) delete mode 100644 packages/app-democracy/src/index.css diff --git a/packages/app-democracy/src/Overview/Item.tsx b/packages/app-democracy/src/Overview/Item.tsx index 7d8cd62937..09c4057abf 100644 --- a/packages/app-democracy/src/Overview/Item.tsx +++ b/packages/app-democracy/src/Overview/Item.tsx @@ -6,6 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types'; import BN from 'bn.js'; import React from 'react'; +import styled from 'styled-components'; import { Method, Proposal } from '@polkadot/types'; import { Call } from '@polkadot/ui-app'; import { formatNumber } from '@polkadot/util'; @@ -21,41 +22,57 @@ type Props = I18nProps & { class Item extends React.PureComponent { render () { - const { children, idNumber, proposal, proposalExtra } = this.props; + const { children, className, idNumber, proposal, proposalExtra } = this.props; const { meta, method, section } = Method.findFunction(proposal.callIndex); - // FIXME This is _very_ similar to what we have in explorer/BlockByHash return ( -
+
-
-

- {section}.{method} -

-
{ - meta && meta.documentation - ? meta.documentation.join(' ') - : '' - }
-
+

{section}.{method}

+ {meta && meta.documentation && ( +
+ {meta.documentation.join(' ')} +
+ )}
#{formatNumber(idNumber)}
-
- - {proposalExtra} - -
- {children} -
+
+ {children}
+ + {proposalExtra} +
); } } -export default translate(Item); +export default translate(styled(Item as React.ComponentClass)` + .democracy--Item-children { + padding-bottom: 1rem; + } + + .democracy--Item-extrinsic { + .ui--Params-Content { + padding-left: 0; + } + } + + .democracy--Item-header { + margin-bottom: 1rem; + position: relative; + + .democracy--Item-header-id { + font-size: 1.5rem; + line-height: 1.5rem; + position: absolute; + right: 0; + top: 0; + } + } +`); diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx index 53428a4ed7..9931417dfe 100644 --- a/packages/app-democracy/src/Overview/Proposal.tsx +++ b/packages/app-democracy/src/Overview/Proposal.tsx @@ -23,13 +23,14 @@ type Props = I18nProps & { class ProposalDisplay extends React.PureComponent { render () { - const { democracy_depositOf, idNumber, value } = this.props; + const { className, democracy_depositOf, idNumber, value } = this.props; const depositors = democracy_depositOf ? democracy_depositOf[1] : []; return ( { const [balance, addresses] = democracy_depositOf; return ( -
+
{addresses.map((address, index) => ( { const { t } = this.props; return ( -
-

- {t('proposals')} -

+ {this.renderProposals()} -
+ ); } @@ -43,9 +41,7 @@ class Proposals extends React.PureComponent { if (!democracy_publicProps || !democracy_publicProps.length) { return ( -
- {t('no available proposals')} -
+
{t('no available proposals')}
); } diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx index acbafbe283..b58e27baf1 100644 --- a/packages/app-democracy/src/Overview/Referendum.tsx +++ b/packages/app-democracy/src/Overview/Referendum.tsx @@ -8,10 +8,11 @@ import { RawParam } from '@polkadot/ui-params/types'; import BN from 'bn.js'; import React from 'react'; +import styled from 'styled-components'; import { ReferendumInfoExtended } from '@polkadot/api-derive/type'; import { Chart, Static } from '@polkadot/ui-app'; import VoteThreshold from '@polkadot/ui-params/Param/VoteThreshold'; -import { withCalls } from '@polkadot/ui-api'; +import { withCalls, withMulti } from '@polkadot/ui-api'; import settings from '@polkadot/ui-settings'; import { formatBalance, formatNumber } from '@polkadot/util'; @@ -88,7 +89,7 @@ class Referendum extends React.PureComponent { } render () { - const { chain_bestNumber, value } = this.props; + const { chain_bestNumber, className, value } = this.props; if (!chain_bestNumber || value.end.sub(chain_bestNumber).lten(0)) { return null; @@ -96,6 +97,7 @@ class Referendum extends React.PureComponent { return ( { const enactBlock = (democracy_publicDelay || new BN(0)).add(end); return ( -
+
{t('block #{{blockNumber}}, {{remaining}} blocks remaining', { replace: { @@ -174,10 +176,20 @@ class Referendum extends React.PureComponent { } } -export default translate( +export default withMulti( + styled(Referendum as React.ComponentClass)` + .democracy--Referendum-results { + margin-bottom: 1em; + + &.chart { + text-align: center; + } + } + `, + translate, withCalls( 'derive.chain.bestNumber', ['derive.democracy.referendumVotesFor', { paramName: 'idNumber' }], 'query.democracy.publicDelay' - )(Referendum) + ) ); diff --git a/packages/app-democracy/src/Overview/Referendums.tsx b/packages/app-democracy/src/Overview/Referendums.tsx index e54e5f9f3b..91b620d7dd 100644 --- a/packages/app-democracy/src/Overview/Referendums.tsx +++ b/packages/app-democracy/src/Overview/Referendums.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { ReferendumInfoExtended } from '@polkadot/api-derive/type'; import { Option } from '@polkadot/types'; import { withCalls } from '@polkadot/ui-api'; +import { Column } from '@polkadot/ui-app'; import Referendum from './Referendum'; import translate from '../translate'; @@ -21,10 +22,9 @@ class Referendums extends React.PureComponent { const { t } = this.props; return ( -
-

{t('referendum')}

+ {this.renderReferendums()} -
+ ); } @@ -36,9 +36,7 @@ class Referendums extends React.PureComponent { if (!referendums.length) { return ( -
- {t('no available referendum')} -
+
{t('no available referendums')}
); } diff --git a/packages/app-democracy/src/Overview/index.tsx b/packages/app-democracy/src/Overview/index.tsx index 5e2fbd713c..fa660510ec 100644 --- a/packages/app-democracy/src/Overview/index.tsx +++ b/packages/app-democracy/src/Overview/index.tsx @@ -4,9 +4,8 @@ import { AppProps, BareProps, I18nProps } from '@polkadot/ui-app/types'; -import '../index.css'; - import React from 'react'; +import { Columar } from '@polkadot/ui-app'; import Proposals from './Proposals'; import Referendums from './Referendums'; @@ -19,8 +18,10 @@ export default class Overview extends React.PureComponent { return ( <> - - + + + + ); } diff --git a/packages/app-democracy/src/Propose.tsx b/packages/app-democracy/src/Propose.tsx index d69b48f906..c7e0bbc2e3 100644 --- a/packages/app-democracy/src/Propose.tsx +++ b/packages/app-democracy/src/Propose.tsx @@ -122,6 +122,6 @@ class Propose extends TxComponent { export default withMulti( Propose, translate, - withApi, - withRouter + withRouter, + withApi ); diff --git a/packages/app-democracy/src/index.css b/packages/app-democracy/src/index.css deleted file mode 100644 index 77ccf2277e..0000000000 --- a/packages/app-democracy/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -/* Copyright 2017-2019 @polkadot/app-democracy authors & contributors -/* This software may be modified and distributed under the terms -/* of the Apache-2.0 license. See the LICENSE file for details. */ - -.democracy--Item-header { - display: flex; - justify-content: space-between; - margin-bottom: 1rem; -} - -.democracy--Item-header-info, -.democracy--Item-header-id { - flex: 1; -} - -.democracy--Item-header-id { - font-size: 2rem; - line-height: 2rem; - text-align: right; -} - -.democracy--Item-header-description { - color: rgba(0, 0, 0, 0.6); -} - -.democracy--Item-body { - display: flex; - flex-direction: row; - justify-content: stretch; -} - -.democracy--Item-extrinsic, -.democracy--Item-children { - flex: 1; - width: 0; - padding: 0 1em; - text-align: left; -} - -.democracy--Item-extrinsic .ui--Params-Content { - padding-left: 0; -} - -.democracy--Extrinsic .ui--Labelled { - margin-bottom: 0.25rem; -} - -.democracy--Extrinsic .ui--Labelled .ui.label { - display: block; - padding-left: 0; -} - -.democracy--Proposal-info, -.democracy--Referendum-info { - margin-bottom: 0; -} - -.democracy--Proposal-new { - float: right; -} - -.democracy--Referendum-results { - margin-bottom: 1em; -} - -.democracy--Referendum-results.chart { - text-align: center; -} diff --git a/packages/app-democracy/src/index.tsx b/packages/app-democracy/src/index.tsx index 6c6985666e..766d6e309a 100644 --- a/packages/app-democracy/src/index.tsx +++ b/packages/app-democracy/src/index.tsx @@ -5,8 +5,6 @@ import { AppProps, BareProps, I18nProps } from '@polkadot/ui-app/types'; import { TabItem } from '@polkadot/ui-app/Tabs'; -import './index.css'; - import React from 'react'; import { Route, Switch } from 'react-router'; import { HelpOverlay,Tabs } from '@polkadot/ui-app'; diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx index 530539713f..c977ec5fa3 100644 --- a/packages/app-staking/src/Overview/Address.tsx +++ b/packages/app-staking/src/Overview/Address.tsx @@ -76,9 +76,8 @@ class Address extends React.PureComponent { } render () { - const { address, className, defaultName, lastAuthor, lastBlock, filter } = this.props; + const { className, defaultName, filter } = this.props; const { controllerId, stakers, stashId } = this.state; - const isAuthor = [address, controllerId, stashId].includes(lastAuthor); const bonded = stakers && !stakers.own.isZero() ? [stakers.own, stakers.total.sub(stakers.own)] : true; @@ -102,22 +101,22 @@ class Address extends React.PureComponent { withBalance={{ bonded }} > {this.renderNominators()} - { - isAuthor && stashId - ?
#{lastBlock}
- : null - } ); } private renderKeys () { - const { t } = this.props; - const { controllerId, sessionId } = this.state; + const { address, lastAuthor, lastBlock, t } = this.props; + const { controllerId, sessionId, stashId } = this.state; const isSame = controllerId === sessionId; + const isAuthor = [address, controllerId, stashId].includes(lastAuthor); return (
+ {isAuthor && stashId + ?
#{lastBlock}
+ : null + } {controllerId ? (
diff --git a/packages/ui-app/src/AddressCard.tsx b/packages/ui-app/src/AddressCard.tsx index da9d5f1d8b..b7c06b3194 100644 --- a/packages/ui-app/src/AddressCard.tsx +++ b/packages/ui-app/src/AddressCard.tsx @@ -3,6 +3,8 @@ // of the Apache-2.0 license. See the LICENSE file for details. // import { I18nProps } from '@polkadot/ui-app/types'; +// @ts-ignore This line needed for the styled export... don't ask why +import BN from 'bn.js'; import React from 'react'; import styled from 'styled-components'; @@ -39,7 +41,7 @@ class AddressCard extends React.PureComponent { } } -export default styled(translate(AddressCard))` +export default translate(styled(AddressCard as React.ComponentClass)` display: flex; flex-direction: column; justify-content: space-between; @@ -58,4 +60,4 @@ export default styled(translate(AddressCard))` margin-top: 0.5rem; } } -`; +`); diff --git a/packages/ui-app/src/Card.tsx b/packages/ui-app/src/Card.tsx index 4b53cdce23..f72efb9760 100644 --- a/packages/ui-app/src/Card.tsx +++ b/packages/ui-app/src/Card.tsx @@ -26,7 +26,6 @@ export default styled(Card)` position: relative; flex: 1 1; min-width: 24%; - min-height: 130px; justify-content: space-around; i.help.circle.icon, diff --git a/packages/ui-app/src/Row.tsx b/packages/ui-app/src/Row.tsx index 640c5775fd..8e4a9edcf3 100644 --- a/packages/ui-app/src/Row.tsx +++ b/packages/ui-app/src/Row.tsx @@ -224,7 +224,6 @@ class Row

extends React.PureComponent