diff --git a/package.json b/package.json index c95d202..8d1fdbd 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "react-select": "^1.0.0-rc.1", "react-sortable-hoc": "^0.6.7", "react-tagsinput": "^3.17.0", - "react-vis": "^1.7.2", + "recharts": "^1.0.0-alpha.6", "redux": "^3.7.2", "redux-logger": "^3.0.6", "redux-thunk": "^2.1.0", diff --git a/src/sass/metronic/customize.scss b/src/sass/metronic/customize.scss index 923eb41..2e4e089 100644 --- a/src/sass/metronic/customize.scss +++ b/src/sass/metronic/customize.scss @@ -31,14 +31,14 @@ padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; - color: #007bff; + color: #337ab7; background-color: #fff; border: 1px solid #ddd; + text-decoration: none; cursor: pointer; &:focus,&:hover{ - color: #0056b3; - text-decoration: none; - background-color: #e9ecef; + color: #23527c; + background-color: #eee; border-color: #ddd; } } @@ -56,18 +56,18 @@ } &.active{ a{ - z-index: 2; - color: #fff; - background-color: #007bff; - border-color: #007bff; + color: #fff; + cursor: default; + background-color: #337ab7; + border-color: #337ab7; } } &.disabled { a{ - color: #868e96; - pointer-events: none; - background-color: #fff; - border-color: #ddd; + color: #777; + cursor: not-allowed; + background-color: #fff; + border-color: #ddd; } } } diff --git a/src/scripts/components/Common/PlayToyPanel.jsx b/src/scripts/components/Common/PlayToyPanel.jsx index 503b77f..0fe0c13 100644 --- a/src/scripts/components/Common/PlayToyPanel.jsx +++ b/src/scripts/components/Common/PlayToyPanel.jsx @@ -25,7 +25,7 @@ export default class PlayToyPanel extends Component {
-
{toy.name}
+
{toy.name}
{this.props.children}
diff --git a/src/scripts/components/EditToy/index.jsx b/src/scripts/components/EditToy/index.jsx index f87a71c..9e5fb7b 100644 --- a/src/scripts/components/EditToy/index.jsx +++ b/src/scripts/components/EditToy/index.jsx @@ -2,7 +2,7 @@ import React,{ Component } from 'react' import Request from 'superagent' import Dropzone from 'react-dropzone' import CDN from '../../widgets/cdn' -import { uploadImageWithWH,uploadFiles } from '../../widgets/upload' +import { uploadImageWithWH,uploadFiles,uploadImagesWithWH } from '../../widgets/upload' import PlaySwitch from '../Common/playSwitch' import Select from 'react-select' // import PlayHtmlEditor from '../Common/PlayHtmlEditor' @@ -75,7 +75,7 @@ export default class EditToy extends Component { this.addOtherInfo = this._addOtherInfo.bind(this) this.changeNewKey = (e) => this.setState({newKey:e.target.value}) this.changeNewValue = (e) => this.setState({newValue:e.target.value}) - this.onDropOfficialImage = (files) => uploadFiles(files,`toy/img/${this.props.match.params.id}_`).then(keys => this.setState(prevState => ({images:prevState.images.concat(...keys)}))) + this.onDropOfficialImage = (files) => uploadImagesWithWH(files,`toy/img/${this.props.match.params.id}_`).then(keys => this.setState(prevState => ({images:prevState.images.concat(...keys)}))) this.onDropCover = (files) => uploadImageWithWH(files[0],'toy/cover/').then(cover => this.setState({cover})) this.submit = this._submit.bind(this) diff --git a/src/scripts/components/ExplorePage/ExplorePage.jsx b/src/scripts/components/ExplorePage/ExplorePage.jsx index 5ff50d4..753ad55 100644 --- a/src/scripts/components/ExplorePage/ExplorePage.jsx +++ b/src/scripts/components/ExplorePage/ExplorePage.jsx @@ -1,5 +1,4 @@ import React,{ Component } from 'react' -import { Row, Col, Button } from 'react-bootstrap' import { Link } from 'react-router-dom' import Request from 'superagent' export default class ExplorePage extends Component{ @@ -28,7 +27,7 @@ export default class ExplorePage extends Component{ render() { return(
- +
@@ -189,162 +188,7 @@ export default class ExplorePage extends Component{
- {/* -
-
-
- -
- -
-
-
-
- { - this.props.banners ? - - - { - this.props.banners.map((banner,index) =>{ - return( - - - - - - ) - }) - } - -
- - - {banner.title} - - - - - this.deleteBanner(banner.id)}> - - -
- :null - } -
-
- { - this.props.themes ? - - - { - this.props.themes.map((topic,index) =>{ - return( - - - - - - ) - }) - } - -
- - - {topic.title} - - - - - this.deleteTopic(topic.id)}> - - -
- :null - } -
-
- { - this.props.toys? - - - { - this.props.toys.map((toy,index) =>{ - return( - - - - - - ) - }) - } - -
- - - {toy.title} - - - - - this.deleteToy(toy.id)}> - - -
- :null - } -
-
- { - this.props.drafts ? - - - { - this.props.drafts.map((draft,index) =>{ - return( - - - - - - ) - }) - } - -
- - - {draft.title} - - - - - this.deleteDraft(draft.id)}> - - -
- :null - } -
-
-
-
- */} - +
) } diff --git a/src/scripts/components/Home/Home.jsx b/src/scripts/components/Home/Home.jsx index e9cd05a..8bbfc01 100644 --- a/src/scripts/components/Home/Home.jsx +++ b/src/scripts/components/Home/Home.jsx @@ -1,13 +1,12 @@ import React, { Component } from 'react' -import { Row,Col } from 'react-bootstrap' -import {makeWidthFlexible,XYPlot, XAxis, YAxis,VerticalGridLines, HorizontalGridLines, VerticalBarSeries,Crosshair} from 'react-vis' import { Link } from 'react-router-dom' -import Moment from 'moment' import ReactPaginate from 'react-paginate' import { parsePage } from '../../widgets/parse' +import { dateFormat } from '../../widgets' import PlayToyPanel from '../Common/PlayToyPanel' -const FlexibleXYPlot = makeWidthFlexible(XYPlot) +import { ResponsiveContainer,BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts' + export default class Home extends Component { constructor(props) { super(props); @@ -44,13 +43,13 @@ export default class Home extends Component { }) } render() { - const { stats } = this.props + const { stats,data } = this.props return (
- - - - +
+
+ +
+
- this.setState({crosshairValues:[]})} - height={350}> - - - - - - - - + + + + + + + + + + +
- - +
+
+
+
@@ -188,8 +183,8 @@ export default class Home extends Component {
- {activity.user.nickname} - {Moment.unix(activity.created /1000).format("D MMM, H:mm A")} + {activity.user.nickname}  + {dateFormat(activity.created)}
{activity.content || ''}
@@ -249,14 +244,14 @@ export default class Home extends Component {
- {activity.user.nickname} - {Moment.unix(activity.created /1000).format("D MMM, H:mm A")} + {activity.user.nickname}  + {dateFormat(activity.created)}
{activity.content || ''}
{activity.target.type == "toy" ? - + :null } diff --git a/src/scripts/components/Home/index.js b/src/scripts/components/Home/index.js index 7544d70..540021c 100644 --- a/src/scripts/components/Home/index.js +++ b/src/scripts/components/Home/index.js @@ -10,13 +10,13 @@ const mapActionCreators = { const mapStateToProps = (state) => { const { - stats, loaded, + stats, loaded,data, activitiesC,pageC,totalPagesC, activitiesO,pageO,totalPagesO } = state.stats.toJS() return { - stats, loaded, + stats, loaded,data, activitiesC,pageC,totalPagesC, activitiesO,pageO,totalPagesO } diff --git a/src/scripts/components/PagePanel/PagePanel.jsx b/src/scripts/components/PagePanel/PagePanel.jsx index a97d607..c4b18aa 100644 --- a/src/scripts/components/PagePanel/PagePanel.jsx +++ b/src/scripts/components/PagePanel/PagePanel.jsx @@ -91,13 +91,13 @@ export default class PagePanel extends Component { { page.tags.map((tag,index) => { - return ({tag}) + return ({tag}) }) } { page.toys.map((toy, index) => { return ( - + { toy.name } this.removeToy(page.id)}> ) @@ -108,7 +108,7 @@ export default class PagePanel extends Component {
{page.counts.views} views this.setState({timePageId:page.id})}> - {Moment.unix(page.created / 1000).fromNow()} + {Moment(page.created).fromNow()}
diff --git a/src/scripts/reducers/statsReducer.js b/src/scripts/reducers/statsReducer.js index 89a7f7a..6412be1 100644 --- a/src/scripts/reducers/statsReducer.js +++ b/src/scripts/reducers/statsReducer.js @@ -9,10 +9,10 @@ export default (state = Immutable.fromJS({ }),action)=>{ switch (action.type) { case HOME_RECEIVE_STATS: - return state.mergeDeep({ - stats: action.res, - loaded:true - }) + return state + .set('stats',action.res) + .set('data',action.data) + .set('loaded',true) case HOME_RECEIVE_ACTIVITIES_C: return state .updateIn(['activitiesC'], (activities) => activities.clear().concat(Immutable.fromJS(action.res))) diff --git a/src/scripts/widgets/index.js b/src/scripts/widgets/index.js new file mode 100644 index 0000000..53df311 --- /dev/null +++ b/src/scripts/widgets/index.js @@ -0,0 +1,13 @@ +import Moment from 'moment' + + +Moment.locale('zh-cn') + + +export const dateFormat = (time) => { + return Moment(time).format("D MMM, H:mm A") +} + +export const dateFromNow = (time) => { + return Moment(time).fromNow() +} \ No newline at end of file diff --git a/src/scripts/widgets/upload.js b/src/scripts/widgets/upload.js index c9a4b2e..0ff3ca1 100644 --- a/src/scripts/widgets/upload.js +++ b/src/scripts/widgets/upload.js @@ -22,6 +22,31 @@ export const uploadFiles = async (files,prefix,uploadUrl = 'http://upload.qiniu. return keys.filter(key => typeof key == 'string') } +export const uploadImagesWithWH = async (files,prefix,uploadUrl = 'http://upload.qiniu.com/') => { + const uptoken = await Request.get('/api/uptoken').then(res => res.body.uptoken) + + const promises = files.map(async (file) => { + const img = new Image() + img.src = file.preview + await new Promise(resolve => img.onload = resolve) + const uploadKey = `${prefix}${Math.round(Date.now() / 1000)}_w_${img.width}_h_${img.height}_${makeId()}.${file.name.split('.').pop()}` + return Request + .post(uploadUrl) + .field('key', uploadKey) + .field('token', uptoken) + .field('x:filename', file.name) + .field('x:size', file.size) + .attach('file', file, file.name) + .set('Accept', 'application/json') + .then(() => uploadKey) + .catch(e => e) + }) + const keys = await Promise.all(promises) + + return keys.filter(key => typeof key == 'string') +} + + export const uploadImageWithWH = async (file,prefix,uploadUrl = 'http://upload.qiniu.com/') => { const img = new Image() img.src = file.preview