From d2352246920800e491466d84b0146feb4d1d791f Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 19 Jul 2017 19:54:02 -0700 Subject: Restructured local settings internals --- .../glitch/components/local_settings/container.js | 24 +++ .../glitch/components/local_settings/index.js | 50 +++++ .../components/local_settings/navigation/index.js | 74 +++++++ .../local_settings/navigation/item/index.js | 69 +++++++ .../local_settings/navigation/item/style.scss | 27 +++ .../local_settings/navigation/style.scss | 10 + .../glitch/components/local_settings/page/index.js | 175 ++++++++++++++++ .../components/local_settings/page/item/index.js | 90 +++++++++ .../components/local_settings/page/item/style.scss | 7 + .../components/local_settings/page/style.scss | 9 + .../glitch/components/local_settings/style.scss | 34 ++++ .../glitch/components/settings/container.js | 27 --- app/javascript/glitch/components/settings/index.js | 224 --------------------- app/javascript/glitch/components/settings/item.js | 79 -------- .../glitch/components/settings/style.scss | 84 -------- 15 files changed, 569 insertions(+), 414 deletions(-) create mode 100644 app/javascript/glitch/components/local_settings/container.js create mode 100644 app/javascript/glitch/components/local_settings/index.js create mode 100644 app/javascript/glitch/components/local_settings/navigation/index.js create mode 100644 app/javascript/glitch/components/local_settings/navigation/item/index.js create mode 100644 app/javascript/glitch/components/local_settings/navigation/item/style.scss create mode 100644 app/javascript/glitch/components/local_settings/navigation/style.scss create mode 100644 app/javascript/glitch/components/local_settings/page/index.js create mode 100644 app/javascript/glitch/components/local_settings/page/item/index.js create mode 100644 app/javascript/glitch/components/local_settings/page/item/style.scss create mode 100644 app/javascript/glitch/components/local_settings/page/style.scss create mode 100644 app/javascript/glitch/components/local_settings/style.scss delete mode 100644 app/javascript/glitch/components/settings/container.js delete mode 100644 app/javascript/glitch/components/settings/index.js delete mode 100644 app/javascript/glitch/components/settings/item.js delete mode 100644 app/javascript/glitch/components/settings/style.scss (limited to 'app/javascript/glitch') diff --git a/app/javascript/glitch/components/local_settings/container.js b/app/javascript/glitch/components/local_settings/container.js new file mode 100644 index 000000000..6c202a4e7 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/container.js @@ -0,0 +1,24 @@ +// Package imports // +import { connect } from 'react-redux'; + +// Mastodon imports // +import { closeModal } from 'mastodon/actions/modal'; + +// Our imports // +import { changeLocalSetting } from 'glitch/actions/local_settings'; +import LocalSettings from '.'; + +const mapStateToProps = state => ({ + settings: state.get('local_settings'), +}); + +const mapDispatchToProps = dispatch => ({ + onChange (setting, value) { + dispatch(changeLocalSetting(setting, value)); + }, + onClose () { + dispatch(closeModal()); + }, +}); + +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 000000000..7f7b93de4 --- /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 000000000..1f72cc824 --- /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 000000000..1676aa404 --- /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 000000000..505c86912 --- /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 000000000..1cc39e3e9 --- /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/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js new file mode 100644 index 000000000..8635b604f --- /dev/null +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -0,0 +1,175 @@ +// Package imports +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; + +// Our imports +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' }, + layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, +}); + +@injectIntl +export default class LocalSettingsPage extends React.PureComponent { + + static propTypes = { + index : PropTypes.number, + intl : PropTypes.object.isRequired, + onChange : PropTypes.func.isRequired, + settings : ImmutablePropTypes.map.isRequired, + }; + + pages = [ + ({ intl, onChange, settings }) => ( +
+

