mastodon/app/javascript/glitch/components/local_settings/page/index.js

184 lines
7.2 KiB
JavaScript
Raw Normal View History

2017-07-18 20:21:04 +02:00
// Package imports
2017-06-29 07:00:54 +02:00
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
2017-07-20 04:54:02 +02:00
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
2017-07-18 20:21:04 +02:00
// Our imports
2017-07-20 04:54:02 +02:00
import LocalSettingsPageItem from './item';
2017-06-29 07:00:54 +02:00
2017-07-18 20:21:04 +02:00
// Stylesheet imports
import './style';
2017-07-20 04:54:02 +02:00
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
const messages = defineMessages({
layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' },
layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' },
layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' },
});
@injectIntl
2017-07-20 04:54:02 +02:00
export default class LocalSettingsPage extends React.PureComponent {
2017-06-29 07:00:54 +02:00
static propTypes = {
2017-07-20 04:54:02 +02:00
index : PropTypes.number,
intl : PropTypes.object.isRequired,
onChange : PropTypes.func.isRequired,
settings : ImmutablePropTypes.map.isRequired,
2017-06-29 07:00:54 +02:00
};
2017-07-20 04:54:02 +02:00
pages = [
({ intl, onChange, settings }) => (
<div className='glitch local-settings__page general'>
2017-06-29 07:00:54 +02:00
<h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
2017-07-20 04:54:02 +02:00
<LocalSettingsPageItem
settings={settings}
item={['layout']}
id='mastodon-settings--layout'
options={[
{ value: 'auto', message: intl.formatMessage(messages.layout_auto) },
{ value: 'multiple', message: intl.formatMessage(messages.layout_desktop) },
{ value: 'single', message: intl.formatMessage(messages.layout_mobile) },
]}
2017-07-20 04:54:02 +02:00
onChange={onChange}
>
<FormattedMessage id='settings.layout' defaultMessage='Layout:' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['stretch']}
id='mastodon-settings--stretch'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
>
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['navbar_under']}
id='mastodon-settings--navbar_under'
onChange={onChange}
>
<FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' />
</LocalSettingsPageItem>
2017-06-29 07:00:54 +02:00
</div>
2017-07-20 04:54:02 +02:00
),
({ onChange, settings }) => (
<div className='glitch local-settings__page collapsed'>
2017-06-29 07:00:54 +02:00
<h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
2017-07-20 04:54:02 +02:00
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'enabled']}
id='mastodon-settings--collapsed-enabled'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
>
<FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
2017-06-29 07:00:54 +02:00
<section>
<h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2>
2017-07-20 04:54:02 +02:00
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'auto', 'all']}
id='mastodon-settings--collapsed-auto-all'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
dependsOn={[['collapsed', 'enabled']]}
>
<FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'auto', 'notifications']}
id='mastodon-settings--collapsed-auto-notifications'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
dependsOn={[['collapsed', 'enabled']]}
dependsOnNot={[['collapsed', 'auto', 'all']]}
>
<FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'auto', 'lengthy']}
id='mastodon-settings--collapsed-auto-lengthy'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
dependsOn={[['collapsed', 'enabled']]}
dependsOnNot={[['collapsed', 'auto', 'all']]}
>
<FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'auto', 'replies']}
id='mastodon-settings--collapsed-auto-replies'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
dependsOn={[['collapsed', 'enabled']]}
dependsOnNot={[['collapsed', 'auto', 'all']]}
>
<FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'auto', 'media']}
id='mastodon-settings--collapsed-auto-media'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
dependsOn={[['collapsed', 'enabled']]}
dependsOnNot={[['collapsed', 'auto', 'all']]}
>
<FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
2017-06-29 07:00:54 +02:00
</section>
<section>
<h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2>
2017-07-20 04:54:02 +02:00
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'backgrounds', 'user_backgrounds']}
id='mastodon-settings--collapsed-user-backgrouns'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
dependsOn={[['collapsed', 'enabled']]}
>
<FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
2017-06-29 07:00:54 +02:00
item={['collapsed', 'backgrounds', 'preview_images']}
id='mastodon-settings--collapsed-preview-images'
2017-07-20 04:54:02 +02:00
onChange={onChange}
2017-06-29 07:00:54 +02:00
dependsOn={[['collapsed', 'enabled']]}
>
<FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
2017-06-29 07:00:54 +02:00
</section>
</div>
2017-07-20 04:54:02 +02:00
),
({ onChange, settings }) => (
<div className='glitch local-settings__page media'>
<h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
2017-07-20 04:54:02 +02:00
<LocalSettingsPageItem
settings={settings}
item={['media', 'letterbox']}
id='mastodon-settings--media-letterbox'
2017-07-20 04:54:02 +02:00
onChange={onChange}
>
<FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['media', 'fullwidth']}
id='mastodon-settings--media-fullwidth'
2017-07-20 04:54:02 +02:00
onChange={onChange}
>
<FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' />
2017-07-20 04:54:02 +02:00
</LocalSettingsPageItem>
</div>
2017-07-20 04:54:02 +02:00
),
];
2017-06-29 07:00:54 +02:00
render () {
2017-07-20 04:54:02 +02:00
const { pages } = this;
const { index, intl, onChange, settings } = this.props;
const CurrentPage = pages[index] || pages[0];
2017-06-29 07:00:54 +02:00
2017-07-20 04:54:02 +02:00
return <CurrentPage intl={intl} onChange={onChange} settings={settings} />;
2017-06-29 07:00:54 +02:00
}
}