neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor link adjustments, Account/Address/Referendum (#8684)

Browse Source
This commit is contained in:
Jaco 2023-01-04 08:46:02 +02:00 committed by GitHub
parent d83178653b
commit 86fc69f2a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 60 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/page-accounts/src/Accounts/Account.tsx
View File

@ -741,15 +741,6 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
withBalance={BAL_OPTS_EXPANDED}
withExtended={false}
/>
<Columar is100>
<Columar.Column>
<LinkExternal
data={address}
type='address'
withTitle
/>
</Columar.Column>
</Columar>
<Columar size='tiny'>
<Columar.Column>
<div data-testid='tags'>
@ -764,6 +755,15 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
<CryptoType accountId={address} />
</Columar.Column>
</Columar>
<Columar is100>
<Columar.Column>
<LinkExternal
data={address}
type='address'
withTitle
/>
</Columar.Column>
</Columar>
</td>
<td />
</tr>

18
packages/page-addresses/src/Contacts/Address.tsx
View File

@ -267,15 +267,6 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
withBalance={BALANCE_OPTS}
withExtended={false}
/>
<Columar is100>
<Columar.Column>
<LinkExternal
data={address}
type='address'
withTitle
/>
</Columar.Column>
</Columar>
<Columar size='tiny'>
<Columar.Column>
<div data-testid='tags'>
@ -286,6 +277,15 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
</div>
</Columar.Column>
</Columar>
<Columar is100>
<Columar.Column>
<LinkExternal
data={address}
type='address'
withTitle
/>
</Columar.Column>
</Columar>
</td>
<td />
</tr>

33
packages/page-referenda/src/Referenda/Referendum.tsx
View File

@ -409,13 +409,6 @@ function Referendum (props: Props): React.ReactElement<Props> {
</Columar>
)}
<Columar size='tiny'>
<Columar.Column>
<LinkExternal
data={id}
type={palletReferenda}
withTitle
/>
</Columar.Column>
<Columar.Column>
{submittedIn && (
<>
@ -423,12 +416,6 @@ function Referendum (props: Props): React.ReactElement<Props> {
<label>#{formatNumber(submittedIn)}</label>
</>
)}
{enactAt && (
<>
<h5>{enactAt.at ? t<string>('Enact at') : t<string>('Enact after')}</h5>
<label>{enactAt.at && '#'}{formatNumber(enactAt.blocks)}</label>
</>
)}
{nextAlarm && (
<>
<h5>{t<string>('Next alarm')}</h5>
@ -436,6 +423,26 @@ function Referendum (props: Props): React.ReactElement<Props> {
</>
)}
</Columar.Column>
<Columar.Column>
{enactAt && (
<>
<h5>{enactAt.at ? t<string>('Enact at') : t<string>('Enact after')}</h5>
<label>{enactAt.at && '#'}{t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(enactAt.blocks) } })}</label>
</>
)}
</Columar.Column>
</Columar>
<Columar
is100
size='tiny'
>
<Columar.Column>
<LinkExternal
data={id}
type={palletReferenda}
withTitle
/>
</Columar.Column>
</Columar>
</td>
<td />

44
packages/react-components/src/LinkExternal.tsx
View File

@ -23,11 +23,7 @@ interface Props {
withTitle?: boolean;
}
// function shortName (name: string): string {
// return `${name[0]}${name[name.length - 1]}`;
// }
function genLinks (systemChain: string, { data, hash, isSidebar, isText, type }: Props): React.ReactNode[] {
function genLinks (systemChain: string, { data, hash, isText, type }: Props): React.ReactNode[] {
return Object
.entries(externalLinks)
.map(([name, { chains, create, isActive, logo, paths, url }]): React.ReactNode | null => {
@ -48,12 +44,7 @@ function genLinks (systemChain: string, { data, hash, isSidebar, isText, type }:
>
{isText
? name
: (
<img
className={`${isSidebar ? ' isSidebar' : ''}`}
src={logo}
/>
)
: <img src={logo} />
}
</a>
);
@ -74,7 +65,7 @@ function LinkExternal ({ className = '', data, hash, isSidebar, isSmall, isText,
}
return (
<div className={`${className} ui--LinkExternal ${isText ? 'isText' : 'isLogo'}${withTitle ? ' isMain' : ''}${isSmall ? ' isSmall' : ''}${isSidebar ? ' isSidebar' : ''}`}>
<div className={`${className} ui--LinkExternal ${isText ? 'isText' : 'isLogo'} ${withTitle ? 'isMain' : ''} ${isSmall ? 'isSmall' : ''} ${isSidebar ? 'isSidebar' : ''}`}>
{(isText && !isSmall) && <div>{t<string>('View this externally')}</div>}
{withTitle && (
<h5>{t('external links')}</h5>
@ -104,24 +95,33 @@ export default React.memo(styled(LinkExternal)`
&.isSidebar {
text-align: center;
.links {
img {
height: 2rem;
width: 2rem;
}
}
}
&:not(.fullColor) {
.links {
img {
filter: grayscale(1) opacity(0.66);
&:hover {
filter: grayscale(0) opacity(1);
}
}
}
}
.links {
img {
border-radius: 50%;
cursor: pointer;
filter: grayscale(1) opacity(0.66);
height: 1.5rem;
width: 1.5rem;
&.isSidebar {
height: 2rem;
width: 2rem;
}
&:hover {
filter: grayscale(0) opacity(1);
}
}
span {