Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
parity
fether
Commits
f1d81094
Unverified
Commit
f1d81094
authored
Jun 29, 2018
by
Amaury Martiny
Committed by
GitHub
Jun 29, 2018
Browse files
Merge pull request #118 from parity-js/am-ux
Small UI improvements
parents
21d537c1
423b719b
Changes
19
Hide whitespace changes
Inline
Side-by-side
package.json
View file @
f1d81094
...
...
@@ -41,11 +41,11 @@
"scripts"
:
{
"build"
:
"lerna run build"
,
"preelectron"
:
"yarn build"
,
"electron"
:
"
lerna run electron --scope fether
"
,
"electron"
:
"
cd packages/fether-electron && yarn electron
"
,
"lint"
:
"semistandard 'packages/**/*.js' --parser babel-eslint"
,
"prepackage"
:
"yarn build"
,
"package"
:
"
lerna run package --scope fether
"
,
"release"
:
"
lerna run release --scope fether
"
,
"package"
:
"
cd packages/fether-electron && yarn package
"
,
"release"
:
"
cd packages/fether-electron && yarn release
"
,
"start"
:
"npm-run-all -l -p start-*"
,
"start-electron"
:
"cd packages/fether-electron && yarn start"
,
"start-hoc"
:
"cd packages/light-hoc && yarn start"
,
...
...
packages/fether-react/src/Accounts/AccountsList/AccountsList.js
View file @
f1d81094
...
...
@@ -96,6 +96,7 @@ class AccountsList extends Component {
?
accountsInfo
[
address
].
name
:
'
(No name)
'
)
}
shortAddress
/>
<
/li
>
))
...
...
packages/fether-react/src/Whitelist/NewTokenItem/NewTokenItem.js
View file @
f1d81094
...
...
@@ -6,18 +6,22 @@
import
React
,
{
Component
}
from
'
react
'
;
import
{
inject
,
observer
}
from
'
mobx-react
'
;
import
{
TokenCard
}
from
'
fether-ui
'
;
import
{
withRouter
}
from
'
react-router-dom
'
;
@
withRouter
@
inject
(
'
tokensStore
'
)
@
observer
class
NewTokenItem
extends
Component
{
handleAddToken
=
()
=>
{
const
{
token
,
tokensStore
}
=
this
.
props
;
const
{
history
,
token
,
tokensStore
}
=
this
.
props
;
tokensStore
.
addToken
(
token
.
address
,
token
);
history
.
goBack
();
};
handleRemoveToken
=
()
=>
{
const
{
token
,
tokensStore
}
=
this
.
props
;
const
{
history
,
token
,
tokensStore
}
=
this
.
props
;
tokensStore
.
removeToken
(
token
.
address
);
history
.
goBack
();
};
render
()
{
...
...
packages/fether-react/src/Whitelist/Whitelist.js
View file @
f1d81094
...
...
@@ -9,7 +9,6 @@ import debounce from 'lodash/debounce';
import
{
Header
}
from
'
fether-ui
'
;
import
{
inject
,
observer
}
from
'
mobx-react
'
;
import
light
from
'
light-hoc
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Health
from
'
../Health
'
;
import
NewTokenItem
from
'
./NewTokenItem
'
;
...
...
@@ -96,17 +95,18 @@ class Whitelist extends Component {
};
render
()
{
const
{
history
}
=
this
.
props
;
const
{
matches
,
search
}
=
this
.
state
;
return
(
<
div
>
<
Header
left
=
{
<
Link
to
=
'
/tokens
'
className
=
'
icon -close
'
>
<
a
to
=
'
/tokens
'
className
=
'
icon -close
'
onClick
=
{
history
.
goBack
}
>
Close
<
/
Link
>
<
/
a
>
}
title
=
{
<
h1
>
My
tokens
<
/h1>
}
title
=
{
<
h1
>
Search
tokens
<
/h1>
}
/>
<
div
className
=
'
window_content
'
>
...
...
packages/fether-react/src/assets/sass/components/_account.scss
View file @
f1d81094
.account
{
display
:
flex
;
&
.-header
{
.account_address
{
font-size
:
0
.6rem
;
}
}
.account_avatar
{
width
:
(
ms
(
0
)
*
1
.3
)
+
1rem
;
height
:
(
ms
(
0
)
*
1
.3
)
+
1rem
;
...
...
@@ -38,7 +44,7 @@
.account_address
{
font-family
:
$mono
;
color
:
$grey
;
font-size
:
ms
(
-2
)
*
0
.9
;
// 0.9 is ugly here
font-size
:
ms
(
-2
)
;
line-height
:
ms
(
-2
)
*
1
.3
;
}
}
packages/fether-react/src/assets/sass/components/_header-nav.scss
View file @
f1d81094
...
...
@@ -32,7 +32,7 @@
padding
:
0
.25rem
0
.5rem
0
.175rem
;
display
:
inline-block
;
font-size
:
ms
(
0
);
line-height
:
ms
(
0
)
*
1
.3
;
line-height
:
ms
(
0
)
*
0
.8
;
color
:
rgba
(
$black
,
0
.675
);
font-weight
:
500
;
}
...
...
packages/fether-ui/src/AccountCard/AccountCard.js
View file @
f1d81094
...
...
@@ -4,39 +4,35 @@
// SPDX-License-Identifier: BSD-3-Clause
import
React
from
'
react
'
;
import
Blockies
from
'
react-blockies
'
;
import
PropTypes
from
'
prop-types
'
;
import
Address
from
'
./Address
'
;
import
Avatar
from
'
./Avatar
'
;
import
Card
from
'
../Card
'
;
import
Placeholder
from
'
../Placeholder
'
;
import
Information
from
'
./Information
'
;
import
Name
from
'
./Name
'
;
const
AccountCard
=
({
address
,
animate
,
name
,
...
otherProps
})
=>
(
const
AccountCard
=
({
address
,
name
,
shortAddress
,
...
otherProps
})
=>
(
<
Card
{...
otherProps
}
>
<
div
className
=
'
account
'
>
<
div
className
=
'
account_avatar
'
>
{
address
?
(
<
Blockies
seed
=
{
address
.
toLowerCase
()}
/
>
)
:
(
<
Placeholder
animate
=
{
animate
}
height
=
{
36
}
width
=
{
36
}
/
>
)}
<
/div
>
<
div
className
=
'
account_information
'
>
{
name
?
(
<
div
className
=
'
account_name
'
>
{
name
}
<
/div
>
)
:
(
<
Placeholder
animate
=
{
animate
}
height
=
{
18
}
width
=
{
100
}
/
>
)}
<
div
className
=
'
account_address
'
>
{
address
||
<
Placeholder
animate
=
{
animate
}
height
=
{
12
}
width
=
{
150
}
/>
}
<
/div
>
<
/div
>
<
Avatar
address
=
{
address
}
/
>
<
Information
>
<
Name
name
=
{
name
}
/
>
<
Address
address
=
{
address
}
short
=
{
shortAddress
}
/
>
<
/Information
>
<
/div
>
<
/Card
>
);
AccountCard
.
Address
=
Address
;
AccountCard
.
Avatar
=
Avatar
;
AccountCard
.
Information
=
Information
;
AccountCard
.
Name
=
Name
;
AccountCard
.
propTypes
=
{
address
:
PropTypes
.
string
,
name
:
PropTypes
.
string
name
:
PropTypes
.
string
,
shortAddress
:
PropTypes
.
bool
};
export
default
AccountCard
;
packages/fether-ui/src/AccountCard/Address/Address.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
AddressShort
from
'
../../AddressShort
'
;
import
Placeholder
from
'
../../Placeholder
'
;
const
Address
=
({
address
,
short
,
...
otherProps
})
=>
(
<
div
className
=
'
account_address
'
{...
otherProps
}
>
{
address
?
(
short
?
(
<
AddressShort
address
=
{
address
}
/
>
)
:
(
address
)
)
:
(
<
Placeholder
height
=
{
18
}
width
=
{
100
}
/
>
)}
<
/div
>
);
Address
.
defaultProps
=
{
short
:
false
};
Address
.
propTypes
=
{
name
:
PropTypes
.
string
,
short
:
PropTypes
.
bool
};
export
default
Address
;
packages/fether-ui/src/AccountCard/Address/index.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
Address
from
'
./Address
'
;
export
default
Address
;
packages/fether-ui/src/AccountCard/Avatar/Avatar.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
React
from
'
react
'
;
import
Blockies
from
'
react-blockies
'
;
import
PropTypes
from
'
prop-types
'
;
import
Placeholder
from
'
../../Placeholder
'
;
const
Avatar
=
({
address
,
...
otherProps
})
=>
(
<
div
className
=
'
account_avatar
'
{...
otherProps
}
>
{
address
?
(
<
Blockies
seed
=
{
address
.
toLowerCase
()}
/
>
)
:
(
<
Placeholder
height
=
{
36
}
width
=
{
36
}
/
>
)}
<
/div
>
);
Avatar
.
propTypes
=
{
address
:
PropTypes
.
string
};
export
default
Avatar
;
packages/fether-ui/src/AccountCard/Avatar/index.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
Avatar
from
'
./Avatar
'
;
export
default
Avatar
;
packages/fether-ui/src/AccountCard/Information/Information.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
const
Information
=
({
children
,
...
otherProps
})
=>
(
<
div
className
=
'
account_information
'
{...
otherProps
}
>
{
children
}
<
/div
>
);
Information
.
propTypes
=
{
children
:
PropTypes
.
node
};
export
default
Information
;
packages/fether-ui/src/AccountCard/Information/index.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
Information
from
'
./Information
'
;
export
default
Information
;
packages/fether-ui/src/AccountCard/Name/Name.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
Placeholder
from
'
../../Placeholder
'
;
const
Name
=
({
name
,
...
otherProps
})
=>
(
<
div
className
=
'
account_name
'
{...
otherProps
}
>
{
name
||
<
Placeholder
height
=
{
18
}
width
=
{
100
}
/>
}
<
/div
>
);
Name
.
propTypes
=
{
name
:
PropTypes
.
string
};
export
default
Name
;
packages/fether-ui/src/AccountCard/Name/index.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
Name
from
'
./Name
'
;
export
default
Name
;
packages/fether-ui/src/AccountHeader/AccountHeader.js
View file @
f1d81094
...
...
@@ -11,11 +11,11 @@ import ClickToCopy from '../ClickToCopy';
import
Header
from
'
../Header
'
;
const
NormalContainer
=
({
children
})
=>
(
<
h1
className
=
'
account
'
>
{
children
}
<
/h1
>
<
h1
className
=
'
account
-header
'
>
{
children
}
<
/h1
>
);
const
CopyContainer
=
({
address
,
children
,
...
otherProps
})
=>
(
<
ClickToCopy
label
=
'
Copy address
'
textToCopy
=
{
address
}
{...
otherProps
}
>
<
a
className
=
'
account
'
>
{
children
}
<
/a
>
<
a
className
=
'
account
-header
'
>
{
children
}
<
/a
>
<
/ClickToCopy
>
);
...
...
@@ -30,10 +30,8 @@ const AccountHeader = ({ address, copyAddress, name, ...otherProps }) => {
name
&&
(
<
Container
address
=
{
address
}
>
<
Blockies
seed
=
{
address
.
toLowerCase
()}
scale
=
{
2
}
size
=
{
8
}
/>{' '
}
{
name
}{
'
'
}
<
span
className
=
'
account_address
'
>
{
address
.
slice
(
0
,
4
)}..{
address
.
slice
(
-
4
)}
<
/span
>
{
name
}
<
br
/>
<
span
className
=
'
account_address
'
>
{
address
}
<
/span
>
<
/Container
>
)
}
...
...
packages/fether-ui/src/AddressShort/AddressShort.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
const
AddressShort
=
({
address
,
as
:
T
=
'
span
'
,
...
otherProps
})
=>
(
<
T
{...
otherProps
}
>
{
address
.
slice
(
0
,
4
)}..{
address
.
slice
(
-
4
)}
<
/T
>
);
AddressShort
.
propTypes
=
{
address
:
PropTypes
.
string
.
isRequired
};
export
default
AddressShort
;
packages/fether-ui/src/AddressShort/index.js
0 → 100644
View file @
f1d81094
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import
AddressShort
from
'
./AddressShort
'
;
export
default
AddressShort
;
packages/fether-ui/src/index.js
View file @
f1d81094
...
...
@@ -5,6 +5,7 @@
import
AccountCard
from
'
./AccountCard
'
;
import
AccountHeader
from
'
./AccountHeader
'
;
import
AddressShort
from
'
./AddressShort
'
;
import
Card
from
'
./Card
'
;
import
FormField
from
'
./FormField
'
;
import
Header
from
'
./Header
'
;
...
...
@@ -14,6 +15,7 @@ import TokenCard from './TokenCard';
export
{
AccountCard
,
AccountHeader
,
AddressShort
,
Card
,
FormField
,
Header
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment