Add images to metadata dropdowns (#2614)
This commit is contained in:
Jaco Greeff
GitHub
parent
b17aa397ed
commit
b6c6b7bad5
13
packages/apps-config/src/ui/logos/extensions/polkadot-js.svg
Normal file
13
packages/apps-config/src/ui/logos/extensions/polkadot-js.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;zoom: 1;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.bg0{fill:#FF8C00}
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<circle class="bg0" cx="85" cy="85" r="70"/>
|
||||
<g>
|
||||
<path class="st0" d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2 c-2.8-0.6-5.6,1.2-6.2,4c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9 c1.2-5.6,5.8-9.7,11.2-10.4c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z M87.7,121.7 c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9C93.3,125.7,91.2,122.4,87.7,121.7z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -12,6 +12,9 @@ import nodePolkadot from './nodes/polkadot-circle.svg';
|
||||
import nodePolkadotJs from './nodes/polkadot-js.svg';
|
||||
import nodeSubstrate from './nodes/substrate-hexagon.svg';
|
||||
|
||||
// extensions
|
||||
import extensionPolkadotJs from './extensions/polkadot-js.svg';
|
||||
|
||||
// last-resort fallback, just something empty
|
||||
import emptyLogo from './empty.svg';
|
||||
|
||||
@ -51,9 +54,15 @@ const namedLogos: Record<string, any> = {
|
||||
westend: nodePolkadot
|
||||
};
|
||||
|
||||
// extension logos
|
||||
const extensionLogos: Record<string, any> = {
|
||||
'polkadot-js': extensionPolkadotJs
|
||||
};
|
||||
|
||||
export {
|
||||
chainLogos,
|
||||
emptyLogo,
|
||||
extensionLogos,
|
||||
namedLogos,
|
||||
nodeLogos
|
||||
};
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2",
|
||||
"@polkadot/apps-config": "0.42.0-beta.21",
|
||||
"@polkadot/react-components": "0.42.0-beta.21",
|
||||
"@polkadot/react-query": "0.42.0-beta.21",
|
||||
"query-string": "^6.12.1"
|
||||
|
||||
@ -5,11 +5,13 @@
|
||||
import { ChainInfo } from '../types';
|
||||
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { extensionLogos } from '@polkadot/apps-config/ui/logos';
|
||||
import { Button, Dropdown, Spinner } from '@polkadot/react-components';
|
||||
import { useToggle } from '@polkadot/react-hooks';
|
||||
|
||||
import { useTranslation } from '../translate';
|
||||
import useExtensions from '../useExtensions';
|
||||
import iconOption from './iconOption';
|
||||
|
||||
interface Props {
|
||||
chainInfo: ChainInfo | null;
|
||||
@ -22,7 +24,8 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const [isBusy, toggleBusy] = useToggle();
|
||||
const options = useMemo(
|
||||
() => (extensions || []).map(({ extension: { name, version } }, value) => ({ text: `${name} ${version}`, value })),
|
||||
() => (extensions || []).map(({ extension: { name, version } }, value) =>
|
||||
iconOption(`${name} ${version}`, value, extensionLogos[name])),
|
||||
[extensions]
|
||||
);
|
||||
const _updateMeta = useCallback(
|
||||
|
||||
@ -6,7 +6,7 @@ import { ChainInfo } from '../types';
|
||||
|
||||
import React, { useCallback, useEffect, useReducer, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Button, Columar, Column, Input, Spinner } from '@polkadot/react-components';
|
||||
import { Button, ChainImg, Columar, Column, Input, Spinner } from '@polkadot/react-components';
|
||||
import { useApi, useDebounce } from '@polkadot/react-hooks';
|
||||
import { QrNetworkSpecs } from '@polkadot/react-qr';
|
||||
import { NetworkSpecsStruct } from '@polkadot/ui-settings';
|
||||
@ -89,13 +89,16 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
|
||||
return (
|
||||
<Columar className={className}>
|
||||
<Column>
|
||||
<Input
|
||||
className='full'
|
||||
help={t('Name of the network. It only for display purpose.')}
|
||||
isDisabled
|
||||
label={t('Network Name')}
|
||||
value={networkSpecs.title}
|
||||
/>
|
||||
<div className='settings--networkSpecs-name'>
|
||||
<Input
|
||||
className='full'
|
||||
help={t('Name of the network. It only for display purpose.')}
|
||||
isDisabled
|
||||
label={t('Network Name')}
|
||||
value={networkSpecs.title}
|
||||
/>
|
||||
<ChainImg className='settings--networkSpecs-logo' />
|
||||
</div>
|
||||
<Input
|
||||
className='full'
|
||||
help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
|
||||
@ -165,4 +168,16 @@ export default React.memo(styled(NetworkSpecs)`
|
||||
margin: 0.25rem auto;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
.settings--networkSpecs-name {
|
||||
position: relative;
|
||||
|
||||
.settings--networkSpecs-logo {
|
||||
height: 32px;
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
29
packages/page-settings/src/Metadata/iconOption.tsx
Normal file
29
packages/page-settings/src/Metadata/iconOption.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
// Copyright 2017-2020 @polkadot/app-settings 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 React from 'react';
|
||||
|
||||
interface Option {
|
||||
text: React.ReactNode;
|
||||
value: number | string;
|
||||
}
|
||||
|
||||
export default function itemOption (label: string, value: string | number, img: any): Option {
|
||||
return {
|
||||
text: (
|
||||
<div
|
||||
className='ui--Dropdown-item'
|
||||
key={value}
|
||||
>
|
||||
<img
|
||||
alt={label}
|
||||
className='ui--Dropdown-icon'
|
||||
src={img}
|
||||
/>
|
||||
<div className='ui--Dropdown-name'>{label}</div>
|
||||
</div>
|
||||
),
|
||||
value
|
||||
};
|
||||
}
|
||||
@ -3015,6 +3015,7 @@ __metadata:
|
||||
resolution: "@polkadot/app-settings@workspace:packages/page-settings"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.9.2
|
||||
"@polkadot/apps-config": 0.42.0-beta.21
|
||||
"@polkadot/react-components": 0.42.0-beta.21
|
||||
"@polkadot/react-query": 0.42.0-beta.21
|
||||
query-string: ^6.12.1
|
||||
@ -3089,7 +3090,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@polkadot/apps-config@workspace:packages/apps-config":
|
||||
"@polkadot/apps-config@0.42.0-beta.21, @polkadot/apps-config@workspace:packages/apps-config":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@polkadot/apps-config@workspace:packages/apps-config"
|
||||
dependencies:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user