Skip to content
This repository was archived by the owner on Jun 26, 2024. It is now read-only.

修改样式和依赖 #202

Open
yueduz wants to merge 3 commits into
base: master
Choose a base branch
from
Open

修改样式和依赖 #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b3949f
将electron2移出依赖，需单独安装electron2
yueduz Dec 16, 2018
20dac7c
修改添加聊天按钮和联系人选择页面css阴影样式。
yueduz Dec 16, 2018
3fa0593
Contacts 改瀑布流样式，自适应宽度列数
yueduz Dec 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,6 @@ buck-out/
\.buckd/
android/app/libs
*.keystore

# vscode
jsconifg.json
3 changes: 2 additions & 1 deletion config/webpack.config.base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/,
},
{
Expand Down
8 changes: 8 additions & 0 deletions jsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"jsx": "preserve"
}
}

1 change: 1 addition & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,6 +502,7 @@ const createMainWindow = () => {
});

mainWindow.setSize(350, 460);
mainWindow.webContents.openDevTools();
mainWindow.loadURL(
`file://${__dirname}/src/index.html`
);
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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"
},
Expand All @@ -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",
Expand Down
96 changes: 96 additions & 0 deletions src/js/pages/Contacts/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div ref={(c) => this.div = c}
style={styles}>
<div
className={classes.group}
>
<div className={classes.header}>
<label>{e.prefix}</label>
<span>{e.list.length} people</span>
<span style={{
position: 'absolute',
left: 0,
bottom: 0,
height: 4,
width: '100%',
background: randomColor(),
}} />
</div>

<div className={classes.list}>
{
e.list.map((e, index) => {
return (
<div
className={classes.item}
key={index}
onClick={() => this.props.showUserinfo(true, e)}>
<div className={classes.avatar}>
<img
src={e.HeadImgUrl}
style={{
height: 32,
width: 32,
}} />
</div>
<div className={classes.info}>
<p
className={classes.username}
dangerouslySetInnerHTML={{ __html: e.RemarkName || e.NickName }} />
<p
className={classes.signature}
dangerouslySetInnerHTML={{ __html: e.Signature || 'No Signature' }} />
</div>
</div>
);
})
}
</div>
</div>

</div>
)
}
}

export default Card;
115 changes: 39 additions & 76 deletions src/js/pages/Contacts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 (
<div
className={classes.group}
key={index}>
<div className={classes.header}>
<label>{e.prefix}</label>

<span>{e.list.length} people</span>
<span style={{
position: 'absolute',
left: 0,
bottom: 0,
height: 4,
width: '100%',
background: randomColor(),
}} />
</div>

<div className={classes.list}>
{
e.list.map((e, index) => {
return (
<div
className={classes.item}
key={index}
onClick={() => this.props.showUserinfo(true, e)}>
<div className={classes.avatar}>
<img
src={e.HeadImgUrl}
style={{
height: 32,
width: 32,
}} />
</div>
<div className={classes.info}>
<p
className={classes.username}
dangerouslySetInnerHTML={{__html: e.RemarkName || e.NickName}} />
<p
className={classes.signature}
dangerouslySetInnerHTML={{__html: e.Signature || 'No Signature'}} />
</div>
</div>
);
})
}
</div>
</div>
);
});
}

componentWillMount() {
this.props.filter();
Expand All @@ -87,27 +33,44 @@ export default class Contacts extends Component {
</div>
);
}

var childElements = result.map(function (element,index) {
return (
<Card key={index} item={element} />
);
}, this);
return (
<div className={classes.container}>
<div className={classes.columns}>
<div className={classes.column}>
{
this.renderColumns(result, 0)
}
</div>
<div className={classes.column}>
{
this.renderColumns(result, 1)
}
</div>
<div className={classes.column}>
{
this.renderColumns(result, 2)
}
</div>
</div>
</div>
<Masonry
ref={(c) => 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}
</Masonry>

// <div className={classes.container}>
// <div className={classes.columns}>
// <div className={classes.column}>
// {
// this.renderColumns(result, 0)
// }
// </div>
// <div className={classes.column}>
// {
// this.renderColumns(result, 1)
// }
// </div>
// <div className={classes.column}>
// {
// this.renderColumns(result, 2)
// }
// </div>
// </div>
// </div>
);
}
}
9 changes: 5 additions & 4 deletions src/js/pages/Contacts/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/js/pages/Home/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down