Add option to disable swiping motions across the WebUI (#13885)

Fixes #13882
This commit is contained in:
ThibG 2020-09-30 19:31:03 +02:00 committed by GitHub
parent 2ee7e2c5c3
commit 78e45a5285
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 21 additions and 3 deletions

View File

@ -43,6 +43,7 @@ class Settings::PreferencesController < Settings::BaseController
:setting_display_media, :setting_display_media,
:setting_expand_spoilers, :setting_expand_spoilers,
:setting_reduce_motion, :setting_reduce_motion,
:setting_disable_swiping,
:setting_system_font_ui, :setting_system_font_ui,
:setting_noindex, :setting_noindex,
:setting_theme, :setting_theme,

View File

@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
import IconButton from 'mastodon/components/icon_button'; import IconButton from 'mastodon/components/icon_button';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
import { autoPlayGif, reduceMotion } from 'mastodon/initial_state'; import { autoPlayGif, reduceMotion, disableSwiping } from 'mastodon/initial_state';
import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg'; import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
import { mascot } from 'mastodon/initial_state'; import { mascot } from 'mastodon/initial_state';
import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light'; import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light';
@ -436,6 +436,7 @@ class Announcements extends ImmutablePureComponent {
removeReaction={this.props.removeReaction} removeReaction={this.props.removeReaction}
intl={intl} intl={intl}
selected={index === idx} selected={index === idx}
disabled={disableSwiping}
/> />
))} ))}
</ReactSwipeableViews> </ReactSwipeableViews>

View File

