Use upstream's settings for CW auto-expand and column swiping (#1770)
* Use Mastodon server-side settings for automatically expanding toots with CWs * Add modal warning about settings changes * Use Mastodon server-side settings for disabling swipinglocal
parent
aa08399e6f
commit
dc350be6f5
20 changed files with 396 additions and 24 deletions
@ -0,0 +1,83 @@ |
||||
// Package imports
|
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
export default class LocalSettingsPageItem extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
children: PropTypes.node.isRequired, |
||||
id: PropTypes.string.isRequired, |
||||
options: PropTypes.arrayOf(PropTypes.shape({ |
||||
value: PropTypes.string.isRequired, |
||||
message: PropTypes.string.isRequired, |
||||
hint: PropTypes.string, |
||||
})), |
||||
value: PropTypes.any, |
||||
placeholder: PropTypes.string, |
||||
}; |
||||
|
||||
render () { |
||||
const { id, options, children, placeholder, value } = this.props; |
||||
|
||||
if (options && options.length > 0) { |
||||
const currentValue = value; |
||||
const optionElems = options && options.length > 0 && options.map((opt) => { |
||||
let optionId = `${id}--${opt.value}`; |
||||
return ( |
||||
<label htmlFor={optionId}> |
||||
<input |
||||
type='radio' |
||||
name={id} |
||||
id={optionId} |
||||
value={opt.value} |
||||
checked={currentValue === opt.value} |
||||
disabled |
||||
/> |
||||
{opt.message} |
||||
{opt.hint && <span className='hint'>{opt.hint}</span>} |
||||
</label> |
||||
); |
||||
}); |
||||
return ( |
||||
<div className='glitch local-settings__page__item radio_buttons'> |
||||
<fieldset> |
||||
<legend>{children}</legend> |
||||
{optionElems} |
||||
</fieldset> |
||||
</div> |
||||
); |
||||
} else if (placeholder) { |
||||
return ( |
||||
<div className='glitch local-settings__page__item string'> |
||||
<label htmlFor={id}> |
||||
<p>{children}</p> |
||||
<p> |
||||
<input |
||||
id={id} |
||||
type='text' |
||||
value={value} |
||||
placeholder={placeholder} |
||||
disabled |
||||
/> |
||||
</p> |
||||
</label> |
||||
</div> |
||||
); |
||||
} else return ( |
||||
<div className='glitch local-settings__page__item boolean'> |
||||
<label htmlFor={id}> |
||||
<input |
||||
id={id} |
||||
type='checkbox' |
||||
checked={value} |
||||
disabled |
||||
/> |
||||
{children} |
||||
</label> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,86 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||
import { preferenceLink } from 'flavours/glitch/util/backend_links'; |
||||
import Button from 'flavours/glitch/components/button'; |
||||
import Icon from 'flavours/glitch/components/icon'; |
||||
import illustration from 'flavours/glitch/images/logo_warn_glitch.svg'; |
||||
|
||||
const messages = defineMessages({ |
||||
discardChanges: { id: 'confirmations.deprecated_settings.confirm', defaultMessage: 'Use Mastodon preferences' }, |
||||
user_setting_expand_spoilers: { id: 'settings.enable_content_warnings_auto_unfold', defaultMessage: 'Automatically unfold content-warnings' }, |
||||
user_setting_disable_swiping: { id: 'settings.swipe_to_change_columns', defaultMessage: 'Allow swiping to change columns (Mobile only)' }, |
||||
}); |
||||
|
||||
export default @injectIntl |
||||
class DeprecatedSettingsModal extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
settings: ImmutablePropTypes.list.isRequired, |
||||
onClose: PropTypes.func.isRequired, |
||||
onConfirm: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
componentDidMount() { |
||||
this.button.focus(); |
||||
} |
||||
|
||||
handleClick = () => { |
||||
this.props.onConfirm(); |
||||
this.props.onClose(); |
||||
} |
||||
|
||||
setRef = (c) => { |
||||
this.button = c; |
||||
} |
||||
|
||||
render () { |
||||
const { settings, intl } = this.props; |
||||
|
||||
return ( |
||||
<div className='modal-root__modal confirmation-modal'> |
||||
<div className='confirmation-modal__container'> |
||||
|
||||
<img src={illustration} className='modal-warning' alt='' /> |
||||
|
||||
<FormattedMessage |
||||
id='confirmations.deprecated_settings.message' |
||||
defaultMessage='Some of the glitch-soc device-specific {app_settings} you are using have been replaced by Mastodon {preferences} and will be overriden:' |
||||
values={{ |
||||
app_settings: ( |
||||
<strong className='deprecated-settings-label'> |
||||
<Icon id='cogs' /> <FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' /> |
||||
</strong> |
||||
), |
||||
preferences: ( |
||||
<strong className='deprecated-settings-label'> |
||||
<Icon id='cog' /> <FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /> |
||||
</strong> |
||||
), |
||||
}} |
||||
/> |
||||
|
||||
<div className='deprecated-settings-info'> |
||||
<ul> |
||||
{ settings.map((setting_name) => ( |
||||
<li> |
||||
<a href={preferenceLink(setting_name)}><FormattedMessage {...messages[setting_name]} /></a> |
||||
</li> |
||||
)) } |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<div className='confirmation-modal__action-bar'> |
||||
<div /> |
||||
<Button text={intl.formatMessage(messages.discardChanges)} onClick={this.handleClick} ref={this.setRef} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in new issue