From 595c6de32c052f2a5e21307a0e43a6bd5d4b5c88 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 28 Jun 2017 22:00:54 -0700 Subject: [PATCH] Added App Setttings Modal --- .../mastodon/actions/local_settings.js | 2 +- app/javascript/mastodon/components/status.js | 40 +++- .../mastodon/containers/mastodon.js | 4 +- .../mastodon/containers/status_container.js | 1 + .../mastodon/features/compose/index.js | 11 +- .../features/getting_started/index.js | 50 +++-- .../notifications/components/notification.js | 15 +- .../containers/notification_container.js | 1 + .../features/ui/components/column_link.js | 12 +- .../features/ui/components/modal_root.js | 2 + .../features/ui/components/settings_modal.js | 212 ++++++++++++++++++ .../ui/containers/settings_modal_container.js | 19 ++ app/javascript/mastodon/features/ui/index.js | 8 +- .../mastodon/locales/defaultMessages.json | 95 ++++++-- app/javascript/mastodon/locales/en.json | 16 ++ app/javascript/mastodon/reducers/index.js | 4 +- .../mastodon/reducers/local_settings.js | 19 +- app/javascript/styles/components.scss | 130 +++++++++-- app/javascript/styles/custom.scss | 14 -- 19 files changed, 561 insertions(+), 94 deletions(-) create mode 100644 app/javascript/mastodon/features/ui/components/settings_modal.js create mode 100644 app/javascript/mastodon/features/ui/containers/settings_modal_container.js diff --git a/app/javascript/mastodon/actions/local_settings.js b/app/javascript/mastodon/actions/local_settings.js index 742a1eec2c..18e0c245cf 100644 --- a/app/javascript/mastodon/actions/local_settings.js +++ b/app/javascript/mastodon/actions/local_settings.js @@ -14,7 +14,7 @@ export function changeLocalSetting(key, value) { export function saveLocalSettings() { return (_, getState) => { - const localSettings = getState().get('localSettings').toJS(); + const localSettings = getState().get('local_settings').toJS(); localStorage.setItem('mastodon-settings', JSON.stringify(localSettings)); }; }; diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 75e8c96402..33e4a25e4f 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -25,6 +25,7 @@ export default class StatusOrReblog extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, + settings: ImmutablePropTypes.map, wrapped: PropTypes.bool, onReply: PropTypes.func, onFavourite: PropTypes.func, @@ -47,6 +48,7 @@ export default class StatusOrReblog extends ImmutablePureComponent { updateOnProps = [ 'status', 'account', + 'settings', 'wrapped', 'me', 'boostModal', @@ -97,6 +99,7 @@ class Status extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, + settings: ImmutablePropTypes.map, wrapped: PropTypes.bool, onReply: PropTypes.func, onFavourite: PropTypes.func, @@ -126,6 +129,7 @@ class Status extends ImmutablePureComponent { updateOnProps = [ 'status', 'account', + 'settings', 'wrapped', 'me', 'boostModal', @@ -140,7 +144,8 @@ class Status extends ImmutablePureComponent { ] componentWillReceiveProps (nextProps) { - if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.setState({ isCollapsed: !!nextProps.collapse }); + if (!nextProps.settings.getIn(['collapsed', 'enabled'])) this.collapse(false); + else if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.collapse(this.props.collapse); } shouldComponentUpdate (nextProps, nextState) { @@ -165,8 +170,13 @@ class Status extends ImmutablePureComponent { componentDidMount () { const node = this.node; - if (this.props.collapse !== undefined) this.setState({ isCollapsed: !!this.props.collapse }); - else if (node.clientHeight > 400) this.setState({ isCollapsed: true }); + const { collapse, settings, status } = this.props; + + if (collapse !== undefined) this.collapse(collapse); + else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse(); + else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > 400) this.collapse(); + else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse(); + else if (settings.getIn(['collapsed', 'auto', 'media']) && status.get('media_attachments').size > 0) this.collapse(); if (!this.props.intersectionObserverWrapper) { // TODO: enable IntersectionObserver optimization for notification statuses. @@ -186,6 +196,11 @@ class Status extends ImmutablePureComponent { this.componentMounted = false; } + collapse = (collapsedOrNot) => { + if (collapsedOrNot === undefined) collapsedOrNot = true; + if (this.props.settings.getIn(['collapsed', 'enabled'])) this.setState({ isCollapsed: !!collapsedOrNot }); + } + handleIntersection = (entry) => { // Edge 15 doesn't support isIntersecting, but we can infer it // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12156111/ @@ -247,20 +262,23 @@ class Status extends ImmutablePureComponent { }; handleCollapsedClick = () => { - this.setState({ isCollapsed: !this.state.isCollapsed, isExpanded: false }); + this.collapse(!this.state.isCollapsed); + this.setState({ isExpanded: false }); } render () { let media = null; let mediaType = null; - let thumb = null; let statusAvatar; // Exclude intersectionObserverWrapper from `other` variable // because intersection is managed in here. - const { status, account, intersectionObserverWrapper, intl, ...other } = this.props; + const { status, account, settings, intersectionObserverWrapper, intl, ...other } = this.props; const { isExpanded, isIntersecting, isHidden, isCollapsed } = this.state; + + let background = settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds']) ? status.getIn(['account', 'header']) : null; + if (status === null) { return null; } @@ -280,12 +298,12 @@ class Status extends ImmutablePureComponent { } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { media = ; mediaType =