m
/
blowfish
mirror of https://github.com/kremalicious/blowfish.git
1
0
Fork 0
Code Releases Activity

Preferences refactor

This commit is contained in:
Matthias Kretschmann 2019-09-09 00:13:38 +02:00
parent 3745051637
commit 959007f703
Signed by: m
GPG Key ID: 606EEEF3C479A91F
13 changed files with 223 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/index.js
View File

@ -132,22 +132,22 @@ const installDevTools = async mainWindow => {
const createWindowEvents = mainWindow => {
mainWindow.on('enter-full-screen', () =>
mainWindow.webContents.executeJavaScript(
"document.getElementsByTagName('html')[0].classList.add('fullscreen')"
'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')'
)
)
mainWindow.on('leave-full-screen', () =>
mainWindow.webContents.executeJavaScript(
"document.getElementsByTagName('html')[0].classList.remove('fullscreen')"
'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')'
)
)
mainWindow.on('blur', () =>
mainWindow.webContents.executeJavaScript(
"document.getElementsByTagName('html')[0].classList.add('blur')"
'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')'
)
)
mainWindow.on('focus', () =>
mainWindow.webContents.executeJavaScript(
"document.getElementsByTagName('html')[0].classList.remove('blur')"
'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')'
)
)
}
@ -191,10 +191,10 @@ const switchTheme = () => {
isDarkMode
? mainWindow.webContents.executeJavaScript(
"document.getElementsByTagName('html')[0].classList.add('dark')"
'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
)
: mainWindow.webContents.executeJavaScript(
"document.getElementsByTagName('html')[0].classList.remove('dark')"
'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
)
}
}

12
src/renderer/components/Box.module.css Normal file
View File

@ -0,0 +1,12 @@
.box {
width: 100%;
padding: 5%;
background: #fff;
border-radius: 5px;
border: 0.1rem solid #e2e2e2;
}
:global(.dark) .box {
background: #222;
border-color: #303030;
}

13
src/renderer/index.css
View File

