Add option to disable swiping motions across the WebUI (#13885)
Fixes #13882
This commit is contained in:
		
							parent
							
								
									2ee7e2c5c3
								
							
						
					
					
						commit
						78e45a5285
					
				
					 12 changed files with 21 additions and 3 deletions
				
			
		| 
						 | 
				
			
			@ -43,6 +43,7 @@ class Settings::PreferencesController < Settings::BaseController
 | 
			
		|||
      :setting_display_media,
 | 
			
		||||
      :setting_expand_spoilers,
 | 
			
		||||
      :setting_reduce_motion,
 | 
			
		||||
      :setting_disable_swiping,
 | 
			
		||||
      :setting_system_font_ui,
 | 
			
		||||
      :setting_noindex,
 | 
			
		||||
      :setting_theme,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 | 
			
		|||
import IconButton from 'mastodon/components/icon_button';
 | 
			
		||||
import Icon from 'mastodon/components/icon';
 | 
			
		||||
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 { mascot } from 'mastodon/initial_state';
 | 
			
		||||
import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light';
 | 
			
		||||
| 
						 | 
				
			
			@ -436,6 +436,7 @@ class Announcements extends ImmutablePureComponent {
 | 
			
		|||
                removeReaction={this.props.removeReaction}
 | 
			
		||||
                intl={intl}
 | 
			
		||||
                selected={index === idx}
 | 
			
		||||
                disabled={disableSwiping}
 | 
			
		||||
              />
 | 
			
		||||
            ))}
 | 
			
		||||
          </ReactSwipeableViews>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -9,6 +9,7 @@ import screenHello from '../../../images/screen_hello.svg';
 | 
			
		|||
import screenFederation from '../../../images/screen_federation.svg';
 | 
			
		||||
import screenInteractions from '../../../images/screen_interactions.svg';
 | 
			
		||||
import logoTransparent from '../../../images/logo_transparent.svg';
 | 
			
		||||
import { disableSwiping } from 'mastodon/initial_state';
 | 
			
		||||
 | 
			
		||||
const FrameWelcome = ({ domain, onNext }) => (
 | 
			
		||||
  <div className='introduction__frame'>
 | 
			
		||||
| 
						 | 
				
			
			@ -171,7 +172,7 @@ class Introduction extends React.PureComponent {
 | 
			
		|||
 | 
			
		||||
    return (
 | 
			
		||||
      <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) => (
 | 
			
		||||
            <div key={i} className={classNames('introduction__frame-wrapper', { 'active': i === currentIndex })}>{page}</div>
 | 
			
		||||
          ))}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 'mastodon/initial_state';
 | 
			
		||||
 | 
			
		||||
import BundleContainer from '../containers/bundle_container';
 | 
			
		||||
import ColumnLoading from './column_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 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)}
 | 
			
		||||
        </ReactSwipeableViews>
 | 
			
		||||
      ) : (
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 | 
			
		|||
import ImageLoader from './image_loader';
 | 
			
		||||
import Icon from 'mastodon/components/icon';
 | 
			
		||||
import GIFV from 'mastodon/components/gifv';
 | 
			
		||||
import { disableSwiping } from 'mastodon/initial_state';
 | 
			
		||||
 | 
			
		||||
const messages = defineMessages({
 | 
			
		||||
  close: { id: 'lightbox.close', defaultMessage: 'Close' },
 | 
			
		||||
| 
						 | 
				
			
			@ -212,6 +213,7 @@ class MediaModal extends ImmutablePureComponent {
 | 
			
		|||
            containerStyle={containerStyle}
 | 
			
		||||
            onChangeIndex={this.handleSwipe}
 | 
			
		||||
            index={index}
 | 
			
		||||
            disabled={disableSwiping}
 | 
			
		||||
          >
 | 
			
		||||
            {content}
 | 
			
		||||
          </ReactSwipeableViews>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -25,5 +25,6 @@ export const usePendingItems = getMeta('use_pending_items');
 | 
			
		|||
export const showTrends = getMeta('trends');
 | 
			
		||||
export const title = getMeta('title');
 | 
			
		||||
export const cropImages = getMeta('crop_images');
 | 
			
		||||
export const disableSwiping = getMeta('disable_swiping');
 | 
			
		||||
 | 
			
		||||
export default initialState;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -27,6 +27,7 @@ class UserSettingsDecorator
 | 
			
		|||
    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['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['noindex']             = noindex_preference if change?('setting_noindex')
 | 
			
		||||
    user.settings['theme']               = theme_preference if change?('setting_theme')
 | 
			
		||||
| 
						 | 
				
			
			@ -88,6 +89,10 @@ class UserSettingsDecorator
 | 
			
		|||
    boolean_cast_setting 'setting_reduce_motion'
 | 
			
		||||
  end
 | 
			
		||||
 | 
			
		||||
  def disable_swiping_preference
 | 
			
		||||
    boolean_cast_setting 'setting_disable_swiping'
 | 
			
		||||
  end
 | 
			
		||||
 | 
			
		||||
  def noindex_preference
 | 
			
		||||
    boolean_cast_setting 'setting_noindex'
 | 
			
		||||
  end
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -115,6 +115,7 @@ class User < ApplicationRecord
 | 
			
		|||
           :reduce_motion, :system_font_ui, :noindex, :theme, :display_media, :hide_network,
 | 
			
		||||
           :expand_spoilers, :default_language, :aggregate_reblogs, :show_application,
 | 
			
		||||
           :advanced_layout, :use_blurhash, :use_pending_items, :trends, :crop_images,
 | 
			
		||||
           :disable_swiping,
 | 
			
		||||
           to: :settings, prefix: :setting, allow_nil: false
 | 
			
		||||
 | 
			
		||||
  attr_reader :invite_code, :sign_in_token_attempt
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -33,6 +33,7 @@ class InitialStateSerializer < ActiveModel::Serializer
 | 
			
		|||
      store[:display_media]     = object.current_account.user.setting_display_media
 | 
			
		||||
      store[:expand_spoilers]   = object.current_account.user.setting_expand_spoilers
 | 
			
		||||
      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[:use_blurhash]      = object.current_account.user.setting_use_blurhash
 | 
			
		||||
      store[:use_pending_items] = object.current_account.user.setting_use_pending_items
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -30,6 +30,7 @@
 | 
			
		|||
  .fields-group
 | 
			
		||||
    = 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_disable_swiping, as: :boolean, wrapper: :with_label
 | 
			
		||||
    = f.input :setting_system_font_ui, as: :boolean, wrapper: :with_label
 | 
			
		||||
 | 
			
		||||
  %h4= t 'appearance.toot_layout'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -136,6 +136,7 @@ en:
 | 
			
		|||
        setting_default_privacy: Posting privacy
 | 
			
		||||
        setting_default_sensitive: Always mark media as sensitive
 | 
			
		||||
        setting_delete_modal: Show confirmation dialog before deleting a toot
 | 
			
		||||
        setting_disable_swiping: Disable swiping motions
 | 
			
		||||
        setting_display_media: Media display
 | 
			
		||||
        setting_display_media_default: Default
 | 
			
		||||
        setting_display_media_hide_all: Hide all
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -26,6 +26,7 @@ defaults: &defaults
 | 
			
		|||
  expand_spoilers: false
 | 
			
		||||
  preview_sensitive_media: false
 | 
			
		||||
  reduce_motion: false
 | 
			
		||||
  disable_swiping: false
 | 
			
		||||
  show_application: true
 | 
			
		||||
  system_font_ui: false
 | 
			
		||||
  noindex: false
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue