Rework Button (#3171)
* Rework Button * Input dropdown buttons * Adjust cursor & border (InputNumber SI, disabled) * first/last-of-byte in Button.Group * Cleanup classes * Cleanup linting * Small cleanups * Swap to actual <button ...> * Sidebar adjust * Adjust className creation * Adjust signer toggle * Button disabled cursor * Poll adjust loading * Basic buttons, SideBar with theme * Adjust button styling * Adjust Button shadows
This commit is contained in:
Jaco Greeff
GitHub
parent
8bc161cf51
commit
8ed93360d9
@ -15,7 +15,6 @@ import { ThemeProvider } from 'styled-components';
|
||||
import settings from '@polkadot/ui-settings';
|
||||
import Queue from '@polkadot/react-components/Status/Queue';
|
||||
import { BlockAuthors, Events } from '@polkadot/react-query';
|
||||
import AccountSidebar from '@polkadot/app-accounts/Sidebar';
|
||||
import { Api } from '@polkadot/react-api';
|
||||
import Apps from '@polkadot/apps/Apps';
|
||||
import { electronMainApi } from './api/global-exported-api';
|
||||
@ -41,11 +40,9 @@ ReactDOM.render(
|
||||
>
|
||||
<BlockAuthors>
|
||||
<Events>
|
||||
<AccountSidebar>
|
||||
<HashRouter>
|
||||
<Apps />
|
||||
</HashRouter>
|
||||
</AccountSidebar>
|
||||
<HashRouter>
|
||||
<Apps />
|
||||
</HashRouter>
|
||||
</Events>
|
||||
</BlockAuthors>
|
||||
</Api>
|
||||
|
||||
@ -7,6 +7,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import store from 'store';
|
||||
import styled from 'styled-components';
|
||||
import AccountSidebar from '@polkadot/app-accounts/Sidebar';
|
||||
import { getSystemChainColor } from '@polkadot/apps-config/ui';
|
||||
import { defaultColor } from '@polkadot/apps-config/ui/general';
|
||||
import GlobalStyle from '@polkadot/react-components/styles';
|
||||
@ -75,23 +76,25 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle uiHighlight={defaultColor || uiHighlight} />
|
||||
<div className={`apps--Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu ? 'fixed' : ''} ${isMenuOpen ? 'menu-open' : ''} theme--default ${className}`}>
|
||||
<div
|
||||
className={`apps--Menu-bg ${isMenuOpen ? 'open' : 'closed'}`}
|
||||
onClick={_handleResize}
|
||||
/>
|
||||
<SideBar
|
||||
collapse={_collapse}
|
||||
handleResize={_handleResize}
|
||||
isCollapsed={isCollapsed}
|
||||
isMenuOpen={isMenuOpen}
|
||||
toggleMenu={_toggleMenu}
|
||||
/>
|
||||
<Signer>
|
||||
<Content />
|
||||
</Signer>
|
||||
<ConnectingOverlay />
|
||||
<div id={PORTAL_ID} />
|
||||
<div className={`apps--Wrapper ${isCollapsed ? 'collapsed' : 'expanded'}${isMenu ? ' fixed' : ''}${isMenuOpen ? ' menu-open' : ''} theme--default ${className}`}>
|
||||
<AccountSidebar>
|
||||
<div
|
||||
className={`apps--Menu-bg ${isMenuOpen ? 'open' : 'closed'}`}
|
||||
onClick={_handleResize}
|
||||
/>
|
||||
<SideBar
|
||||
collapse={_collapse}
|
||||
handleResize={_handleResize}
|
||||
isCollapsed={isCollapsed}
|
||||
isMenuOpen={isMenuOpen}
|
||||
toggleMenu={_toggleMenu}
|
||||
/>
|
||||
<Signer>
|
||||
<Content />
|
||||
</Signer>
|
||||
<ConnectingOverlay />
|
||||
<div id={PORTAL_ID} />
|
||||
</AccountSidebar>
|
||||
</div>
|
||||
<WarmUp />
|
||||
</>
|
||||
|
||||
@ -239,10 +239,9 @@ export default React.memo(styled(SideBar)`
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
.ui.circular.button {
|
||||
background: white !important;
|
||||
color: #3f3f3f !important;
|
||||
box-shadow: 0 0 0 1px #eee inset !important;
|
||||
.ui--Button {
|
||||
background: white;
|
||||
color: #3f3f3f;
|
||||
margin: 0;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@ import ReactDOM from 'react-dom';
|
||||
import { HashRouter } from 'react-router-dom';
|
||||
import store from 'store';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import AccountSidebar from '@polkadot/app-accounts/Sidebar';
|
||||
import { Api } from '@polkadot/react-api';
|
||||
import Queue from '@polkadot/react-components/Status/Queue';
|
||||
import { BlockAuthors, Events } from '@polkadot/react-query';
|
||||
@ -42,11 +41,9 @@ ReactDOM.render(
|
||||
<Api url={settings.apiUrl}>
|
||||
<BlockAuthors>
|
||||
<Events>
|
||||
<AccountSidebar>
|
||||
<HashRouter>
|
||||
<Apps />
|
||||
</HashRouter>
|
||||
</AccountSidebar>
|
||||
<HashRouter>
|
||||
<Apps />
|
||||
</HashRouter>
|
||||
</Events>
|
||||
</BlockAuthors>
|
||||
</Api>
|
||||
|
||||
@ -115,13 +115,11 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
|
||||
/>
|
||||
{flags.isOwned && (
|
||||
<Button
|
||||
className='basic'
|
||||
icon='check'
|
||||
isPrimary
|
||||
isBasic
|
||||
label={t<string>('Owned')}
|
||||
onMouseEnter={toggleIsHoveringButton}
|
||||
onMouseLeave={toggleIsHoveringButton}
|
||||
size='tiny'
|
||||
/>
|
||||
)}
|
||||
{!flags.isOwned && !flags.isInContacts && (
|
||||
@ -132,31 +130,20 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
|
||||
onClick={_onUpdateName}
|
||||
onMouseEnter={toggleIsHoveringButton}
|
||||
onMouseLeave={toggleIsHoveringButton}
|
||||
size='tiny'
|
||||
/>
|
||||
)}
|
||||
{!flags.isOwned && flags.isInContacts && (
|
||||
<Button
|
||||
className={`ui--AddressMenu-button icon ${isHoveringButton ? '' : 'basic'}`}
|
||||
className='ui--AddressMenu-button'
|
||||
icon='ban'
|
||||
isAnimated
|
||||
isNegative={isHoveringButton}
|
||||
isPositive={!isHoveringButton}
|
||||
label={t<string>('Remove')}
|
||||
onClick={_onForgetAddress}
|
||||
onMouseEnter={toggleIsHoveringButton}
|
||||
onMouseLeave={toggleIsHoveringButton}
|
||||
size='tiny'
|
||||
>
|
||||
<Button.Content visible>
|
||||
<Icon icon='check' />
|
||||
|
||||
{t<string>('Saved')}
|
||||
</Button.Content>
|
||||
<Button.Content hidden>
|
||||
<Icon icon='ban' />
|
||||
|
||||
{t<string>('Remove')}
|
||||
</Button.Content>
|
||||
</Button>
|
||||
/>
|
||||
)}
|
||||
</Button.Group>
|
||||
{isTransferOpen && (
|
||||
@ -207,8 +194,6 @@ export default React.memo(styled(Sidebar)`
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
padding: 0.6rem !important;
|
||||
}
|
||||
|
||||
.ui--AddressMenu-header {
|
||||
@ -221,16 +206,8 @@ export default React.memo(styled(Sidebar)`
|
||||
margin: -1rem -1rem 1rem -1rem;
|
||||
padding: 1rem;
|
||||
|
||||
.ui.button {
|
||||
.ui--Button {
|
||||
transition: 0.5s all;
|
||||
|
||||
&.secondary {
|
||||
background-color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button+.ui.button {
|
||||
margin-left: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -55,13 +55,11 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo
|
||||
icon='plus'
|
||||
isPrimary
|
||||
onClick={_onCreate}
|
||||
size='tiny'
|
||||
/>
|
||||
<Button
|
||||
icon='times'
|
||||
isNegative
|
||||
onClick={_onRemove}
|
||||
size='tiny'
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -79,7 +79,6 @@ function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Pro
|
||||
icon='trash'
|
||||
isNegative
|
||||
onClick={toggleIsForgetOpen}
|
||||
size='small'
|
||||
tooltip={t('Forget this code hash')}
|
||||
/>
|
||||
<Button
|
||||
@ -87,7 +86,6 @@ function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Pro
|
||||
isPrimary
|
||||
label={t('deploy')}
|
||||
onClick={_onShowDeploy}
|
||||
size='small'
|
||||
tooltip={t('Deploy this code hash as a smart contract')}
|
||||
/>
|
||||
</>
|
||||
|
||||
@ -42,7 +42,6 @@ function Outcome ({ className = '', onClear, outcome: { isSuccess, message, orig
|
||||
icon='times'
|
||||
isPrimary
|
||||
onClick={onClear}
|
||||
size='mini'
|
||||
/>
|
||||
</div>
|
||||
<Output
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Button as SUIB, Popup } from 'semantic-ui-react';
|
||||
import { Popup } from 'semantic-ui-react';
|
||||
import { Button, Input } from '@polkadot/react-components';
|
||||
|
||||
import { useTranslation } from './translate';
|
||||
@ -52,19 +52,14 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
|
||||
|
||||
return (
|
||||
<div className={`${className} action-button`}>
|
||||
{
|
||||
// FIXME: The <Popup /> event trigger on='hover' does not work together with the ui-app'
|
||||
// <Button /> component. That's why the original Semantic UI component is being used here.
|
||||
}
|
||||
{isCustomExample && (
|
||||
<Popup
|
||||
content={t<string>('Delete this custom example')}
|
||||
on='hover'
|
||||
trigger={
|
||||
<SUIB
|
||||
circular
|
||||
icon='trash alternate outline'
|
||||
negative
|
||||
<Button
|
||||
icon='trash'
|
||||
isNegative
|
||||
onClick={removeSnippet}
|
||||
/>
|
||||
}
|
||||
@ -77,8 +72,7 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
|
||||
onClose={_onPopupClose}
|
||||
open={isOpen}
|
||||
trigger={
|
||||
<SUIB
|
||||
circular
|
||||
<Button
|
||||
icon='save'
|
||||
onClick={_onPopupOpen}
|
||||
/>
|
||||
@ -106,7 +100,6 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
|
||||
? (
|
||||
<Button
|
||||
icon='times'
|
||||
isCircular
|
||||
onClick={stopJs}
|
||||
/>
|
||||
)
|
||||
@ -114,7 +107,6 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
|
||||
<Button
|
||||
className='play-button'
|
||||
icon='play'
|
||||
isCircular
|
||||
onClick={runJs}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -259,7 +259,6 @@ function Playground ({ className = '' }: Props): React.ReactElement<Props> {
|
||||
<Button
|
||||
className='action-button'
|
||||
icon='eraser'
|
||||
isCircular
|
||||
onClick={_clearConsole}
|
||||
/>
|
||||
</Output>
|
||||
@ -359,9 +358,5 @@ export default React.memo(styled(Playground)`
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
max-width: 300px;
|
||||
|
||||
.button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
@ -98,12 +98,9 @@ function Register ({ nextFreeId = BN_THOUSAND, sudoKey }: Props): React.ReactEle
|
||||
onChange={setId}
|
||||
onEnter={onSendRef.current}
|
||||
onEscape={onClose}
|
||||
placeholder={
|
||||
t(
|
||||
'Positive number greater than or equal to {{nextFreeId}}',
|
||||
{ replace: { nextFreeId: nextFreeId.toString() } }
|
||||
)
|
||||
}
|
||||
placeholder={t<string>('Positive number greater than or equal to {{nextFreeId}}', {
|
||||
replace: { nextFreeId: nextFreeId.toString() }
|
||||
})}
|
||||
/>
|
||||
<Dropdown
|
||||
help={t<string>('The scheduling preference for this parachain.')}
|
||||
|
||||
@ -43,7 +43,13 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
|
||||
}, [totals]);
|
||||
|
||||
if (!totals || !progress || !bestNumber) {
|
||||
return <Spinner label={t<string>('Retrieving totals...')} />;
|
||||
return (
|
||||
<main className={className}>
|
||||
<div className='pollContainer'>
|
||||
<Spinner label={t<string>('Retrieving totals...')} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const blocksLeft = (api.consts.poll.end as BlockNumber).sub(bestNumber);
|
||||
|
||||
@ -25,7 +25,7 @@ function Summary ({ className = '', isVisible, next, nominators, stakingOverview
|
||||
const { lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
|
||||
|
||||
return (
|
||||
<SummaryBox className={`${className} ${!isVisible ? 'staking--hidden' : ''}`}>
|
||||
<SummaryBox className={`${className}${!isVisible ? ' staking--hidden' : ''}`}>
|
||||
<section>
|
||||
{stakingOverview && (
|
||||
<CardSummary label={t<string>('validators')}>
|
||||
|
||||
@ -203,21 +203,19 @@ function Query ({ className = '', onRemove, value }: Props): React.ReactElement<
|
||||
</Labelled>
|
||||
</div>
|
||||
<div className='storage--actionrow-buttons'>
|
||||
<div className='container'>
|
||||
{isSpreadable && (
|
||||
<Button
|
||||
icon='ellipsis-h'
|
||||
key='spread'
|
||||
onClick={_spreadHandler(id)}
|
||||
/>
|
||||
)}
|
||||
{isSpreadable && (
|
||||
<Button
|
||||
icon='times'
|
||||
isNegative
|
||||
key='close'
|
||||
onClick={_onRemove}
|
||||
icon='ellipsis-h'
|
||||
key='spread'
|
||||
onClick={_spreadHandler(id)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
icon='times'
|
||||
isNegative
|
||||
key='close'
|
||||
onClick={_onRemove}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -250,8 +248,6 @@ export default React.memo(styled(Query)`
|
||||
}
|
||||
|
||||
.storage--actionrow-buttons {
|
||||
.container {
|
||||
margin-top: -0.25rem; /* offset parent spacing for buttons */
|
||||
}
|
||||
margin-top: -0.25rem; /* offset parent spacing for buttons */
|
||||
}
|
||||
`);
|
||||
|
||||
@ -42,7 +42,7 @@ export default React.memo(styled(StorageApp)`
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
|
||||
.button {
|
||||
.ui--Button {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
@ -64,6 +64,6 @@ export default React.memo(styled(StorageApp)`
|
||||
|
||||
.storage--actionrow-buttons {
|
||||
flex: 0;
|
||||
padding: 0.625rem 0.25rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
`);
|
||||
|
||||
@ -81,7 +81,7 @@ function extractName (address: string, accountIndex?: AccountIndex, defaultName?
|
||||
isSmall
|
||||
/>
|
||||
)}
|
||||
<span className={`name ${(isLocal || isSpecial) ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{displayName}</span>
|
||||
<span className={`name${(isLocal || isSpecial) ? ' isLocal' : (isAddress ? ' isAddress' : '')}`}>{displayName}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -112,7 +112,7 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration):
|
||||
: identity.displayParent.replace(/[^\x20-\x7E]/g, '')
|
||||
);
|
||||
const elem = createIdElem(
|
||||
<span className={`name ${isGood ? 'isGood' : ''}`}>
|
||||
<span className={`name${isGood ? ' isGood' : ''}`}>
|
||||
<span className='top'>{displayParent || displayName}</span>
|
||||
{displayParent && <span className='sub'>{`/${displayName || ''}`}</span>}
|
||||
</span>,
|
||||
@ -161,7 +161,7 @@ function AccountName ({ children, className = '', defaultName, label, noLookup,
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`ui--AccountName ${withSidebar ? 'withSidebar' : ''} ${className}`}
|
||||
className={`ui--AccountName${withSidebar ? ' withSidebar' : ''} ${className}`}
|
||||
onClick={
|
||||
withSidebar
|
||||
? _onToggleSidebar
|
||||
|
||||
@ -383,8 +383,8 @@ function AddressInfo (props: Props): React.ReactElement<Props> {
|
||||
const { children, className = '', extraInfo, withBalanceToggle, withHexSessionId } = props;
|
||||
|
||||
return (
|
||||
<div className={`ui--AddressInfo ${className} ${withBalanceToggle ? 'ui--AddressInfo-expander' : ''}`}>
|
||||
<div className={`column ${withBalanceToggle ? 'column--expander' : ''}`}>
|
||||
<div className={`ui--AddressInfo${className}${withBalanceToggle ? ' ui--AddressInfo-expander' : ''}`}>
|
||||
<div className={`column${withBalanceToggle ? ' column--expander' : ''}`}>
|
||||
{renderBalances(props, allAccounts, t)}
|
||||
{withHexSessionId && withHexSessionId[0] && (
|
||||
<>
|
||||
|
||||
@ -26,7 +26,7 @@ function AddressSmall ({ children, className = '', defaultName, onClickName, ove
|
||||
<div className={`ui--AddressSmall ${className}`}>
|
||||
<IdentityIcon value={value as Uint8Array} />
|
||||
<AccountName
|
||||
className={`${withSidebar ? 'withSidebar' : ''}`}
|
||||
className={withSidebar ? 'withSidebar' : ''}
|
||||
defaultName={defaultName}
|
||||
onClick={onClickName}
|
||||
override={overrideName}
|
||||
|
||||
@ -62,7 +62,7 @@ function AddressToggle ({ address, className = '', filter, isHidden, noLookup, n
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`ui--AddressToggle ${className} ${(value || noToggle) ? 'isAye' : 'isNay'} ${isHidden || isFiltered ? 'isHidden' : ''}`}
|
||||
className={`ui--AddressToggle ${className}${(value || noToggle) ? ' isAye' : ' isNay'}${isHidden || isFiltered ? ' isHidden' : ''}`}
|
||||
onClick={_onClick}
|
||||
>
|
||||
<AddressMini
|
||||
|
||||
@ -31,7 +31,7 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
|
||||
return (
|
||||
<div
|
||||
{...extraProps}
|
||||
className={`ui--Badge ${hover ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${color}Color ${className}`}
|
||||
className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''} ${color}Color ${className}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{info || (icon && <Icon icon={icon} />)}
|
||||
|
||||
@ -4,68 +4,90 @@
|
||||
|
||||
import { ButtonProps } from './types';
|
||||
|
||||
import React from 'react';
|
||||
import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
|
||||
import React, { useCallback } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import Icon from '../Icon';
|
||||
|
||||
function Button ({ children, className = '', floated, icon, isAnimated, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isIcon, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, onMouseEnter, onMouseLeave, size, tabIndex }: ButtonProps): React.ReactElement<ButtonProps> {
|
||||
const props = {
|
||||
animate: 'fade',
|
||||
animated: isAnimated,
|
||||
basic: isBasic,
|
||||
circular: true,
|
||||
className: `${className} ${isCircular ? 'isCircular' : ''} ${isIcon ? 'isIcon' : ''} ${(isCircular || isIcon || !(children || label)) ? 'icon' : ''}`,
|
||||
disabled: isDisabled,
|
||||
floated,
|
||||
fluid: isFluid,
|
||||
labelPosition,
|
||||
loading: isLoading,
|
||||
negative: isNegative,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
positive: isPositive,
|
||||
primary: isPrimary,
|
||||
secondary: !isBasic && !(isPositive || isPrimary || isNegative),
|
||||
size: size || (isCircular ? undefined : (isIcon ? 'tiny' : 'small')),
|
||||
tabIndex
|
||||
};
|
||||
function Button ({ children, className = '', icon, isBasic = false, isCircular = false, isDisabled = false, isFull = false, isIcon, isNegative = false, isPositive = false, isPrimary = false, label, onClick, onMouseEnter, onMouseLeave, tabIndex }: ButtonProps): React.ReactElement<ButtonProps> {
|
||||
const _onClick = useCallback(
|
||||
(): void => {
|
||||
!isDisabled && onClick && onClick();
|
||||
},
|
||||
[isDisabled, onClick]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SUIButton {...props}>
|
||||
{icon && (
|
||||
<><Icon icon={icon} />{(isIcon || isCircular) ? '' : ' '}</>
|
||||
)}
|
||||
{label}
|
||||
{children}
|
||||
</SUIButton>
|
||||
</>
|
||||
<button
|
||||
className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${isNegative ? ' isNegative' : ''}${isPositive ? ' isPositive' : ''}${isPrimary ? (isBasic ? ' ui--highlight--border' : ' ui--highlight--button') : ''} ${className}`}
|
||||
disabled={isDisabled}
|
||||
onClick={_onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
tabIndex={tabIndex}
|
||||
>
|
||||
{icon && <Icon icon={icon} />}
|
||||
{label}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(styled(Button)`
|
||||
border-radius: 10rem !important;
|
||||
border: none;
|
||||
font-size: 0.92857142857rem; // 13/14px
|
||||
text-align: center;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not(.hasLabel) {
|
||||
padding: 0.75em;
|
||||
|
||||
&:not(.icon) {
|
||||
> .ui--Icon {
|
||||
margin-right: 0.25rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon > .ui--Icon {
|
||||
width: 1rem;
|
||||
&:not(.isCircular) {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline:0;
|
||||
}
|
||||
|
||||
&.hasLabel {
|
||||
padding: 0.75em 1.5em;
|
||||
|
||||
> .ui--Icon {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.isBasic {
|
||||
background: white !important;
|
||||
box-shadow: 0 0 0 1px #ddd;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
&.isCircular {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
&.isFull {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.isIcon {
|
||||
background: white !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.ui--Icon {
|
||||
margin: 0 0 0 0.25rem !important;
|
||||
}
|
||||
background: transparent;
|
||||
}
|
||||
`);
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
// Copyright 2017-2020 @polkadot/react-components 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';
|
||||
import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
|
||||
|
||||
import { ContentProps as Props } from './types';
|
||||
|
||||
export default function ButtonContent ({ children, hidden, visible }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<SUIButton.Content
|
||||
hidden={hidden}
|
||||
visible={visible}
|
||||
>
|
||||
{children}
|
||||
</SUIButton.Content>
|
||||
);
|
||||
}
|
||||
@ -5,18 +5,12 @@
|
||||
import { GroupProps } from './types';
|
||||
|
||||
import React from 'react';
|
||||
import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
|
||||
import styled from 'styled-components';
|
||||
|
||||
function ButtonGroup ({ children, className = '', isBasic, isCentered }: GroupProps): React.ReactElement<GroupProps> {
|
||||
function ButtonGroup ({ children, className = '', isCentered }: GroupProps): React.ReactElement<GroupProps> {
|
||||
return (
|
||||
<div className={`${className} ui--Button-Group ${isCentered ? 'centered' : ''}`}>
|
||||
<SUIButton.Group
|
||||
basic={isBasic}
|
||||
size='small'
|
||||
>
|
||||
{children}
|
||||
</SUIButton.Group>
|
||||
<div className={`ui--Button-Group${isCentered ? ' isCentered' : ''} ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -28,11 +22,7 @@ export default React.memo(styled(ButtonGroup)`
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
> .ui.buttons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.centered {
|
||||
&.isCentered {
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
@ -40,4 +30,18 @@ export default React.memo(styled(ButtonGroup)`
|
||||
&+.ui--Table {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.ui--Button {
|
||||
margin-left: 1px !important;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-bottom-left-radius: 0rem !important;
|
||||
border-top-left-radius: 0rem !important;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
@ -5,12 +5,10 @@
|
||||
import { ButtonType } from './types';
|
||||
|
||||
import IButton from './Button';
|
||||
import Content from './Content';
|
||||
import Group from './Group';
|
||||
|
||||
const Button = IButton as unknown as ButtonType;
|
||||
|
||||
Button.Content = Content;
|
||||
Button.Group = Group;
|
||||
|
||||
export default Button;
|
||||
|
||||
@ -11,46 +11,32 @@ export type Button$Callback = () => void | Promise<void>;
|
||||
export interface ButtonProps {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
floated?: 'left' | 'right';
|
||||
icon?: IconName;
|
||||
isAnimated?: SUIButtonProps['animated'];
|
||||
isBasic?: boolean;
|
||||
isCircular?: boolean;
|
||||
isDisabled?: boolean;
|
||||
isFluid?: boolean;
|
||||
isFull?: boolean;
|
||||
isIcon?: boolean;
|
||||
isLoading?: boolean;
|
||||
isNegative?: boolean;
|
||||
isPositive?: boolean;
|
||||
isPrimary?: boolean;
|
||||
label?: React.ReactNode;
|
||||
labelPosition?: 'left' | 'right';
|
||||
onClick?: Button$Callback;
|
||||
onMouseEnter?: Button$Callback;
|
||||
onMouseLeave?: Button$Callback;
|
||||
ref?: any;
|
||||
size?: SUIButtonProps['size'];
|
||||
tabIndex?: number;
|
||||
tooltip?: React.ReactNode;
|
||||
}
|
||||
|
||||
export type DividerProps = BareProps;
|
||||
|
||||
export interface ContentProps {
|
||||
children?: React.ReactNode;
|
||||
hidden?: boolean;
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
export interface GroupProps {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
isBasic?: boolean;
|
||||
isCentered?: boolean;
|
||||
}
|
||||
|
||||
export type ButtonType = React.ComponentType<ButtonProps> & {
|
||||
Content: React.ComponentType<ContentProps>;
|
||||
Group: React.ComponentType<GroupProps>;
|
||||
Or: React.ComponentType<BareProps>;
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ interface Props {
|
||||
|
||||
function Card ({ children, className = '', isError, isSuccess, withBottomMargin }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<article className={`ui--Card ${className} ${(isError && !isSuccess) ? 'error' : ''} ${(!isError && isSuccess) ? 'success' : ''} ${withBottomMargin ? 'withBottomMargin' : ''}`}>
|
||||
<article className={`ui--Card${className}${(isError && !isSuccess) ? ' error' : ''}${(!isError && isSuccess) ? ' success' : ''}${withBottomMargin ? ' withBottomMargin' : ''}`}>
|
||||
{children}
|
||||
</article>
|
||||
);
|
||||
|
||||
@ -17,11 +17,10 @@ interface Props {
|
||||
className?: string;
|
||||
icon?: IconName;
|
||||
isAddress?: boolean;
|
||||
size?: 'large' | 'small';
|
||||
value: string;
|
||||
}
|
||||
|
||||
function CopyButton ({ children, className, icon = 'copy', isAddress = false, size = 'small', value }: Props): React.ReactElement<Props> {
|
||||
function CopyButton ({ children, className, icon = 'copy', isAddress = false, value }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const { queueAction } = useContext(StatusContext);
|
||||
|
||||
@ -50,7 +49,6 @@ function CopyButton ({ children, className, icon = 'copy', isAddress = false, si
|
||||
className='icon-button show-on-hover'
|
||||
icon={icon}
|
||||
isPrimary
|
||||
size={size}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -107,11 +107,7 @@ function BaseDropdown<Option> ({ allowAdd = false, className = '', defaultValue,
|
||||
);
|
||||
|
||||
return isButton
|
||||
? (
|
||||
<SUIButton.Group primary>
|
||||
{dropdown}
|
||||
</SUIButton.Group>
|
||||
)
|
||||
? <SUIButton.Group>{dropdown}</SUIButton.Group>
|
||||
: (
|
||||
<Labelled
|
||||
className={classes('ui--Dropdown', className)}
|
||||
|
||||
@ -29,7 +29,7 @@ function Icon ({ className = '', color = 'normal', icon, isSpinning, onClick, si
|
||||
return (
|
||||
<FontAwesomeIcon
|
||||
{...extraProps}
|
||||
className={`ui--Icon ${color}Color ${onClick ? 'isClickable' : ''} ${className}`}
|
||||
className={`ui--Icon ${color}Color${onClick ? ' isClickable' : ''} ${className}`}
|
||||
icon={icon}
|
||||
onClick={onClick}
|
||||
size={size}
|
||||
|
||||
@ -7,6 +7,7 @@ import { BitLength } from './types';
|
||||
|
||||
import BN from 'bn.js';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { BN_ZERO, BN_TEN, formatBalance, isBn } from '@polkadot/util';
|
||||
|
||||
import { classes } from './util';
|
||||
@ -245,7 +246,7 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
|
||||
return (
|
||||
<Input
|
||||
autoFocus={autoFocus}
|
||||
className={classes('ui--InputNumber', className)}
|
||||
className={classes('ui--InputNumber', isDisabled && 'isDisabled', className)}
|
||||
help={help}
|
||||
isAction={isSi}
|
||||
isDisabled={isDisabled}
|
||||
@ -279,4 +280,18 @@ function InputNumber ({ autoFocus, bitLength = DEFAULT_BITLENGTH, children, clas
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(InputNumber);
|
||||
export default React.memo(styled(InputNumber)`
|
||||
&.isDisabled {
|
||||
.ui--SiDropdown {
|
||||
background: transparent;
|
||||
border-color: rgba(34, 36, 38, .15) !important;
|
||||
border-style: dashed;
|
||||
color: #666 !important;
|
||||
cursor: default !important;
|
||||
|
||||
.dropdown.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
@ -76,7 +76,7 @@ function LinkExternal ({ className = '', data, hash, type, withShort }: Props):
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${className} ${withShort ? 'withShort' : ''}`}>
|
||||
<div className={`${className}${withShort ? ' withShort' : ''}`}>
|
||||
{!withShort && <div>{t<string>('View this externally')}</div>}
|
||||
<div className='links'>{links.map((link, index) => <span key={index}>{link}</span>)}</div>
|
||||
</div>
|
||||
|
||||
@ -4,9 +4,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import { MAX_PASS_LEN } from '@polkadot/ui-keyring/defaults';
|
||||
// import { useToggle } from '@polkadot/react-hooks';
|
||||
|
||||
// import Button from './Button';
|
||||
import Input from './Input';
|
||||
|
||||
interface Props {
|
||||
@ -30,8 +28,6 @@ interface Props {
|
||||
}
|
||||
|
||||
function Password ({ autoFocus, children, className = '', defaultValue, help, isDisabled, isError, isFull, label, labelExtra, name, onChange, onEnter, onEscape, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
|
||||
// const [isVisible, toggleVisible] = useToggle();
|
||||
|
||||
return (
|
||||
<Input
|
||||
autoFocus={autoFocus}
|
||||
@ -49,23 +45,10 @@ function Password ({ autoFocus, children, className = '', defaultValue, help, is
|
||||
onEnter={onEnter}
|
||||
onEscape={onEscape}
|
||||
tabIndex={tabIndex}
|
||||
// type={
|
||||
// isVisible
|
||||
// ? 'text'
|
||||
// : 'password'
|
||||
// }
|
||||
type='password'
|
||||
value={value}
|
||||
withLabel={withLabel}
|
||||
>
|
||||
{/* <Button
|
||||
icon={
|
||||
isVisible
|
||||
? 'hide'
|
||||
: 'unhide'
|
||||
}
|
||||
onClick={toggleVisible}
|
||||
/> */}
|
||||
{children}
|
||||
</Input>
|
||||
);
|
||||
|
||||
@ -190,7 +190,7 @@ function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
|
||||
<div className='dismiss'>
|
||||
<Button
|
||||
icon='times'
|
||||
isFluid
|
||||
isFull
|
||||
isPrimary
|
||||
label={t<string>('Dismiss all notifications')}
|
||||
onClick={_onDismiss}
|
||||
|
||||
@ -80,10 +80,6 @@ export default React.memo(styled(Body)`
|
||||
> * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.button {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.combined {
|
||||
@ -170,21 +166,10 @@ export default React.memo(styled(Body)`
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button:not(.isIcon):not(:hover) {
|
||||
.ui--Button:not(.isIcon):not(:hover) {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: #555 !important;
|
||||
|
||||
&:not(.basic) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.basic {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button+.ui.button {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~.box:before,
|
||||
|
||||
@ -26,7 +26,7 @@ function Tag ({ className = '', color = 'grey', hover, isTag = true, label, size
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${color}Color ${isTag ? 'isTag' : ''} ${size}Size ${className}`}
|
||||
className={`${color}Color${isTag ? ' isTag' : ''} ${size}Size ${className}`}
|
||||
color={color || 'grey'}
|
||||
{...tooltipProps}
|
||||
>
|
||||
|
||||
@ -14,7 +14,7 @@ import Button from './Button';
|
||||
import { StatusContext } from './Status';
|
||||
import { useTranslation } from './translate';
|
||||
|
||||
function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isDisabled, isIcon, isNegative, isPrimary, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, size, tooltip, tx, withSpinner }: Props): React.ReactElement<Props> {
|
||||
function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isDisabled, isIcon, isNegative, isPrimary, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tooltip, tx, withSpinner }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const { api } = useApi();
|
||||
const { queueExtrinsic } = useContext(StatusContext);
|
||||
@ -89,7 +89,6 @@ function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon,
|
||||
isBasic={isBasic}
|
||||
isDisabled={isSending || isDisabled || needsAccount}
|
||||
isIcon={isIcon}
|
||||
isLoading={isSending}
|
||||
isNegative={isNegative}
|
||||
isPrimary={
|
||||
isUndefined(isPrimary) && isUndefined(isIcon)
|
||||
@ -98,7 +97,6 @@ function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon,
|
||||
}
|
||||
label={label || (isIcon ? '' : t<string>('Submit'))}
|
||||
onClick={_onSend}
|
||||
size={size}
|
||||
tooltip={tooltip}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -35,6 +35,15 @@ export default createGlobalStyle<Props>`
|
||||
border-color: ${getHighlight} !important;
|
||||
}
|
||||
|
||||
.ui--highlight--button {
|
||||
background: ${getHighlight} !important;
|
||||
// box-shadow: 0 0 0 1px ${getHighlight} !important;
|
||||
|
||||
&:hover {
|
||||
// box-shadow: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui--highlight--color {
|
||||
color: ${getHighlight} !important;
|
||||
}
|
||||
|
||||
@ -167,10 +167,6 @@ export default css`
|
||||
opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.ui.button+.ui.button {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
/* modals aligned to top, not center */
|
||||
.ui.dimmer {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
import { css } from 'styled-components';
|
||||
|
||||
/* default buttons, dark gray */
|
||||
export const colorBtnDefault = '#666';
|
||||
export const colorBtnDefault = '#767778';
|
||||
|
||||
export const colorBtnShadow = '#98999a';
|
||||
|
||||
/* highlighted buttons, orange */
|
||||
export const colorBtnHighlight = '#f19135';
|
||||
@ -29,9 +31,9 @@ export default css`
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button,
|
||||
.ui.buttons .button {
|
||||
.ui--Button {
|
||||
background-color: ${colorBtnDefault};
|
||||
// box-shadow: 0 0 0 1px ${colorBtnShadow};
|
||||
color: ${colorBtnText};
|
||||
|
||||
&.active,
|
||||
@ -43,7 +45,8 @@ export default css`
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(120%);
|
||||
// box-shadow: 0 0 0 1px ${colorBtnText};
|
||||
filter: brightness(110%);
|
||||
}
|
||||
|
||||
&.isIcon {
|
||||
@ -60,17 +63,5 @@ export default css`
|
||||
.ui.modal > .header:not(.ui) {
|
||||
border-bottom-color: ${colorBtnHighlight};
|
||||
}
|
||||
|
||||
/* this is for dropdown buttons */
|
||||
.ui.buttons .ui.button.selection.visible.dropdown {
|
||||
&:hover {
|
||||
/* reset opacity, this is now open */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .text:not(.default) {
|
||||
color: ${colorBtnText};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -33,7 +33,6 @@ function SignFields ({ address, onChange, signedTx }: Props): React.ReactElement
|
||||
}, [address, api]);
|
||||
|
||||
useEffect((): void => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
onChange({ era: blocks.toNumber(), nonce });
|
||||
}, [blocks, nonce, onChange]);
|
||||
|
||||
@ -54,16 +53,16 @@ function SignFields ({ address, onChange, signedTx }: Props): React.ReactElement
|
||||
<InputNumber
|
||||
isDisabled={!!signedTx}
|
||||
isZeroable
|
||||
label={t('Nonce')}
|
||||
labelExtra={t('Current account nonce: {{accountNonce}}', { replace: { accountNonce: nonce } })}
|
||||
label={t<string>('Nonce')}
|
||||
labelExtra={t<string>('Current account nonce: {{accountNonce}}', { replace: { accountNonce: nonce } })}
|
||||
onChange={_setNonce}
|
||||
value={nonce}
|
||||
/>
|
||||
<InputNumber
|
||||
isDisabled={!!signedTx}
|
||||
isZeroable
|
||||
label={t('Lifetime (# of blocks)')}
|
||||
labelExtra={t('Set to 0 to make transaction immortal')}
|
||||
label={t<string>('Lifetime (# of blocks)')}
|
||||
labelExtra={t<string>('Set to 0 to make transaction immortal')}
|
||||
onChange={_setBlocks}
|
||||
value={blocks}
|
||||
/>
|
||||
|
||||
@ -112,7 +112,8 @@ function Signer ({ children, className = '' }: Props): React.ReactElement<Props>
|
||||
|
||||
export default React.memo(styled(Signer)`
|
||||
.signToggle {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
`);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user