diff options
Diffstat (limited to 'app/javascript')
26 files changed, 1071 insertions, 52 deletions
diff --git a/app/javascript/mastodon/actions/lists.js b/app/javascript/mastodon/actions/lists.js index 332e42166..4c8f9b186 100644 --- a/app/javascript/mastodon/actions/lists.js +++ b/app/javascript/mastodon/actions/lists.js @@ -4,12 +4,52 @@ export const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST'; export const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS'; export const LIST_FETCH_FAIL = 'LIST_FETCH_FAIL'; +export const LISTS_FETCH_REQUEST = 'LISTS_FETCH_REQUEST'; +export const LISTS_FETCH_SUCCESS = 'LISTS_FETCH_SUCCESS'; +export const LISTS_FETCH_FAIL = 'LISTS_FETCH_FAIL'; + +export const LIST_EDITOR_TITLE_CHANGE = 'LIST_EDITOR_TITLE_CHANGE'; +export const LIST_EDITOR_RESET = 'LIST_EDITOR_RESET'; +export const LIST_EDITOR_SETUP = 'LIST_EDITOR_SETUP'; + +export const LIST_CREATE_REQUEST = 'LIST_CREATE_REQUEST'; +export const LIST_CREATE_SUCCESS = 'LIST_CREATE_SUCCESS'; +export const LIST_CREATE_FAIL = 'LIST_CREATE_FAIL'; + +export const LIST_UPDATE_REQUEST = 'LIST_UPDATE_REQUEST'; +export const LIST_UPDATE_SUCCESS = 'LIST_UPDATE_SUCCESS'; +export const LIST_UPDATE_FAIL = 'LIST_UPDATE_FAIL'; + +export const LIST_DELETE_REQUEST = 'LIST_DELETE_REQUEST'; +export const LIST_DELETE_SUCCESS = 'LIST_DELETE_SUCCESS'; +export const LIST_DELETE_FAIL = 'LIST_DELETE_FAIL'; + +export const LIST_ACCOUNTS_FETCH_REQUEST = 'LIST_ACCOUNTS_FETCH_REQUEST'; +export const LIST_ACCOUNTS_FETCH_SUCCESS = 'LIST_ACCOUNTS_FETCH_SUCCESS'; +export const LIST_ACCOUNTS_FETCH_FAIL = 'LIST_ACCOUNTS_FETCH_FAIL'; + +export const LIST_EDITOR_SUGGESTIONS_CHANGE = 'LIST_EDITOR_SUGGESTIONS_CHANGE'; +export const LIST_EDITOR_SUGGESTIONS_READY = 'LIST_EDITOR_SUGGESTIONS_READY'; +export const LIST_EDITOR_SUGGESTIONS_CLEAR = 'LIST_EDITOR_SUGGESTIONS_CLEAR'; + +export const LIST_EDITOR_ADD_REQUEST = 'LIST_EDITOR_ADD_REQUEST'; +export const LIST_EDITOR_ADD_SUCCESS = 'LIST_EDITOR_ADD_SUCCESS'; +export const LIST_EDITOR_ADD_FAIL = 'LIST_EDITOR_ADD_FAIL'; + +export const LIST_EDITOR_REMOVE_REQUEST = 'LIST_EDITOR_REMOVE_REQUEST'; +export const LIST_EDITOR_REMOVE_SUCCESS = 'LIST_EDITOR_REMOVE_SUCCESS'; +export const LIST_EDITOR_REMOVE_FAIL = 'LIST_EDITOR_REMOVE_FAIL'; + export const fetchList = id => (dispatch, getState) => { + if (getState().getIn(['lists', id])) { + return; + } + dispatch(fetchListRequest(id)); api(getState).get(`/api/v1/lists/${id}`) .then(({ data }) => dispatch(fetchListSuccess(data))) - .catch(err => dispatch(fetchListFail(err))); + .catch(err => dispatch(fetchListFail(id, err))); }; export const fetchListRequest = id => ({ @@ -22,7 +62,252 @@ export const fetchListSuccess = list => ({ list, }); -export const fetchListFail = error => ({ +export const fetchListFail = (id, error) => ({ type: LIST_FETCH_FAIL, + id, + error, +}); + +export const fetchLists = () => (dispatch, getState) => { + dispatch(fetchListsRequest()); + + api(getState).get('/api/v1/lists') + .then(({ data }) => dispatch(fetchListsSuccess(data))) + .catch(err => dispatch(fetchListsFail(err))); +}; + +export const fetchListsRequest = () => ({ + type: LISTS_FETCH_REQUEST, +}); + +export const fetchListsSuccess = lists => ({ + type: LISTS_FETCH_SUCCESS, + lists, +}); + +export const fetchListsFail = error => ({ + type: LISTS_FETCH_FAIL, + error, +}); + +export const submitListEditor = shouldReset => (dispatch, getState) => { + const listId = getState().getIn(['listEditor', 'listId']); + const title = getState().getIn(['listEditor', 'title']); + + if (listId === null) { + dispatch(createList(title, shouldReset)); + } else { + dispatch(updateList(listId, title, shouldReset)); + } +}; + +export const setupListEditor = listId => (dispatch, getState) => { + dispatch({ + type: LIST_EDITOR_SETUP, + list: getState().getIn(['lists', listId]), + }); + + dispatch(fetchListAccounts(listId)); +}; + +export const changeListEditorTitle = value => ({ + type: LIST_EDITOR_TITLE_CHANGE, + value, +}); + +export const createList = (title, shouldReset) => (dispatch, getState) => { + dispatch(createListRequest()); + + api(getState).post('/api/v1/lists', { title }).then(({ data }) => { + dispatch(createListSuccess(data)); + + if (shouldReset) { + dispatch(resetListEditor()); + } + }).catch(err => dispatch(createListFail(err))); +}; + +export const createListRequest = () => ({ + type: LIST_CREATE_REQUEST, +}); + +export const createListSuccess = list => ({ + type: LIST_CREATE_SUCCESS, + list, +}); + +export const createListFail = error => ({ + type: LIST_CREATE_FAIL, + error, +}); + +export const updateList = (id, title, shouldReset) => (dispatch, getState) => { + dispatch(updateListRequest(id)); + + api(getState).put(`/api/v1/lists/${id}`, { title }).then(({ data }) => { + dispatch(updateListSuccess(data)); + + if (shouldReset) { + dispatch(resetListEditor()); + } + }).catch(err => dispatch(updateListFail(id, err))); +}; + +export const updateListRequest = id => ({ + type: LIST_UPDATE_REQUEST, + id, +}); + +export const updateListSuccess = list => ({ + type: LIST_UPDATE_SUCCESS, + list, +}); + +export const updateListFail = (id, error) => ({ + type: LIST_UPDATE_FAIL, + id, + error, +}); + +export const resetListEditor = () => ({ + type: LIST_EDITOR_RESET, +}); + +export const deleteList = id => (dispatch, getState) => { + dispatch(deleteListRequest(id)); + + api(getState).delete(`/api/v1/lists/${id}`) + .then(() => dispatch(deleteListSuccess(id))) + .catch(err => dispatch(deleteListFail(id, err))); +}; + +export const deleteListRequest = id => ({ + type: LIST_DELETE_REQUEST, + id, +}); + +export const deleteListSuccess = id => ({ + type: LIST_DELETE_SUCCESS, + id, +}); + +export const deleteListFail = (id, error) => ({ + type: LIST_DELETE_FAIL, + id, + error, +}); + +export const fetchListAccounts = listId => (dispatch, getState) => { + dispatch(fetchListAccountsRequest(listId)); + + api(getState).get(`/api/v1/lists/${listId}/accounts`, { params: { limit: 0 } }) + .then(({ data }) => dispatch(fetchListAccountsSuccess(listId, data))) + .catch(err => dispatch(fetchListAccountsFail(listId, err))); +}; + +export const fetchListAccountsRequest = id => ({ + type: LIST_ACCOUNTS_FETCH_REQUEST, + id, +}); + +export const fetchListAccountsSuccess = (id, accounts, next) => ({ + type: LIST_ACCOUNTS_FETCH_SUCCESS, + id, + accounts, + next, +}); + +export const fetchListAccountsFail = (id, error) => ({ + type: LIST_ACCOUNTS_FETCH_FAIL, + id, + error, +}); + +export const fetchListSuggestions = q => (dispatch, getState) => { + const params = { + q, + resolve: false, + limit: 4, + following: true, + }; + + api(getState).get('/api/v1/accounts/search', { params }) + .then(({ data }) => dispatch(fetchListSuggestionsReady(q, data))); +}; + +export const fetchListSuggestionsReady = (query, accounts) => ({ + type: LIST_EDITOR_SUGGESTIONS_READY, + query, + accounts, +}); + +export const clearListSuggestions = () => ({ + type: LIST_EDITOR_SUGGESTIONS_CLEAR, +}); + +export const changeListSuggestions = value => ({ + type: LIST_EDITOR_SUGGESTIONS_CHANGE, + value, +}); + +export const addToListEditor = accountId => (dispatch, getState) => { + dispatch(addToList(getState().getIn(['listEditor', 'listId']), accountId)); +}; + +export const addToList = (listId, accountId) => (dispatch, getState) => { + dispatch(addToListRequest(listId, accountId)); + + api(getState).post(`/api/v1/lists/${listId}/accounts`, { account_ids: [accountId] }) + .then(() => dispatch(addToListSuccess(listId, accountId))) + .catch(err => dispatch(addToListFail(listId, accountId, err))); +}; + +export const addToListRequest = (listId, accountId) => ({ + type: LIST_EDITOR_ADD_REQUEST, + listId, + accountId, +}); + +export const addToListSuccess = (listId, accountId) => ({ + type: LIST_EDITOR_ADD_SUCCESS, + listId, + accountId, +}); + +export const addToListFail = (listId, accountId, error) => ({ + type: LIST_EDITOR_ADD_FAIL, + listId, + accountId, + error, +}); + +export const removeFromListEditor = accountId => (dispatch, getState) => { + dispatch(removeFromList(getState().getIn(['listEditor', 'listId']), accountId)); +}; + +export const removeFromList = (listId, accountId) => (dispatch, getState) => { + dispatch(removeFromListRequest(listId, accountId)); + + api(getState).delete(`/api/v1/lists/${listId}/accounts`, { params: { account_ids: [accountId] } }) + .then(() => dispatch(removeFromListSuccess(listId, accountId))) + .catch(err => dispatch(removeFromListFail(listId, accountId, err))); +}; + +export const removeFromListRequest = (listId, accountId) => ({ + type: LIST_EDITOR_REMOVE_REQUEST, + listId, + accountId, +}); + +export const removeFromListSuccess = (listId, accountId) => ({ + type: LIST_EDITOR_REMOVE_SUCCESS, + listId, + accountId, +}); + +export const removeFromListFail = (listId, accountId, error) => ({ + type: LIST_EDITOR_REMOVE_FAIL, + listId, + accountId, error, }); diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 1f2d7690f..0cca586ac 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -81,7 +81,7 @@ export default class Account extends ImmutablePureComponent { buttons = <IconButton active icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />; } else if (muting) { let hidingNotificationsButton; - if (muting.get('notifications')) { + if (account.getIn(['relationship', 'muting_notifications'])) { hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />; } else { hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />; @@ -93,7 +93,7 @@ export default class Account extends ImmutablePureComponent { </div> ); } else { - buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following ? true : false} />; + buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />; } } diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index 14a8d4c38..6a16e2fc7 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -209,6 +209,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { onBlur={this.onBlur} onPaste={this.onPaste} style={style} + aria-autocomplete='list' /> </label> diff --git a/app/javascript/mastodon/features/account/components/action_bar.js b/app/javascript/mastodon/features/account/components/action_bar.js index 389296c42..cb849fa5d 100644 --- a/app/javascript/mastodon/features/account/components/action_bar.js +++ b/app/javascript/mastodon/features/account/components/action_bar.js @@ -63,9 +63,8 @@ export default class ActionBar extends React.PureComponent { if (account.get('id') === me) { menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' }); } else { - const following = account.getIn(['relationship', 'following']); - if (following) { - if (following.get('reblogs')) { + if (account.getIn(['relationship', 'following'])) { + if (account.getIn(['relationship', 'showing_reblogs'])) { menu.push({ text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }), action: this.props.onReblogToggle }); } else { menu.push({ text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }), action: this.props.onReblogToggle }); diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.js b/app/javascript/mastodon/features/account_timeline/containers/header_container.js index b41eb19d4..775610032 100644 --- a/app/javascript/mastodon/features/account_timeline/containers/header_container.js +++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.js @@ -68,7 +68,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ }, onReblogToggle (account) { - if (account.getIn(['relationship', 'following', 'reblogs'])) { + if (account.getIn(['relationship', 'show_reblogs'])) { dispatch(followAccount(account.get('id'), false)); } else { dispatch(followAccount(account.get('id'), true)); diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index df4284207..4b4c02bcc 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -25,6 +25,7 @@ const messages = defineMessages({ mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' }, pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' }, + lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' }, }); @@ -70,6 +71,7 @@ export default class GettingStarted extends ImmutablePureComponent { navItems = navItems.concat([ <ColumnLink key='4' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />, <ColumnLink key='5' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />, + <ColumnLink key='9' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />, ]); if (myAccount.get('locked')) { @@ -79,7 +81,7 @@ export default class GettingStarted extends ImmutablePureComponent { navItems = navItems.concat([ <ColumnLink key='7' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />, <ColumnLink key='8' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />, - <ColumnLink key='9' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' hideOnMobile />, + <ColumnLink key='10' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' hideOnMobile />, ]); return ( diff --git a/app/javascript/mastodon/features/list_editor/components/account.js b/app/javascript/mastodon/features/list_editor/components/account.js new file mode 100644 index 000000000..c78c58e24 --- /dev/null +++ b/app/javascript/mastodon/features/list_editor/components/account.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { makeGetAccount } from '../../../selectors'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Avatar from '../../../components/avatar'; +import DisplayName from '../../../components/display_name'; +import IconButton from '../../../components/icon_button'; +import { defineMessages, injectIntl } from 'react-intl'; +import { removeFromListEditor, addToListEditor } from '../../../actions/lists'; + +const messages = defineMessages({ + remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' }, + add: { id: 'lists.account.add', defaultMessage: 'Add to list' }, +}); + +const makeMapStateToProps = () => { + const getAccount = makeGetAccount(); + + const mapStateToProps = (state, { accountId, added }) => ({ + account: getAccount(state, accountId), + added: typeof added === 'undefined' ? state.getIn(['listEditor', 'accounts', 'items']).includes(accountId) : added, + }); + + return mapStateToProps; +}; + +const mapDispatchToProps = (dispatch, { accountId }) => ({ + onRemove: () => dispatch(removeFromListEditor(accountId)), + onAdd: () => dispatch(addToListEditor(accountId)), +}); + +@connect(makeMapStateToProps, mapDispatchToProps) +@injectIntl +export default class Account extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + intl: PropTypes.object.isRequired, + onRemove: PropTypes.func.isRequired, + onAdd: PropTypes.func.isRequired, + added: PropTypes.bool, + }; + + static defaultProps = { + added: false, + }; + + render () { + const { account, intl, onRemove, onAdd, added } = this.props; + + let button; + + if (added) { + button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />; + } else { + button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />; + } + + return ( + <div className='account'> + <div className='account__wrapper'> + <div className='account__display-name'> + <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div> + <DisplayName account={account} /> + </div> + + <div className='account__relationship'> + {button} + </div> + </div> + </div> + ); + } + +} diff --git a/app/javascript/mastodon/features/list_editor/components/search.js b/app/javascript/mastodon/features/list_editor/components/search.js new file mode 100644 index 000000000..45c4d0f2e --- /dev/null +++ b/app/javascript/mastodon/features/list_editor/components/search.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { defineMessages, injectIntl } from 'react-intl'; +import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists'; +import classNames from 'classnames'; + +const messages = defineMessages({ + search: { id: 'lists.search', defaultMessage: 'Search among people you follow' }, +}); + +const mapStateToProps = state => ({ + value: state.getIn(['listEditor', 'suggestions', 'value']), +}); + +const mapDispatchToProps = dispatch => ({ + onSubmit: value => dispatch(fetchListSuggestions(value)), + onClear: () => dispatch(clearListSuggestions()), + onChange: value => dispatch(changeListSuggestions(value)), +}); + +@connect(mapStateToProps, mapDispatchToProps) +@injectIntl +export default class Search extends React.PureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onClear: PropTypes.func.isRequired, + }; + + handleChange = e => { + this.props.onChange(e.target.value); + } + + handleKeyUp = e => { + if (e.keyCode === 13) { + this.props.onSubmit(this.props.value); + } + } + + handleClear = () => { + this.props.onClear(); + } + + render () { + const { value, intl } = this.props; + const hasValue = value.length > 0; + + return ( + <div className='list-editor__search search'> + <label> + <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span> + + <input + className='search__input' + type='text' + value={value} + onChange={this.handleChange} + onKeyUp={this.handleKeyUp} + placeholder={intl.formatMessage(messages.search)} + /> + </label> + + <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> + <i className={classNames('fa fa-search', { active: !hasValue })} /> + <i aria-label={intl.formatMessage(messages.search)} className={classNames('fa fa-times-circle', { active: hasValue })} /> + </div> + </div> + ); + } + +} diff --git a/app/javascript/mastodon/features/list_editor/index.js b/app/javascript/mastodon/features/list_editor/index.js new file mode 100644 index 000000000..a3b60e447 --- /dev/null +++ b/app/javascript/mastodon/features/list_editor/index.js @@ -0,0 +1,80 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { connect } from 'react-redux'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { injectIntl } from 'react-intl'; +import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists'; +import Account from './components/account'; +import Search from './components/search'; +import Motion from '../ui/util/optional_motion'; +import spring from 'react-motion/lib/spring'; + +const mapStateToProps = state => ({ + title: state.getIn(['listEditor', 'title']), + accountIds: state.getIn(['listEditor', 'accounts', 'items']), + searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']), +}); + +const mapDispatchToProps = dispatch => ({ + onInitialize: listId => dispatch(setupListEditor(listId)), + onClear: () => dispatch(clearListSuggestions()), + onReset: () => dispatch(resetListEditor()), +}); + +@connect(mapStateToProps, mapDispatchToProps) +@injectIntl +export default class ListEditor extends ImmutablePureComponent { + + static propTypes = { + listId: PropTypes.string.isRequired, + onClose: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + onInitialize: PropTypes.func.isRequired, + onClear: PropTypes.func.isRequired, + onReset: PropTypes.func.isRequired, + title: PropTypes.string.isRequired, + accountIds: ImmutablePropTypes.list.isRequired, + searchAccountIds: ImmutablePropTypes.list.isRequired, + }; + + componentDidMount () { + const { onInitialize, listId } = this.props; + onInitialize(listId); + } + + componentWillUnmount () { + const { onReset } = this.props; + onReset(); + } + + render () { + const { title, accountIds, searchAccountIds, onClear } = this.props; + const showSearch = searchAccountIds.size > 0; + + return ( + <div className='modal-root__modal list-editor'> + <h4>{title}</h4> + + <Search /> + + <div className='drawer__pager'> + <div className='drawer__inner list-editor__accounts'> + {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)} + </div> + + {showSearch && <div role='button' tabIndex='-1' className='drawer__backdrop' onClick={onClear} />} + + <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}> + {({ x }) => + <div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}> + {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)} + </div> + } + </Motion> + </div> + </div> + ); + } + +} diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js index 71f6e36a8..1dcd4de14 100644 --- a/app/javascript/mastodon/features/list_timeline/index.js +++ b/app/javascript/mastodon/features/list_timeline/index.js @@ -6,10 +6,18 @@ import StatusListContainer from '../ui/containers/status_list_container'; import Column from '../../components/column'; import ColumnHeader from '../../components/column_header'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { connectListStream } from '../../actions/streaming'; import { refreshListTimeline, expandListTimeline } from '../../actions/timelines'; -import { fetchList } from '../../actions/lists'; +import { fetchList, deleteList } from '../../actions/lists'; +import { openModal } from '../../actions/modal'; +import MissingIndicator from '../../components/missing_indicator'; +import LoadingIndicator from '../../components/loading_indicator'; + +const messages = defineMessages({ + deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, + deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' }, +}); const mapStateToProps = (state, props) => ({ list: state.getIn(['lists', props.params.id]), @@ -17,15 +25,21 @@ const mapStateToProps = (state, props) => ({ }); @connect(mapStateToProps) +@injectIntl export default class ListTimeline extends React.PureComponent { + static contextTypes = { + router: PropTypes.object, + }; + static propTypes = { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, columnId: PropTypes.string, hasUnread: PropTypes.bool, multiColumn: PropTypes.bool, - list: ImmutablePropTypes.map, + list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]), + intl: PropTypes.object.isRequired, }; handlePin = () => { @@ -35,6 +49,7 @@ export default class ListTimeline extends React.PureComponent { dispatch(removeColumn(columnId)); } else { dispatch(addColumn('LIST', { id: this.props.params.id })); + this.context.router.history.push('/'); } } @@ -73,12 +88,49 @@ export default class ListTimeline extends React.PureComponent { this.props.dispatch(expandListTimeline(id)); } + handleEditClick = () => { + this.props.dispatch(openModal('LIST_EDITOR', { listId: this.props.params.id })); + } + + handleDeleteClick = () => { + const { dispatch, columnId, intl } = this.props; + const { id } = this.props.params; + + dispatch(openModal('CONFIRM', { + message: intl.formatMessage(messages.deleteMessage), + confirm: intl.formatMessage(messages.deleteConfirm), + onConfirm: () => { + dispatch(deleteList(id)); + + if (!!columnId) { + dispatch(removeColumn(columnId)); + } else { + this.context.router.history.push('/lists'); + } + }, + })); + } + render () { const { hasUnread, columnId, multiColumn, list } = this.props; const { id } = this.props.params; const pinned = !!columnId; const title = list ? list.get('title') : id; + if (typeof list === 'undefined') { + return ( + <Column> + <LoadingIndicator /> + </Column> + ); + } else if (list === false) { + return ( + <Column> + <MissingIndicator /> + </Column> + ); + } + return ( <Column ref={this.setRef}> <ColumnHeader @@ -90,7 +142,19 @@ export default class ListTimeline extends React.PureComponent { onClick={this.handleHeaderClick} pinned={pinned} multiColumn={multiColumn} - /> + > + <div className='column-header__links'> + <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}> + <i className='fa fa-pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' /> + </button> + + <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}> + <i className='fa fa-trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' /> + </button> + </div> + + <hr /> + </ColumnHeader> <StatusListContainer trackScroll={!pinned} diff --git a/app/javascript/mastodon/features/lists/components/new_list_form.js b/app/javascript/mastodon/features/lists/components/new_list_form.js new file mode 100644 index 000000000..eed6efc25 --- /dev/null +++ b/app/javascript/mastodon/features/lists/components/new_list_form.js @@ -0,0 +1,78 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import { changeListEditorTitle, submitListEditor } from '../../../actions/lists'; +import IconButton from '../../../components/icon_button'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' }, + title: { id: 'lists.new.create', defaultMessage: 'Add list' }, +}); + +const mapStateToProps = state => ({ + value: state.getIn(['listEditor', 'title']), + disabled: state.getIn(['listEditor', 'isSubmitting']), +}); + +const mapDispatchToProps = dispatch => ({ + onChange: value => dispatch(changeListEditorTitle(value)), + onSubmit: () => dispatch(submitListEditor(true)), +}); + +@connect(mapStateToProps, mapDispatchToProps) +@injectIntl +export default class NewListForm extends React.PureComponent { + + static propTypes = { + value: PropTypes.string.isRequired, + disabled: PropTypes.bool, + intl: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + }; + + handleChange = e => { + this.props.onChange(e.target.value); + } + + handleSubmit = e => { + e.preventDefault(); + this.props.onSubmit(); + } + + handleClick = () => { + this.props.onSubmit(); + } + + render () { + const { value, disabled, intl } = this.props; + + const label = intl.formatMessage(messages.label); + const title = intl.formatMessage(messages.title); + + return ( + <form className='column-inline-form' onSubmit={this.handleSubmit}> + <label> + <span style={{ display: 'none' }}>{label}</span> + + <input + className='setting-text' + value={value} + disabled={disabled} + onChange={this.handleChange} + placeholder={label} + /> + </label> + + <IconButton + disabled={disabled} + icon='plus' + title={title} + onClick={this.handleClick} + /> + </form> + ); + } + +} diff --git a/app/javascript/mastodon/features/lists/index.js b/app/javascript/mastodon/features/lists/index.js new file mode 100644 index 000000000..28026c434 --- /dev/null +++ b/app/javascript/mastodon/features/lists/index.js @@ -0,0 +1,76 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import LoadingIndicator from '../../components/loading_indicator'; +import Column from '../ui/components/column'; +import ColumnBackButtonSlim from '../../components/column_back_button_slim'; +import { fetchLists } from '../../actions/lists'; +import { defineMessages, injectIntl } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import ColumnLink from '../ui/components/column_link'; +import ColumnSubheading from '../ui/components/column_subheading'; +import NewListForm from './components/new_list_form'; +import { createSelector } from 'reselect'; + +const messages = defineMessages({ + heading: { id: 'column.lists', defaultMessage: 'Lists' }, + subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' }, +}); + +const getOrderedLists = createSelector([state => state.get('lists')], lists => { + if (!lists) { + return lists; + } + + return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))); +}); + +const mapStateToProps = state => ({ + lists: getOrderedLists(state), +}); + +@connect(mapStateToProps) +@injectIntl +export default class Lists extends ImmutablePureComponent { + + static propTypes = { + params: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, + lists: ImmutablePropTypes.list, + intl: PropTypes.object.isRequired, + }; + + componentWillMount () { + this.props.dispatch(fetchLists()); + } + + render () { + const { intl, lists } = this.props; + + if (!lists) { + return ( + <Column> + <LoadingIndicator /> + </Column> + ); + } + + return ( + <Column icon='bars' heading={intl.formatMessage(messages.heading)}> + <ColumnBackButtonSlim /> + + <NewListForm /> + + <div className='scrollable'> + <ColumnSubheading text={intl.formatMessage(messages.subheading)} /> + + {lists.map(list => + <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='bars' text={list.get('title')} /> + )} + </div> + </Column> + ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 79d86370e..ebbff6b5a 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -13,6 +13,7 @@ import { MuteModal, ReportModal, EmbedModal, + ListEditor, } from '../../../features/ui/util/async-components'; const MODAL_COMPONENTS = { @@ -25,6 +26,7 @@ const MODAL_COMPONENTS = { 'REPORT': ReportModal, 'ACTIONS': () => Promise.resolve({ default: ActionsModal }), 'EMBED': EmbedModal, + 'LIST_EDITOR': ListEditor, }; export default class ModalRoot extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 361326961..5b0d7246a 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -38,6 +38,7 @@ import { Blocks, Mutes, PinnedStatuses, + Lists, } from './util/async-components'; import { HotKeys } from 'react-hotkeys'; import { me } from '../../initial_state'; @@ -404,6 +405,7 @@ export default class UI extends React.Component { <WrappedRoute path='/follow_requests' component={FollowRequests} content={children} /> <WrappedRoute path='/blocks' component={Blocks} content={children} /> <WrappedRoute path='/mutes' component={Mutes} content={children} /> + <WrappedRoute path='/lists' component={Lists} content={children} /> <WrappedRoute component={GenericNotFound} content={children} /> </WrappedSwitch> diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index b741f668e..d6586680b 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -30,6 +30,10 @@ export function ListTimeline () { return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline'); } +export function Lists () { + return import(/* webpackChunkName: "features/lists" */'../../lists'); +} + export function Status () { return import(/* webpackChunkName: "features/status" */'../../status'); } @@ -113,3 +117,7 @@ export function Video () { export function EmbedModal () { return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal'); } + +export function ListEditor () { + return import(/* webpackChunkName: "features/list_editor" */'../../list_editor'); +} diff --git a/app/javascript/mastodon/locales/ja.json b/app/javascript/mastodon/locales/ja.json index 388dd57e8..e015c41c2 100644 --- a/app/javascript/mastodon/locales/ja.json +++ b/app/javascript/mastodon/locales/ja.json @@ -7,22 +7,22 @@ "account.followers": "フォロワー", "account.follows": "フォロー", "account.follows_you": "フォローされています", - "account.hide_reblogs": "Hide boosts from @{name}", + "account.hide_reblogs": "@{name}さんからのブーストを非表示", "account.media": "メディア", "account.mention": "返信", "account.moved_to": "{name}さんは引っ越しました:", "account.mute": "ミュート", - "account.mute_notifications": "@{name}からの通知を受け取る", + "account.mute_notifications": "@{name}さんからの通知を受け取る", "account.posts": "投稿", "account.report": "通報", "account.requested": "承認待ち", - "account.share": "@{name} のプロフィールを共有する", - "account.show_reblogs": "Show boosts from @{name}", + "account.share": "@{name}さんのプロフィールを共有する", + "account.show_reblogs": "@{name}さんからのブーストを表示", "account.unblock": "ブロック解除", "account.unblock_domain": "{domain}を表示", "account.unfollow": "フォロー解除", "account.unmute": "ミュート解除", - "account.unmute_notifications": "@{name}からの通知を受け取らない", + "account.unmute_notifications": "@{name}さんからの通知を受け取らない", "account.view_full_profile": "全ての情報を見る", "boost_modal.combo": "次からは{combo}を押せば、これをスキップできます。", "bundle_column_error.body": "コンポーネントの読み込み中に問題が発生しました。", @@ -36,6 +36,7 @@ "column.favourites": "お気に入り", "column.follow_requests": "フォローリクエスト", "column.home": "ホーム", + "column.lists": "リスト", "column.mutes": "ミュートしたユーザー", "column.notifications": "通知", "column.pins": "固定されたトゥート", @@ -59,15 +60,17 @@ "compose_form.spoiler_placeholder": "ここに警告を書いてください", "confirmation_modal.cancel": "キャンセル", "confirmations.block.confirm": "ブロック", - "confirmations.block.message": "本当に{name}をブロックしますか？", + "confirmations.block.message": "本当に{name}さんをブロックしますか？", "confirmations.delete.confirm": "削除", "confirmations.delete.message": "本当に削除しますか？", + "confirmations.delete_list.confirm": "削除", + "confirmations.delete_list.message": "本当に削除しますか？", "confirmations.domain_block.confirm": "ドメイン全体を非表示", "confirmations.domain_block.message": "本当に{domain}全体を非表示にしますか？ 多くの場合は個別にブロックやミュートするだけで充分であり、また好ましいです。", "confirmations.mute.confirm": "ミュート", - "confirmations.mute.message": "本当に{name}をミュートしますか？", + "confirmations.mute.message": "本当に{name}さんをミュートしますか？", "confirmations.unfollow.confirm": "フォロー解除", - "confirmations.unfollow.message": "本当に{name}をフォロー解除しますか？", + "confirmations.unfollow.message": "本当に{name}さんをフォロー解除しますか？", "embed.instructions": "下記のコードをコピーしてウェブサイトに埋め込みます。", "embed.preview": "表示例:", "emoji_button.activity": "活動", @@ -112,7 +115,7 @@ "keyboard_shortcuts.down": "カラム内一つ下に移動", "keyboard_shortcuts.enter": "トゥートの詳細を表示", "keyboard_shortcuts.favourite": "お気に入り", - "keyboard_shortcuts.heading": "キーボードショートカット一覧", + "keyboard_shortcuts.heading": "キーボードショートカット", "keyboard_shortcuts.hotkey": "ホットキー", "keyboard_shortcuts.legend": "この一覧を表示", "keyboard_shortcuts.mention": "メンション", @@ -124,6 +127,14 @@ "lightbox.close": "閉じる", "lightbox.next": "次", "lightbox.previous": "前", + "lists.account.add": "リストに追加", + "lists.account.remove": "リストから外す", + "lists.delete": "リストを削除", + "lists.edit": "リストを編集", + "lists.new.create": "リストを作成", + "lists.new.title_placeholder": "新規リスト名", + "lists.search": "フォローしている人の中から検索", + "lists.subheading": "あなたのリスト", "loading_indicator.label": "読み込み中...", "media_gallery.toggle_visible": "表示切り替え", "missing_indicator.label": "見つかりません", @@ -135,6 +146,7 @@ "navigation_bar.follow_requests": "フォローリクエスト", "navigation_bar.info": "このインスタンスについて", "navigation_bar.keyboard_shortcuts": "キーボードショートカット", + "navigation_bar.lists": "リスト", "navigation_bar.logout": "ログアウト", "navigation_bar.mutes": "ミュートしたユーザー", "navigation_bar.pins": "固定されたトゥート", diff --git a/app/javascript/mastodon/locales/pl.json b/app/javascript/mastodon/locales/pl.json index 907999940..0667aeeee 100644 --- a/app/javascript/mastodon/locales/pl.json +++ b/app/javascript/mastodon/locales/pl.json @@ -36,6 +36,7 @@ "column.favourites": "Ulubione", "column.follow_requests": "Prośby o śledzenie", "column.home": "Strona główna", + "column.lists": "Listy", "column.mutes": "Wyciszeni użytkownicy", "column.notifications": "Powiadomienia", "column.pins": "Przypięte wpisy", @@ -60,6 +61,8 @@ "confirmation_modal.cancel": "Anuluj", "confirmations.block.confirm": "Zablokuj", "confirmations.block.message": "Czy na pewno chcesz zablokować {name}?", + "confirmations.delete_list.confirm": "Usuń", + "confirmations.delete_list.message": "Czy na pewno chcesz bezpowrotnie usunąć tą listę?", "confirmations.delete.confirm": "Usuń", "confirmations.delete.message": "Czy na pewno chcesz usunąć ten wpis?", "confirmations.domain_block.confirm": "Ukryj wszysyko z domeny", @@ -124,6 +127,14 @@ "lightbox.close": "Zamknij", "lightbox.next": "Następne", "lightbox.previous": "Poprzednie", + "lists.account.add": "Dodaj do listy", + "lists.account.delete": "Usuń z listy", + "lists.delete": "Usuń listę", + "lists.edit": "Edytuj listę", + "lists.new.create": "Utwórz listę", + "lists.new.title_placeholder": "Wprowadź tytuł listy…", + "lists.search": "Szukaj wśród osób które śledzisz", + "lists.subheading": "Twoje listy", "loading_indicator.label": "Ładowanie…", "media_gallery.toggle_visible": "Przełącz widoczność", "missing_indicator.label": "Nie znaleziono", @@ -135,6 +146,7 @@ "navigation_bar.follow_requests": "Prośby o śledzenie", "navigation_bar.info": "Szczegółowe informacje", "navigation_bar.keyboard_shortcuts": "Skróty klawiszowe", + "navigation_bar.lists": "Listy", "navigation_bar.logout": "Wyloguj", "navigation_bar.mutes": "Wyciszeni użytkownicy", "navigation_bar.pins": "Przypięte wpisy", diff --git a/app/javascript/mastodon/locales/zh-CN.json b/app/javascript/mastodon/locales/zh-CN.json index c23868cda..e2d2489dc 100644 --- a/app/javascript/mastodon/locales/zh-CN.json +++ b/app/javascript/mastodon/locales/zh-CN.json @@ -7,7 +7,7 @@ "account.followers": "关注者", "account.follows": "正在关注", "account.follows_you": "关注了你", - "account.hide_reblogs": "Hide boosts from @{name}", + "account.hide_reblogs": "隐藏来自 @{name} 的转嘟", "account.media": "媒体", "account.mention": "提及 @{name}", "account.moved_to": "{name} 已经迁移到：", @@ -17,7 +17,7 @@ "account.report": "举报 @{name}", "account.requested": "正在等待对方同意。点击以取消发送关注请求", "account.share": "分享 @{name} 的个人资料", - "account.show_reblogs": "Show boosts from @{name}", + "account.show_reblogs": "显示来自 @{name} 的转嘟", "account.unblock": "不再屏蔽 @{name}", "account.unblock_domain": "不再隐藏来自 {domain} 的内容", "account.unfollow": "取消关注", @@ -36,6 +36,7 @@ "column.favourites": "收藏过的嘟文", "column.follow_requests": "关注请求", "column.home": "主页", + "column.lists": "列表", "column.mutes": "被隐藏的用户", "column.notifications": "通知", "column.pins": "置顶嘟文", @@ -62,6 +63,8 @@ "confirmations.block.message": "想好了，真的要屏蔽 {name}？", "confirmations.delete.confirm": "删除", "confirmations.delete.message": "想好了，真的要删除这条嘟文？", + "confirmations.delete_list.confirm": "删除", + "confirmations.delete_list.message": "你确定要永久删除这个列表吗？", "confirmations.domain_block.confirm": "隐藏整个网站的内容", "confirmations.domain_block.message": "你真的真的确定要隐藏所有来自 {domain} 的内容吗？多数情况下，屏蔽或隐藏几个特定的用户就应该能满足你的需要了。", "confirmations.mute.confirm": "隐藏", @@ -104,26 +107,34 @@ "home.column_settings.show_reblogs": "显示转嘟", "home.column_settings.show_replies": "显示回复", "home.settings": "栏目设置", - "keyboard_shortcuts.back": "to navigate back", - "keyboard_shortcuts.boost": "to boost", - "keyboard_shortcuts.column": "to focus a status in one of the columns", - "keyboard_shortcuts.compose": "to focus the compose textarea", - "keyboard_shortcuts.description": "Description", - "keyboard_shortcuts.down": "to move down in the list", - "keyboard_shortcuts.enter": "to open status", - "keyboard_shortcuts.favourite": "to favourite", - "keyboard_shortcuts.heading": "Keyboard Shortcuts", - "keyboard_shortcuts.hotkey": "Hotkey", - "keyboard_shortcuts.legend": "to display this legend", - "keyboard_shortcuts.mention": "to mention author", - "keyboard_shortcuts.reply": "to reply", - "keyboard_shortcuts.search": "to focus search", - "keyboard_shortcuts.toot": "to start a brand new toot", - "keyboard_shortcuts.unfocus": "to un-focus compose textarea/search", - "keyboard_shortcuts.up": "to move up in the list", + "keyboard_shortcuts.back": "返回上一页", + "keyboard_shortcuts.boost": "转嘟", + "keyboard_shortcuts.column": "选择第 X 栏中的嘟文", + "keyboard_shortcuts.compose": "选择嘟文撰写框", + "keyboard_shortcuts.description": "说明", + "keyboard_shortcuts.down": "在列表中让光标下移", + "keyboard_shortcuts.enter": "展开嘟文", + "keyboard_shortcuts.favourite": "收藏嘟文", + "keyboard_shortcuts.heading": "快捷键列表", + "keyboard_shortcuts.hotkey": "快捷键", + "keyboard_shortcuts.legend": "显示此列表", + "keyboard_shortcuts.mention": "提及嘟文作者", + "keyboard_shortcuts.reply": "回复嘟文", + "keyboard_shortcuts.search": "选择搜索框", + "keyboard_shortcuts.toot": "发送新嘟文", + "keyboard_shortcuts.unfocus": "取消输入", + "keyboard_shortcuts.up": "在列表中让光标上移", "lightbox.close": "关闭", "lightbox.next": "下一步", "lightbox.previous": "上一步", + "lists.account.add": "添加到列表", + "lists.account.remove": "从列表中删除", + "lists.delete": "删除列表", + "lists.edit": "编辑列表", + "lists.new.create": "新建列表", + "lists.new.title_placeholder": "新列表的标题", + "lists.search": "搜索你关注的人", + "lists.subheading": "你的列表", "loading_indicator.label": "加载中……", "media_gallery.toggle_visible": "切换显示/隐藏", "missing_indicator.label": "找不到内容", @@ -134,7 +145,8 @@ "navigation_bar.favourites": "收藏的内容", "navigation_bar.follow_requests": "关注请求", "navigation_bar.info": "关于本站", - "navigation_bar.keyboard_shortcuts": "Keyboard shortcuts", + "navigation_bar.lists": "列表", + "navigation_bar.keyboard_shortcuts": "快捷键列表", "navigation_bar.logout": "注销", "navigation_bar.mutes": "被隐藏的用户", "navigation_bar.pins": "置顶嘟文", diff --git a/app/javascript/mastodon/reducers/accounts.js b/app/javascript/mastodon/reducers/accounts.js index 5891d0fdd..f77061dfa 100644 --- a/app/javascript/mastodon/reducers/accounts.js +++ b/app/javascript/mastodon/reducers/accounts.js @@ -43,6 +43,10 @@ import { FAVOURITED_STATUSES_FETCH_SUCCESS, FAVOURITED_STATUSES_EXPAND_SUCCESS, } from '../actions/favourites'; +import { + LIST_ACCOUNTS_FETCH_SUCCESS, + LIST_EDITOR_SUGGESTIONS_READY, +} from '../actions/lists'; import { STORE_HYDRATE } from '../actions/store'; import emojify from '../features/emoji/emoji'; import { Map as ImmutableMap, fromJS } from 'immutable'; @@ -115,6 +119,8 @@ export default function accounts(state = initialState, action) { case BLOCKS_EXPAND_SUCCESS: case MUTES_FETCH_SUCCESS: case MUTES_EXPAND_SUCCESS: + case LIST_ACCOUNTS_FETCH_SUCCESS: + case LIST_EDITOR_SUGGESTIONS_READY: return action.accounts ? normalizeAccounts(state, action.accounts) : state; case NOTIFICATIONS_REFRESH_SUCCESS: case NOTIFICATIONS_EXPAND_SUCCESS: diff --git a/app/javascript/mastodon/reducers/accounts_counters.js b/app/javascript/mastodon/reducers/accounts_counters.js index 2a78a9f34..a93fa4245 100644 --- a/app/javascript/mastodon/reducers/accounts_counters.js +++ b/app/javascript/mastodon/reducers/accounts_counters.js @@ -45,6 +45,10 @@ import { FAVOURITED_STATUSES_FETCH_SUCCESS, FAVOURITED_STATUSES_EXPAND_SUCCESS, } from '../actions/favourites'; +import { + LIST_ACCOUNTS_FETCH_SUCCESS, + LIST_EDITOR_SUGGESTIONS_READY, +} from '../actions/lists'; import { STORE_HYDRATE } from '../actions/store'; import { Map as ImmutableMap, fromJS } from 'immutable'; @@ -106,6 +110,8 @@ export default function accountsCounters(state = initialState, action) { case BLOCKS_EXPAND_SUCCESS: case MUTES_FETCH_SUCCESS: case MUTES_EXPAND_SUCCESS: + case LIST_ACCOUNTS_FETCH_SUCCESS: + case LIST_EDITOR_SUGGESTIONS_READY: return action.accounts ? normalizeAccounts(state, action.accounts) : state; case NOTIFICATIONS_REFRESH_SUCCESS: case NOTIFICATIONS_EXPAND_SUCCESS: diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js index 425a2acdd..a028e989c 100644 --- a/app/javascript/mastodon/reducers/index.js +++ b/app/javascript/mastodon/reducers/index.js @@ -23,6 +23,7 @@ import notifications from './notifications'; import height_cache from './height_cache'; import custom_emojis from './custom_emojis'; import lists from './lists'; +import listEditor from './list_editor'; const reducers = { timelines, @@ -49,6 +50,7 @@ const reducers = { height_cache, custom_emojis, lists, + listEditor, }; export default combineReducers(reducers); diff --git a/app/javascript/mastodon/reducers/list_editor.js b/app/javascript/mastodon/reducers/list_editor.js new file mode 100644 index 000000000..02a0dabb1 --- /dev/null +++ b/app/javascript/mastodon/reducers/list_editor.js @@ -0,0 +1,89 @@ +import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; +import { + LIST_CREATE_REQUEST, + LIST_CREATE_FAIL, + LIST_CREATE_SUCCESS, + LIST_UPDATE_REQUEST, + LIST_UPDATE_FAIL, + LIST_UPDATE_SUCCESS, + LIST_EDITOR_RESET, + LIST_EDITOR_SETUP, + LIST_EDITOR_TITLE_CHANGE, + LIST_ACCOUNTS_FETCH_REQUEST, + LIST_ACCOUNTS_FETCH_SUCCESS, + LIST_ACCOUNTS_FETCH_FAIL, + LIST_EDITOR_SUGGESTIONS_READY, + LIST_EDITOR_SUGGESTIONS_CLEAR, + LIST_EDITOR_SUGGESTIONS_CHANGE, + LIST_EDITOR_ADD_SUCCESS, + LIST_EDITOR_REMOVE_SUCCESS, +} from '../actions/lists'; + +const initialState = ImmutableMap({ + listId: null, + isSubmitting: false, + title: '', + + accounts: ImmutableMap({ + items: ImmutableList(), + loaded: false, + isLoading: false, + }), + + suggestions: ImmutableMap({ + value: '', + items: ImmutableList(), + }), +}); + +export default function listEditorReducer(state = initialState, action) { + switch(action.type) { + case LIST_EDITOR_RESET: + return initialState; + case LIST_EDITOR_SETUP: + return state.withMutations(map => { + map.set('listId', action.list.get('id')); + map.set('title', action.list.get('title')); + map.set('isSubmitting', false); + }); + case LIST_EDITOR_TITLE_CHANGE: + return state.set('title', action.value); + case LIST_CREATE_REQUEST: + case LIST_UPDATE_REQUEST: + return state.set('isSubmitting', true); + case LIST_CREATE_FAIL: + case LIST_UPDATE_FAIL: + return state.set('isSubmitting', false); + case LIST_CREATE_SUCCESS: + case LIST_UPDATE_SUCCESS: + return state.withMutations(map => { + map.set('isSubmitting', false); + map.set('listId', action.list.id); + }); + case LIST_ACCOUNTS_FETCH_REQUEST: + return state.setIn(['accounts', 'isLoading'], true); + case LIST_ACCOUNTS_FETCH_FAIL: + return state.setIn(['accounts', 'isLoading'], false); + case LIST_ACCOUNTS_FETCH_SUCCESS: + return state.update('accounts', accounts => accounts.withMutations(map => { + map.set('isLoading', false); + map.set('loaded', true); + map.set('items', ImmutableList(action.accounts.map(item => item.id))); + })); + case LIST_EDITOR_SUGGESTIONS_CHANGE: + return state.setIn(['suggestions', 'value'], action.value); + case LIST_EDITOR_SUGGESTIONS_READY: + return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id))); + case LIST_EDITOR_SUGGESTIONS_CLEAR: + return state.update('suggestions', suggestions => suggestions.withMutations(map => { + map.set('items', ImmutableList()); + map.set('value', ''); + })); + case LIST_EDITOR_ADD_SUCCESS: + return state.updateIn(['accounts', 'items'], list => list.unshift(action.accountId)); + case LIST_EDITOR_REMOVE_SUCCESS: + return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId)); + default: + return state; + } +}; diff --git a/app/javascript/mastodon/reducers/lists.js b/app/javascript/mastodon/reducers/lists.js index 3e3908869..f30ffbcbd 100644 --- a/app/javascript/mastodon/reducers/lists.js +++ b/app/javascript/mastodon/reducers/lists.js @@ -1,14 +1,36 @@ -import { LIST_FETCH_SUCCESS } from '../actions/lists'; +import { + LIST_FETCH_SUCCESS, + LIST_FETCH_FAIL, + LISTS_FETCH_SUCCESS, + LIST_CREATE_SUCCESS, + LIST_UPDATE_SUCCESS, + LIST_DELETE_SUCCESS, +} from '../actions/lists'; import { Map as ImmutableMap, fromJS } from 'immutable'; const initialState = ImmutableMap(); const normalizeList = (state, list) => state.set(list.id, fromJS(list)); +const normalizeLists = (state, lists) => { + lists.forEach(list => { + state = normalizeList(state, list); + }); + + return state; +}; + export default function lists(state = initialState, action) { switch(action.type) { case LIST_FETCH_SUCCESS: + case LIST_CREATE_SUCCESS: + case LIST_UPDATE_SUCCESS: return normalizeList(state, action.list); + case LISTS_FETCH_SUCCESS: + return normalizeLists(state, action.lists); + case LIST_DELETE_SUCCESS: + case LIST_FETCH_FAIL: + return state.set(action.id, false); default: return state; } diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js index a9f3f9529..5817cf49b 100644 --- a/app/javascript/mastodon/reducers/settings.js +++ b/app/javascript/mastodon/reducers/settings.js @@ -2,6 +2,7 @@ import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings'; import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE } from '../actions/columns'; import { STORE_HYDRATE } from '../actions/store'; import { EMOJI_USE } from '../actions/emojis'; +import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists'; import { Map as ImmutableMap, fromJS } from 'immutable'; import uuid from '../uuid'; @@ -84,6 +85,8 @@ const moveColumn = (state, uuid, direction) => { const updateFrequentEmojis = (state, emoji) => state.update('frequentlyUsedEmojis', ImmutableMap(), map => map.update(emoji.id, 0, count => count + 1)).set('saved', false); +const filterDeadListColumns = (state, listId) => state.update('columns', columns => columns.filterNot(column => column.get('id') === 'LIST' && column.get('params').get('id') === listId)); + export default function settings(state = initialState, action) { switch(action.type) { case STORE_HYDRATE: @@ -106,6 +109,10 @@ export default function settings(state = initialState, action) { return updateFrequentEmojis(state, action.emoji); case SETTING_SAVE: return state.set('saved', true); + case LIST_FETCH_FAIL: + return action.error.response.status === 404 ? filterDeadListColumns(state, action.id) : state; + case LIST_DELETE_SUCCESS: + return filterDeadListColumns(state, action.id); default: return state; } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 26ff8bf00..d72f53f36 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -440,11 +440,6 @@ position: absolute; right: 5px; top: 5px; - - ::-webkit-scrollbar-track:hover, - ::-webkit-scrollbar-track:active { - background-color: rgba($base-overlay-background, 0.3); - } } } @@ -517,7 +512,6 @@ font-weight: 400; overflow: hidden; white-space: pre-wrap; - padding-top: 5px; &.status__content--with-spoiler { white-space: normal; @@ -530,7 +524,7 @@ .emojione { width: 20px; height: 20px; - margin: -5px 0 0; + margin: -3px 0 0; } p { @@ -766,7 +760,7 @@ .status__action-bar { align-items: center; display: flex; - margin-top: 5px; + margin-top: 10px; } .status__action-bar-button { @@ -799,7 +793,7 @@ .emojione { width: 24px; height: 24px; - margin: -5px 0 0; + margin: -3px 0 0; } } @@ -2359,6 +2353,10 @@ button.icon-button.active i.fa-retweet { margin-left: 0; } +.column-header__links .text-btn { + margin-right: 10px; +} + .column-header__button { background: lighten($ui-base-color, 4%); border: 0; @@ -2398,6 +2396,14 @@ button.icon-button.active i.fa-retweet { &.animating { overflow-y: hidden; } + + hr { + height: 0; + background: transparent; + border: 0; + border-top: 1px solid lighten($ui-base-color, 12%); + margin: 10px 0; + } } .column-header__collapsible-inner { @@ -4440,3 +4446,94 @@ noscript { margin-bottom: 0; } } + +.column-inline-form { + padding: 7px 15px; + padding-right: 5px; + display: flex; + justify-content: flex-start; + align-items: center; + background: lighten($ui-base-color, 4%); + + label { + flex: 1 1 auto; + + input { + width: 100%; + margin-bottom: 6px; + + &:focus { + outline: 0; + } + } + } + + .icon-button { + flex: 0 0 auto; + margin-left: 5px; + } +} + +.drawer__backdrop { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba($base-overlay-background, 0.5); +} + +.list-editor { + background: $ui-base-color; + flex-direction: column; + border-radius: 8px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + width: 380px; + overflow: hidden; + + @media screen and (max-width: 420px) { + width: 90%; + } + + h4 { + padding: 15px 0; + background: lighten($ui-base-color, 13%); + font-weight: 500; + font-size: 16px; + text-align: center; + border-radius: 8px 8px 0 0; + } + + .drawer__pager { + height: 50vh; + } + + .drawer__inner { + border-radius: 0 0 8px 8px; + + &.backdrop { + width: calc(100% - 60px); + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 0 0 0 8px; + } + } + + &__accounts { + overflow-y: auto; + } + + .account__display-name { + &:hover strong { + text-decoration: none; + } + } + + .account__avatar { + cursor: default; + } + + .search { + margin-bottom: 0; + } +} diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 2b46d30fc..4161cc045 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -95,6 +95,11 @@ padding: 0 6px 6px; background: $simple-background-color; will-change: transform; + + &::-webkit-scrollbar-track:hover, + &::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } } .emoji-mart-search { |