Skip to content

Commit

Permalink
Use upstream's settings for CW auto-expand and column swiping (mastod…
Browse files Browse the repository at this point in the history
…on#1770)

* Use Mastodon server-side settings for automatically expanding toots with CWs

* Add modal warning about settings changes

* Use Mastodon server-side settings for disabling swiping
  • Loading branch information
ClearlyClaire authored May 15, 2022
1 parent aa08399 commit dc350be
Show file tree
Hide file tree
Showing 20 changed files with 396 additions and 24 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import escapeTextContentForBrowser from 'escape-html';
import emojify from 'flavours/glitch/util/emoji';
import { unescapeHTML } from 'flavours/glitch/util/html';
import { expandSpoilers } from 'flavours/glitch/util/initial_state';

const domParser = new DOMParser();

Expand Down
53 changes: 53 additions & 0 deletions app/javascript/flavours/glitch/actions/local_settings.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,46 @@
import { expandSpoilers, disableSwiping } from 'flavours/glitch/util/initial_state';
import { openModal } from './modal';

export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
export const LOCAL_SETTING_DELETE = 'LOCAL_SETTING_DELETE';

export function checkDeprecatedLocalSettings() {
return (dispatch, getState) => {
const local_auto_unfold = getState().getIn(['local_settings', 'content_warnings', 'auto_unfold']);
const local_swipe_to_change_columns = getState().getIn(['local_settings', 'swipe_to_change_columns']);
let changed_settings = [];

if (local_auto_unfold !== null && local_auto_unfold !== undefined) {
if (local_auto_unfold === expandSpoilers) {
dispatch(deleteLocalSetting(['content_warnings', 'auto_unfold']));
} else {
changed_settings.push('user_setting_expand_spoilers');
}
}

if (local_swipe_to_change_columns !== null && local_swipe_to_change_columns !== undefined) {
if (local_swipe_to_change_columns === !disableSwiping) {
dispatch(deleteLocalSetting(['swipe_to_change_columns']));
} else {
changed_settings.push('user_setting_disable_swiping');
}
}

if (changed_settings.length > 0) {
dispatch(openModal('DEPRECATED_SETTINGS', {
settings: changed_settings,
onConfirm: () => dispatch(clearDeprecatedLocalSettings()),
}));
}
};
};

export function clearDeprecatedLocalSettings() {
return (dispatch) => {
dispatch(deleteLocalSetting(['content_warnings', 'auto_unfold']));
dispatch(deleteLocalSetting(['swipe_to_change_columns']));
};
};

export function changeLocalSetting(key, value) {
return dispatch => {
Expand All @@ -12,6 +54,17 @@ export function changeLocalSetting(key, value) {
};
};

export function deleteLocalSetting(key) {
return dispatch => {
dispatch({
type: LOCAL_SETTING_DELETE,
key,
});

dispatch(saveLocalSettings());
};
};

// __TODO :__
// Right now `saveLocalSettings()` doesn't keep track of which user
// is currently signed in, but it might be better to give each user
Expand Down
4 changes: 4 additions & 0 deletions app/javascript/flavours/glitch/components/modal_root.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@ export default class ModalRoot extends React.PureComponent {
window.addEventListener('keyup', this.handleKeyUp, false);
window.addEventListener('keydown', this.handleKeyDown, false);
this.history = this.context.router ? this.context.router.history : createBrowserHistory();

if (this.props.children) {
this._handleModalOpen();
}
}

componentWillReceiveProps (nextProps) {
Expand Down
4 changes: 4 additions & 0 deletions app/javascript/flavours/glitch/containers/mastodon.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import UI from 'flavours/glitch/features/ui';
import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
import { hydrateStore } from 'flavours/glitch/actions/store';
import { connectUserStream } from 'flavours/glitch/actions/streaming';
import { checkDeprecatedLocalSettings } from 'flavours/glitch/actions/local_settings';
import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from 'locales';
import initialState from 'flavours/glitch/util/initial_state';
Expand All @@ -20,6 +21,9 @@ export const store = configureStore();
const hydrateAction = hydrateStore(initialState);
store.dispatch(hydrateAction);

// check for deprecated local settings
store.dispatch(checkDeprecatedLocalSettings());

// load custom emojis
store.dispatch(fetchCustomEmojis());

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
import IconButton from 'flavours/glitch/components/icon_button';
import Icon from 'flavours/glitch/components/icon';
import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
import { autoPlayGif, reduceMotion } from 'flavours/glitch/util/initial_state';
import { autoPlayGif, reduceMotion, disableSwiping } from 'flavours/glitch/util/initial_state';
import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
import { mascot } from 'flavours/glitch/util/initial_state';
import unicodeMapping from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light';
Expand Down Expand Up @@ -430,6 +430,7 @@ class Announcements extends ImmutablePureComponent {
removeReaction={this.props.removeReaction}
intl={intl}
selected={index === idx}
disabled={disableSwiping}
/>
))}
</ReactSwipeableViews>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
// Package imports
import React from 'react';
import PropTypes from 'prop-types';

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

export default class LocalSettingsPageItem extends React.PureComponent {

static propTypes = {
children: PropTypes.node.isRequired,
id: PropTypes.string.isRequired,
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
hint: PropTypes.string,
})),
value: PropTypes.any,
placeholder: PropTypes.string,
};

