diff --git a/.gitignore b/.gitignore index 4ba27dc..0d9c9e9 100644 --- a/.gitignore +++ b/.gitignore @@ -46,3 +46,6 @@ buck-out/ \.buckd/ android/app/libs *.keystore + +# vscode +jsconifg.json \ No newline at end of file diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js index 0ac5a97..daad2ac 100644 --- a/config/webpack.config.base.js +++ b/config/webpack.config.base.js @@ -8,7 +8,8 @@ export default { rules: [ { test: /\.jsx?$/, - loader: ['babel-loader', 'eslint-loader'], + // loader: ['babel-loader', 'eslint-loader'], + loader: ['babel-loader'], exclude: /node_modules/, }, { diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..36f59e6 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + "jsx": "preserve" + } +} + diff --git a/main.js b/main.js index 441e7da..bc36160 100644 --- a/main.js +++ b/main.js @@ -502,6 +502,7 @@ const createMainWindow = () => { }); mainWindow.setSize(350, 460); + mainWindow.webContents.openDevTools(); mainWindow.loadURL( `file://${__dirname}/src/index.html` ); diff --git a/package.json b/package.json index 7d481d3..8a0d45d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "package-mac": "npm run build && rm -rf release && build --mac --projectDir ./dist", "package-all": "npm run build && rm -rf release && build --mac --win --linux --projectDir ./dist", "hot-server": "cross-env NODE_ENV=development node -r babel-register scripts/dev.js", - "start-hot": "cross-env HOT=1 NODE_ENV=development ./node_modules/.bin/electron -r babel-register -r babel-polyfill ./main", + "start-hot": "cross-env HOT=1 NODE_ENV=development electron2 -r babel-register -r babel-polyfill ./main", "dev": "concurrently --kill-others \"npm run hot-server\" \"npm run start-hot\"" }, "author": { @@ -100,6 +100,7 @@ "react": "^16.0.0", "react-addons-css-transition-group": "^15.6.2", "react-dom": "^16.0.0", + "react-masonry-component": "^6.2.1", "react-router-dom": "^4.2.2", "tmp": "0.0.33" }, @@ -123,7 +124,6 @@ "copy-webpack-plugin": "^4.2.0", "cross-env": "^5.1.1", "css-loader": "^1.0.0", - "electron": "^2.0.5", "electron-builder": "^19.56.2", "electron-updater": "^3.0.1", "eslint": "^5.1.0", diff --git a/src/js/pages/Contacts/Card.js b/src/js/pages/Contacts/Card.js new file mode 100644 index 0000000..0295312 --- /dev/null +++ b/src/js/pages/Contacts/Card.js @@ -0,0 +1,96 @@ +import React from 'react'; +import { observer } from "mobx-react"; +import classes from './style.css'; +import randomColor from 'randomcolor'; + + + +@observer +class Card extends React.Component { + constructor(props) { + super(props); + this.state = { + width: '250px', + } + } + + componentDidMount() { + this.clientWidth = this.div.parentNode; + window.addEventListener('resize', this.handleResize.bind(this)); + this.handleResize() + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize.bind(this)); + } + + handleResize(e) { + var clientWidth = this.clientWidth.clientWidth; + var width = 100 / Math.round(clientWidth / 250) + this.setState({ + width: width + '%' + }) + } + + + render() { + var e = this.props.item + var styles = { + width: this.state.width + } + return ( +
this.div = c} + style={styles}> +
+
+ + {e.list.length} people + +
+ +
+ { + e.list.map((e, index) => { + return ( +
this.props.showUserinfo(true, e)}> +
+ +
+
+

+

+

+
+ ); + }) + } +
+
+ +
+ ) + } +} + +export default Card; diff --git a/src/js/pages/Contacts/index.js b/src/js/pages/Contacts/index.js index 128d0fb..f137acd 100644 --- a/src/js/pages/Contacts/index.js +++ b/src/js/pages/Contacts/index.js @@ -2,7 +2,8 @@ import React, { Component } from 'react'; import { observer, inject } from 'mobx-react'; import clazz from 'classname'; -import randomColor from 'randomcolor'; +import Masonry from 'react-masonry-component'; +import Card from './Card'; import classes from './style.css'; @@ -14,61 +15,6 @@ import classes from './style.css'; })) @observer export default class Contacts extends Component { - renderColumns(data, index) { - var list = data.filter((e, i) => i % 3 === index); - - return list.map((e, index) => { - return ( -
-
- - - {e.list.length} people - -
- -
- { - e.list.map((e, index) => { - return ( -
this.props.showUserinfo(true, e)}> -
- -
-
-

-

-

-
- ); - }) - } -
-
- ); - }); - } componentWillMount() { this.props.filter(); @@ -87,27 +33,44 @@ export default class Contacts extends Component { ); } - + var childElements = result.map(function (element,index) { + return ( + + ); + }, this); return ( -
-
-
- { - this.renderColumns(result, 0) - } -
-
- { - this.renderColumns(result, 1) - } -
-
- { - this.renderColumns(result, 2) - } -
-
-
+ this.div = c} + // default '' + elementType="div" // default 'div' + // options={masonryOptions }} // default {} + disableImagesLoaded={false} + // default false + updateOnEachImageLoad={false} + // default false and works only if disableImagesLoaded is false + > + {childElements} + + + //
+ //
+ //
+ // { + // this.renderColumns(result, 0) + // } + //
+ //
+ // { + // this.renderColumns(result, 1) + // } + //
+ //
+ // { + // this.renderColumns(result, 2) + // } + //
+ //
+ //
); } } diff --git a/src/js/pages/Contacts/style.css b/src/js/pages/Contacts/style.css index c3da49c..b4fadd1 100644 --- a/src/js/pages/Contacts/style.css +++ b/src/js/pages/Contacts/style.css @@ -36,10 +36,11 @@ } .group { - width: 274px; - padding: 8px 0; - margin-bottom: 24px; - box-shadow: 0 0 10px 0 rgba(119, 119, 119, 50%); + /* width: 274px; */ + /* padding: 8px; */ + margin: 12px; + border-radius: 4px; + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); } .header { diff --git a/src/js/pages/Home/style.css b/src/js/pages/Home/style.css index bcf427f..c2ece4c 100644 --- a/src/js/pages/Home/style.css +++ b/src/js/pages/Home/style.css @@ -30,7 +30,7 @@ text-align: center; font-size: 20px; background: #e1306c; - box-shadow: 0 0 24px 0 rgba(119, 119, 119, .5); + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); cursor: pointer; z-index: 9; }