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

Introduce Tabs component for in-app menus (#267)

Browse Source 
* Introduce Tabs component for in-app menus

* Change Addresses & Toolbox to Tabs

* Cleanup Tabs (directory -> file)

* Adjust disabled button opacity down
This commit is contained in:
Jaco Greeff 2018-08-29 14:34:01 +02:00 committed by GitHub
parent f5d84c1870
commit 7047f9b572
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 135 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app-accounts/src/Creator.tsx
View File

@ -93,6 +93,7 @@ class Creator extends React.PureComponent<Props, State> {
defaultValue: 'Reset'
})}
/>
<Button.Or />
<Button
isDisabled={!isValid}
isPrimary

1
packages/app-accounts/src/Editor.tsx
View File

@ -71,6 +71,7 @@ class Editor extends React.PureComponent<Props, State> {
defaultValue: 'Reset'
})}
/>
<Button.Or />
<Button
isDisabled={!isEdited}
isPrimary

39
packages/app-accounts/src/index.tsx
View File

@ -7,8 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import './index.css';
import React from 'react';
import Button from '@polkadot/ui-app/Button';
import Tabs from '@polkadot/ui-app/Tabs';
import Creator from './Creator';
import Editor from './Editor';
@ -37,35 +36,33 @@ class AccountsApp extends React.PureComponent<Props, State> {
const { t } = this.props;
const { action } = this.state;
const Component = Components[action];
const items = [
{
name: 'edit',
text: t('app.edit', { defaultValue: 'Edit account' })
},
{
name: 'create',
text: t('app.create', { defaultValue: 'Create account' })
}
];
return (
<main className='accounts--App'>
<header>
<Button.Group>
<Button
isPrimary={action === 'edit'}
onClick={this.selectEdit}
text={t('app.edit', {
defaultValue: 'Edit account'
})}
/>
<Button.Or />
<Button
isPrimary={action === 'create'}
onClick={this.selectCreate}
text={t('app.create', {
defaultValue: 'Create account'
})}
/>
</Button.Group>
<Tabs
activeItem={action}
items={items}
onChange={this.onMenuChange}
/>
</header>
<Component onBack={this.selectEdit} />
</main>
);
}
selectCreate = (): void => {
this.setState({ action: 'create' });
onMenuChange = (action: Actions) => {
this.setState({ action });
}
selectEdit = (): void => {

1
packages/app-addresses/src/Creator.tsx
View File

@ -66,6 +66,7 @@ class Creator extends React.PureComponent<Props, State> {
defaultValue: 'Reset'
})}
/>
<Button.Or />
<Button
isDisabled={!isValid}
isPrimary

1
packages/app-addresses/src/Editor.tsx
View File

@ -71,6 +71,7 @@ class Editor extends React.PureComponent<Props, State> {
defaultValue: 'Reset'
})}
/>
<Button.Or />
<Button
isDisabled={!isEdited}
isPrimary