render () {
const { id, options, children, placeholder, value } = this.props;

if (options && options.length > 0) {
const currentValue = value;
const optionElems = options && options.length > 0 && options.map((opt) => {
let optionId = `${id}--${opt.value}`;
return (
<label htmlFor={optionId}>
<input
type='radio'
name={id}
id={optionId}
value={opt.value}
checked={currentValue === opt.value}
disabled
/>
{opt.message}
{opt.hint && <span className='hint'>{opt.hint}</span>}
</label>
);
});
return (
<div className='glitch local-settings__page__item radio_buttons'>
<fieldset>
<legend>{children}</legend>
{optionElems}
</fieldset>
</div>
);
} else if (placeholder) {
return (
<div className='glitch local-settings__page__item string'>
<label htmlFor={id}>
<p>{children}</p>
<p>
<input
id={id}
type='text'
value={value}
placeholder={placeholder}
disabled
/>
</p>
</label>
</div>
);
} else return (
<div className='glitch local-settings__page__item boolean'>
<label htmlFor={id}>
<input
id={id}
type='checkbox'
checked={value}
disabled
/>
{children}
</label>
</div>
);
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';

// Our imports
import { expandSpoilers, disableSwiping } from 'flavours/glitch/util/initial_state';
import { preferenceLink } from 'flavours/glitch/util/backend_links';
import LocalSettingsPageItem from './item';
import DeprecatedLocalSettingsPageItem from './deprecated_item';

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Expand Down Expand Up @@ -146,14 +149,28 @@ class LocalSettingsPage extends React.PureComponent {
>
<FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' />
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['swipe_to_change_columns']}
<DeprecatedLocalSettingsPageItem
id='mastodon-settings--swipe_to_change_columns'
onChange={onChange}
value={!disableSwiping}
>
<FormattedMessage id='settings.swipe_to_change_columns' defaultMessage='Allow swiping to change columns (Mobile only)' />
</LocalSettingsPageItem>
<span className='hint'>
<FormattedMessage
id='settings.deprecated_setting'
defaultMessage="This setting is now controlled from Mastodon's {settings_page_link}"
values={{
settings_page_link: (
<a href={preferenceLink('user_setting_disable_swiping')}>
<FormattedMessage
id='settings.shared_settings_link'
defaultMessage='user preferences'
/>
</a>
)
}}
/>
</span>
</DeprecatedLocalSettingsPageItem>
</section>
</div>
),
Expand Down Expand Up @@ -242,21 +259,35 @@ class LocalSettingsPage extends React.PureComponent {
({ intl, onChange, settings }) => (
<div className='glitch local-settings__page content_warnings'>
<h1><FormattedMessage id='settings.content_warnings' defaultMessage='Content warnings' /></h1>
<LocalSettingsPageItem
settings={settings}
item={['content_warnings', 'auto_unfold']}
<DeprecatedLocalSettingsPageItem
id='mastodon-settings--content_warnings-auto_unfold'
onChange={onChange}
value={expandSpoilers}
>
<FormattedMessage id='settings.enable_content_warnings_auto_unfold' defaultMessage='Automatically unfold content-warnings' />
</LocalSettingsPageItem>
<span className='hint'>
<FormattedMessage
id='settings.deprecated_setting'
defaultMessage="This setting is now controlled from Mastodon's {settings_page_link}"
values={{
settings_page_link: (
<a href={preferenceLink('user_setting_expand_spoilers')}>
<FormattedMessage
id='settings.shared_settings_link'
defaultMessage='user preferences'
/>
</a>
)
}}
/>
</span>
</DeprecatedLocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['content_warnings', 'filter']}
id='mastodon-settings--content_warnings-auto_unfold'
onChange={onChange}
dependsOn={[['content_warnings', 'auto_unfold']]}
placeholder={intl.formatMessage(messages.regexp)}
disabled={!expandSpoilers}
>
<FormattedMessage id='settings.content_warnings_filter' defaultMessage='Content warnings to not automatically unfold:' />
</LocalSettingsPageItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
})),
settings: ImmutablePropTypes.map.isRequired,
placeholder: PropTypes.string,
disabled: PropTypes.bool,
};

handleChange = e => {
Expand All @@ -33,8 +34,8 @@ export default class LocalSettingsPageItem extends React.PureComponent {

render () {
const { handleChange } = this;
const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder } = this.props;
let enabled = true;
const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
let enabled = !disabled;

if (dependsOn) {
for (let i = 0; i < dependsOn.length; i++) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import ReactSwipeableViews from 'react-swipeable-views';
import TabsBar, { links, getIndex, getLink } from './tabs_bar';
import { Link } from 'react-router-dom';

import { disableSwiping } from 'flavours/glitch/util/initial_state';

import BundleContainer from '../containers/bundle_container';
import ColumnLoading from './column_loading';
import DrawerLoading from './drawer_loading';
Expand Down Expand Up @@ -63,7 +65,6 @@ class ColumnsArea extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
columns: ImmutablePropTypes.list.isRequired,
swipeToChangeColumns: PropTypes.bool,
singleColumn: PropTypes.bool,
children: PropTypes.node,
navbarUnder: PropTypes.bool,
Expand Down Expand Up @@ -210,7 +211,7 @@ class ColumnsArea extends ImmutablePureComponent {
}

render () {
const { columns, children, singleColumn, swipeToChangeColumns, intl, navbarUnder, openSettings } = this.props;
const { columns, children, singleColumn, intl, navbarUnder, openSettings } = this.props;
const { shouldAnimate, renderComposePanel } = this.state;

const columnIndex = getIndex(this.context.router.history.location.pathname);
Expand All @@ -219,7 +220,7 @@ class ColumnsArea extends ImmutablePureComponent {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/publish' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;

const content = columnIndex !== -1 ? (
<ReactSwipeableViews key='content' hysteresis={0.2} threshold={15} index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }} disabled={!swipeToChangeColumns}>
<ReactSwipeableViews key='content' hysteresis={0.2} threshold={15} index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }} disabled={disableSwiping}>
{links.map(this.renderView)}
</ReactSwipeableViews>
) : (
Expand Down
Loading

0 comments on commit dc350be

Please sign in to comment.