Fix display issues on the democracy dashboard page (#7360)

* PR7304 * Update packages/page-democracy/src/Overview/ReferendumVote.tsx Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com> * Update packages/page-democracy/src/Overview/ReferendumVote.tsx Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com> * Update packages/page-democracy/src/Overview/Referendums.tsx Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com> * Update packages/page-democracy/src/Overview/Referendum.tsx Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com> * Update packages/page-democracy/src/Overview/Referendum.tsx Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com> * Update packages/page-democracy/src/Overview/Referendum.tsx Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com> * PR7304 after Jegor s comments * aligned the donut in democracy and fixed the 100% bug on the pie chart * - fixed the 100% issue with the donut - fixed the remaining horizontal alignment - removed the horizontal scrollbar in the votes table - fixed the vertical alignment of the donut * - added min and max height to the listed tables (referendum and proposal) - added the same table listing as referendum to proposals * Update packages/react-components/src/CallExpander.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/react-components/src/Expander.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/page-democracy/src/Overview/Proposal.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/page-democracy/src/Overview/Proposal.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/page-democracy/src/Overview/Proposals.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/page-democracy/src/Overview/Proposals.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/page-democracy/src/Overview/Referendum.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/page-democracy/src/Overview/Referendums.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/react-components/src/TxButton.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Update packages/react-components/src/LinkExternal.tsx Co-authored-by: Jaco <jacogr@gmail.com> * Auto-lint fixes (after master merge) * Use Progress component for democracy (#7376) * Apply suggestions from code review * Centering Co-authored-by: Jegor Sidorenko <5252494+jsidorenko@users.noreply.github.com> Co-authored-by: Jaco <jacogr@gmail.com>
2022-04-15 07:00:40 +02:00 · 2022-04-15 07:00:40 +02:00 · aa928f10b4
commit aa928f10b4
parent 417a9fca27
11 changed files with 80 additions and 39 deletions
--- a/packages/page-council/src/Motions/Voting.tsx
+++ b/packages/page-council/src/Motions/Voting.tsx
@ -70,7 +70,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
            />
            <TxButton
              accountId={accountId}
-              icon='check'
+              icon='check-to-slot'
              isDisabled={isDisabled}
              label={t<string>('Vote Aye')}
              onStart={toggleVoting}
@ -81,7 +81,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
        </Modal>
      )}
      <Button
-        icon='check'
+        icon='check-to-slot'
        isDisabled={isDisabled}
        label={t<string>('Vote')}
        onClick={toggleVoting}