+ + + + + + +
+ ), + ({ onChange, settings }) => ( +
+

+ + + +
+

+ + + + + + + + + + + + + + + +
+
+

+ + + + + + +
+
+ ), + ({ onChange, settings }) => ( +
+

+ + + + + + +
+ ), + ]; + + render () { + const { pages } = this; + const { index, intl, onChange, settings } = this.props; + const CurrentPage = pages[index] || pages[0]; + + return ; + } + +} diff --git a/app/javascript/glitch/components/local_settings/page/item/index.js b/app/javascript/glitch/components/local_settings/page/item/index.js new file mode 100644 index 000000000..326c7eeb0 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/page/item/index.js @@ -0,0 +1,90 @@ +// Package imports +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; + +// Stylesheet imports +import './style'; + +// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + +export default class LocalSettingsPageItem extends React.PureComponent { + + static propTypes = { + children: PropTypes.element.isRequired, + dependsOn: PropTypes.array, + dependsOnNot: PropTypes.array, + 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 { 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; + + if (dependsOn) { + for (let i = 0; i < dependsOn.length; i++) { + enabled = enabled && settings.getIn(dependsOn[i]); + } + } + if (dependsOnNot) { + for (let i = 0; i < dependsOnNot.length; i++) { + enabled = enabled && !settings.getIn(dependsOnNot[i]); + } + } + + if (options && options.length > 0) { + const currentValue = settings.getIn(item); + const optionElems = options && options.length > 0 && options.map((opt) => ( + + )); + return ( + + ); + } else return ( + + ); + } + +} diff --git a/app/javascript/glitch/components/local_settings/page/item/style.scss b/app/javascript/glitch/components/local_settings/page/item/style.scss new file mode 100644 index 000000000..e614030c0 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/page/item/style.scss @@ -0,0 +1,7 @@ +@import 'variables'; + +.glitch.local-settings__page__item { + select { + margin-bottom: 5px; + } +} diff --git a/app/javascript/glitch/components/local_settings/page/style.scss b/app/javascript/glitch/components/local_settings/page/style.scss new file mode 100644 index 000000000..7269056c3 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/page/style.scss @@ -0,0 +1,9 @@ +@import 'variables'; + +.glitch.local-settings__page { + display: block; + flex: auto; + padding: 15px 20px 15px 20px; + width: 360px; + overflow-y: auto; +} diff --git a/app/javascript/glitch/components/local_settings/style.scss b/app/javascript/glitch/components/local_settings/style.scss new file mode 100644 index 000000000..6f7fcbaa4 --- /dev/null +++ b/app/javascript/glitch/components/local_settings/style.scss @@ -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; + } +} diff --git a/app/javascript/glitch/components/settings/container.js b/app/javascript/glitch/components/settings/container.js deleted file mode 100644 index 5dfe228c0..000000000 --- a/app/javascript/glitch/components/settings/container.js +++ /dev/null @@ -1,27 +0,0 @@ -// Package imports // -import { connect } from 'react-redux'; - -// Mastodon imports // -import { closeModal } from 'mastodon/actions/modal'; - -// Our imports // -import { changeLocalSetting } from 'glitch/actions/local_settings'; -import Settings from 'glitch/components/settings'; - -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)); - }, - onClose () { - dispatch(closeModal()); - }, -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Settings); diff --git a/app/javascript/glitch/components/settings/index.js b/app/javascript/glitch/components/settings/index.js deleted file mode 100644 index ab2e0fb87..000000000 --- a/app/javascript/glitch/components/settings/index.js +++ /dev/null @@ -1,224 +0,0 @@ -// Package imports -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; - -// Our imports -import SettingsItem from './item'; - -// Stylesheet imports -import './style'; - -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 -export default class Settings 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, - }; - - state = { - currentIndex: 0, - }; - - General = () => { - const { intl } = this.props; - return ( -
-

- - - - - - - - -
- ); - } - - CollapsedStatuses = () => { - return ( -
-

- - - -
-

- - - - - - - - - - - - - - - -
-
-

- - - - - - -
-
- ); - } - - Media = () => { - return ( -
-

- - - - - - -
- ); - } - - navigateTo = (e) => - this.setState({ currentIndex: +e.currentTarget.getAttribute('data-mastodon-navigation_index') }); - - render () { - - const { General, CollapsedStatuses, Media, navigateTo } = this; - const { onClose } = this.props; - const { currentIndex } = this.state; - - return ( -
- - - -
- { - [ - , - , - , - ][currentIndex] || - } -
- -
- ); - } - -} diff --git a/app/javascript/glitch/components/settings/item.js b/app/javascript/glitch/components/settings/item.js deleted file mode 100644 index 4c67cc2ac..000000000 --- a/app/javascript/glitch/components/settings/item.js +++ /dev/null @@ -1,79 +0,0 @@ -// Package imports // -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; - -export default class SettingsItem 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, - })), - dependsOn: PropTypes.array, - dependsOnNot: PropTypes.array, - children: PropTypes.element.isRequired, - onChange: PropTypes.func.isRequired, - }; - - handleChange = (e) => { - const { item, onChange } = this.props; - onChange(item, e); - } - - render () { - const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props; - let enabled = true; - - if (dependsOn) { - for (let i = 0; i < dependsOn.length; i++) { - enabled = enabled && settings.getIn(dependsOn[i]); - } - } - if (dependsOnNot) { - for (let i = 0; i < dependsOnNot.length; i++) { - enabled = enabled && !settings.getIn(dependsOnNot[i]); - } - } - - if (options && options.length > 0) { - const currentValue = settings.getIn(item); - const optionElems = options && options.length > 0 && options.map((opt) => ( - - )); - return ( - - ); - } else { - return ( - - ); - } - } - -} diff --git a/app/javascript/glitch/components/settings/style.scss b/app/javascript/glitch/components/settings/style.scss deleted file mode 100644 index 48cc37984..000000000 --- a/app/javascript/glitch/components/settings/style.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file -- cgit