From 9f9c937a4142cc5a8ae32f9bb2765c4683b9092d Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 6 Aug 2018 15:33:21 +0200 Subject: [PATCH] Format storage entries in a div (#197) * Format storage entries in div (with icons) * Update queries to have same alignment --- packages/app-storage/src/Query.tsx | 7 +- packages/app-storage/src/index.css | 5 + packages/ui-app/src/Params/Params.css | 31 ++++++- .../{valueToText.ts => valueToText.tsx} | 92 ++++++++++++++----- 4 files changed, 109 insertions(+), 26 deletions(-) rename packages/ui-app/src/Params/{valueToText.ts => valueToText.tsx} (51%) diff --git a/packages/app-storage/src/Query.tsx b/packages/app-storage/src/Query.tsx index 1f46c972d2..f339fce007 100644 --- a/packages/app-storage/src/Query.tsx +++ b/packages/app-storage/src/Query.tsx @@ -78,7 +78,12 @@ class Query extends React.PureComponent { {key.section}.{key.name}({inputs}): {typeToString(key.type)} +
+
{key.section}.{key.name}(
+ {inputs} +
):
+
{typeToString(key.type)}
+
} > diff --git a/packages/app-storage/src/index.css b/packages/app-storage/src/index.css index 027b77e8f8..8377dd7cb1 100644 --- a/packages/app-storage/src/index.css +++ b/packages/app-storage/src/index.css @@ -46,3 +46,8 @@ flex: 0; padding: 0 0.25rem; } + +.storage--Queries .storage--actionrow-button .ui.label { + font-size: 1rem; + line-height: 1.714rem; +} diff --git a/packages/ui-app/src/Params/Params.css b/packages/ui-app/src/Params/Params.css index 66da232c21..151b4e3c37 100644 --- a/packages/ui-app/src/Params/Params.css +++ b/packages/ui-app/src/Params/Params.css @@ -2,15 +2,11 @@ /* This software may be modified and distributed under the terms /* of the ISC license. See the LICENSE file for details. */ -.ui--Params {} - .ui--Params-Content { box-sizing: border-box; padding-left: 2em; } -.ui--Param {} - .ui--Param-File { align-items: center; border: 1px dashed rgba(34, 36, 38, 0.15); @@ -35,3 +31,30 @@ .ui--Param-File .label { color: rgba(0, 0, 0, .6); } + +.ui--Param-text { + display: inline-block; + font-size: 1rem; + line-height: 1.714rem; +} + +.ui--Param-text .icon { + margin-right: 0.5rem !important; +} + +.ui--Param-text * { + vertical-align: middle; +} + +.ui--Param-text.nowrap { + white-space: nowrap; +} + +.ui--Param-text.name { + color: rgba(0, 0, 0, .6); + font-style: italic; +} + +.ui--Param-text + .ui--Param-text { + margin-left: 0.5rem; +} diff --git a/packages/ui-app/src/Params/valueToText.ts b/packages/ui-app/src/Params/valueToText.tsx similarity index 51% rename from packages/ui-app/src/Params/valueToText.ts rename to packages/ui-app/src/Params/valueToText.tsx index eca4eb65c6..cfcb06873b 100644 --- a/packages/ui-app/src/Params/valueToText.ts +++ b/packages/ui-app/src/Params/valueToText.tsx @@ -4,6 +4,10 @@ import { Param$Types, Param$Type$Array, ExtrinsicDecoded } from '@polkadot/params/types'; +import './Params.css'; + +import React from 'react'; +import IdentityIcon from '@polkadot/ui-react/IdentityIcon'; import numberFormat from '@polkadot/ui-react-rx/util/numberFormat'; import addressEncode from '@polkadot/util-keyring/address/encode'; import u8aToHex from '@polkadot/util/u8a/toHex'; @@ -11,50 +15,96 @@ import isBn from '@polkadot/util/is/bn'; import isU8a from '@polkadot/util/is/u8a'; import isUndefined from '@polkadot/util/is/undefined'; +import classes from '../util/classes'; import { textMap as thresholdTextMap } from './Param/VoteThreshold'; -function proposalToText ({ extrinsic, params }: ExtrinsicDecoded): string { +const empty = div(''); +const unknown = div(''); + +function divWithClass (className: string, ...values: Array): React.ReactNode { + return ( +
+ {values} +
+ ); +} + +function div (...values: Array): React.ReactNode { + return divWithClass.apply( + null, [undefined as React.ReactNode].concat(values) + ); +} + +function accountToText (publicKey: Uint8Array): React.ReactNode { + const address = addressEncode(publicKey); + + return divWithClass( + 'nowrap', + , + address + ); +} + +function proposalToText ({ extrinsic, params }: ExtrinsicDecoded): React.ReactNode { if (!extrinsic) { - return ''; + return unknown; } const inputs = extrinsic.params.map(({ name, type }, index) => - `${name}=${valueToText(type, params[index])}` - ).join(', '); + div( + divWithClass('name', `${name}=`), + valueToText(type, params[index]) + ) + ); - return `${extrinsic.section}.${extrinsic.name}(${inputs})`; + return div( + divWithClass('name', `${extrinsic.section}.${extrinsic.name}(`), + inputs, + divWithClass('name', ')') + ); } -function arrayToText (type: Param$Type$Array, value: Array, withBound: boolean = true): string { +function arrayToText (type: Param$Type$Array, value: Array, withBound: boolean = true): React.ReactNode { if (value.length === 0) { - return 'empty'; + return empty; } if (type.length === 1) { if (type[0] === 'KeyValueStorage') { - return `${value.length}`; + return div(value.length); } return value.map((value, index) => - `${index}: ${valueToText(type[0], value, false)}` - ).join(', '); + div( + divWithClass('name', `${index}:`), + valueToText(type[0], value, false) + ) + ); } const values = type.map((_type, index) => valueToText(_type, value[index], false) - ).join(', '); + ); - return `(${values})`; + return div( + divWithClass('name', '('), + values, + divWithClass('name', ')') + ); } -function valueToText (type: Param$Types, value: any, swallowError: boolean = true): string { +function valueToText (type: Param$Types, value: any, swallowError: boolean = true): React.ReactNode { try { if (type === 'bool') { - return value ? 'Yes' : 'No'; + return div(value ? 'Yes' : 'No'); } if (isUndefined(value)) { - return 'unknown'; + return unknown; } if (Array.isArray(type)) { @@ -63,8 +113,8 @@ function valueToText (type: Param$Types, value: any, swallowError: boolean = tru if (type === 'AccountId') { return value && value.length - ? addressEncode(value as Uint8Array) - : ''; + ? accountToText(value as Uint8Array) + : unknown; } if (type === 'Proposal') { @@ -72,15 +122,15 @@ function valueToText (type: Param$Types, value: any, swallowError: boolean = tru } if (type === 'VoteThreshold') { - return thresholdTextMap[value]; + return div(thresholdTextMap[value]); } if (isU8a(value)) { - return u8aToHex(value, 256); + return div(u8aToHex(value, 256)); } if (isBn(value)) { - return numberFormat(value); + return div(numberFormat(value)); } } catch (error) { if (!swallowError) { @@ -90,7 +140,7 @@ function valueToText (type: Param$Types, value: any, swallowError: boolean = tru } } - return value.toString(); + return div(value.toString()); } export default valueToText;