From f6e6bf76c2ac001309483a4affdd350b8c2670bd Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 1 Apr 2020 08:31:08 +0200
Subject: [PATCH] Remove expander width: 100% (#2494)

* Remove expander width: 100%

* Show vote balance & conviction

* ReferendumVote component
---
 .../src/Overview/Referendum.tsx               | 19 +++++------
 .../src/Overview/ReferendumVote.tsx           | 32 +++++++++++++++++++
 .../page-explorer/src/BlockInfo/ByHash.tsx    |  2 +-
 packages/react-components/src/AddressMini.tsx |  4 ++-
 packages/react-components/src/Expander.tsx    |  1 -
 5 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 packages/page-democracy/src/Overview/ReferendumVote.tsx

diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 95c316e50d..d40d853a12 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -7,7 +7,7 @@ import { BlockNumber } from '@polkadot/types/interfaces';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import { AddressMini, Button, Expander, LinkExternal, Tag } from '@polkadot/react-components';
+import { Button, Expander, LinkExternal, Tag } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance, BlockToTime } from '@polkadot/react-query';
 import { formatNumber, isBoolean } from '@polkadot/util';
@@ -15,6 +15,7 @@ import { formatNumber, isBoolean } from '@polkadot/util';
 import { useTranslation } from '../translate';
 import PreImageButton from './PreImageButton';
 import ProposalCell from './ProposalCell';
+import ReferendumVote from './ReferendumVote';
 import Voting from './Voting';
 
 interface Props {
@@ -55,20 +56,20 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
       </td>
       <td className='number'>
         <Expander summary={<><FormatBalance value={votedAye} />{voteCountAye ? ` (${formatNumber(voteCountAye)})` : '' }</>}>
-          {allAye.map(({ accountId }) =>
-            <AddressMini
-              key={accountId.toString()}
-              value={accountId}
+          {allAye.map((vote) =>
+            <ReferendumVote
+              key={vote.accountId.toString()}
+              vote={vote}
             />
           )}
         </Expander>
       </td>
       <td className='number'>
         <Expander summary={<><FormatBalance value={votedNay} />{voteCountNay ? ` (${formatNumber(voteCountNay)})` : '' }</>}>
-          {allNay.map(({ accountId }) =>
-            <AddressMini
-              key={accountId.toString()}
-              value={accountId}
+          {allNay.map((vote) =>
+            <ReferendumVote
+              key={vote.accountId.toString()}
+              vote={vote}
             />
           )}
         </Expander>
diff --git a/packages/page-democracy/src/Overview/ReferendumVote.tsx b/packages/page-democracy/src/Overview/ReferendumVote.tsx
new file mode 100644
index 0000000000..f2e05195e0
--- /dev/null
+++ b/packages/page-democracy/src/Overview/ReferendumVote.tsx
@@ -0,0 +1,32 @@
+// Copyright 2017-2020 @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.
+
+import { DeriveReferendumVote } from '@polkadot/api-derive/types';
+import { Vote } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { AddressMini } from '@polkadot/react-components';
+
+interface Props {
+  vote: DeriveReferendumVote;
+}
+
+const sizing = ['0.1x', '1x', '2x', '3x', '4x', '5x'];
+
+function voteLabel (vote: Vote): string {
+  return `${sizing[vote.conviction.toNumber()]} - `;
+}
+
+function ReferendumVote ({ vote: { accountId, balance, vote } }: Props): React.ReactElement<Props> {
+  return (
+    <AddressMini
+      balance={balance}
+      labelBalance={voteLabel(vote)}
+      value={accountId}
+      withBalance
+    />
+  );
+}
+
+export default React.memo(ReferendumVote);
diff --git a/packages/page-explorer/src/BlockInfo/ByHash.tsx b/packages/page-explorer/src/BlockInfo/ByHash.tsx
index b05e455d55..ac840bf1f2 100644
--- a/packages/page-explorer/src/BlockInfo/ByHash.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx
@@ -35,7 +35,7 @@ function BlockByHash ({ className, value }: Props): React.ReactElement<Props> {
     <div className={className}>
       <Table isFixed>
         <Table.Head>
-          <th className='start' colSpan={getHeader ? 1 : 6}><h1>{formatNumber(blockNumber)}</h1></th>
+          <th className='start' colSpan={getHeader ? 1 : 6}><h1>{blockNumber ? formatNumber(blockNumber) : '...'}</h1></th>
           {getHeader && (
             <>
               <th className='start'>{t('hash')}</th>
diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx
index a02151119e..525a409638 100644
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@@ -25,6 +25,7 @@ interface Props extends BareProps {
   isPadded?: boolean;
   isShort?: boolean;
   label?: React.ReactNode;
+  labelBalance?: React.ReactNode;
   type?: KeyringItemType;
   value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
   withAddress?: boolean;
@@ -35,7 +36,7 @@ interface Props extends BareProps {
   withShrink?: boolean;
 }
 
-function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement<Props> | null {
+function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, labelBalance, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement<Props> | null {
   if (!value) {
     return null;
   }
@@ -74,6 +75,7 @@ function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded
         {withBalance && (
           <BalanceDisplay
             balance={balance}
+            label={labelBalance}
             params={value}
           />
         )}
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index c521bb3318..438cfecc5d 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@@ -83,7 +83,6 @@ export default React.memo(styled(Expander)`
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 100%;
 
   &:not(.isExpanded) .ui--Expander-content {
     display: none;