@ -64,16 +64,3 @@ button {
a h1 {
color: unset;
}
.box {
width: 100%;
padding: 5%;
background: #fff;
border-radius: 5px;
border: 0.1rem solid #e2e2e2;
}
.dark .box {
background: #222;
border-color: #303030;
}

3
src/renderer/screens/Home/index.jsx
View File

@ -9,6 +9,7 @@ import Total from './Total'
import Account from './Account'
import Ticker from './Ticker'
import IconCog from '../../images/cog.svg'
import stylesBox from '../../components/Box.module.css'
import styles from './index.module.css'
const Accounts = () => {
@ -28,7 +29,7 @@ const Home = () => {
return (
<>
<main className={classnames(styles.main, 'box')}>
<main className={classnames(styles.main, stylesBox.box)}>
<Link className={styles.preferences} to="/preferences">
<IconCog />
</Link>

32
src/renderer/screens/Preferences/Accounts/New.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react'
import PropTypes from 'prop-types'
import styles from './New.module.css'
const New = ({ input, handleInputChange, handleSave, accentColor }) => (
<li>
<input
type="text"
placeholder="0xxxxxxxx"
value={input}
onChange={e => handleInputChange(e)}
className={styles.input}
/>
<button
className={styles.button}
onClick={e => handleSave(e)}
style={{ color: accentColor }}
>
Add
</button>
</li>
)
New.propTypes = {
input: PropTypes.string.isRequired,
handleInputChange: PropTypes.func.isRequired,
handleSave: PropTypes.func.isRequired,
accentColor: PropTypes.string.isRequired
}
export default New

18
src/renderer/screens/Preferences/Accounts/New.module.css Normal file
View File

@ -0,0 +1,18 @@
.input {
font-size: 1rem;
outline: 0;
background: none;
border: 0;
width: 80%;
color: #303030;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
:global(.dark) .input {
color: #fff;
}
.button {
composes: button from './index.module.css';
}

40
src/renderer/screens/Preferences/Accounts/Saved.jsx Normal file
View File

@ -0,0 +1,40 @@
import React from 'react'
import PropTypes from 'prop-types'
import { toDataUrl } from 'ethereum-blockies'
import posed, { PoseGroup } from 'react-pose'
import { fadeIn } from '../../../components/Animations'
import styles from './Saved.module.css'
const Item = posed.li(fadeIn)
const Saved = ({ accounts, handleDelete }) => (
<PoseGroup>
{accounts.map(account => {
const identicon = account && toDataUrl(account)
return (
<Item key={account}>
<div>
<img className={styles.identicon} src={identicon} alt="Blockies" />
{account}
</div>
<button
className={styles.delete}
onClick={e => handleDelete(e, account)}
title="Remove account"
>
&times;
</button>
</Item>
)
})}
</PoseGroup>
)
Saved.propTypes = {
accounts: PropTypes.array.isRequired,
handleDelete: PropTypes.func.isRequired
}
export default Saved

15
src/renderer/screens/Preferences/Accounts/Saved.module.css Normal file
View File

@ -0,0 +1,15 @@
.identicon {
width: 1.5rem !important;
height: 1.5rem !important;
border-radius: 50%;
margin-right: 0.75rem;
}
.delete {
composes: button from './index.module.css';
position: relative;
font-size: 2rem;
top: -0.2rem;
color: #41474e;
transition: color 0.5s ease-out;
}

82
src/renderer/screens/Preferences/Accounts.jsx → src/renderer/screens/Preferences/Accounts/index.jsx
View File

@ -1,70 +1,10 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { toDataUrl } from 'ethereum-blockies'
import posed, { PoseGroup } from 'react-pose'
import Store from 'electron-store'
import ethereum_address from 'ethereum-address'
import { AppContext } from '../../store/createContext'
import { fadeIn } from '../../components/Animations'
const Item = posed.li(fadeIn)
const AccountsList = ({ accounts, handleDelete }) => (
<PoseGroup>
{accounts.map(account => {
const identicon = account && toDataUrl(account)
return (
<Item key={account}>
<div>
<img className="identicon" src={identicon} alt="Blockies" />
{account}
</div>
<button
className="delete"
onClick={e => handleDelete(e, account)}
title="Remove account"
>
&times;
</button>
</Item>
)
})}
</PoseGroup>
)
AccountsList.propTypes = {
accounts: PropTypes.array.isRequired,
handleDelete: PropTypes.func.isRequired
}
const AccountNew = ({ input, handleInputChange, handleSave, accentColor }) => (
<li>
<input
type="text"
placeholder="0xxxxxxxx"
value={input}
onChange={e => handleInputChange(e)}
className="preference__input"
/>
<button
className="preference__input__add"
onClick={e => handleSave(e)}
style={{ color: accentColor }}
>
Add
</button>
</li>
)
AccountNew.propTypes = {
input: PropTypes.string.isRequired,
handleInputChange: PropTypes.func.isRequired,
handleSave: PropTypes.func.isRequired,
accentColor: PropTypes.string.isRequired
}
import { AppContext } from '../../../store/createContext'
import Saved from './Saved'
import New from './New'
import styles from './index.module.css'
export default class Accounts extends PureComponent {
static contextType = AppContext
@ -133,22 +73,22 @@ export default class Accounts extends PureComponent {
const { accounts, input, error } = this.state
return (
<div className="preference box">
<h2 className="preference__title">Accounts</h2>
<p className="preference__help">
<div className={styles.preference}>
<h2 className={styles.title}>Accounts</h2>
<p className={styles.help}>
Add Ethereum account addresses holding Ocean Tokens.
</p>
<ul className="preference__list">
<AccountsList accounts={accounts} handleDelete={this.handleDelete} />
<ul className={styles.list}>
<Saved accounts={accounts} handleDelete={this.handleDelete} />
<AccountNew
<New
input={input}
handleInputChange={this.handleInputChange}
accentColor={accentColor}
handleSave={this.handleSave}
/>
</ul>
{error !== '' && <div className="preference__error">{error}</div>}
{error !== '' && <div className={styles.error}>{error}</div>}
</div>
)
}

62
src/renderer/screens/Preferences/Accounts/index.module.css Normal file
View File

@ -0,0 +1,62 @@
.preference {
composes: box from '../../../components/Box.module.css';
-webkit-app-region: none;
-webkit-user-select: text;
}
.title,
.help {
display: inline-block;
margin-top: 0;
margin-bottom: 0.5rem;
}
.title {
font-size: 1.2rem;
}
.help {
color: #8b98a9;
margin-left: 0.5rem;
}
.error {
font-size: 0.9rem;
}
.list {
padding: 0;
border-top: 1px solid #e2e2e2;
}
:global(.dark) .list {
border-top-color: #303030;
}
.list li,
.list li > div {
display: flex;
align-items: center;
}
.list li {
list-style: none;
justify-content: space-between;
border-bottom: 1px solid #e2e2e2;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
:global(.dark) .list li {
border-bottom-color: #303030;
}
.button {
background: none;
border: 0;
box-shadow: none;
margin: 0;
padding: 0;
outline: 0;
font-size: 1rem;
}

114
src/renderer/screens/Preferences/index.css
View File

@ -1,114 +0,0 @@
.preferences {
text-align: left;
width: 100%;
position: relative;
padding-bottom: 4rem;
}
.preferences__title {
width: 100%;
font-size: 2.2rem;
margin-top: -1rem;
margin-bottom: 2rem;
}
.preferences__close {
text-decoration: none;
font-size: 2rem;
position: absolute;
top: 0;
right: 0;
color: #8b98a9;
}
.preference__list {
padding: 0;
border-top: 1px solid #e2e2e2;
}
.dark .preference__list {
border-top-color: #303030;
}
.preference__list li,
.preference__list li > div {
display: flex;
align-items: center;
}
.preference__list li {
list-style: none;
justify-content: space-between;
border-bottom: 1px solid #e2e2e2;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.dark .preference__list li {
border-bottom-color: #303030;
}
.preferences button {
background: none;
border: 0;
box-shadow: none;
margin: 0;
padding: 0;
outline: 0;
font-size: 1rem;
}
button.delete {
position: relative;
font-size: 2rem;
top: -0.2rem;
color: #41474e;
transition: color 0.5s ease-out;
}
.preference {
-webkit-app-region: none;
-webkit-user-select: text;
}
.preference__title,
.preference__help {
display: inline-block;
margin-top: 0;
margin-bottom: 0.5rem;
}
.preference__title {
font-size: 1.2rem;
}
.preference__help {
color: #8b98a9;
margin-left: 0.5rem;
}
.preference .identicon {
width: 1.5rem !important;
height: 1.5rem !important;
border-radius: 50%;
margin-right: 0.75rem;
}
.preference__input {
font-size: 1rem;
outline: 0;
background: none;
border: 0;
width: 80%;
color: #303030;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.dark .preference__input {
color: #fff;
}
.preference__error {
font-size: 0.9rem;
}

8
src/renderer/screens/Preferences/index.jsx
View File

@ -1,12 +1,12 @@
import React from 'react'
import { Link } from '@reach/router'
import Accounts from './Accounts'
import './index.css'
import styles from './index.module.css'
const Preferences = () => (
<div className="preferences">
<h1 className="preferences__title">Preferences</h1>{' '}
<Link className="preferences__close" title="Close Preferences" to="/">
<div className={styles.preferences}>
<h1 className={styles.title}>Preferences</h1>{' '}
<Link className={styles.close} title="Close Preferences" to="/">
&times;
</Link>
<Accounts />

21
src/renderer/screens/Preferences/index.module.css Normal file
View File

@ -0,0 +1,21 @@
.preferences {
text-align: left;
width: 100%;
position: relative;
}
.title {
width: 100%;
font-size: 2.2rem;
margin-top: -1rem;
margin-bottom: 2rem;
}
.close {
text-decoration: none;
font-size: 2rem;
position: absolute;
top: 0;
right: 0;
color: #8b98a9;
}