150 lines
4.3 KiB
JavaScript
150 lines
4.3 KiB
JavaScript
import { injectIntl, defineMessages } from 'react-intl'
|
|
import ImmutablePureComponent from 'react-immutable-pure-component'
|
|
import ImmutablePropTypes from 'react-immutable-proptypes'
|
|
import ModalLayout from './modal_layout'
|
|
import Button from '../button'
|
|
import Text from '../text'
|
|
import SettingSwitch from '../setting_switch'
|
|
|
|
const messages = defineMessages({
|
|
message: { id: 'display_options.message', defaultMessage: 'Display settings affect your Gab account on this browser. These settings are only visible to you.' },
|
|
title: { id: 'display_options', defaultMessage: 'Customize your view' },
|
|
})
|
|
|
|
const mapStateToProps = (state) => ({
|
|
settings: state.getIn(['notifications', 'filter']),
|
|
})
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
onChange(path, value) {
|
|
dispatch(setFilter(path, value))
|
|
},
|
|
})
|
|
|
|
export default
|
|
@connect(mapStateToProps, mapDispatchToProps)
|
|
@injectIntl
|
|
class DisplayOptionsModal extends ImmutablePureComponent {
|
|
|
|
static propTypes = {
|
|
isSubmitting: PropTypes.bool.isRequired,
|
|
account: PropTypes.object.isRequired,
|
|
onConfirm: PropTypes.func.isRequired,
|
|
onClose: PropTypes.func.isRequired,
|
|
intl: PropTypes.object.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
settings: ImmutablePropTypes.map.isRequired,
|
|
}
|
|
|
|
handleClick = () => {
|
|
this.props.onClose()
|
|
this.props.onConfirm(this.props.account, this.props.notifications)
|
|
}
|
|
|
|
// document.documentElement.style.setProperty("--color-surface", "black");
|
|
|
|
render() {
|
|
const {
|
|
account,
|
|
intl,
|
|
settings,
|
|
onChange,
|
|
onClose,
|
|
} = this.props
|
|
|
|
// theme - light, muted, dark
|
|
// text size - extra small, small, normal, medium, large, extra large
|
|
// rounded borders
|
|
|
|
return (
|
|
<ModalLayout
|
|
onClose={onClose}
|
|
width={520}
|
|
title={intl.formatMessage(messages.title)}
|
|
>
|
|
|
|
<div className={[_s.default, _s.mb15].join(' ')}>
|
|
<Text>
|
|
{intl.formatMessage(messages.message)}
|
|
</Text>
|
|
</div>
|
|
|
|
<div className={[_s.default, _s.mb10].join(' ')}>
|
|
<Text weight='bold' color='secondary'>
|
|
Font Size
|
|
</Text>
|
|
<div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
|
|
test
|
|
</div>
|
|
</div>
|
|
|
|
<div className={[_s.default, _s.mb10].join(' ')}>
|
|
<Text weight='bold' color='secondary'>
|
|
Rounded
|
|
</Text>
|
|
<div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
|
|
<SettingSwitch
|
|
prefix='notification'
|
|
settings={settings}
|
|
settingPath={'onlyVerified'}
|
|
onChange={onChange}
|
|
label={'Small Radius'}
|
|
/>
|
|
|
|
<SettingSwitch
|
|
prefix='notification'
|
|
settings={settings}
|
|
settingPath={'onlyVerified'}
|
|
onChange={onChange}
|
|
label={'Circle Radius'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={[_s.default, _s.mb10].join(' ')}>
|
|
<Text weight='bold' color='secondary'>
|
|
Theme
|
|
</Text>
|
|
<div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
|
|
|
|
<div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
|
|
<div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
|
|
<Text>
|
|
Light
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
|
|
<div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
|
|
<Text>
|
|
Muted
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
|
|
<div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
|
|
<Text>
|
|
Black
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div className={[_s.mlAuto, _s.mrAuto].join(' ')}>
|
|
<Button>
|
|
<Text size='medium' color='inherit'>
|
|
Done
|
|
</Text>
|
|
</Button>
|
|
</div>
|
|
|
|
</ModalLayout>
|
|
)
|
|
}
|
|
|
|
}
|