AkkomaGang/masto-fe
2
2
Fork 1
Code Issues 3 Pull requests Projects Releases Wiki Activity

Switch “cycling” reply policy link to set of radio inputs

Browse source 
Fixes #832
This commit is contained in:
Thibaut Girka 2018-11-28 16:57:26 +01:00 committed by ThibG
parent 6b22845039
commit c18bb5d245
2 changed files with 45 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
app/javascript/flavours/glitch/features/list_timeline/index.js
View file

@ -17,9 +17,9 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
const messages = defineMessages({ const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, 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' }, deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
all_replies: { id: 'lists.replies_policy.all_replies', defaultMessage: 'to any followed user' }, all_replies: { id: 'lists.replies_policy.all_replies', defaultMessage: 'any followed user' },
no_replies: { id: 'lists.replies_policy.no_replies', defaultMessage: 'none' }, no_replies: { id: 'lists.replies_policy.no_replies', defaultMessage: 'no one' },
list_replies: { id: 'lists.replies_policy.list_replies', defaultMessage: 'only to list' }, list_replies: { id: 'lists.replies_policy.list_replies', defaultMessage: 'members of the list' },
}); });
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
@ -114,11 +114,10 @@ export default class ListTimeline extends React.PureComponent {
})); }));
} }
handleRepliesPolicyClick = () => { handleRepliesPolicyChange = ({ target }) => {
const { dispatch, list } = this.props; const { dispatch, list } = this.props;
const { id } = this.props.params; 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, target.value));
this.props.dispatch(updateList(id, undefined, false, replies_policy));
} }
render () { render () {
@ -166,14 +165,25 @@ export default class ListTimeline extends React.PureComponent {
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}> <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' /> <i className='fa fa-trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
</button> </button>
</div>
{ replies_policy !== undefined && ( { replies_policy !== undefined && (
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleRepliesPolicyClick}> <div>
<i className='fa fa-reply' /> <FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies: {policy}' values={{ policy: intl.formatMessage(messages[replies_policy]) }} /> <div className='column-settings__row'>
</button> <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> </div>
))}
</fieldset>
</div>
</div>
)}
<hr /> <hr />
</ColumnHeader> </ColumnHeader>

22
app/javascript/flavours/glitch/styles/components/index.scss
View file

@ -1062,6 +1062,7 @@
} }
.setting-toggle__label, .setting-toggle__label,
.setting-radio__label,
.setting-meta__label { .setting-meta__label {
color: $darker-text-color; color: $darker-text-color;
display: inline-block; display: inline-block;
@ -1070,6 +1071,27 @@
vertical-align: middle; 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 { .setting-meta__label {
float: right; float: right;
} }