diff options
Diffstat (limited to 'app/assets/javascripts/components')
12 files changed, 133 insertions, 10 deletions
diff --git a/app/assets/javascripts/components/actions/statuses.jsx b/app/assets/javascripts/components/actions/statuses.jsx index 21821b8ba..fece257d5 100644 --- a/app/assets/javascripts/components/actions/statuses.jsx +++ b/app/assets/javascripts/components/actions/statuses.jsx @@ -1,5 +1,8 @@ +import fetch from 'isomorphic-fetch' + export const SET_TIMELINE = 'SET_TIMELINE'; export const ADD_STATUS = 'ADD_STATUS'; +export const PUBLISH = 'PUBLISH'; export function setTimeline(timeline, statuses) { return { @@ -16,3 +19,15 @@ export function addStatus(timeline, status) { status: status }; } + +export function publish(text, in_reply_to_id) { + return function (dispatch) { + return fetch('/api/statuses', { + method: 'POST' + }).then(function (response) { + return response.json(); + }).then(function (json) { + console.log(json); + }); + }; +} diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx new file mode 100644 index 000000000..b2d7ba9a9 --- /dev/null +++ b/app/assets/javascripts/components/components/button.jsx @@ -0,0 +1,22 @@ +const Button = React.createClass({ + propTypes: { + text: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func + }, + + handleClick (e) { + e.preventDefault(); + this.props.onClick(); + }, + + render () { + return ( + <a href='#' onClick={this.handleClick} style={{ display: 'inline-block', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', backgroundColor: '#2b90d9', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}> + {this.props.text} + </a> + ); + } + +}); + +export default Button; diff --git a/app/assets/javascripts/components/components/character_counter.jsx b/app/assets/javascripts/components/components/character_counter.jsx new file mode 100644 index 000000000..b58d9fe32 --- /dev/null +++ b/app/assets/javascripts/components/components/character_counter.jsx @@ -0,0 +1,16 @@ +const CharacterCounter = React.createClass({ + propTypes: { + text: React.PropTypes.string.isRequired + }, + + render () { + return ( + <span style={{ fontSize: '16px', cursor: 'default' }}> + {this.props.text.length} + </span> + ); + } + +}); + +export default CharacterCounter; diff --git a/app/assets/javascripts/components/components/column.jsx b/app/assets/javascripts/components/components/column.jsx index c585b6b0b..c1f5b84a2 100644 --- a/app/assets/javascripts/components/components/column.jsx +++ b/app/assets/javascripts/components/components/column.jsx @@ -8,7 +8,7 @@ const Column = React.createClass({ render: function() { return ( - <div style={{ width: '350px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}> + <div style={{ width: '380px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}> <ColumnHeader type={this.props.type} /> <StatusListContainer type={this.props.type} /> </div> diff --git a/app/assets/javascripts/components/components/composer_drawer.jsx b/app/assets/javascripts/components/components/composer_drawer.jsx new file mode 100644 index 000000000..d33e28219 --- /dev/null +++ b/app/assets/javascripts/components/components/composer_drawer.jsx @@ -0,0 +1,46 @@ +import CharacterCounter from './character_counter'; +import Button from './button'; +import { publish } from '../actions/statuses'; + +const ComposerDrawer = React.createClass({ + + propTypes: { + onSubmit: React.PropTypes.func.isRequired + }, + + getInitialState() { + return { + text: '' + }; + }, + + handleChange (e) { + this.setState({ text: e.target.value }); + }, + + handleKeyUp (e) { + if (e.keyCode === 13 && e.ctrlKey) { + this.handleSubmit(); + } + }, + + handleSubmit () { + this.props.onSubmit(this.state.text, null); + }, + + render () { + return ( + <div style={{ width: '230px', background: '#454b5e', margin: '10px 0', padding: '10px' }}> + <textarea placeholder='What is on your mind?' value={this.state.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} /> + + <div style={{ marginTop: '10px', overflow: 'hidden' }}> + <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} /></div> + <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.state.text} /></div> + </div> + </div> + ); + } + +}); + +export default ComposerDrawer; diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx index 97db31707..9faefba67 100644 --- a/app/assets/javascripts/components/components/display_name.jsx +++ b/app/assets/javascripts/components/components/display_name.jsx @@ -11,7 +11,7 @@ const DisplayName = React.createClass({ var url = this.props.account.get('url'); return ( - <a href={url} style={{ color: '#616b86', textDecoration: 'none' }}> + <a href={url} style={{ display: 'inline-block', color: '#616b86', textDecoration: 'none', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '190px' }}> <strong style={{ fontWeight: 'bold', color: '#fff' }}>{displayName}</strong> <span>{acct}</span> </a> ); diff --git a/app/assets/javascripts/components/components/frontend.jsx b/app/assets/javascripts/components/components/frontend.jsx index 6f9c46fa9..01ad3490a 100644 --- a/app/assets/javascripts/components/components/frontend.jsx +++ b/app/assets/javascripts/components/components/frontend.jsx @@ -1,5 +1,6 @@ -import NavBar from './nav_bar'; -import ColumnsArea from './columns_area'; +import NavBar from './nav_bar'; +import ColumnsArea from './columns_area'; +import ComposerDrawerContainer from '../containers/composer_drawer_container'; const Frontend = React.createClass({ @@ -7,6 +8,7 @@ const Frontend = React.createClass({ return ( <div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}> <NavBar /> + <ComposerDrawerContainer /> <ColumnsArea /> </div> ); diff --git a/app/assets/javascripts/components/components/nav_bar.jsx b/app/assets/javascripts/components/components/nav_bar.jsx index 1ece3cc34..f3f6768e6 100644 --- a/app/assets/javascripts/components/components/nav_bar.jsx +++ b/app/assets/javascripts/components/components/nav_bar.jsx @@ -1,7 +1,11 @@ const NavBar = React.createClass({ render: function() { - return <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }} />; + return ( + <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }}> + + </div> + ); } }); diff --git a/app/assets/javascripts/components/components/relative_timestamp.jsx b/app/assets/javascripts/components/components/relative_timestamp.jsx index 3216d0a0d..49158ee13 100644 --- a/app/assets/javascripts/components/components/relative_timestamp.jsx +++ b/app/assets/javascripts/components/components/relative_timestamp.jsx @@ -12,7 +12,7 @@ moment.updateLocale('en', { d: "a day", dd: "%dd", M: "a month", - MM: "%dm", + MM: "%dmo", y: "a year", yy: "%dy" } diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index e54bc8c04..bb518a9e1 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -13,7 +13,7 @@ const Status = React.createClass({ var status = this.props.status; return ( - <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b' }}> + <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}> <Avatar src={status.getIn(['account', 'avatar'])} /> <div style={{ flex: '1 1 auto', marginLeft: '10px' }}> diff --git a/app/assets/javascripts/components/containers/composer_drawer_container.jsx b/app/assets/javascripts/components/containers/composer_drawer_container.jsx new file mode 100644 index 000000000..4ec0f1c50 --- /dev/null +++ b/app/assets/javascripts/components/containers/composer_drawer_container.jsx @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; +import ComposerDrawer from '../components/composer_drawer'; +import { publish } from '../actions/statuses'; + +const mapStateToProps = function (state, props) { + return {}; +}; + +const mapDispatchToProps = function (dispatch) { + return { + onSubmit: function (text, in_reply_to_id) { + dispatch(publish(text, in_reply_to_id)); + } + } +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ComposerDrawer); diff --git a/app/assets/javascripts/components/store/configureStore.jsx b/app/assets/javascripts/components/store/configureStore.jsx index bb5d664d0..9ff28bb42 100644 --- a/app/assets/javascripts/components/store/configureStore.jsx +++ b/app/assets/javascripts/components/store/configureStore.jsx @@ -1,6 +1,7 @@ -import { createStore } from 'redux'; +import { createStore, applyMiddleware } from 'redux'; +import thunk from 'redux-thunk'; import appReducer from '../reducers'; -export default function configureStore(initialState) { - return createStore(appReducer, initialState); +export default function configureStore() { + return createStore(appReducer, applyMiddleware(thunk)); } |