From e976d3500d63885781d4cbe945e3051a42dcdd29 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 28 Aug 2019 13:54:49 +0200 Subject: [PATCH] Add images to chain dropdown (#1553) * Add images to chain dropdown * Warp up --- packages/app-settings/src/General.tsx | 44 ++++++++++++--- packages/apps/package.json | 2 +- packages/apps/src/SideBar/SideBar.css | 2 +- packages/react-api/package.json | 2 +- packages/react-components/package.json | 6 +-- packages/react-components/src/Dropdown.tsx | 42 ++++++++++++++- yarn.lock | 62 +++++++++++----------- 7 files changed, 116 insertions(+), 44 deletions(-) diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx index 4d0024a518..a90a8053ee 100644 --- a/packages/app-settings/src/General.tsx +++ b/packages/app-settings/src/General.tsx @@ -7,12 +7,23 @@ import { SettingsStruct } from '@polkadot/ui-settings/types'; import React from 'react'; import styled from 'styled-components'; -import { Button, Dropdown, Input, Toggle } from '@polkadot/react-components'; +import { Button, ChainImg, Dropdown, Input, Toggle } from '@polkadot/react-components'; import { ActionStatus } from '@polkadot/react-components/Status/types'; import uiSettings from '@polkadot/ui-settings'; import translate from './translate'; +interface Option { + text: React.ReactNode; + value: string | number; +} + +interface SetOption { + info: string; + text: string; + value: string | number; +} + interface Props extends AppProps, I18nProps { onStatusChange: (status: ActionStatus) => void; } @@ -23,6 +34,27 @@ interface State { settings: SettingsStruct; } +const createOption = ({ info, text, value }: SetOption, overrides: string[] = [], override: string = 'empty'): Option => ({ + text: ( +
+ +
{text}
+
+ ), + value +}); + +const endpointOptions: Option[] = uiSettings.availableNodes.map((o): Option => createOption(o, ['local'])); +const prefixOptions: Option[] = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default'])); +const themeOptions: Option[] = uiSettings.availableUIThemes.map((o): Option => createOption(o)); + class General extends React.PureComponent { public constructor (props: Props) { super(props); @@ -50,10 +82,10 @@ class General extends React.PureComponent {
@@ -64,7 +96,7 @@ class General extends React.PureComponent { help={t('The logo and colors for the app along with the identity icon theme.')} label={t('default interface theme')} onChange={this.onChangeUiTheme} - options={uiSettings.availableUIThemes} + options={themeOptions} />
@@ -128,7 +160,7 @@ class General extends React.PureComponent { defaultValue={apiUrl} label={t('remote node/endpoint to connect to')} onChange={this.onChangeApiUrl} - options={uiSettings.availableNodes} + options={endpointOptions} /> ) } diff --git a/packages/apps/package.json b/packages/apps/package.json index f4a9616698..67a1ff507c 100644 --- a/packages/apps/package.json +++ b/packages/apps/package.json @@ -15,7 +15,7 @@ "@babel/runtime": "^7.5.5", "@polkadot/react-components": "^0.35.0-beta.14", "@polkadot/react-signer": "^0.35.0-beta.14", - "@polkadot/ui-assets": "^0.43.0-beta.1", + "@polkadot/ui-assets": "^0.43.0-beta.2", "query-string": "^6.8.2" } } diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css index 7c18374c5b..30c8658648 100644 --- a/packages/apps/src/SideBar/SideBar.css +++ b/packages/apps/src/SideBar/SideBar.css @@ -184,7 +184,7 @@ width: 3rem; img { - margin: 0 0.3rem 0 0.2rem; + margin: 0 0.25rem 0 0; } > div.info { diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 1d9c5d061c..73af5051ed 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -32,7 +32,7 @@ "dependencies": { "@babel/runtime": "^7.5.5", "@polkadot/api": "^0.91.0-beta.2", - "@polkadot/extension-dapp": "^0.9.0-beta.0", + "@polkadot/extension-dapp": "^0.9.0-beta.1", "rxjs-compat": "^6.4.0" } } diff --git a/packages/react-components/package.json b/packages/react-components/package.json index f90cae0eed..d43c349528 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -13,10 +13,10 @@ "@babel/runtime": "^7.5.5", "@polkadot/keyring": "^1.1.1", "@polkadot/react-api": "^0.35.0-beta.14", - "@polkadot/react-identicon": "^0.43.0-beta.1", + "@polkadot/react-identicon": "^0.43.0-beta.2", "@polkadot/react-query": "^0.35.0-beta.14", - "@polkadot/ui-keyring": "^0.43.0-beta.1", - "@polkadot/ui-settings": "^0.43.0-beta.1", + "@polkadot/ui-keyring": "^0.43.0-beta.2", + "@polkadot/ui-settings": "^0.43.0-beta.2", "@types/chart.js": "^2.8.4", "@types/i18next": "^12.1.0", "@types/react-copy-to-clipboard": "^4.2.6", diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx index 8750ec578e..28b76d8c39 100644 --- a/packages/react-components/src/Dropdown.tsx +++ b/packages/react-components/src/Dropdown.tsx @@ -5,6 +5,7 @@ import { BareProps } from './types'; import React from 'react'; +import styled from 'styled-components'; import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button'; import SUIDropdown, { DropdownProps } from 'semantic-ui-react/dist/commonjs/modules/Dropdown/Dropdown'; import { isUndefined } from '@polkadot/util'; @@ -38,7 +39,7 @@ interface Props