tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improving statuses, adding a composer drawer, which doesn't work yet

Browse Source
This commit is contained in:
Eugen Rochko
2016-08-25 19:52:55 +02:00
parent f5e1127894
commit 44e57f64dd
14 changed files with 138 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/components/actions/statuses.jsx
View File

@@ -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);
});
};
}

22
app/assets/javascripts/components/components/button.jsx Normal file
View File

@@ -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;

16
app/assets/javascripts/components/components/character_counter.jsx Normal file
View File

@@ -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;

2
app/assets/javascripts/components/components/column.jsx
View File

@@ -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>

46
app/assets/javascripts/components/components/composer_drawer.jsx Normal file
View File

@@ -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;

2
app/assets/javascripts/components/components/display_name.jsx
View File

@@ -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>
);

6
app/assets/javascripts/components/components/frontend.jsx
View File

@@ -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>
);

6
app/assets/javascripts/components/components/nav_bar.jsx
View File

@@ -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>
);
}
});

2
app/assets/javascripts/components/components/relative_timestamp.jsx
View File

@@ -12,7 +12,7 @@ moment.updateLocale('en', {
d: "a day",
dd: "%dd",
M: "a month",
MM: "%dm",
MM: "%dmo",
y: "a year",
yy: "%dy"
}

2
app/assets/javascripts/components/components/status.jsx
View File

@@ -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' }}>

17
app/assets/javascripts/components/containers/composer_drawer_container.jsx Normal file
View File

@@ -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);

7
app/assets/javascripts/components/store/configureStore.jsx
View File

@@ -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));
}