diff --git a/app/javascript/glitch/components/settings/container.js b/app/javascript/glitch/components/local_settings/container.js similarity index 57% rename from app/javascript/glitch/components/settings/container.js rename to app/javascript/glitch/components/local_settings/container.js index 5dfe228c0f..6c202a4e7c 100644 --- a/app/javascript/glitch/components/settings/container.js +++ b/app/javascript/glitch/components/local_settings/container.js @@ -6,22 +6,19 @@ import { closeModal } from 'mastodon/actions/modal'; // Our imports // import { changeLocalSetting } from 'glitch/actions/local_settings'; -import Settings from 'glitch/components/settings'; +import LocalSettings from '.'; const mapStateToProps = state => ({ settings: state.get('local_settings'), }); const mapDispatchToProps = dispatch => ({ - toggleSetting (setting, e) { - dispatch(changeLocalSetting(setting, e.target.checked)); - }, - changeSetting (setting, e) { - dispatch(changeLocalSetting(setting, e.target.value)); + onChange (setting, value) { + dispatch(changeLocalSetting(setting, value)); }, onClose () { dispatch(closeModal()); }, }); -export default connect(mapStateToProps, mapDispatchToProps)(Settings); +export default connect(mapStateToProps, mapDispatchToProps)(LocalSettings); diff --git a/app/javascript/glitch/components/local_settings/index.js b/app/javascript/glitch/components/local_settings/index.js new file mode 100644 index 0000000000..7f7b93de4c --- /dev/null +++ b/app/javascript/glitch/components/local_settings/index.js @@ -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 ( +
+ + +
+ ); + } + +} diff --git a/app/javascript/glitch/components/local_settings/navigation/index.js b/app/javascript/glitch/components/local_settings/navigation/index.js new file mode 100644 index 0000000000..1f72cc8245 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/navigation/index.js @@ -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 ( + + ); + } + +} diff --git a/app/javascript/glitch/components/local_settings/navigation/item/index.js b/app/javascript/glitch/components/local_settings/navigation/item/index.js new file mode 100644 index 0000000000..1676aa404c --- /dev/null +++ b/app/javascript/glitch/components/local_settings/navigation/item/index.js @@ -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 ? : null; + + if (href) return ( + + {iconElem} {title} + + ); + else if (onNavigate) return ( + + {iconElem} {title} + + ); + else return null; + } + +} diff --git a/app/javascript/glitch/components/local_settings/navigation/item/style.scss b/app/javascript/glitch/components/local_settings/navigation/item/style.scss new file mode 100644 index 0000000000..505c869126 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/navigation/item/style.scss @@ -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; + } +} diff --git a/app/javascript/glitch/components/local_settings/navigation/style.scss b/app/javascript/glitch/components/local_settings/navigation/style.scss new file mode 100644 index 0000000000..1cc39e3e95 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/navigation/style.scss @@ -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; +} diff --git a/app/javascript/glitch/components/settings/index.js b/app/javascript/glitch/components/local_settings/page/index.js similarity index 52% rename from app/javascript/glitch/components/settings/index.js rename to app/javascript/glitch/components/local_settings/page/index.js index ab2e0fb87a..8635b604f6 100644 --- a/app/javascript/glitch/components/settings/index.js +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -2,14 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; // Our imports -import SettingsItem from './item'; +import LocalSettingsPageItem from './item'; // Stylesheet imports import './style'; +// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + const messages = defineMessages({ layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, @@ -17,27 +19,21 @@ const messages = defineMessages({ }); @injectIntl -export default class Settings extends React.PureComponent { +export default class LocalSettingsPage extends React.PureComponent { static propTypes = { - settings: ImmutablePropTypes.map.isRequired, - toggleSetting: PropTypes.func.isRequired, - changeSetting: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, + index : PropTypes.number, + intl : PropTypes.object.isRequired, + onChange : PropTypes.func.isRequired, + settings : ImmutablePropTypes.map.isRequired, }; - state = { - currentIndex: 0, - }; - - General = () => { - const { intl } = this.props; - return ( -
+ pages = [ + ({ intl, onChange, settings }) => ( +

- - - - + - - +
- ); - } - - CollapsedStatuses = () => { - return ( -
+ ), + ({ onChange, settings }) => ( +

- - +

- - - + - - + - - + - - + - +

- - - + - +
- ); - } - - Media = () => { - return ( -
+ ), + ({ onChange, settings }) => ( +

- - - + - +
- ); - } - - navigateTo = (e) => - this.setState({ currentIndex: +e.currentTarget.getAttribute('data-mastodon-navigation_index') }); + ), + ]; render () { + const { pages } = this; + const { index, intl, onChange, settings } = this.props; + const CurrentPage = pages[index] || pages[0]; - const { General, CollapsedStatuses, Media, navigateTo } = this; - const { onClose } = this.props; - const { currentIndex } = this.state; - - return ( -
- - - -
- { - [ - , - , - , - ][currentIndex] || - } -
- -
- ); + return ; } } diff --git a/app/javascript/glitch/components/settings/item.js b/app/javascript/glitch/components/local_settings/page/item/index.js similarity index 57% rename from app/javascript/glitch/components/settings/item.js rename to app/javascript/glitch/components/local_settings/page/item/index.js index 4c67cc2acf..326c7eeb04 100644 --- a/app/javascript/glitch/components/settings/item.js +++ b/app/javascript/glitch/components/local_settings/page/item/index.js @@ -1,30 +1,38 @@ -// Package imports // +// Package imports import React from 'react'; import PropTypes from 'prop-types'; 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 = { - settings: ImmutablePropTypes.map.isRequired, - item: PropTypes.array.isRequired, - id: PropTypes.string.isRequired, - options: PropTypes.arrayOf(PropTypes.shape({ - value: PropTypes.string.isRequired, - message: PropTypes.object.isRequired, - })), + children: PropTypes.element.isRequired, dependsOn: PropTypes.array, dependsOnNot: PropTypes.array, - children: PropTypes.element.isRequired, + id: PropTypes.string.isRequired, + item: PropTypes.array.isRequired, onChange: PropTypes.func.isRequired, + options: PropTypes.arrayOf(PropTypes.shape({ + value: PropTypes.string.isRequired, + message: PropTypes.string.isRequired, + })), + settings: ImmutablePropTypes.map.isRequired, }; - handleChange = (e) => { - const { item, onChange } = this.props; - onChange(item, e); + handleChange = e => { + const { target } = e; + const { item, onChange, options } = this.props; + if (options && options.length > 0) onChange(item, target.value); + else onChange(item, target.checked); } render () { + const { handleChange } = this; const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props; let enabled = true; @@ -42,38 +50,41 @@ export default class SettingsItem extends React.PureComponent { if (options && options.length > 0) { const currentValue = settings.getIn(item); const optionElems = options && options.length > 0 && options.map((opt) => ( - )); return ( -