diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/list_timeline/index.js | 36 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 22 |
2 files changed, 45 insertions, 13 deletions
diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js index edefc2006..ef829b937 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.js +++ b/app/javascript/flavours/glitch/features/list_timeline/index.js @@ -17,9 +17,9 @@ import LoadingIndicator from 'flavours/glitch/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' }, - all_replies: { id: 'lists.replies_policy.all_replies', defaultMessage: 'to any followed user' }, - no_replies: { id: 'lists.replies_policy.no_replies', defaultMessage: 'none' }, - list_replies: { id: 'lists.replies_policy.list_replies', defaultMessage: 'only to list' }, + all_replies: { id: 'lists.replies_policy.all_replies', defaultMessage: 'any followed user' }, + no_replies: { id: 'lists.replies_policy.no_replies', defaultMessage: 'no one' }, + list_replies: { id: 'lists.replies_policy.list_replies', defaultMessage: 'members of the list' }, }); const mapStateToProps = (state, props) => ({ @@ -114,11 +114,10 @@ export default class ListTimeline extends React.PureComponent { })); } - handleRepliesPolicyClick = () => { + handleRepliesPolicyChange = ({ target }) => { const { dispatch, list } = this.props; const { id } = this.props.params; - const replies_policy = {'all_replies': 'no_replies', 'no_replies': 'list_replies', 'list_replies': 'all_replies'}[list.get('replies_policy')]; - this.props.dispatch(updateList(id, undefined, false, replies_policy)); + this.props.dispatch(updateList(id, undefined, false, target.value)); } render () { @@ -166,15 +165,26 @@ export default class ListTimeline extends React.PureComponent { <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> - - { replies_policy !== undefined && ( - <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleRepliesPolicyClick}> - <i className='fa fa-reply' /> <FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies: {policy}' values={{ policy: intl.formatMessage(messages[replies_policy]) }} /> - </button> - ) - } </div> + { replies_policy !== undefined && ( + <div> + <div className='column-settings__row'> + <fieldset> + <legend><FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies to:' /></legend> + { ['no_replies', 'list_replies', 'all_replies'].map(policy => ( + <div className='setting-radio'> + <input className='setting-radio__input' id={['setting', 'radio', id, policy].join('-')} type='radio' value={policy} checked={replies_policy === policy} onChange={this.handleRepliesPolicyChange} /> + <label className='setting-radio__label' htmlFor={['setting', 'radio', id, policy].join('-')}> + <FormattedMessage {...messages[policy]} /> + </label> + </div> + ))} + </fieldset> + </div> + </div> + )} + <hr /> </ColumnHeader> diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index b16b13d87..3e3ef6b52 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1062,6 +1062,7 @@ } .setting-toggle__label, +.setting-radio__label, .setting-meta__label { color: $darker-text-color; display: inline-block; @@ -1070,6 +1071,27 @@ vertical-align: middle; } +.setting-radio { + display: block; + line-height: 18px; +} + +.setting-radio__label { + margin-bottom: 0; +} + +.column-settings__row legend { + color: $darker-text-color; + cursor: default; + display: block; + font-weight: 500; + margin-top: 10px; +} + +.setting-radio__input { + vertical-align: middle; +} + .setting-meta__label { float: right; } |