diff options
Diffstat (limited to 'app/assets/javascripts/components')
24 files changed, 668 insertions, 25 deletions
diff --git a/app/assets/javascripts/components/actions/accounts.jsx b/app/assets/javascripts/components/actions/accounts.jsx index 759435afe..8d28b051f 100644 --- a/app/assets/javascripts/components/actions/accounts.jsx +++ b/app/assets/javascripts/components/actions/accounts.jsx @@ -51,6 +51,22 @@ export const RELATIONSHIPS_FETCH_REQUEST = 'RELATIONSHIPS_FETCH_REQUEST'; export const RELATIONSHIPS_FETCH_SUCCESS = 'RELATIONSHIPS_FETCH_SUCCESS'; export const RELATIONSHIPS_FETCH_FAIL = 'RELATIONSHIPS_FETCH_FAIL'; +export const FOLLOW_REQUESTS_FETCH_REQUEST = 'FOLLOW_REQUESTS_FETCH_REQUEST'; +export const FOLLOW_REQUESTS_FETCH_SUCCESS = 'FOLLOW_REQUESTS_FETCH_SUCCESS'; +export const FOLLOW_REQUESTS_FETCH_FAIL = 'FOLLOW_REQUESTS_FETCH_FAIL'; + +export const FOLLOW_REQUESTS_EXPAND_REQUEST = 'FOLLOW_REQUESTS_EXPAND_REQUEST'; +export const FOLLOW_REQUESTS_EXPAND_SUCCESS = 'FOLLOW_REQUESTS_EXPAND_SUCCESS'; +export const FOLLOW_REQUESTS_EXPAND_FAIL = 'FOLLOW_REQUESTS_EXPAND_FAIL'; + +export const FOLLOW_REQUEST_AUTHORIZE_REQUEST = 'FOLLOW_REQUEST_AUTHORIZE_REQUEST'; +export const FOLLOW_REQUEST_AUTHORIZE_SUCCESS = 'FOLLOW_REQUEST_AUTHORIZE_SUCCESS'; +export const FOLLOW_REQUEST_AUTHORIZE_FAIL = 'FOLLOW_REQUEST_AUTHORIZE_FAIL'; + +export const FOLLOW_REQUEST_REJECT_REQUEST = 'FOLLOW_REQUEST_REJECT_REQUEST'; +export const FOLLOW_REQUEST_REJECT_SUCCESS = 'FOLLOW_REQUEST_REJECT_SUCCESS'; +export const FOLLOW_REQUEST_REJECT_FAIL = 'FOLLOW_REQUEST_REJECT_FAIL'; + export function setAccountSelf(account) { return { type: ACCOUNT_SET_SELF, @@ -509,3 +525,140 @@ export function fetchRelationshipsFail(error) { error }; }; + +export function fetchFollowRequests() { + return (dispatch, getState) => { + dispatch(fetchFollowRequestsRequest()); + + api(getState).get('/api/v1/follow_requests').then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(fetchFollowRequestsSuccess(response.data, next ? next.uri : null)) + }).catch(error => dispatch(fetchFollowRequestsFail(error))); + }; +}; + +export function fetchFollowRequestsRequest() { + return { + type: FOLLOW_REQUESTS_FETCH_REQUEST + }; +}; + +export function fetchFollowRequestsSuccess(accounts, next) { + return { + type: FOLLOW_REQUESTS_FETCH_SUCCESS, + accounts, + next + }; +}; + +export function fetchFollowRequestsFail(error) { + return { + type: FOLLOW_REQUESTS_FETCH_FAIL, + error + }; +}; + +export function expandFollowRequests() { + return (dispatch, getState) => { + const url = getState().getIn(['user_lists', 'follow_requests', 'next']); + + if (url === null) { + return; + } + + dispatch(expandFollowRequestsRequest()); + + api(getState).get(url).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(expandFollowRequestsSuccess(response.data, next ? next.uri : null)) + }).catch(error => dispatch(expandFollowRequestsFail(error))); + }; +}; + +export function expandFollowRequestsRequest() { + return { + type: FOLLOW_REQUESTS_EXPAND_REQUEST + }; +}; + +export function expandFollowRequestsSuccess(accounts, next) { + return { + type: FOLLOW_REQUESTS_EXPAND_SUCCESS, + accounts, + next + }; +}; + +export function expandFollowRequestsFail(error) { + return { + type: FOLLOW_REQUESTS_EXPAND_FAIL, + error + }; +}; + +export function authorizeFollowRequest(id) { + return (dispatch, getState) => { + dispatch(authorizeFollowRequestRequest(id)); + + api(getState) + .post(`/api/v1/follow_requests/${id}/authorize`) + .then(response => dispatch(authorizeFollowRequestSuccess(id))) + .catch(error => dispatch(authorizeFollowRequestFail(id, error))); + }; +}; + +export function authorizeFollowRequestRequest(id) { + return { + type: FOLLOW_REQUEST_AUTHORIZE_REQUEST, + id + }; +}; + +export function authorizeFollowRequestSuccess(id) { + return { + type: FOLLOW_REQUEST_AUTHORIZE_SUCCESS, + id + }; +}; + +export function authorizeFollowRequestFail(id, error) { + return { + type: FOLLOW_REQUEST_AUTHORIZE_FAIL, + id, + error + }; +}; + + +export function rejectFollowRequest(id) { + return (dispatch, getState) => { + dispatch(rejectFollowRequestRequest(id)); + + api(getState) + .post(`/api/v1/follow_requests/${id}/reject`) + .then(response => dispatch(rejectFollowRequestSuccess(id))) + .catch(error => dispatch(rejectFollowRequestFail(id, error))); + }; +}; + +export function rejectFollowRequestRequest(id) { + return { + type: FOLLOW_REQUEST_REJECT_REQUEST, + id + }; +}; + +export function rejectFollowRequestSuccess(id) { + return { + type: FOLLOW_REQUEST_REJECT_SUCCESS, + id + }; +}; + +export function rejectFollowRequestFail(id, error) { + return { + type: FOLLOW_REQUEST_REJECT_FAIL, + id, + error + }; +}; diff --git a/app/assets/javascripts/components/actions/notifications.jsx b/app/assets/javascripts/components/actions/notifications.jsx index 6a8b1b05b..8bd835406 100644 --- a/app/assets/javascripts/components/actions/notifications.jsx +++ b/app/assets/javascripts/components/actions/notifications.jsx @@ -14,6 +14,8 @@ export const NOTIFICATIONS_EXPAND_REQUEST = 'NOTIFICATIONS_EXPAND_REQUEST'; export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS'; export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL'; +export const NOTIFICATIONS_SETTING_CHANGE = 'NOTIFICATIONS_SETTING_CHANGE'; + const fetchRelatedRelationships = (dispatch, notifications) => { const accountIds = notifications.filter(item => item.type === 'follow').map(item => item.account.id); @@ -23,7 +25,7 @@ const fetchRelatedRelationships = (dispatch, notifications) => { }; export function updateNotifications(notification, intlMessages, intlLocale) { - return dispatch => { + return (dispatch, getState) => { dispatch({ type: NOTIFICATIONS_UPDATE, notification, @@ -34,7 +36,7 @@ export function updateNotifications(notification, intlMessages, intlLocale) { fetchRelatedRelationships(dispatch, [notification]); // Desktop notifications - if (typeof window.Notification !== 'undefined') { + if (typeof window.Notification !== 'undefined' && getState().getIn(['notifications', 'settings', 'alerts', notification.type], false)) { const title = new IntlMessageFormat(intlMessages[`notification.${notification.type}`], intlLocale).format({ name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username }); const body = $('<p>').html(notification.status ? notification.status.content : '').text(); @@ -131,3 +133,11 @@ export function expandNotificationsFail(error) { error }; }; + +export function changeNotificationsSetting(key, checked) { + return { + type: NOTIFICATIONS_SETTING_CHANGE, + key, + checked + }; +}; diff --git a/app/assets/javascripts/components/components/autosuggest_textarea.jsx b/app/assets/javascripts/components/components/autosuggest_textarea.jsx index 8d9da1601..39ccbcaf9 100644 --- a/app/assets/javascripts/components/components/autosuggest_textarea.jsx +++ b/app/assets/javascripts/components/components/autosuggest_textarea.jsx @@ -32,6 +32,7 @@ const AutosuggestTextarea = React.createClass({ value: React.PropTypes.string, suggestions: ImmutablePropTypes.list, disabled: React.PropTypes.bool, + fileDropDate: React.PropTypes.instanceOf(Date), placeholder: React.PropTypes.string, onSuggestionSelected: React.PropTypes.func.isRequired, onSuggestionsClearRequested: React.PropTypes.func.isRequired, @@ -42,6 +43,8 @@ const AutosuggestTextarea = React.createClass({ getInitialState () { return { + isFileDragging: false, + fileDraggingDate: undefined, suggestionsHidden: false, selectedSuggestion: 0, lastToken: null, @@ -120,21 +123,51 @@ const AutosuggestTextarea = React.createClass({ if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) { this.setState({ suggestionsHidden: false }); } + + const fileDropDate = nextProps.fileDropDate; + const { isFileDragging, fileDraggingDate } = this.state; + + /* + * We can't detect drop events, because they might not be on the textarea (the app allows dropping anywhere in the + * window). Instead, on-drop, we notify this textarea to stop its hover effect by passing in a prop with the + * drop-date. + */ + if (isFileDragging && fileDraggingDate && fileDropDate // if dragging when props updated, and dates aren't undefined + && fileDropDate > fileDraggingDate) { // and if the drop date is now greater than when we started dragging + // then we should stop dragging + this.setState({ + isFileDragging: false + }); + } }, setTextarea (c) { this.textarea = c; }, + onDragEnter () { + this.setState({ + isFileDragging: true, + fileDraggingDate: new Date() + }) + }, + + onDragExit () { + this.setState({ + isFileDragging: false + }) + }, + render () { - const { value, suggestions, disabled, placeholder, onKeyUp } = this.props; - const { suggestionsHidden, selectedSuggestion } = this.state; + const { value, suggestions, fileDropDate, disabled, placeholder, onKeyUp } = this.props; + const { isFileDragging, suggestionsHidden, selectedSuggestion } = this.state; + const className = isFileDragging ? 'autosuggest-textarea__textarea file-drop' : 'autosuggest-textarea__textarea'; return ( <div className='autosuggest-textarea'> <textarea ref={this.setTextarea} - className='autosuggest-textarea__textarea' + className={className} disabled={disabled} placeholder={placeholder} value={value} @@ -142,6 +175,8 @@ const AutosuggestTextarea = React.createClass({ onKeyDown={this.onKeyDown} onKeyUp={onKeyUp} onBlur={this.onBlur} + onDragEnter={this.onDragEnter} + onDragExit={this.onDragExit} /> <div style={{ display: (suggestions.size > 0 && !suggestionsHidden) ? 'block' : 'none' }} className='autosuggest-textarea__suggestions'> diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx index b48d94405..e0a73435f 100644 --- a/app/assets/javascripts/components/components/status_list.jsx +++ b/app/assets/javascripts/components/components/status_list.jsx @@ -27,11 +27,11 @@ const StatusList = React.createClass({ this._oldScrollPosition = scrollHeight - scrollTop; - if (scrollTop === scrollHeight - clientHeight) { + if (scrollTop === scrollHeight - clientHeight && this.props.onScrollToBottom) { this.props.onScrollToBottom(); - } else if (scrollTop < 100) { + } else if (scrollTop < 100 && this.props.onScrollToTop) { this.props.onScrollToTop(); - } else { + } else if (this.props.onScroll) { this.props.onScroll(); } }, diff --git a/app/assets/javascripts/components/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx index 69fe2d07f..670455376 100644 --- a/app/assets/javascripts/components/containers/mastodon.jsx +++ b/app/assets/javascripts/components/containers/mastodon.jsx @@ -34,6 +34,7 @@ import Reblogs from '../features/reblogs'; import Favourites from '../features/favourites'; import HashtagTimeline from '../features/hashtag_timeline'; import Notifications from '../features/notifications'; +import FollowRequests from '../features/follow_requests'; import { IntlProvider, addLocaleData } from 'react-intl'; import en from 'react-intl/locale-data/en'; import de from 'react-intl/locale-data/de'; @@ -125,6 +126,8 @@ const Mastodon = React.createClass({ <Route path='followers' component={Followers} /> <Route path='following' component={Following} /> </Route> + + <Route path='follow_requests' component={FollowRequests} /> </Route> </Router> </Provider> diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx index adf9ab5ae..6ae5ac002 100644 --- a/app/assets/javascripts/components/features/account/components/header.jsx +++ b/app/assets/javascripts/components/features/account/components/header.jsx @@ -61,10 +61,10 @@ const Header = React.createClass({ const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; return ( - <div style={{ flex: '0 0 auto', background: '#2f3441', textAlign: 'center', backgroundImage: `url(${account.get('header')})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}> + <div className='account__header' style={{ flex: '0 0 auto', background: '#2f3441', textAlign: 'center', backgroundImage: `url(${account.get('header')})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}> <div style={{ background: 'rgba(47, 52, 65, 0.9)', padding: '20px 10px' }}> <a href={account.get('url')} target='_blank' rel='noopener' style={{ display: 'block', color: 'inherit', textDecoration: 'none' }}> - <div style={{ width: '90px', margin: '0 auto', marginBottom: '10px' }}> + <div className='account__header__avatar' style={{ width: '90px', margin: '0 auto', marginBottom: '10px' }}> <img src={account.get('avatar')} alt='' style={{ display: 'block', width: '90px', height: '90px', borderRadius: '90px' }} /> </div> diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index 760b0efd1..55f361b0b 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -20,12 +20,14 @@ const messages = defineMessages({ const ComposeForm = React.createClass({ propTypes: { + intl: React.PropTypes.object.isRequired, text: React.PropTypes.string.isRequired, suggestion_token: React.PropTypes.string, suggestions: ImmutablePropTypes.list, sensitive: React.PropTypes.bool, unlisted: React.PropTypes.bool, private: React.PropTypes.bool, + fileDropDate: React.PropTypes.instanceOf(Date), is_submitting: React.PropTypes.bool, is_uploading: React.PropTypes.bool, in_reply_to: ImmutablePropTypes.map, @@ -109,6 +111,7 @@ const ComposeForm = React.createClass({ ref={this.setAutosuggestTextarea} placeholder={intl.formatMessage(messages.placeholder)} disabled={disabled} + fileDropDate={this.props.fileDropDate} value={this.props.text} onChange={this.handleChange} suggestions={this.props.suggestions} @@ -129,7 +132,7 @@ const ComposeForm = React.createClass({ <span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}><FormattedMessage id='compose_form.private' defaultMessage='Mark as private' /></span> </label> - <Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.private ? 0 : 100), height: spring(this.props.private ? 0 : 39.5) }}> + <Motion defaultStyle={{ opacity: this.props.private ? 0 : 100, height: this.props.private ? 39.5 : 0 }} style={{ opacity: spring(this.props.private ? 0 : 100), height: spring(this.props.private ? 0 : 39.5) }}> {({ opacity, height }) => <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}> <Toggle checked={this.props.unlisted} onChange={this.handleChangeListability} /> @@ -138,7 +141,7 @@ const ComposeForm = React.createClass({ } </Motion> - <Motion defaultStyle={{ opacity: 100, height: 39.5 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}> + <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(this.props.media_count === 0 ? 0 : 100), height: spring(this.props.media_count === 0 ? 0 : 39.5) }}> {({ opacity, height }) => <label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', height: `${height}px`, overflow: 'hidden', opacity: opacity / 100 }}> <Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} /> diff --git a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx index 1d8f20ca7..2b6ee1ae7 100644 --- a/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx +++ b/app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx @@ -24,6 +24,7 @@ const makeMapStateToProps = () => { sensitive: state.getIn(['compose', 'sensitive']), unlisted: state.getIn(['compose', 'unlisted']), private: state.getIn(['compose', 'private']), + fileDropDate: state.getIn(['compose', 'fileDropDate']), is_submitting: state.getIn(['compose', 'is_submitting']), is_uploading: state.getIn(['compose', 'is_uploading']), in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])), diff --git a/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx new file mode 100644 index 000000000..0d41d192f --- /dev/null +++ b/app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx @@ -0,0 +1,61 @@ +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Permalink from '../../../components/permalink'; +import Avatar from '../../../components/avatar'; +import DisplayName from '../../../components/display_name'; +import emojify from '../../../emoji'; +import IconButton from '../../../components/icon_button'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, + reject: { id: 'follow_request.reject', defaultMessage: 'Reject' } +}); + +const outerStyle = { + padding: '14px 10px' +}; + +const panelStyle = { + background: '#2f3441', + display: 'flex', + flexDirection: 'row', + borderTop: '1px solid #363c4b', + borderBottom: '1px solid #363c4b', + padding: '10px 0' +}; + +const btnStyle = { + flex: '1 1 auto', + textAlign: 'center' +}; + +const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => { + const content = { __html: emojify(account.get('note')) }; + + return ( + <div> + <div style={outerStyle}> + <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}> + <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={48} /></div> + <DisplayName account={account} /> + </Permalink> + + <div style={{ color: '#616b86', fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} /> + </div> + + <div style={panelStyle}> + <div style={btnStyle}><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div> + <div style={btnStyle}><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div> + </div> + </div> + ) +}; + +AccountAuthorize.propTypes = { + account: ImmutablePropTypes.map.isRequired, + onAuthorize: React.PropTypes.func.isRequired, + onReject: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired +}; + +export default injectIntl(AccountAuthorize); diff --git a/app/assets/javascripts/components/features/follow_requests/containers/account_authorize_container.jsx b/app/assets/javascripts/components/features/follow_requests/containers/account_authorize_container.jsx new file mode 100644 index 000000000..da1e5eaa1 --- /dev/null +++ b/app/assets/javascripts/components/features/follow_requests/containers/account_authorize_container.jsx @@ -0,0 +1,26 @@ +import { connect } from 'react-redux'; +import { makeGetAccount } from '../../../selectors'; +import AccountAuthorize from '../components/account_authorize'; +import { authorizeFollowRequest, rejectFollowRequest } from '../../../actions/accounts'; + +const makeMapStateToProps = () => { + const getAccount = makeGetAccount(); + + const mapStateToProps = (state, props) => ({ + account: getAccount(state, props.id) + }); + + return mapStateToProps; +}; + +const mapDispatchToProps = (dispatch, { id }) => ({ + onAuthorize (account) { + dispatch(authorizeFollowRequest(id)); + }, + + onReject (account) { + dispatch(rejectFollowRequest(id)); + } +}); + +export default connect(makeMapStateToProps, mapDispatchToProps)(AccountAuthorize); diff --git a/app/assets/javascripts/components/features/follow_requests/index.jsx b/app/assets/javascripts/components/features/follow_requests/index.jsx new file mode 100644 index 000000000..461370999 --- /dev/null +++ b/app/assets/javascripts/components/features/follow_requests/index.jsx @@ -0,0 +1,66 @@ +import { connect } from 'react-redux'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import LoadingIndicator from '../../components/loading_indicator'; +import { ScrollContainer } from 'react-router-scroll'; +import Column from '../ui/components/column'; +import AccountAuthorizeContainer from './containers/account_authorize_container'; +import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' } +}); + +const mapStateToProps = state => ({ + accountIds: state.getIn(['user_lists', 'follow_requests', 'items']) +}); + +const FollowRequests = React.createClass({ + propTypes: { + params: React.PropTypes.object.isRequired, + dispatch: React.PropTypes.func.isRequired, + accountIds: ImmutablePropTypes.list, + intl: React.PropTypes.object.isRequired + }, + + mixins: [PureRenderMixin], + + componentWillMount () { + this.props.dispatch(fetchFollowRequests()); + }, + + handleScroll (e) { + const { scrollTop, scrollHeight, clientHeight } = e.target; + + if (scrollTop === scrollHeight - clientHeight) { + this.props.dispatch(expandFollowRequests()); + } + }, + + render () { + const { intl, accountIds } = this.props; + + if (!accountIds) { + return ( + <Column> + <LoadingIndicator /> + </Column> + ); + } + + return ( + <Column icon='users' heading={intl.formatMessage(messages.heading)}> + <ScrollContainer scrollKey='follow_requests'> + <div className='scrollable' onScroll={this.handleScroll}> + {accountIds.map(id => + <AccountAuthorizeContainer key={id} id={id} /> + )} + </div> + </ScrollContainer> + </Column> + ); + } +}); + +export default connect(mapStateToProps)(injectIntl(FollowRequests)); diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx index bff75f86f..157bdf8f2 100644 --- a/app/assets/javascripts/components/features/getting_started/index.jsx +++ b/app/assets/javascripts/components/features/getting_started/index.jsx @@ -3,15 +3,17 @@ import ColumnLink from '../ui/components/column_link'; import { Link } from 'react-router'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import ImmutablePropTypes from 'react-immutable-proptypes'; const messages = defineMessages({ heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Public timeline' }, - settings: { id: 'navigation_bar.settings', defaultMessage: 'Settings' } + settings: { id: 'navigation_bar.settings', defaultMessage: 'Settings' }, + follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' } }); const mapStateToProps = state => ({ - me: state.getIn(['meta', 'me']) + me: state.getIn(['accounts', state.getIn(['meta', 'me'])]) }); const hamburgerStyle = { @@ -26,12 +28,19 @@ const hamburgerStyle = { }; const GettingStarted = ({ intl, me }) => { + let followRequests = ''; + + if (me.get('locked')) { + followRequests = <ColumnLink icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />; + } + return ( <Column icon='asterisk' heading={intl.formatMessage(messages.heading)}> <div style={{ position: 'relative' }}> <div style={hamburgerStyle}><i className='fa fa-bars' /></div> <ColumnLink icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' /> <ColumnLink icon='cog' text={intl.formatMessage(messages.settings)} href='/settings/profile' /> + {followRequests} </div> <div className='static-content'> @@ -39,8 +48,15 @@ const GettingStarted = ({ intl, me }) => { <p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p> <p><FormattedMessage id='getting_started.about_developer' defaultMessage='The developer of this project can be followed as Gargron@mastodon.social' /></p> </div> + + <div className='getting-started__illustration' /> </Column> ); }; +GettingStarted.propTypes = { + intl: React.PropTypes.object.isRequired, + me: ImmutablePropTypes.map.isRequired +}; + export default connect(mapStateToProps)(injectIntl(GettingStarted)); diff --git a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx index cf53a7729..f28e01a00 100644 --- a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx +++ b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx @@ -7,6 +7,7 @@ import { updateTimeline, deleteFromTimelines } from '../../actions/timelines'; +import ColumnBackButton from '../public_timeline/components/column_back_button'; const HashtagTimeline = React.createClass({ @@ -68,6 +69,7 @@ const HashtagTimeline = React.createClass({ return ( <Column icon='hashtag' heading={id}> + <ColumnBackButton /> <StatusListContainer type='tag' id={id} /> </Column> ); diff --git a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx new file mode 100644 index 000000000..b4035c20d --- /dev/null +++ b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx @@ -0,0 +1,150 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Toggle from 'react-toggle'; +import { Motion, spring } from 'react-motion'; +import { FormattedMessage } from 'react-intl'; + +const outerStyle = { + background: '#373b4a', + padding: '15px' +}; + +const iconStyle = { + fontSize: '16px', + padding: '15px', + position: 'absolute', + right: '0', + top: '-48px', + cursor: 'pointer' +}; + +const labelStyle = { + display: 'block', + lineHeight: '24px', + verticalAlign: 'middle' +}; + +const labelSpanStyle = { + display: 'inline-block', + verticalAlign: 'middle', + marginBottom: '14px', + marginLeft: '8px', + color: '#9baec8' +}; + +const sectionStyle = { + cursor: 'default', + display: 'block', + fontWeight: '500', + color: '#9baec8', + marginBottom: '10px' +}; + +const rowStyle = { + +}; + +const ColumnSettings = React.createClass({ + + propTypes: { + settings: ImmutablePropTypes.map.isRequired, + onChange: React.PropTypes.func.isRequired + }, + + getInitialState () { + return { + collapsed: true + }; + }, + + mixins: [PureRenderMixin], + + handleToggleCollapsed () { + this.setState({ collapsed: !this.state.collapsed }); + }, + + handleChange (key, e) { + this.props.onChange(key, e.target.checked); + }, + + render () { + const { settings } = this.props; + const { collapsed } = this.state; + + const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />; + const showStr = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />; + + return ( + <div style={{ position: 'relative' }}> + <div style={{...iconStyle, color: collapsed ? '#9baec8' : '#fff', background: collapsed ? '#2f3441' : '#373b4a' }} onClick={this.handleToggleCollapsed}><i className='fa fa-sliders' /></div> + + <Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : 458) }}> + {({ opacity, height }) => + <div style={{ overflow: 'hidden', height: `${height}px`, opacity: opacity / 100 }}> + <div style={outerStyle}> + <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span> + + <div style={rowStyle}> + <label style={labelStyle}> + <Toggle checked={settings.getIn(['alerts', 'follow'])} onChange={this.handleChange.bind(this, ['alerts', 'follow'])} /> + <span style={labelSpanStyle}>{alertStr}</span> + </label> + + <label style={labelStyle}> + <Toggle checked={settings.getIn(['shows', 'follow'])} onChange={this.handleChange.bind(this, ['shows', 'follow'])} /> + <span style={labelSpanStyle}>{showStr}</span> + </label> + </div> + + <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span> + + <div style={rowStyle}> + <label style={labelStyle}> + <Toggle checked={settings.getIn(['alerts', 'favourite'])} onChange={this.handleChange.bind(this, ['alerts', 'favourite'])} /> + <span style={labelSpanStyle}>{alertStr}</span> + </label> + + <label style={labelStyle}> + <Toggle checked={settings.getIn(['shows', 'favourite'])} onChange={this.handleChange.bind(this, ['shows', 'favourite'])} /> + <span style={labelSpanStyle}>{showStr}</span> + </label> + </div> + + <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span> + + <div style={rowStyle}> + <label style={labelStyle}> + <Toggle checked={settings.getIn(['alerts', 'mention'])} onChange={this.handleChange.bind(this, ['alerts', 'mention'])} /> + <span style={labelSpanStyle}>{alertStr}</span> + </label> + + <label style={labelStyle}> + <Toggle checked={settings.getIn(['shows', 'mention'])} onChange={this.handleChange.bind(this, ['shows', 'mention'])} /> + <span style={labelSpanStyle}>{showStr}</span> + </label> + </div> + + <span style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span> + + <div style={rowStyle}> + <label style={labelStyle}> + <Toggle checked={settings.getIn(['alerts', 'reblog'])} onChange={this.handleChange.bind(this, ['alerts', 'reblog'])} /> + <span style={labelSpanStyle}>{alertStr}</span> + </label> + + <label style={labelStyle}> + <Toggle checked={settings.getIn(['shows', 'reblog'])} onChange={this.handleChange.bind(this, ['shows', 'reblog'])} /> + <span style={labelSpanStyle}>{showStr}</span> + </label> + </div> + </div> + </div> + } + </Motion> + </div> + ); + } + +}); + +export default ColumnSettings; diff --git a/app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx b/app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx new file mode 100644 index 000000000..6907fd351 --- /dev/null +++ b/app/assets/javascripts/components/features/notifications/containers/column_settings_container.jsx @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; +import ColumnSettings from '../components/column_settings'; +import { changeNotificationsSetting } from '../../../actions/notifications'; + +const mapStateToProps = state => ({ + settings: state.getIn(['notifications', 'settings']) +}); + +const mapDispatchToProps = dispatch => ({ + + onChange (key, checked) { + dispatch(changeNotificationsSetting(key, checked)); + } + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings); diff --git a/app/assets/javascripts/components/features/notifications/index.jsx b/app/assets/javascripts/components/features/notifications/index.jsx index 218196cfd..7e706ad6a 100644 --- a/app/assets/javascripts/components/features/notifications/index.jsx +++ b/app/assets/javascripts/components/features/notifications/index.jsx @@ -9,13 +9,21 @@ import { import NotificationContainer from './containers/notification_container'; import { ScrollContainer } from 'react-router-scroll'; import { defineMessages, injectIntl } from 'react-intl'; +import ColumnSettingsContainer from './containers/column_settings_container'; +import { createSelector } from 'reselect'; +import Immutable from 'immutable'; const messages = defineMessages({ title: { id: 'column.notifications', defaultMessage: 'Notifications' } }); +const getNotifications = createSelector([ + state => Immutable.List(state.getIn(['notifications', 'settings', 'shows']).filter(item => !item).keys()), + state => state.getIn(['notifications', 'items']) +], (excludedTypes, notifications) => notifications.filterNot(item => excludedTypes.includes(item.get('type')))); + const mapStateToProps = state => ({ - notifications: state.getIn(['notifications', 'items']) + notifications: getNotifications(state) }); const Notifications = React.createClass({ @@ -23,7 +31,8 @@ const Notifications = React.createClass({ propTypes: { notifications: ImmutablePropTypes.list.isRequired, dispatch: React.PropTypes.func.isRequired, - trackScroll: React.PropTypes.bool + trackScroll: React.PropTypes.bool, + intl: React.PropTypes.object.isRequired }, getDefaultProps () { @@ -69,6 +78,7 @@ const Notifications = React.createClass({ } else { return ( <Column icon='bell' heading={intl.formatMessage(messages.title)}> + <ColumnSettingsContainer /> {scrollableArea} </Column> ); diff --git a/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx b/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx new file mode 100644 index 000000000..4535f8f28 --- /dev/null +++ b/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx @@ -0,0 +1,46 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import { FormattedMessage } from 'react-intl'; + +const outerStyle = { + position: 'absolute', + right: '0', + top: '-48px', + padding: '15px', + fontSize: '16px', + background: '#2f3441', + flex: '0 0 auto', + cursor: 'pointer', + color: '#2b90d9' +}; + +const iconStyle = { + display: 'inline-block', + marginRight: '5px' +}; + +const ColumnBackButton = React.createClass({ + + contextTypes: { + router: React.PropTypes.object + }, + + mixins: [PureRenderMixin], + + handleClick () { + this.context.router.push('/'); + }, + + render () { + return ( + <div style={{ position: 'relative' }}> + <div style={outerStyle} onClick={this.handleClick} className='column-back-button'> + <i className='fa fa-fw fa-chevron-left' style={iconStyle} /> + <FormattedMessage id='column_back_button.label' defaultMessage='Back' /> + </div> + </div> + ); + } + +}); + +export default ColumnBackButton; diff --git a/app/assets/javascripts/components/features/public_timeline/index.jsx b/app/assets/javascripts/components/features/public_timeline/index.jsx index c3da09a09..eac85f01b 100644 --- a/app/assets/javascripts/components/features/public_timeline/index.jsx +++ b/app/assets/javascripts/components/features/public_timeline/index.jsx @@ -8,6 +8,7 @@ import { deleteFromTimelines } from '../../actions/timelines'; import { defineMessages, injectIntl } from 'react-intl'; +import ColumnBackButton from './components/column_back_button'; const messages = defineMessages({ title: { id: 'column.public', defaultMessage: 'Public' } @@ -16,7 +17,8 @@ const messages = defineMessages({ const PublicTimeline = React.createClass({ propTypes: { - dispatch: React.PropTypes.func.isRequired + dispatch: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired }, mixins: [PureRenderMixin], @@ -53,6 +55,7 @@ const PublicTimeline = React.createClass({ return ( <Column icon='globe' heading={intl.formatMessage(messages.title)}> + <ColumnBackButton /> <StatusListContainer type='public' /> </Column> ); diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx index c2060749a..c382e108d 100644 --- a/app/assets/javascripts/components/features/ui/components/column.jsx +++ b/app/assets/javascripts/components/features/ui/components/column.jsx @@ -40,7 +40,8 @@ const Column = React.createClass({ propTypes: { heading: React.PropTypes.string, - icon: React.PropTypes.string + icon: React.PropTypes.string, + children: React.PropTypes.node }, mixins: [PureRenderMixin], diff --git a/app/assets/javascripts/components/locales/en.jsx b/app/assets/javascripts/components/locales/en.jsx index 50007a7da..3d4a38919 100644 --- a/app/assets/javascripts/components/locales/en.jsx +++ b/app/assets/javascripts/components/locales/en.jsx @@ -52,7 +52,13 @@ const en = { "notification.follow": "{name} followed you", "notification.favourite": "{name} favourited your status", "notification.reblog": "{name} boosted your status", - "notification.mention": "{name} mentioned you" + "notification.mention": "{name} mentioned you", + "notifications.column_settings.alert": "Desktop notifications", + "notifications.column_settings.show": "Show in column", + "notifications.column_settings.follow": "New followers:", + "notifications.column_settings.favourite": "Favourites:", + "notifications.column_settings.mention": "Mentions:", + "notifications.column_settings.reblog": "Boosts:", }; export default en; diff --git a/app/assets/javascripts/components/reducers/accounts.jsx b/app/assets/javascripts/components/reducers/accounts.jsx index 982e63073..7f2f89d0a 100644 --- a/app/assets/javascripts/components/reducers/accounts.jsx +++ b/app/assets/javascripts/components/reducers/accounts.jsx @@ -6,7 +6,8 @@ import { FOLLOWING_FETCH_SUCCESS, FOLLOWING_EXPAND_SUCCESS, ACCOUNT_TIMELINE_FETCH_SUCCESS, - ACCOUNT_TIMELINE_EXPAND_SUCCESS + ACCOUNT_TIMELINE_EXPAND_SUCCESS, + FOLLOW_REQUESTS_FETCH_SUCCESS } from '../actions/accounts'; import { COMPOSE_SUGGESTIONS_READY } from '../actions/compose'; import { @@ -78,6 +79,7 @@ export default function accounts(state = initialState, action) { case FAVOURITES_FETCH_SUCCESS: case COMPOSE_SUGGESTIONS_READY: case SEARCH_SUGGESTIONS_READY: + case FOLLOW_REQUESTS_FETCH_SUCCESS: return normalizeAccounts(state, action.accounts); case NOTIFICATIONS_REFRESH_SUCCESS: case NOTIFICATIONS_EXPAND_SUCCESS: diff --git a/app/assets/javascripts/components/reducers/compose.jsx b/app/assets/javascripts/components/reducers/compose.jsx index 742272e6f..16215684e 100644 --- a/app/assets/javascripts/components/reducers/compose.jsx +++ b/app/assets/javascripts/components/reducers/compose.jsx @@ -30,6 +30,7 @@ const initialState = Immutable.Map({ unlisted: false, private: false, text: '', + fileDropDate: null, in_reply_to: null, is_submitting: false, is_uploading: false, @@ -116,7 +117,10 @@ export default function compose(state = initialState, action) { case COMPOSE_SUBMIT_FAIL: return state.set('is_submitting', false); case COMPOSE_UPLOAD_REQUEST: - return state.set('is_uploading', true); + return state.withMutations(map => { + map.set('is_uploading', true); + map.set('fileDropDate', new Date()); + }); case COMPOSE_UPLOAD_SUCCESS: return appendMedia(state, Immutable.fromJS(action.media)); case COMPOSE_UPLOAD_FAIL: diff --git a/app/assets/javascripts/components/reducers/notifications.jsx b/app/assets/javascripts/components/reducers/notifications.jsx index 617a833d2..e0d1ccf83 100644 --- a/app/assets/javascripts/components/reducers/notifications.jsx +++ b/app/assets/javascripts/components/reducers/notifications.jsx @@ -1,7 +1,8 @@ import { NOTIFICATIONS_UPDATE, NOTIFICATIONS_REFRESH_SUCCESS, - NOTIFICATIONS_EXPAND_SUCCESS + NOTIFICATIONS_EXPAND_SUCCESS, + NOTIFICATIONS_SETTING_CHANGE } from '../actions/notifications'; import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts'; import Immutable from 'immutable'; @@ -9,7 +10,23 @@ import Immutable from 'immutable'; const initialState = Immutable.Map({ items: Immutable.List(), next: null, - loaded: false + loaded: false, + + settings: Immutable.Map({ + alerts: Immutable.Map({ + follow: true, + favourite: true, + reblog: true, + mention: true + }), + + shows: Immutable.Map({ + follow: true, + favourite: true, + reblog: true, + mention: true + }) + }) }); const notificationToMap = notification => Immutable.Map({ @@ -58,6 +75,8 @@ export default function notifications(state = initialState, action) { return appendNormalizedNotifications(state, action.notifications, action.next); case ACCOUNT_BLOCK_SUCCESS: return filterNotifications(state, action.relationship); + case NOTIFICATIONS_SETTING_CHANGE: + return state.setIn(['settings', ...action.key], action.checked); default: return state; } diff --git a/app/assets/javascripts/components/reducers/user_lists.jsx b/app/assets/javascripts/components/reducers/user_lists.jsx index 3608e4209..36093663f 100644 --- a/app/assets/javascripts/components/reducers/user_lists.jsx +++ b/app/assets/javascripts/components/reducers/user_lists.jsx @@ -2,7 +2,10 @@ import { FOLLOWERS_FETCH_SUCCESS, FOLLOWERS_EXPAND_SUCCESS, FOLLOWING_FETCH_SUCCESS, - FOLLOWING_EXPAND_SUCCESS + FOLLOWING_EXPAND_SUCCESS, + FOLLOW_REQUESTS_FETCH_SUCCESS, + FOLLOW_REQUEST_AUTHORIZE_SUCCESS, + FOLLOW_REQUEST_REJECT_SUCCESS } from '../actions/accounts'; import { REBLOGS_FETCH_SUCCESS, @@ -14,7 +17,8 @@ const initialState = Immutable.Map({ followers: Immutable.Map(), following: Immutable.Map(), reblogged_by: Immutable.Map(), - favourited_by: Immutable.Map() + favourited_by: Immutable.Map(), + follow_requests: Immutable.Map() }); const normalizeList = (state, type, id, accounts, next) => { @@ -44,6 +48,11 @@ export default function userLists(state = initialState, action) { return state.setIn(['reblogged_by', action.id], Immutable.List(action.accounts.map(item => item.id))); case FAVOURITES_FETCH_SUCCESS: return state.setIn(['favourited_by', action.id], Immutable.List(action.accounts.map(item => item.id))); + case FOLLOW_REQUESTS_FETCH_SUCCESS: + return state.setIn(['follow_requests', 'items'], Immutable.List(action.accounts.map(item => item.id))).setIn(['follow_requests', 'next'], action.next); + case FOLLOW_REQUEST_AUTHORIZE_SUCCESS: + case FOLLOW_REQUEST_REJECT_SUCCESS: + return state.updateIn(['follow_requests', 'items'], list => list.filterNot(item => item === action.id)); default: return state; } |