diff --git a/package.json b/package.json index ee4c3729..8055814f 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,8 @@ "material-ui-icons": "^1.0.0-beta.35", "react-final-form": "^3.1.2", "react-loadable": "^5.3.1", - "react-router-dom": "^4.2.2" + "react-router-dom": "^4.2.2", + "recompose": "^0.27.0" }, "jest": { "verbose": true, diff --git a/src/components/List/ListItemText/index.jsx b/src/components/List/ListItemText/index.jsx new file mode 100644 index 00000000..0ee309ab --- /dev/null +++ b/src/components/List/ListItemText/index.jsx @@ -0,0 +1,38 @@ +// @flow +import * as React from 'react' +import { ListItemText } from 'material-ui/List' +import { withStyles } from 'material-ui/styles' +import { type WithStyles } from '~/theme/mui' + +type Props = WithStyles & { + primary: string, + secondary: string, + cut?: boolean, +} + +const styles = { + itemTextSecondary: { + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + }, +} + +const GnoListItemText = ({ + primary, secondary, classes, cut = false, +}: Props) => { + const cutStyle = cut ? { + secondary: classes.itemTextSecondary, + } : undefined + + return ( + + ) +} + +export default withStyles(styles)(GnoListItemText) diff --git a/src/components/hoc/OpenHoc.jsx b/src/components/hoc/OpenHoc.jsx new file mode 100644 index 00000000..1491c7bf --- /dev/null +++ b/src/components/hoc/OpenHoc.jsx @@ -0,0 +1,12 @@ +// @flow +import { withStateHandlers } from 'recompose' + +export type Open = { + open: boolean, + toggle: () => void, +} + +export default withStateHandlers( + () => ({ open: false }), + { toggle: ({ open }) => () => ({ open: !open }) }, +) diff --git a/src/components/layout/Block/index.jsx b/src/components/layout/Block/index.jsx index 04e080c3..a92dd060 100644 --- a/src/components/layout/Block/index.jsx +++ b/src/components/layout/Block/index.jsx @@ -11,7 +11,7 @@ type Size = 'sm' | 'md' | 'lg' | 'xl' type Props = { margin?: Size, padding?: Size, - center?: boolean, + align?: 'center' | 'right', children: React$Node, className?: string, } @@ -19,12 +19,12 @@ type Props = { class Block extends PureComponent { render() { const { - margin, padding, center, children, className, ...props + margin, padding, align, children, className, ...props } = this.props const paddingStyle = padding ? capitalize(padding, 'padding') : undefined return ( -
+
{ children }
) diff --git a/src/components/layout/Block/index.scss b/src/components/layout/Block/index.scss index b8e523a0..62a278cb 100644 --- a/src/components/layout/Block/index.scss +++ b/src/components/layout/Block/index.scss @@ -1,5 +1,4 @@ .block { - display: inline-block; width: 100%; overflow: hidden; } @@ -37,7 +36,13 @@ } .center { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; +} + +.right { + display: flex; + align-items: center; + justify-content: flex-end; } \ No newline at end of file diff --git a/src/components/layout/Col/index.jsx b/src/components/layout/Col/index.jsx index 5260e678..1e8137c5 100644 --- a/src/components/layout/Col/index.jsx +++ b/src/components/layout/Col/index.jsx @@ -16,6 +16,7 @@ type Props = { around?: 'xs' | 'sm' | 'md' | 'lg', between?: 'xs' | 'sm' | 'md' | 'lg', margin?: 'sm' | 'md' | 'lg' | 'xl', + layout?: 'inherit' | 'block', xs?: number | boolean, sm?: number | boolean, md?: number | boolean, @@ -29,7 +30,7 @@ type Props = { } const Col = ({ - children, margin, + children, margin, layout = 'inherit', xs, sm, md, lg, start, center, end, top, middle, bottom, around, between, xsOffset, smOffset, mdOffset, lgOffset, @@ -54,6 +55,7 @@ const Col = ({ smOffset ? capitalize(smOffset, 'smOffset') : undefined, mdOffset ? capitalize(mdOffset, 'mdOffset') : undefined, lgOffset ? capitalize(lgOffset, 'lgOffset') : undefined, + layout, props.className, ) diff --git a/src/components/layout/Col/index.scss b/src/components/layout/Col/index.scss index dfe5e164..91fb43d6 100644 --- a/src/components/layout/Col/index.scss +++ b/src/components/layout/Col/index.scss @@ -1,7 +1,15 @@ .col { flex: 1 1 auto; - display: flex; align-items: center; + display: inherit; +} + +.inherit { + display: inherit; +} + +.block { + display: block; } .marginSm { @@ -128,11 +136,11 @@ @define-mixin autoWidth $size { .$(size) { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; } } diff --git a/src/routes/safe/component/Safe.jsx b/src/routes/safe/component/Safe.jsx deleted file mode 100644 index 69b86137..00000000 --- a/src/routes/safe/component/Safe.jsx +++ /dev/null @@ -1,86 +0,0 @@ -// @flow -import * as React from 'react' -import Block from '~/components/layout/Block' -import Bold from '~/components/layout/Bold' -import Col from '~/components/layout/Col' -import Paragraph from '~/components/layout/Paragraph' -import Row from '~/components/layout/Row' -import Table, { TableBody, TableCell, TableHead, TableRow } from '~/components/layout/Table' -import { type Safe } from '~/routes/safe/store/model/safe' - -type SafeProps = { - safe: Safe, - balance: string, -} - -const GnoSafe = ({ safe, balance }: SafeProps) => ( - - - - - {safe.name.toUpperCase()} - - - - - - Balance - - - - - - {balance} - ETH - - - - - - Address - - - - - - {safe.address} - - - - - - Number of required confirmations per transaction - - - - - {safe.get('confirmations')} - - - - - Owners - - - - - - - Name - Adress - - - - {safe.owners.map(owner => ( - - {owner.name} - {owner.address} - - ))} - -
-
- - -) - -export default GnoSafe diff --git a/src/routes/safe/component/Safe/Address.jsx b/src/routes/safe/component/Safe/Address.jsx new file mode 100644 index 00000000..3a21532e --- /dev/null +++ b/src/routes/safe/component/Safe/Address.jsx @@ -0,0 +1,21 @@ +// @flow +import * as React from 'react' +import { ListItem } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import Mail from 'material-ui-icons/Mail' +import ListItemText from '~/components/List/ListItemText' + +type Props = { + address: string, +} + +const Address = ({ address }: Props) => ( + + + + + + +) + +export default Address diff --git a/src/routes/safe/component/Safe/Balance.jsx b/src/routes/safe/component/Safe/Balance.jsx new file mode 100644 index 00000000..95aeef3f --- /dev/null +++ b/src/routes/safe/component/Safe/Balance.jsx @@ -0,0 +1,20 @@ +// @flow +import * as React from 'react' +import { ListItem, ListItemText } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import AccountBalance from 'material-ui-icons/AccountBalance' + +type Props = { + balance: string, +} + +const Balance = ({ balance }: Props) => ( + + + + + + +) + +export default Balance diff --git a/src/routes/safe/component/Safe/Confirmations.jsx b/src/routes/safe/component/Safe/Confirmations.jsx new file mode 100644 index 00000000..91c192d9 --- /dev/null +++ b/src/routes/safe/component/Safe/Confirmations.jsx @@ -0,0 +1,25 @@ +// @flow +import * as React from 'react' +import { ListItem } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import DoneAll from 'material-ui-icons/DoneAll' +import ListItemText from '~/components/List/ListItemText' + +type Props = { + confirmations: number, +} + +const Confirmations = ({ confirmations }: Props) => ( + + + + + + +) + +export default Confirmations diff --git a/src/routes/safe/component/Safe/Owners.jsx b/src/routes/safe/component/Safe/Owners.jsx new file mode 100644 index 00000000..e552beb1 --- /dev/null +++ b/src/routes/safe/component/Safe/Owners.jsx @@ -0,0 +1,58 @@ +// @flow +import * as React from 'react' +import openHoc, { type Open } from '~/components/hoc/OpenHoc' +import { withStyles } from 'material-ui/styles' +import Collapse from 'material-ui/transitions/Collapse' +import ListItemText from '~/components/List/ListItemText' +import List, { ListItem, ListItemIcon } from 'material-ui/List' +import Avatar from 'material-ui/Avatar' +import Group from 'material-ui-icons/Group' +import Person from 'material-ui-icons/Person' +import ExpandLess from 'material-ui-icons/ExpandLess' +import ExpandMore from 'material-ui-icons/ExpandMore' +import { type OwnerProps } from '~/routes/safe/store/model/owner' +import { type WithStyles } from '~/theme/mui' + +const styles = { + nested: { + paddingLeft: '40px', + }, +} + +type Props = Open & WithStyles & { + owners: List, +} + +const Owners = openHoc(({ + open, toggle, owners, classes, +}: Props) => ( + + + + + + + + {open ? : } + + + + + {owners.map(owner => ( + + + + + + + ))} + + + +)) + +export default withStyles(styles)(Owners) diff --git a/src/routes/safe/component/Safe/index.jsx b/src/routes/safe/component/Safe/index.jsx new file mode 100644 index 00000000..40a1c9c6 --- /dev/null +++ b/src/routes/safe/component/Safe/index.jsx @@ -0,0 +1,58 @@ +// @flow +import * as React from 'react' +import Block from '~/components/layout/Block' +import Col from '~/components/layout/Col' +import Bold from '~/components/layout/Bold' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import { type Safe } from '~/routes/safe/store/model/safe' +import List from 'material-ui/List' + +import Address from './Address' +import Balance from './Balance' +import Owners from './Owners' +import Confirmations from './Confirmations' + +type SafeProps = { + safe: Safe, + balance: string, +} + +const listStyle = { + width: '100%', +} + +class GnoSafe extends React.PureComponent { + render() { + const { safe, balance } = this.props + + return ( + + + + + + +
+ + + + + + {safe.name.toUpperCase()} + + + + Extra info will be placed here + + + + ) + } +} + +/* + + {safe.name.toUpperCase()} +*/ +export default GnoSafe diff --git a/src/theme/mui.js b/src/theme/mui.js index cd9d9ea3..486d3422 100644 --- a/src/theme/mui.js +++ b/src/theme/mui.js @@ -1,7 +1,12 @@ -import red from 'material-ui/colors/red'; +// @flow +import red from 'material-ui/colors/red' import { createMuiTheme } from 'material-ui/styles' import { primary, secondary } from './variables' +export type WithStyles = { + classes: Object, +} + const palette = { primary: { main: primary, @@ -18,7 +23,7 @@ const palette = { // see https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/createMuiTheme.js export default createMuiTheme({ typography: { - fontFamily: 'Montserrat,sans-serif' - }, + fontFamily: 'Montserrat,sans-serif', + }, palette, }) diff --git a/yarn.lock b/yarn.lock index 0884500b..58b044c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9249,6 +9249,10 @@ react-lifecycles-compat@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850" +react-lifecycles-compat@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.2.tgz#7279047275bd727a912e25f734c0559527e84eff" + react-loadable@^5.3.1: version "5.3.1" resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.3.1.tgz#9699e9a08fed49bacd69caaa282034b62a76bcdd" @@ -9559,6 +9563,17 @@ recompose@^0.26.0: hoist-non-react-statics "^2.3.1" symbol-observable "^1.0.4" +recompose@^0.27.0: + version "0.27.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.0.tgz#8230ebd651bf1159097006f79083fe224b1501cf" + dependencies: + babel-runtime "^6.26.0" + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^2.3.1" + react-lifecycles-compat "^3.0.2" + symbol-observable "^1.0.4" + recursive-readdir@2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"