From 8c07ad931384d0bcd0c37b9032f95be5336e08b5 Mon Sep 17 00:00:00 2001 From: Arnaud Babol Date: Mon, 6 Jul 2015 22:54:01 +0200 Subject: [PATCH 1/6] Use List/ListItem components from mui --- app/components/List.jsx | 29 +++--- app/components/ListItem.jsx | 157 ++++++++++-------------------- app/components/ListItemAvatar.jsx | 38 ++++++++ app/style/themes/default-theme.js | 5 +- config/webpack/makeConfig.js | 2 +- package.json | 5 +- 6 files changed, 108 insertions(+), 128 deletions(-) create mode 100644 app/components/ListItemAvatar.jsx diff --git a/app/components/List.jsx b/app/components/List.jsx index 15064db..2ffe4b1 100644 --- a/app/components/List.jsx +++ b/app/components/List.jsx @@ -4,8 +4,19 @@ import React from 'react'; import ListItem from './ListItem'; import ReactCSSTransitionGroup from './TimeoutTransitionGroup'; import { mergeAndPrefix } from '../utils/stylePropable'; +import { List } from 'material-ui'; + +export default class extends React.Component { + static propTypes = { + itemData: React.PropTypes.array, + onClick: React.PropTypes.func, + style: React.PropTypes.object, + }; + + static defaultProps = { + style: {}, + }; -class List extends React.Component { _getStyles() { return { root: { @@ -40,7 +51,7 @@ class List extends React.Component { let styles = this._getStyles(); return ( - + ); } } - -List.propTypes = { - itemData: React.PropTypes.array, - onClick: React.PropTypes.func, - style: React.PropTypes.object, -}; - -List.defaultProps = { - style: {}, -}; - -export default List; diff --git a/app/components/ListItem.jsx b/app/components/ListItem.jsx index 3f254a6..b1a8284 100644 --- a/app/components/ListItem.jsx +++ b/app/components/ListItem.jsx @@ -1,141 +1,84 @@ 'use strict'; import React from 'react'; -import Paper from 'material-ui/lib/paper'; -import transitions from 'material-ui/lib/styles/transitions'; import typography from 'material-ui/lib/styles/typography'; +import { + ListDivider, + ListItem, +} from 'material-ui'; +import ListItemAvatar from './ListItemAvatar'; import { mergeAndPrefix } from '../utils/stylePropable'; -class ListItem extends React.Component { - constructor(props) { - super(props); +export default class extends React.Component { + static contextTypes = { + muiTheme: React.PropTypes.object, + }; - this.state = {hovered: false}; - } + static propTypes = { + description: React.PropTypes.string, + icon: React.PropTypes.string, + onClick: React.PropTypes.func, + title: React.PropTypes.string, + }; + + static defaultProps = { + description: '', + title: '', + }; _getStyles() { const theme = this.context.muiTheme.component.listItem; - let backgroundColor = theme.color; - if (this.state.hovered) { - backgroundColor = this.props.hoverColor || theme.hoverColor; - } - return { - root: { - backgroundColor, - cursor: 'pointer', - height: '72px', - transition: transitions.easeOut(), + title: { + fontSize: '0.8em', + fontWeight: typography.fontWeightMedium, + color: theme.color, }, - icon: { - root: { - position: 'absolute', - marginLeft: '16px', - marginTop: '19px', - }, - paper: { - overflow: 'hidden', - height: '40px', - }, - image: { - width: '40px', - }, + description: { + marginTop: '-4px', + fontSize: '0.75em', + color: theme.color, }, - content: { - root: { - paddingLeft: '72px', - paddingRight: '16px', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', - }, - title: { - paddingTop: '20px', - fontSize: '1.2em', - fontWeight: typography.fontWeightMedium, - }, - description: { - marginTop: '-4px', - fontSize: '0.75em', - }, + divider: { + backgroundColor: theme.borderColor, + paddingTop: '0.1px', }, - borderBottom: { - position: 'absolute', - marginTop: '16px', - right: '0', - left: '72px', - borderBottom: `1px solid ${theme.borderColor}`, + overflow: { + textOverflow: 'ellipsis', + overflow: 'hidden', + width: '190px', + display: 'inline-block', + whiteSpace: 'nowrap', }, }; } - _handleMouseOver(e) { - this.setState({hovered: true}); - if (this.props.onMouseOver) { - this.props.onMouseOver(e); - } - } - - _handleMouseOut(e) { - this.setState({hovered: false}); - if (this.props.onMouseOut) { - this.props.onMouseOut(e); - } - } - render() { const styles = this._getStyles(); /* eslint-disable */ const { description, icon, - onMouseOut, - onMouseOver, + onClick, title, ...other } = this.props; /* eslint-enable */ return ( -
  • -
    - - - -
    -
    -
    -
    -
    -
    -
    • +
    + } + secondaryText={ +
    + } + > + +     + +
    ); } } - -ListItem.contextTypes = { - muiTheme: React.PropTypes.object, -}; - -ListItem.propTypes = { - description: React.PropTypes.string, - hoverColor: React.PropTypes.string, - icon: React.PropTypes.string, - onClick: React.PropTypes.func, - onMouseOut: React.PropTypes.func, - onMouseOver: React.PropTypes.func, - title: React.PropTypes.string, -}; - -ListItem.defaultProps = { - description: '', - title: '', -}; - -export default ListItem; diff --git a/app/components/ListItemAvatar.jsx b/app/components/ListItemAvatar.jsx new file mode 100644 index 0000000..5d8ca9c --- /dev/null +++ b/app/components/ListItemAvatar.jsx @@ -0,0 +1,38 @@ +'use strict'; + +import React from 'react'; +import { Avatar } from 'material-ui'; + +class ListItemAvatar extends React.Component { + _getStyles() { + return { + border: 'none', + position: 'absolute', + top: '16px', + left: '16px', + width: '38px', + height: '38px', + }; + } + + render() { + const style = this._getStyles(); + + return ( + + ); + } +} + +ListItemAvatar.contextTypes = { + muiTheme: React.PropTypes.object, +}; + +ListItemAvatar.propTypes = { + src: React.PropTypes.string, +}; + +export default ListItemAvatar; diff --git a/app/style/themes/default-theme.js b/app/style/themes/default-theme.js index 0505124..2da2bc6 100644 --- a/app/style/themes/default-theme.js +++ b/app/style/themes/default-theme.js @@ -37,9 +37,8 @@ export default { hoverColor: colors.red300, }, listItem: { - borderColor: '#EBEBEB', - color: colorManipulator.fade('rgba(0, 0, 0, .035)', 0), - hoverColor: 'rgba(0, 0, 0, .035)', + borderColor: colorManipulator.fade(palette.borderColor, 0.3), + color: colors.fullBlack, }, }; diff --git a/config/webpack/makeConfig.js b/config/webpack/makeConfig.js index 868898f..2319106 100644 --- a/config/webpack/makeConfig.js +++ b/config/webpack/makeConfig.js @@ -14,7 +14,7 @@ module.exports = function (options) { var entry = path.join(__dirname, '..', '..', 'app', options.prerender ? 'utils/prerender' : 'app'); var loaders = { - jsx: options.hotComponents ? ['react-hot-loader', 'babel-loader?stage=1'] : 'babel-loader?stage=1', + jsx: options.hotComponents ? ['react-hot-loader', 'babel-loader?stage=0'] : 'babel-loader?stage=0', png: 'url-loader?limit=10000', html: 'html-loader' }; diff --git a/package.json b/package.json index e535c5b..f39f4b0 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,11 @@ "dev-server": "webpack --config config/webpack/prerender.config.js & webpack-dev-server --config config/webpack/devServer.config.js --progress --colors --hot --inline", "dev": "babel-node --ignore 'node_modules','build','app' config/serverDev", "lint": "eslint --ext .js,.jsx app/ config/ lib/ test/ server.js", + "postinstall": "babel --stage 1 ./node_modules/material-ui/src --out-dir ./node_modules/material-ui/lib", "prod": "babel-node --ignore 'node_modules','build','app' config/serverProd", "test": "npm run lint && npm run test-jsx && npm run test-js", "test-js": "mocha ./test/lib ./test/app/actions ./test/app/stores --compilers js:babel/register", - "test-jsx": "mochify node_modules/babel/polyfill ./test/app/components/* --reporter spec --transform [ babelify --stage 1 --ignore 'node_modules'] --extension .jsx" + "test-jsx": "mochify node_modules/babel/polyfill ./test/app/components/* --reporter spec --transform [ babelify --stage 0 --ignore 'node_modules'] --extension .jsx" }, "repository": { "type": "git", @@ -46,7 +47,7 @@ "leaflet.markercluster": "Leaflet/Leaflet.markercluster#v0.4.0-hotfix.1", "less": "^2.5.1", "less-loader": "^2.2.0", - "material-ui": "0.9.0", + "material-ui": "ababol/material-ui.git", "react": "^0.13.3", "react-hot-loader": "^1.2.7", "react-leaflet": "^0.6.2", From 920dc5d1a530544de9520cdc5279612bc1400140 Mon Sep 17 00:00:00 2001 From: Arnaud Babol Date: Fri, 10 Jul 2015 00:52:41 +0200 Subject: [PATCH 2/6] Update material-ui: Fix ListItem --- app/components/List.jsx | 2 +- app/components/ListItem.jsx | 15 ++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/app/components/List.jsx b/app/components/List.jsx index 2ffe4b1..3faca5f 100644 --- a/app/components/List.jsx +++ b/app/components/List.jsx @@ -64,7 +64,7 @@ export default class extends React.Component { icon={obj.user.profile_picture} key={obj.id} onClick={this.props.onClick ? this.props.onClick.bind(null, obj) : undefined} - title={obj.user.full_name.trim() || '-'} + primaryText={obj.user.full_name.trim() || '-'} /> ); })} diff --git a/app/components/ListItem.jsx b/app/components/ListItem.jsx index b1a8284..15006d6 100644 --- a/app/components/ListItem.jsx +++ b/app/components/ListItem.jsx @@ -18,19 +18,19 @@ export default class extends React.Component { description: React.PropTypes.string, icon: React.PropTypes.string, onClick: React.PropTypes.func, - title: React.PropTypes.string, + primaryText: React.PropTypes.string, }; static defaultProps = { description: '', - title: '', + primaryText: '', }; _getStyles() { const theme = this.context.muiTheme.component.listItem; return { - title: { + primaryText: { fontSize: '0.8em', fontWeight: typography.fontWeightMedium, color: theme.color, @@ -60,8 +60,8 @@ export default class extends React.Component { const { description, icon, + primaryText, onClick, - title, ...other } = this.props; /* eslint-enable */ @@ -71,12 +71,13 @@ export default class extends React.Component { } + primaryText={ +
    + } secondaryText={
    } - > - -     + /> ); From de30ec326b2724624165a2ab46d26781627cb7e1 Mon Sep 17 00:00:00 2001 From: Arnaud Babol Date: Tue, 14 Jul 2015 17:20:20 +0200 Subject: [PATCH 3/6] :art: Import --- app/components/List.jsx | 2 +- app/components/ListItem.jsx | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/app/components/List.jsx b/app/components/List.jsx index 3faca5f..5ea85fd 100644 --- a/app/components/List.jsx +++ b/app/components/List.jsx @@ -4,7 +4,7 @@ import React from 'react'; import ListItem from './ListItem'; import ReactCSSTransitionGroup from './TimeoutTransitionGroup'; import { mergeAndPrefix } from '../utils/stylePropable'; -import { List } from 'material-ui'; +import List from 'material-ui/lib/lists/list'; export default class extends React.Component { static propTypes = { diff --git a/app/components/ListItem.jsx b/app/components/ListItem.jsx index 15006d6..7fbcd6a 100644 --- a/app/components/ListItem.jsx +++ b/app/components/ListItem.jsx @@ -2,10 +2,7 @@ import React from 'react'; import typography from 'material-ui/lib/styles/typography'; -import { - ListDivider, - ListItem, -} from 'material-ui'; +import { ListDivider, ListItem } from 'material-ui/lib/lists'; import ListItemAvatar from './ListItemAvatar'; import { mergeAndPrefix } from '../utils/stylePropable'; From 165b0f787d1c9eeddcc19ba2a0ccaa24c7a827a8 Mon Sep 17 00:00:00 2001 From: Arnaud Babol Date: Tue, 14 Jul 2015 17:47:43 +0200 Subject: [PATCH 4/6] :art: More Import --- app/components/ListItemAvatar.jsx | 2 +- app/components/Title.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/ListItemAvatar.jsx b/app/components/ListItemAvatar.jsx index 5d8ca9c..81dcf2f 100644 --- a/app/components/ListItemAvatar.jsx +++ b/app/components/ListItemAvatar.jsx @@ -1,7 +1,7 @@ 'use strict'; import React from 'react'; -import { Avatar } from 'material-ui'; +import Avatar from 'material-ui/lib/avatar'; class ListItemAvatar extends React.Component { _getStyles() { diff --git a/app/components/Title.jsx b/app/components/Title.jsx index 38484bb..b5abcd4 100644 --- a/app/components/Title.jsx +++ b/app/components/Title.jsx @@ -2,7 +2,7 @@ import React from 'react'; import transitions from 'material-ui/lib/styles/transitions'; -import { ToolbarTitle } from 'material-ui/lib/toolbar'; +import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title'; class Title extends React.Component { constructor(props) { From 066e9f34bbb5c7b7e28d90b76a1e125ee79f5498 Mon Sep 17 00:00:00 2001 From: Arnaud Babol Date: Tue, 14 Jul 2015 18:01:38 +0200 Subject: [PATCH 5/6] Remove es7 static --- app/components/List.jsx | 24 +++++++++++++----------- app/components/ListItem.jsx | 36 +++++++++++++++++++----------------- config/webpack/makeConfig.js | 2 +- package.json | 2 +- 4 files changed, 34 insertions(+), 30 deletions(-) diff --git a/app/components/List.jsx b/app/components/List.jsx index 5ea85fd..05b5505 100644 --- a/app/components/List.jsx +++ b/app/components/List.jsx @@ -6,17 +6,7 @@ import ReactCSSTransitionGroup from './TimeoutTransitionGroup'; import { mergeAndPrefix } from '../utils/stylePropable'; import List from 'material-ui/lib/lists/list'; -export default class extends React.Component { - static propTypes = { - itemData: React.PropTypes.array, - onClick: React.PropTypes.func, - style: React.PropTypes.object, - }; - - static defaultProps = { - style: {}, - }; - +class SideList extends React.Component { _getStyles() { return { root: { @@ -73,3 +63,15 @@ export default class extends React.Component { ); } } + +SideList.propTypes = { + itemData: React.PropTypes.array, + onClick: React.PropTypes.func, + style: React.PropTypes.object, +}; + +SideList.defaultProps = { + style: {}, +}; + +export default SideList; diff --git a/app/components/ListItem.jsx b/app/components/ListItem.jsx index 7fbcd6a..e32e371 100644 --- a/app/components/ListItem.jsx +++ b/app/components/ListItem.jsx @@ -6,23 +6,7 @@ import { ListDivider, ListItem } from 'material-ui/lib/lists'; import ListItemAvatar from './ListItemAvatar'; import { mergeAndPrefix } from '../utils/stylePropable'; -export default class extends React.Component { - static contextTypes = { - muiTheme: React.PropTypes.object, - }; - - static propTypes = { - description: React.PropTypes.string, - icon: React.PropTypes.string, - onClick: React.PropTypes.func, - primaryText: React.PropTypes.string, - }; - - static defaultProps = { - description: '', - primaryText: '', - }; - +class SideListItem extends React.Component { _getStyles() { const theme = this.context.muiTheme.component.listItem; @@ -80,3 +64,21 @@ export default class extends React.Component { ); } } + +SideListItem.contextTypes = { + muiTheme: React.PropTypes.object, +}; + +SideListItem.propTypes = { + description: React.PropTypes.string, + icon: React.PropTypes.string, + onClick: React.PropTypes.func, + primaryText: React.PropTypes.string, +}; + +SideListItem.defaultProps = { + description: '', + primaryText: '', +}; + +export default SideListItem; diff --git a/config/webpack/makeConfig.js b/config/webpack/makeConfig.js index 2319106..868898f 100644 --- a/config/webpack/makeConfig.js +++ b/config/webpack/makeConfig.js @@ -14,7 +14,7 @@ module.exports = function (options) { var entry = path.join(__dirname, '..', '..', 'app', options.prerender ? 'utils/prerender' : 'app'); var loaders = { - jsx: options.hotComponents ? ['react-hot-loader', 'babel-loader?stage=0'] : 'babel-loader?stage=0', + jsx: options.hotComponents ? ['react-hot-loader', 'babel-loader?stage=1'] : 'babel-loader?stage=1', png: 'url-loader?limit=10000', html: 'html-loader' }; diff --git a/package.json b/package.json index f39f4b0..d5c142e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "prod": "babel-node --ignore 'node_modules','build','app' config/serverProd", "test": "npm run lint && npm run test-jsx && npm run test-js", "test-js": "mocha ./test/lib ./test/app/actions ./test/app/stores --compilers js:babel/register", - "test-jsx": "mochify node_modules/babel/polyfill ./test/app/components/* --reporter spec --transform [ babelify --stage 0 --ignore 'node_modules'] --extension .jsx" + "test-jsx": "mochify node_modules/babel/polyfill ./test/app/components/* --reporter spec --transform [ babelify --stage 1 --ignore 'node_modules'] --extension .jsx" }, "repository": { "type": "git", From b203d3bc5a262cdbd6d2ef83ceb6dc875ea0309a Mon Sep 17 00:00:00 2001 From: Arnaud Babol Date: Tue, 14 Jul 2015 18:33:42 +0200 Subject: [PATCH 6/6] :lipstick: Ripple color listItem --- app/components/ListItem.jsx | 3 +++ app/style/themes/default-theme.js | 1 + 2 files changed, 4 insertions(+) diff --git a/app/components/ListItem.jsx b/app/components/ListItem.jsx index e32e371..f0fc525 100644 --- a/app/components/ListItem.jsx +++ b/app/components/ListItem.jsx @@ -11,6 +11,7 @@ class SideListItem extends React.Component { const theme = this.context.muiTheme.component.listItem; return { + rippleColor: theme.rippleColor, primaryText: { fontSize: '0.8em', fontWeight: typography.fontWeightMedium, @@ -51,6 +52,7 @@ class SideListItem extends React.Component {
    } primaryText={
    @@ -58,6 +60,7 @@ class SideListItem extends React.Component { secondaryText={
    } + touchRippleColor={styles.rippleColor} />
    diff --git a/app/style/themes/default-theme.js b/app/style/themes/default-theme.js index 2da2bc6..5a17c42 100644 --- a/app/style/themes/default-theme.js +++ b/app/style/themes/default-theme.js @@ -39,6 +39,7 @@ export default { listItem: { borderColor: colorManipulator.fade(palette.borderColor, 0.3), color: colors.fullBlack, + rippleColor: colorManipulator.fade(palette.textColor, 0.5), }, };