mirror of
https://github.com/glitch-soc/mastodon.git
synced 2024-11-25 01:24:02 -05:00
Restructured local settings internals
This commit is contained in:
parent
0a678cf377
commit
d235224692
@ -6,22 +6,19 @@ import { closeModal } from 'mastodon/actions/modal';
|
|||||||
|
|
||||||
// Our imports //
|
// Our imports //
|
||||||
import { changeLocalSetting } from 'glitch/actions/local_settings';
|
import { changeLocalSetting } from 'glitch/actions/local_settings';
|
||||||
import Settings from 'glitch/components/settings';
|
import LocalSettings from '.';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
settings: state.get('local_settings'),
|
settings: state.get('local_settings'),
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const mapDispatchToProps = dispatch => ({
|
||||||
toggleSetting (setting, e) {
|
onChange (setting, value) {
|
||||||
dispatch(changeLocalSetting(setting, e.target.checked));
|
dispatch(changeLocalSetting(setting, value));
|
||||||
},
|
|
||||||
changeSetting (setting, e) {
|
|
||||||
dispatch(changeLocalSetting(setting, e.target.value));
|
|
||||||
},
|
},
|
||||||
onClose () {
|
onClose () {
|
||||||
dispatch(closeModal());
|
dispatch(closeModal());
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(Settings);
|
export default connect(mapStateToProps, mapDispatchToProps)(LocalSettings);
|
50
app/javascript/glitch/components/local_settings/index.js
Normal file
50
app/javascript/glitch/components/local_settings/index.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
// Package imports
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
|
||||||
|
// Our imports
|
||||||
|
import LocalSettingsPage from './page';
|
||||||
|
import LocalSettingsNavigation from './navigation';
|
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style';
|
||||||
|
|
||||||
|
export default class LocalSettings extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
settings: ImmutablePropTypes.map.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
currentIndex: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
navigateTo = (index) =>
|
||||||
|
this.setState({ currentIndex: +index });
|
||||||
|
|
||||||
|
render () {
|
||||||
|
|
||||||
|
const { navigateTo } = this;
|
||||||
|
const { onChange, onClose, settings } = this.props;
|
||||||
|
const { currentIndex } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='glitch modal-root__modal local-settings'>
|
||||||
|
<LocalSettingsNavigation
|
||||||
|
index={currentIndex}
|
||||||
|
onClose={onClose}
|
||||||
|
onNavigate={navigateTo}
|
||||||
|
/>
|
||||||
|
<LocalSettingsPage
|
||||||
|
index={currentIndex}
|
||||||
|
onChange={onChange}
|
||||||
|
settings={settings}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,74 @@
|
|||||||
|
// Package imports
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { injectIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
|
// Our imports
|
||||||
|
import LocalSettingsNavigationItem from './item';
|
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style';
|
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
general: { id: 'settings.general', defaultMessage: 'General' },
|
||||||
|
collapsed: { id: 'settings.collapsed_statuses', defaultMessage: 'Collapsed toots' },
|
||||||
|
media: { id: 'settings.media', defaultMessage: 'Media' },
|
||||||
|
preferences: { id: 'settings.preferences', defaultMessage: 'Preferences' },
|
||||||
|
close: { id: 'settings.close', defaultMessage: 'Close' },
|
||||||
|
});
|
||||||
|
|
||||||
|
@injectIntl
|
||||||
|
export default class LocalSettingsNavigation extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
index : PropTypes.number,
|
||||||
|
intl : PropTypes.object.isRequired,
|
||||||
|
onClose : PropTypes.func.isRequired,
|
||||||
|
onNavigate : PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
|
||||||
|
const { index, intl, onClose, onNavigate } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className='glitch local-settings__navigation'>
|
||||||
|
<LocalSettingsNavigationItem
|
||||||
|
active={index === 0}
|
||||||
|
index={0}
|
||||||
|
onNavigate={onNavigate}
|
||||||
|
title={intl.formatMessage(messages.general)}
|
||||||
|
/>
|
||||||
|
<LocalSettingsNavigationItem
|
||||||
|
active={index === 1}
|
||||||
|
index={1}
|
||||||
|
onNavigate={onNavigate}
|
||||||
|
title={intl.formatMessage(messages.collapsed)}
|
||||||
|
/>
|
||||||
|
<LocalSettingsNavigationItem
|
||||||
|
active={index === 2}
|
||||||
|
index={2}
|
||||||
|
onNavigate={onNavigate}
|
||||||
|
title={intl.formatMessage(messages.media)}
|
||||||
|
/>
|
||||||
|
<LocalSettingsNavigationItem
|
||||||
|
active={index === 3}
|
||||||
|
href='/settings/preferences'
|
||||||
|
index={3}
|
||||||
|
icon='cog'
|
||||||
|
title={intl.formatMessage(messages.preferences)}
|
||||||
|
/>
|
||||||
|
<LocalSettingsNavigationItem
|
||||||
|
active={index === 4}
|
||||||
|
className='close'
|
||||||
|
index={4}
|
||||||
|
onNavigate={onClose}
|
||||||
|
title={intl.formatMessage(messages.close)}
|
||||||
|
/>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,69 @@
|
|||||||
|
// Package imports
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style';
|
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
export default class LocalSettingsPage extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
active: PropTypes.bool,
|
||||||
|
className: PropTypes.string,
|
||||||
|
href: PropTypes.string,
|
||||||
|
icon: PropTypes.string,
|
||||||
|
index: PropTypes.number.isRequired,
|
||||||
|
onNavigate: PropTypes.func,
|
||||||
|
title: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClick = (e) => {
|
||||||
|
const { index, onNavigate } = this.props;
|
||||||
|
if (onNavigate) {
|
||||||
|
onNavigate(index);
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { handleClick } = this;
|
||||||
|
const {
|
||||||
|
active,
|
||||||
|
className,
|
||||||
|
href,
|
||||||
|
icon,
|
||||||
|
onNavigate,
|
||||||
|
title,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const finalClassName = classNames('glitch', 'local-settings__navigation__item', {
|
||||||
|
active,
|
||||||
|
}, className);
|
||||||
|
|
||||||
|
const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null;
|
||||||
|
|
||||||
|
if (href) return (
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
className={finalClassName}
|
||||||
|
>
|
||||||
|
{iconElem} {title}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
else if (onNavigate) return (
|
||||||
|
<a
|
||||||
|
onClick={handleClick}
|
||||||
|
role='button'
|
||||||
|
tabIndex='0'
|
||||||
|
className={finalClassName}
|
||||||
|
>
|
||||||
|
{iconElem} {title}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
else return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,27 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
.glitch.local-settings__navigation__item {
|
||||||
|
display: block;
|
||||||
|
padding: 15px 20px;
|
||||||
|
color: inherit;
|
||||||
|
background: $primary-text-color;
|
||||||
|
border-bottom: 1px $ui-primary-color solid;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
transition: background .3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $ui-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: $ui-highlight-color;
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.close, &.close:hover {
|
||||||
|
background: $error-value-color;
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,10 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
.glitch.local-settings__navigation {
|
||||||
|
background: $primary-text-color;
|
||||||
|
color: $ui-base-color;
|
||||||
|
width: 200px;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
@ -2,14 +2,16 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
|
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
|
||||||
|
|
||||||
// Our imports
|
// Our imports
|
||||||
import SettingsItem from './item';
|
import LocalSettingsPageItem from './item';
|
||||||
|
|
||||||
// Stylesheet imports
|
// Stylesheet imports
|
||||||
import './style';
|
import './style';
|
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' },
|
layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' },
|
||||||
layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' },
|
layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' },
|
||||||
@ -17,27 +19,21 @@ const messages = defineMessages({
|
|||||||
});
|
});
|
||||||
|
|
||||||
@injectIntl
|
@injectIntl
|
||||||
export default class Settings extends React.PureComponent {
|
export default class LocalSettingsPage extends React.PureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
settings: ImmutablePropTypes.map.isRequired,
|
index : PropTypes.number,
|
||||||
toggleSetting: PropTypes.func.isRequired,
|
|
||||||
changeSetting: PropTypes.func.isRequired,
|
|
||||||
onClose: PropTypes.func.isRequired,
|
|
||||||
intl : PropTypes.object.isRequired,
|
intl : PropTypes.object.isRequired,
|
||||||
|
onChange : PropTypes.func.isRequired,
|
||||||
|
settings : ImmutablePropTypes.map.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
pages = [
|
||||||
currentIndex: 0,
|
({ intl, onChange, settings }) => (
|
||||||
};
|
<div className='glitch local-settings__page general'>
|
||||||
|
|
||||||
General = () => {
|
|
||||||
const { intl } = this.props;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
|
<h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['layout']}
|
item={['layout']}
|
||||||
id='mastodon-settings--layout'
|
id='mastodon-settings--layout'
|
||||||
options={[
|
options={[
|
||||||
@ -45,180 +41,135 @@ export default class Settings extends React.PureComponent {
|
|||||||
{ value: 'multiple', message: intl.formatMessage(messages.layout_desktop) },
|
{ value: 'multiple', message: intl.formatMessage(messages.layout_desktop) },
|
||||||
{ value: 'single', message: intl.formatMessage(messages.layout_mobile) },
|
{ value: 'single', message: intl.formatMessage(messages.layout_mobile) },
|
||||||
]}
|
]}
|
||||||
onChange={this.props.changeSetting}
|
onChange={onChange}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.layout' defaultMessage='Layout:' />
|
<FormattedMessage id='settings.layout' defaultMessage='Layout:' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
|
<LocalSettingsPageItem
|
||||||
<SettingsItem
|
settings={settings}
|
||||||
settings={this.props.settings}
|
|
||||||
item={['stretch']}
|
item={['stretch']}
|
||||||
id='mastodon-settings--stretch'
|
id='mastodon-settings--stretch'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
|
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
),
|
||||||
}
|
({ onChange, settings }) => (
|
||||||
|
<div className='glitch local-settings__page collapsed'>
|
||||||
CollapsedStatuses = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
|
<h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'enabled']}
|
item={['collapsed', 'enabled']}
|
||||||
id='mastodon-settings--collapsed-enabled'
|
id='mastodon-settings--collapsed-enabled'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' />
|
<FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
<section>
|
<section>
|
||||||
<h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2>
|
<h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'auto', 'all']}
|
item={['collapsed', 'auto', 'all']}
|
||||||
id='mastodon-settings--collapsed-auto-all'
|
id='mastodon-settings--collapsed-auto-all'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
dependsOn={[['collapsed', 'enabled']]}
|
dependsOn={[['collapsed', 'enabled']]}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' />
|
<FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'auto', 'notifications']}
|
item={['collapsed', 'auto', 'notifications']}
|
||||||
id='mastodon-settings--collapsed-auto-notifications'
|
id='mastodon-settings--collapsed-auto-notifications'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
dependsOn={[['collapsed', 'enabled']]}
|
dependsOn={[['collapsed', 'enabled']]}
|
||||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' />
|
<FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'auto', 'lengthy']}
|
item={['collapsed', 'auto', 'lengthy']}
|
||||||
id='mastodon-settings--collapsed-auto-lengthy'
|
id='mastodon-settings--collapsed-auto-lengthy'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
dependsOn={[['collapsed', 'enabled']]}
|
dependsOn={[['collapsed', 'enabled']]}
|
||||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' />
|
<FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'auto', 'replies']}
|
item={['collapsed', 'auto', 'replies']}
|
||||||
id='mastodon-settings--collapsed-auto-replies'
|
id='mastodon-settings--collapsed-auto-replies'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
dependsOn={[['collapsed', 'enabled']]}
|
dependsOn={[['collapsed', 'enabled']]}
|
||||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' />
|
<FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'auto', 'media']}
|
item={['collapsed', 'auto', 'media']}
|
||||||
id='mastodon-settings--collapsed-auto-media'
|
id='mastodon-settings--collapsed-auto-media'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
dependsOn={[['collapsed', 'enabled']]}
|
dependsOn={[['collapsed', 'enabled']]}
|
||||||
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
dependsOnNot={[['collapsed', 'auto', 'all']]}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' />
|
<FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2>
|
<h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'backgrounds', 'user_backgrounds']}
|
item={['collapsed', 'backgrounds', 'user_backgrounds']}
|
||||||
id='mastodon-settings--collapsed-user-backgrouns'
|
id='mastodon-settings--collapsed-user-backgrouns'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
dependsOn={[['collapsed', 'enabled']]}
|
dependsOn={[['collapsed', 'enabled']]}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' />
|
<FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['collapsed', 'backgrounds', 'preview_images']}
|
item={['collapsed', 'backgrounds', 'preview_images']}
|
||||||
id='mastodon-settings--collapsed-preview-images'
|
id='mastodon-settings--collapsed-preview-images'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
dependsOn={[['collapsed', 'enabled']]}
|
dependsOn={[['collapsed', 'enabled']]}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' />
|
<FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
),
|
||||||
}
|
({ onChange, settings }) => (
|
||||||
|
<div className='glitch local-settings__page media'>
|
||||||
Media = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
|
<h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['media', 'letterbox']}
|
item={['media', 'letterbox']}
|
||||||
id='mastodon-settings--media-letterbox'
|
id='mastodon-settings--media-letterbox'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
|
<FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
<SettingsItem
|
<LocalSettingsPageItem
|
||||||
settings={this.props.settings}
|
settings={settings}
|
||||||
item={['media', 'fullwidth']}
|
item={['media', 'fullwidth']}
|
||||||
id='mastodon-settings--media-fullwidth'
|
id='mastodon-settings--media-fullwidth'
|
||||||
onChange={this.props.toggleSetting}
|
onChange={onChange}
|
||||||
>
|
>
|
||||||
<FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' />
|
<FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' />
|
||||||
</SettingsItem>
|
</LocalSettingsPageItem>
|
||||||
</div>
|
</div>
|
||||||
);
|
),
|
||||||
}
|
];
|
||||||
|
|
||||||
navigateTo = (e) =>
|
|
||||||
this.setState({ currentIndex: +e.currentTarget.getAttribute('data-mastodon-navigation_index') });
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
const { pages } = this;
|
||||||
|
const { index, intl, onChange, settings } = this.props;
|
||||||
|
const CurrentPage = pages[index] || pages[0];
|
||||||
|
|
||||||
const { General, CollapsedStatuses, Media, navigateTo } = this;
|
return <CurrentPage intl={intl} onChange={onChange} settings={settings} />;
|
||||||
const { onClose } = this.props;
|
|
||||||
const { currentIndex } = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='modal-root__modal settings-modal'>
|
|
||||||
|
|
||||||
<nav className='settings-modal__navigation'>
|
|
||||||
<a onClick={navigateTo} role='button' data-mastodon-navigation_index='0' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 0 ? ' active' : ''}`}>
|
|
||||||
<FormattedMessage id='settings.general' defaultMessage='General' />
|
|
||||||
</a>
|
|
||||||
<a onClick={navigateTo} role='button' data-mastodon-navigation_index='1' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 1 ? ' active' : ''}`}>
|
|
||||||
<FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' />
|
|
||||||
</a>
|
|
||||||
<a onClick={navigateTo} role='button' data-mastodon-navigation_index='2' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 2 ? ' active' : ''}`}>
|
|
||||||
<FormattedMessage id='settings.media' defaultMessage='Media' />
|
|
||||||
</a>
|
|
||||||
<a href='/settings/preferences' className='settings-modal__navigation-item'>
|
|
||||||
<i className='fa fa-fw fa-cog' /> <FormattedMessage id='settings.preferences' defaultMessage='User preferences' />
|
|
||||||
</a>
|
|
||||||
<a onClick={onClose} role='button' tabIndex='0' className='settings-modal__navigation-close'>
|
|
||||||
<FormattedMessage id='settings.close' defaultMessage='Close' />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div className='settings-modal__content'>
|
|
||||||
{
|
|
||||||
[
|
|
||||||
<General />,
|
|
||||||
<CollapsedStatuses />,
|
|
||||||
<Media />,
|
|
||||||
][currentIndex] || <General />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
@ -1,30 +1,38 @@
|
|||||||
// Package imports //
|
// Package imports
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
|
||||||
export default class SettingsItem extends React.PureComponent {
|
// Stylesheet imports
|
||||||
|
import './style';
|
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
export default class LocalSettingsPageItem extends React.PureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
settings: ImmutablePropTypes.map.isRequired,
|
children: PropTypes.element.isRequired,
|
||||||
item: PropTypes.array.isRequired,
|
|
||||||
id: PropTypes.string.isRequired,
|
|
||||||
options: PropTypes.arrayOf(PropTypes.shape({
|
|
||||||
value: PropTypes.string.isRequired,
|
|
||||||
message: PropTypes.object.isRequired,
|
|
||||||
})),
|
|
||||||
dependsOn: PropTypes.array,
|
dependsOn: PropTypes.array,
|
||||||
dependsOnNot: PropTypes.array,
|
dependsOnNot: PropTypes.array,
|
||||||
children: PropTypes.element.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
|
item: PropTypes.array.isRequired,
|
||||||
onChange: PropTypes.func.isRequired,
|
onChange: PropTypes.func.isRequired,
|
||||||
|
options: PropTypes.arrayOf(PropTypes.shape({
|
||||||
|
value: PropTypes.string.isRequired,
|
||||||
|
message: PropTypes.string.isRequired,
|
||||||
|
})),
|
||||||
|
settings: ImmutablePropTypes.map.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChange = (e) => {
|
handleChange = e => {
|
||||||
const { item, onChange } = this.props;
|
const { target } = e;
|
||||||
onChange(item, e);
|
const { item, onChange, options } = this.props;
|
||||||
|
if (options && options.length > 0) onChange(item, target.value);
|
||||||
|
else onChange(item, target.checked);
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
const { handleChange } = this;
|
||||||
const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props;
|
const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props;
|
||||||
let enabled = true;
|
let enabled = true;
|
||||||
|
|
||||||
@ -42,38 +50,41 @@ export default class SettingsItem extends React.PureComponent {
|
|||||||
if (options && options.length > 0) {
|
if (options && options.length > 0) {
|
||||||
const currentValue = settings.getIn(item);
|
const currentValue = settings.getIn(item);
|
||||||
const optionElems = options && options.length > 0 && options.map((opt) => (
|
const optionElems = options && options.length > 0 && options.map((opt) => (
|
||||||
<option key={opt.value} selected={currentValue === opt.value} value={opt.value} >
|
<option
|
||||||
|
key={opt.value}
|
||||||
|
value={opt.value}
|
||||||
|
>
|
||||||
{opt.message}
|
{opt.message}
|
||||||
</option>
|
</option>
|
||||||
));
|
));
|
||||||
return (
|
return (
|
||||||
<label htmlFor={id}>
|
<label className='glitch local-settings__page__item' htmlFor={id}>
|
||||||
<p>{children}</p>
|
<p>{children}</p>
|
||||||
<p>
|
<p>
|
||||||
<select
|
<select
|
||||||
id={id}
|
id={id}
|
||||||
disabled={!enabled}
|
disabled={!enabled}
|
||||||
onBlur={this.handleChange}
|
onBlur={handleChange}
|
||||||
|
onChange={handleChange}
|
||||||
|
value={currentValue}
|
||||||
>
|
>
|
||||||
{optionElems}
|
{optionElems}
|
||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
} else {
|
} else return (
|
||||||
return (
|
<label className='glitch local-settings__page__item' htmlFor={id}>
|
||||||
<label htmlFor={id}>
|
|
||||||
<input
|
<input
|
||||||
id={id}
|
id={id}
|
||||||
type='checkbox'
|
type='checkbox'
|
||||||
checked={settings.getIn(item)}
|
checked={settings.getIn(item)}
|
||||||
onChange={this.handleChange}
|
onChange={handleChange}
|
||||||
disabled={!enabled}
|
disabled={!enabled}
|
||||||
/>
|
/>
|
||||||
{children}
|
{children}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
.glitch.local-settings__page__item {
|
||||||
|
select {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,9 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
.glitch.local-settings__page {
|
||||||
|
display: block;
|
||||||
|
flex: auto;
|
||||||
|
padding: 15px 20px 15px 20px;
|
||||||
|
width: 360px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
34
app/javascript/glitch/components/local_settings/style.scss
Normal file
34
app/javascript/glitch/components/local_settings/style.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
.glitch.local-settings {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
background: $ui-secondary-color;
|
||||||
|
color: $ui-base-color;
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 80vh;
|
||||||
|
width: 80vw;
|
||||||
|
max-width: 740px;
|
||||||
|
max-height: 450px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
@ -1,84 +0,0 @@
|
|||||||
@import 'variables';
|
|
||||||
|
|
||||||
.settings-modal {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
background: $ui-secondary-color;
|
|
||||||
color: $ui-base-color;
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 80vh;
|
|
||||||
width: 80vw;
|
|
||||||
max-width: 740px;
|
|
||||||
max-height: 450px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-modal__navigation {
|
|
||||||
background: $primary-text-color;
|
|
||||||
color: $ui-base-color;
|
|
||||||
width: 200px;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.settings-modal__navigation-item, .settings-modal__navigation-close {
|
|
||||||
display: block;
|
|
||||||
padding: 15px 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-modal__navigation-item {
|
|
||||||
background: $primary-text-color;
|
|
||||||
color: inherit;
|
|
||||||
border-bottom: 1px $ui-primary-color solid;
|
|
||||||
transition: background .3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $ui-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-modal__navigation-close {
|
|
||||||
background: $error-value-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-modal__content {
|
|
||||||
display: block;
|
|
||||||
flex: auto;
|
|
||||||
padding: 15px 20px 15px 20px;
|
|
||||||
width: 360px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
select {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
@ -103,7 +103,7 @@ export function ReportModal () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function SettingsModal () {
|
export function SettingsModal () {
|
||||||
return import(/* webpackChunkName: "modals/settings_modal" */'../../../../glitch/components/settings/container');
|
return import(/* webpackChunkName: "modals/settings_modal" */'glitch/components/local_settings/container');
|
||||||
}
|
}
|
||||||
|
|
||||||
// THESE AREN'T USED BY US; SEE `glitch/components/status` AND `mastodon/features/status`. //
|
// THESE AREN'T USED BY US; SEE `glitch/components/status` AND `mastodon/features/status`. //
|
||||||
|
Loading…
Reference in New Issue
Block a user