@ -9,6 +9,7 @@ import screenHello from '../../../images/screen_hello.svg';
import screenFederation from '../../../images/screen_federation.svg'; import screenFederation from '../../../images/screen_federation.svg';
import screenInteractions from '../../../images/screen_interactions.svg'; import screenInteractions from '../../../images/screen_interactions.svg';
import logoTransparent from '../../../images/logo_transparent.svg'; import logoTransparent from '../../../images/logo_transparent.svg';
import { disableSwiping } from 'mastodon/initial_state';
const FrameWelcome = ({ domain, onNext }) => ( const FrameWelcome = ({ domain, onNext }) => (
<div className='introduction__frame'> <div className='introduction__frame'>
@ -171,7 +172,7 @@ class Introduction extends React.PureComponent {
return ( return (
<div className='introduction'> <div className='introduction'>
<ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='introduction__pager'> <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} disabled={disableSwiping} className='introduction__pager'>
{pages.map((page, i) => ( {pages.map((page, i) => (
<div key={i} className={classNames('introduction__frame-wrapper', { 'active': i === currentIndex })}>{page}</div> <div key={i} className={classNames('introduction__frame-wrapper', { 'active': i === currentIndex })}>{page}</div>
))} ))}

View File

@ -8,6 +8,8 @@ import ReactSwipeableViews from 'react-swipeable-views';
import TabsBar, { links, getIndex, getLink } from './tabs_bar'; import TabsBar, { links, getIndex, getLink } from './tabs_bar';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { disableSwiping } from 'mastodon/initial_state';
import BundleContainer from '../containers/bundle_container'; import BundleContainer from '../containers/bundle_container';
import ColumnLoading from './column_loading'; import ColumnLoading from './column_loading';
import DrawerLoading from './drawer_loading'; import DrawerLoading from './drawer_loading';
@ -185,7 +187,7 @@ class ColumnsArea extends ImmutablePureComponent {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>; const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
const content = columnIndex !== -1 ? ( 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%' }}> <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)} {links.map(this.renderView)}
</ReactSwipeableViews> </ReactSwipeableViews>
) : ( ) : (

View File

@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import ImageLoader from './image_loader'; import ImageLoader from './image_loader';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
import GIFV from 'mastodon/components/gifv'; import GIFV from 'mastodon/components/gifv';
import { disableSwiping } from 'mastodon/initial_state';
const messages = defineMessages({ const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' }, close: { id: 'lightbox.close', defaultMessage: 'Close' },
@ -212,6 +213,7 @@ class MediaModal extends ImmutablePureComponent {
containerStyle={containerStyle} containerStyle={containerStyle}
onChangeIndex={this.handleSwipe} onChangeIndex={this.handleSwipe}
index={index} index={index}
disabled={disableSwiping}
> >
{content} {content}
</ReactSwipeableViews> </ReactSwipeableViews>

View File

@ -25,5 +25,6 @@ export const usePendingItems = getMeta('use_pending_items');
export const showTrends = getMeta('trends'); export const showTrends = getMeta('trends');
export const title = getMeta('title'); export const title = getMeta('title');
export const cropImages = getMeta('crop_images'); export const cropImages = getMeta('crop_images');
export const disableSwiping = getMeta('disable_swiping');
export default initialState; export default initialState;

View File

@ -27,6 +27,7 @@ class UserSettingsDecorator
user.settings['display_media'] = display_media_preference if change?('setting_display_media') user.settings['display_media'] = display_media_preference if change?('setting_display_media')
user.settings['expand_spoilers'] = expand_spoilers_preference if change?('setting_expand_spoilers') user.settings['expand_spoilers'] = expand_spoilers_preference if change?('setting_expand_spoilers')
user.settings['reduce_motion'] = reduce_motion_preference if change?('setting_reduce_motion') user.settings['reduce_motion'] = reduce_motion_preference if change?('setting_reduce_motion')
user.settings['disable_swiping'] = disable_swiping_preference if change?('setting_disable_swiping')
user.settings['system_font_ui'] = system_font_ui_preference if change?('setting_system_font_ui') user.settings['system_font_ui'] = system_font_ui_preference if change?('setting_system_font_ui')
user.settings['noindex'] = noindex_preference if change?('setting_noindex') user.settings['noindex'] = noindex_preference if change?('setting_noindex')
user.settings['theme'] = theme_preference if change?('setting_theme') user.settings['theme'] = theme_preference if change?('setting_theme')
@ -88,6 +89,10 @@ class UserSettingsDecorator
boolean_cast_setting 'setting_reduce_motion' boolean_cast_setting 'setting_reduce_motion'
end end
def disable_swiping_preference
boolean_cast_setting 'setting_disable_swiping'
end
def noindex_preference def noindex_preference
boolean_cast_setting 'setting_noindex' boolean_cast_setting 'setting_noindex'
end end

View File

@ -115,6 +115,7 @@ class User < ApplicationRecord
:reduce_motion, :system_font_ui, :noindex, :theme, :display_media, :hide_network, :reduce_motion, :system_font_ui, :noindex, :theme, :display_media, :hide_network,
:expand_spoilers, :default_language, :aggregate_reblogs, :show_application, :expand_spoilers, :default_language, :aggregate_reblogs, :show_application,
:advanced_layout, :use_blurhash, :use_pending_items, :trends, :crop_images, :advanced_layout, :use_blurhash, :use_pending_items, :trends, :crop_images,
:disable_swiping,
to: :settings, prefix: :setting, allow_nil: false to: :settings, prefix: :setting, allow_nil: false
attr_reader :invite_code, :sign_in_token_attempt attr_reader :invite_code, :sign_in_token_attempt

View File

@ -33,6 +33,7 @@ class InitialStateSerializer < ActiveModel::Serializer
store[:display_media] = object.current_account.user.setting_display_media store[:display_media] = object.current_account.user.setting_display_media
store[:expand_spoilers] = object.current_account.user.setting_expand_spoilers store[:expand_spoilers] = object.current_account.user.setting_expand_spoilers
store[:reduce_motion] = object.current_account.user.setting_reduce_motion store[:reduce_motion] = object.current_account.user.setting_reduce_motion
store[:disable_swiping] = object.current_account.user.setting_disable_swiping
store[:advanced_layout] = object.current_account.user.setting_advanced_layout store[:advanced_layout] = object.current_account.user.setting_advanced_layout
store[:use_blurhash] = object.current_account.user.setting_use_blurhash store[:use_blurhash] = object.current_account.user.setting_use_blurhash
store[:use_pending_items] = object.current_account.user.setting_use_pending_items store[:use_pending_items] = object.current_account.user.setting_use_pending_items

View File

@ -30,6 +30,7 @@
.fields-group .fields-group
= f.input :setting_auto_play_gif, as: :boolean, wrapper: :with_label, recommended: true = f.input :setting_auto_play_gif, as: :boolean, wrapper: :with_label, recommended: true
= f.input :setting_reduce_motion, as: :boolean, wrapper: :with_label = f.input :setting_reduce_motion, as: :boolean, wrapper: :with_label
= f.input :setting_disable_swiping, as: :boolean, wrapper: :with_label
= f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label = f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label
%h4= t 'appearance.toot_layout' %h4= t 'appearance.toot_layout'

View File

@ -136,6 +136,7 @@ en:
setting_default_privacy: Posting privacy setting_default_privacy: Posting privacy
setting_default_sensitive: Always mark media as sensitive setting_default_sensitive: Always mark media as sensitive
setting_delete_modal: Show confirmation dialog before deleting a toot setting_delete_modal: Show confirmation dialog before deleting a toot
setting_disable_swiping: Disable swiping motions
setting_display_media: Media display setting_display_media: Media display
setting_display_media_default: Default setting_display_media_default: Default
setting_display_media_hide_all: Hide all setting_display_media_hide_all: Hide all

View File

@ -26,6 +26,7 @@ defaults: &defaults
expand_spoilers: false expand_spoilers: false
preview_sensitive_media: false preview_sensitive_media: false
reduce_motion: false reduce_motion: false
disable_swiping: false
show_application: true show_application: true
system_font_ui: false system_font_ui: false
noindex: false noindex: false