Merge upstream 2.0ish #165

2017-10-11 10:43:10 -07:00
parent f0a2a6c875 476e79b8e3
commit 8d6b9ba494
322 changed files with 8478 additions and 2587 deletions
--- a/app/javascript/mastodon/features/ui/components/column_link.js
+++ b/app/javascript/mastodon/features/ui/components/column_link.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from 'react-router-dom/Link';
+import { Link } from 'react-router-dom';

 const ColumnLink = ({ icon, text, to, onClick, href, method }) => {
  if (href) {
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -29,7 +29,7 @@ export default class MediaModal extends ImmutablePureComponent {
  };

  handleSwipe = (index) => {
-    this.setState({ index: (index) % this.props.media.size });
+    this.setState({ index: index % this.props.media.size });
  }

  handleNextClick = () => {
@@ -40,6 +40,11 @@ export default class MediaModal extends ImmutablePureComponent {
    this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size });
  }

+  handleChangeIndex = (e) => {
+    const index = Number(e.currentTarget.getAttribute('data-index'));
+    this.setState({ index: index % this.props.media.size });
+  }
+
  handleKeyUp = (e) => {
    switch(e.key) {
    case 'ArrowLeft':
@@ -67,33 +72,51 @@ export default class MediaModal extends ImmutablePureComponent {
    const { media, intl, onClose } = this.props;

    const index = this.getIndex();
+    let pagination = [];

    const leftNav  = media.size > 1 && <button tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><i className='fa fa-fw fa-chevron-left' /></button>;
    const rightNav = media.size > 1 && <button tabIndex='0' className='modal-container__nav  modal-container__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><i className='fa fa-fw fa-chevron-right' /></button>;

+    if (media.size > 1) {
+      pagination = media.map((item, i) => {
+        const classes = ['media-modal__button'];
+        if (i === index) {
+          classes.push('media-modal__button--active');
+        }
+        return (<li className='media-modal__page-dot' key={i}><button tabIndex='0' className={classes.join(' ')} onClick={this.handleChangeIndex} data-index={i}>{i + 1}</button></li>);
+      });
+    }
+
    const content = media.map((image) => {
      const width  = image.getIn(['meta', 'original', 'width']) || null;
      const height = image.getIn(['meta', 'original', 'height']) || null;

      if (image.get('type') === 'image') {
-        return <ImageLoader previewSrc={image.get('preview_url')} src={image.get('url')} width={width} height={height} key={image.get('preview_url')} />;
+        return <ImageLoader previewSrc={image.get('preview_url')} src={image.get('url')} width={width} height={height} alt={image.get('description')} key={image.get('preview_url')} />;
      } else if (image.get('type') === 'gifv') {
-        return <ExtendedVideoPlayer src={image.get('url')} muted controls={false} width={width} height={height} key={image.get('preview_url')} />;
+        return <ExtendedVideoPlayer src={image.get('url')} muted controls={false} width={width} height={height} key={image.get('preview_url')} alt={image.get('description')} />;
      }

      return null;
    }).toArray();

+    const containerStyle = {
+      alignItems: 'center', // center vertically
+    };
+
    return (
      <div className='modal-root__modal media-modal'>
        {leftNav}

        <div className='media-modal__content'>
          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
-          <ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index} animateHeight>
+          <ReactSwipeableViews containerStyle={containerStyle} onChangeIndex={this.handleSwipe} index={index}>
            {content}
          </ReactSwipeableViews>
        </div>
+        <ul className='media-modal__pagination'>
+          {pagination}
+        </ul>

        {rightNav}
      </div>
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import TransitionMotion from 'react-motion/lib/TransitionMotion';
-import spring from 'react-motion/lib/spring';
 import BundleContainer from '../containers/bundle_container';
 import BundleModalError from './bundle_modal_error';
 import ModalLoading from './modal_loading';
@@ -39,6 +37,10 @@ export default class ModalRoot extends React.PureComponent {
    onClose: PropTypes.func.isRequired,
  };

+  state = {
+    revealed: false,
+  };
+
  handleKeyUp = (e) => {
    if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
         && !!this.props.type) {
@@ -55,6 +57,8 @@ export default class ModalRoot extends React.PureComponent {
      this.activeElement = document.activeElement;

      this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
+    } else if (!nextProps.type) {
+      this.setState({ revealed: false });
    }
  }

@@ -64,6 +68,11 @@ export default class ModalRoot extends React.PureComponent {
      this.activeElement.focus();
      this.activeElement = null;
    }
+    if (this.props.type) {
+      requestAnimationFrame(() => {
+        this.setState({ revealed: true });
+      });
+    }
  }

  componentWillUnmount () {
@@ -78,14 +87,6 @@ export default class ModalRoot extends React.PureComponent {
    this.node = ref;
  }

-  willEnter () {
-    return { opacity: 0, scale: 0.98 };
-  }
-
-  willLeave () {
-    return { opacity: spring(0), scale: spring(0.98) };
-  }
-
  renderLoading = modalId => () => {
    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
  }
@@ -98,38 +99,30 @@ export default class ModalRoot extends React.PureComponent {

  render () {
    const { type, props, onClose } = this.props;
+    const { revealed } = this.state;
    const visible = !!type;
-    const items = [];

-    if (visible) {
-      items.push({
-        key: type,
-        data: { type, props },
-        style: { opacity: spring(1), scale: spring(1, { stiffness: 120, damping: 14 }) },
-      });
+    if (!visible) {
+      return (
+        <div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
+      );
    }

    return (
-      <TransitionMotion
-        styles={items}
-        willEnter={this.willEnter}
-        willLeave={this.willLeave}
-      >
-        {interpolatedStyles =>
-          <div className='modal-root' ref={this.setRef}>
-            {interpolatedStyles.map(({ key, data: { type, props }, style }) => (
-              <div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
-                <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
-                <div role='dialog' className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
-                  <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
-                    {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
-                  </BundleContainer>
-                </div>
-              </div>
-            ))}
+      <div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
+        <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
+          <div role='presentation' className='modal-root__overlay' onClick={onClose} />
+          <div role='dialog' className='modal-root__container'>
+            {
+              visible ?
+                (<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
+                  {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
+                </BundleContainer>) :
+              null
+            }
          </div>
-        }
-      </TransitionMotion>
+        </div>
+      </div>
    );
  }

--- a/app/javascript/mastodon/features/ui/components/tabs_bar.js
+++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import NavLink from 'react-router-dom/NavLink';
+import { NavLink } from 'react-router-dom';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { debounce } from 'lodash';
 import { isUserTouching } from '../../../is_mobile';
--- a/app/javascript/mastodon/features/ui/components/video_modal.js
+++ b/app/javascript/mastodon/features/ui/components/video_modal.js
@@ -23,6 +23,7 @@ export default class VideoModal extends ImmutablePureComponent {
            src={media.get('url')}
            startTime={time}
            onCloseVideo={onClose}
+            description={media.get('description')}
          />
        </div>
      </div>