38
packages/app-addresses/src/index.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import './index.css';
import React from 'react';
import Button from '@polkadot/ui-app/Button';
import Tabs from '@polkadot/ui-app/Tabs';
import Creator from './Creator';
import Editor from './Editor';
@ -36,35 +36,33 @@ class AddressesApp extends React.PureComponent<Props, State> {
const { t } = this.props;
const { action } = this.state;
const Component = Components[action];
const items = [
{
name: 'edit',
text: t('app.edit', { defaultValue: 'Edit address' })
},
{
name: 'create',
text: t('app.create', { defaultValue: 'Add address' })
}
];
return (
<main className='addresses--App'>
<header>
<Button.Group>
<Button
isPrimary={action === 'edit'}
onClick={this.selectEdit}
text={t('app.edit', {
defaultValue: 'Edit address'
})}
/>
<Button.Or />
<Button
isPrimary={action === 'create'}
onClick={this.selectCreate}
text={t('app.create', {
defaultValue: 'Add address'
})}
/>
</Button.Group>
<Tabs
activeItem={action}
items={items}
onChange={this.onMenuChange}
/>
</header>
<Component onBack={this.selectEdit} />
</main>
);
}
selectCreate = (): void => {
this.setState({ action: 'create' });
onMenuChange = (action: Actions) => {
this.setState({ action });
}
selectEdit = (): void => {

72
packages/app-toolbox/src/index.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
import './index.css';
import React from 'react';
import Button from '@polkadot/ui-app/Button';
import Tabs from '@polkadot/ui-app/Tabs';
import Hash from './Hash';
import Sign from './Sign';
@ -37,62 +37,40 @@ class ToolboxApp extends React.PureComponent<Props, State> {
};
render () {
const { t } = this.props;
const { action } = this.state;
const Component = Components[action];
const items = [
{
name: 'hash',
text: t('app.hash', { defaultValue: 'Hash data' })
},
{
name: 'sign',
text: t('app.sign', { defaultValue: 'Sign message' })
},
{
name: 'verify',
text: t('app.verify', { defaultValue: 'Verify signature' })
}
];
return (
<main className='toolbox--App'>
{this.renderButtons()}
<header>
<Tabs
activeItem={action}
items={items}
onChange={this.onMenuChange}
/>
</header>
<Component />
</main>
);
}
renderButtons () {
const { t } = this.props;
const { action } = this.state;
return (
<header>
<Button.Group>
<Button
isPrimary={action === 'hash'}
onClick={this.selectHash}
text={t('app.hash', {
defaultValue: 'Hash data'
})}
/>
<Button.Or />
<Button
isPrimary={action === 'sign'}
onClick={this.selectSign}
text={t('app.sign', {
defaultValue: 'Sign message'
})}
/>
<Button.Or />
<Button
isPrimary={action === 'verify'}
onClick={this.selectVerify}
text={t('app.verify', {
defaultValue: 'Verify signature'
})}
/>
</Button.Group>
</header>
);
}
selectHash = (): void => {
this.setState({ action: 'hash' });
}
selectSign = (): void => {
this.setState({ action: 'sign' });
}
selectVerify = (): void => {
this.setState({ action: 'verify' });
onMenuChange = (action: Actions) => {
this.setState({ action });
}
}

69
packages/ui-app/src/Tabs.tsx Normal file
View File

@ -0,0 +1,69 @@
// Copyright 2017-2018 @polkadot/ui-app authors & contributors
// This software may be modified and distributed under the terms
// of the ISC license. See the LICENSE file for details.
import { BareProps } from './types';
import React from 'react';
import classes from './util/classes';
type Item = {
name: string,
text: React.ReactNode
};
type Props = BareProps & {
activeItem: string,
items: Array<Item>,
onChange: (name: any) => void
};
type State = {
active: string
};
export default class Tabs extends React.PureComponent<Props, State> {
state: State;
constructor (props: Props) {
super(props);
this.state = {
active: props.activeItem
};
}
render () {
const { className, activeItem, items, style } = this.props;
const { active } = this.state;
const currentItem = active || activeItem;
return (
<div
className={classes('ui--Menu', 'ui menu tabular', className)}
style={style}
>
{items.map(({ name, text }) => (
<a
className={classes('item', currentItem === name ? 'active' : '')}
key={name}
onClick={this.onSelect(name)}
>
{text}
</a>
))}
</div>
);
}
private onSelect = (name: string) => {
return (): void => {
const { onChange } = this.props;
this.setState({ active: name }, () => {
onChange(name);
});
};
}
}

2
packages/ui-app/src/styles/semantic.css
View File

@ -93,7 +93,7 @@
.ui.disabled.active.button,
.ui.disabled.button,
.ui.disabled.button:hover {
opacity: 0.4 !important;
opacity: 0.1 !important;
}
.ui.primary.button,