--- a/packages/page-council/src/Overview/Vote.tsx
+++ b/packages/page-council/src/Overview/Vote.tsx
@ -72,7 +72,7 @@ function Vote ({ electionsInfo }: Props): React.ReactElement<Props> | null {
  return (
    <>
      <Button
-        icon='check'
+        icon='check-to-slot'
        isDisabled={available.length === 0}
        label={t<string>('Vote')}
        onClick={toggleVisible}
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@ -6,7 +6,7 @@ import type { DeriveProposal } from '@polkadot/api-derive/types';
 import React from 'react';
 import styled from 'styled-components';

-import { AddressMini, Button, Expander, LinkExternal } from '@polkadot/react-components';
+import { AddressMini, Button, Expander, LinkExternal, Table } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';

@ -39,16 +39,26 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
      </td>
      <td className='expand'>
        {seconding.length !== 0 && (
-          <Expander summary={t<string>('Seconds ({{count}})', { replace: { count: seconding.length } })}>
-            {seconding.map((address, count): React.ReactNode => (
-              <AddressMini
-                className='identityIcon'
-                key={`${count}:${address.toHex()}`}
-                value={address}
-                withBalance={false}
-                withShrink
-              />
-            ))}
+          <Expander summary={t<string>('Endorsed ({{count}})', { replace: { count: seconding.length } })}>
+            <div className='endorsementsTable'>
+              <Table
+                empty={seconding && t<string>('No endorsements')}
+              >
+                <tr className='expand'>
+                  <td>
+                    {seconding.map((address, count): React.ReactNode => (
+                      <AddressMini
+                        className='identityIcon'
+                        key={`${count}:${address.toHex()}`}
+                        value={address}
+                        withBalance={false}
+                        withShrink
+                      />
+                    ))}
+                  </td>
+                </tr>
+              </Table>
+            </div>
          </Expander>
        )}
      </td>
@ -86,4 +96,12 @@ export default React.memo(styled(Proposal)`
      margin-bottom: 4px;
    }
  }
+  
+  div.endorsementsTable {
+    overflow-y: scroll;
+    display: block;
+    min-height: 50px;
+    max-height: 200px;
+    overflow-x: hidden;
+  }
 `);
--- a/packages/page-democracy/src/Overview/Proposals.tsx
+++ b/packages/page-democracy/src/Overview/Proposals.tsx
@ -36,6 +36,7 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
    >
      {proposals?.map((proposal): React.ReactNode => (
        <ProposalDisplay
+          help={t<string>('launch period')}
          key={proposal.index.toString()}
          value={proposal}
        />
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@ -7,7 +7,7 @@ import type { Balance } from '@polkadot/types/interfaces';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';

-import { Badge, Button, Icon, LinkExternal } from '@polkadot/react-components';
+import { Badge, Button, Icon, LinkExternal, Progress } from '@polkadot/react-components';
 import { useAccounts, useApi, useBestNumber, useCall } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { BN, BN_ONE, formatNumber, isBoolean } from '@polkadot/util';
@ -50,6 +50,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
    () => status.threshold.type.toString().replace('majority', ' majority '),
    [status]
  );
+  const totalCalculated = votedAye.add(votedNay);

  const [percentages, { hasVoted, hasVotedAye }] = useMemo(
    (): [Percentages | null, VoteType] => {
@ -106,9 +107,6 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
        {percentages && (
          <>
            <div>{percentages.turnout}</div>
-            {percentages.aye && (
-              <div>{t<string>('{{percentage}} aye', { replace: { percentage: percentages.aye } })}</div>
-            )}
          </>
        )}
      </td>
@ -143,6 +141,12 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
          votes={allNay}
        />
      </td>
+      <td className='media--1000 middle chart'>
+        <Progress
+          total={totalCalculated}
+          value={votedAye}
+        />
+      </td>
      <td className='button'>
        <Button.Group>
          {!image?.proposal && (
@ -172,11 +176,11 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
 }

 export default React.memo(styled(Referendum)`
-  .democracy--Referendum-results {
-    margin-bottom: 1em;
+  td.chart {
+    padding: 0.5rem 0;

-    &.chart {
-      text-align: center;
+    .ui--Progress {
+      display: inline-block;
    }
  }
 `);
--- a/packages/page-democracy/src/Overview/ReferendumVote.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVote.tsx
@ -10,6 +10,7 @@ import { AddressMini } from '@polkadot/react-components';

 interface Props {
  vote: DeriveReferendumVote;
+  className?: string;
 }

 const sizing = ['0.1x', '1x', '2x', '3x', '4x', '5x', '6x'];
--- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
@ -5,8 +5,9 @@ import type { DeriveReferendumVote } from '@polkadot/api-derive/types';
 import type { BN } from '@polkadot/util';

 import React, { useMemo } from 'react';
+import styled from 'styled-components';

-import { Expander } from '@polkadot/react-components';
+import { Expander, Table } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { BN_TEN, formatNumber } from '@polkadot/util';

@ -27,7 +28,6 @@ const LOCKS = [1, 10, 20, 30, 40, 50, 60];

 function ReferendumVotes ({ change, className, count, isAye, isWinning, total, votes }: Props): React.ReactElement<Props> | null {
  const { t } = useTranslation();
-
  const sorted = useMemo(
    () => votes.sort((a, b) => {
      const ta = a.balance.muln(LOCKS[a.vote.conviction.toNumber()]).div(BN_TEN);
@ -61,14 +61,30 @@ function ReferendumVotes ({ change, className, count, isAye, isWinning, total, v
        </>
      }
    >
-      {sorted.map((vote) =>
-        <ReferendumVote
-          key={vote.accountId.toString()}
-          vote={vote}
-        />
-      )}
+      <div className='votersTable'>
+        <Table empty={votes && t<string>('No voters')}>
+          <tr className='expand'>
+            <td>
+              {sorted.map((vote) =>
+                <ReferendumVote
+                  key={vote.accountId.toString()}
+                  vote={vote}
+                />
+              )}
+            </td>
+          </tr>
+        </Table>
+      </div>
    </Expander>
  );
 }

-export default React.memo(ReferendumVotes);
+export default React.memo(styled(ReferendumVotes)`
+  div.votersTable {
+    overflow-y: scroll;
+    display: block;
+    min-height: 50px;
+    max-height: 200px;
+    overflow-x: hidden;
+  }
+`);
--- a/packages/page-democracy/src/Overview/Referendums.tsx
+++ b/packages/page-democracy/src/Overview/Referendums.tsx
@ -25,6 +25,7 @@ function Referendums ({ className = '', referendums }: Props): React.ReactElemen
    [t('turnout'), 'media--1400'],
    [undefined, 'badge'],
    [t('votes'), 'expand'],
+    [t<string>('support'), 'media--1000'],
    [undefined, undefined, 2],
    [undefined, 'media--1000']
  ]);
--- a/packages/page-democracy/src/Overview/Seconding.tsx
+++ b/packages/page-democracy/src/Overview/Seconding.tsx
@ -35,7 +35,7 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
    <>
      {isSecondingOpen && (
        <Modal
-          header={t<string>('Second proposal')}
+          header={t<string>('Endorse proposal')}
          onClose={toggleSeconding}
          size='large'
        >
@ -46,10 +46,10 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
                proposal={image?.proposal}
              />
            </Modal.Columns>
-            <Modal.Columns hint={t<string>('Seconding a proposal that indicates your backing for the proposal. Proposals with greater interest moves up the queue for potential next referendums.')}>
+            <Modal.Columns hint={t<string>('Endorsing a proposal that indicates your backing for the proposal. Proposals with greater interest moves up the queue for potential next referendums.')}>
              <InputAddress
-                help={t<string>('Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected')}
-                label={t<string>('second with account')}
+                help={t<string>('Select the account you wish to endorse with. This will lock your funds until the proposal is either approved or rejected')}
+                label={t<string>('endorse with account')}
                onChange={setAccountId}
                type='account'
                withLabel
@ -68,7 +68,7 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
              accountId={accountId}
              icon='sign-in-alt'
              isDisabled={!accountId}
-              label={t<string>('Second')}
+              label={t<string>('Endorse')}
              onStart={toggleSeconding}
              params={
                api.tx.democracy.second.meta.args.length === 2
@ -82,7 +82,7 @@ function Seconding ({ deposit, depositors, image, proposalId }: Props): React.Re
      )}
      <Button
        icon='toggle-off'
-        label={t<string>('Second')}
+        label={t<string>('Endorse')}
        onClick={toggleSeconding}
      />
    </>
--- a/packages/page-democracy/src/Overview/Voting.tsx
+++ b/packages/page-democracy/src/Overview/Voting.tsx
@ -108,7 +108,7 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
        </Modal>
      )}
      <Button
-        icon='check'
+        icon='check-to-slot'
        label={t<string>('Vote')}
        onClick={toggleVoting}
      />
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@ -44,7 +44,7 @@ function Progress ({ className = '', isDisabled, total, value }: Props): React.R
    return null;
  }

-  const drawAngle = angle % 360;
+  const drawAngle = (angle === 360) ? 360 : angle % 360;

  return (
    <div className={`ui--Progress${isDisabled ? ' isDisabled' : ''} ${className}`}>