Another large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate group page components.

app/javascript/gabsocial/features/compose/components/upload/index.js

@@ -0,0 +1 @@
+export { default } from './upload';

app/javascript/gabsocial/features/compose/components/upload/upload.js

@@ -0,0 +1,145 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+import classNames from 'classnames';
+import spring from 'react-motion/lib/spring';
+import Motion from '../../../ui/util/optional_motion';
+import IconButton from '../../../../components/icon_button';
+
+import './upload.scss';
+
+const messages = defineMessages({
+  description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
+  undo: { id: 'upload_form.undo', defaultMessage: 'Delete' },
+  focus: { id: 'upload_form.focus', defaultMessage: 'Crop' },
+});
+
+export default @injectIntl
+class Upload extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onUndo: PropTypes.func.isRequired,
+    onDescriptionChange: PropTypes.func.isRequired,
+    onOpenFocalPoint: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  state = {
+    hovered: false,
+    focused: false,
+    dirtyDescription: null,
+  };
+
+  handleKeyDown = (e) => {
+    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+      this.handleSubmit();
+    }
+  }
+
+  handleSubmit = () => {
+    this.handleInputBlur();
+    this.props.onSubmit(this.context.router.history);
+  }
+
+  handleUndoClick = e => {
+    e.stopPropagation();
+    this.props.onUndo(this.props.media.get('id'));
+  }
+
+  handleFocalPointClick = e => {
+    e.stopPropagation();
+    this.props.onOpenFocalPoint(this.props.media.get('id'));
+  }
+
+  handleInputChange = e => {
+    this.setState({ dirtyDescription: e.target.value });
+  }
+
+  handleMouseEnter = () => {
+    this.setState({ hovered: true });
+  }
+
+  handleMouseLeave = () => {
+    this.setState({ hovered: false });
+  }
+
+  handleInputFocus = () => {
+    this.setState({ focused: true });
+  }
+
+  handleClick = () => {
+    this.setState({ focused: true });
+  }
+
+  handleInputBlur = () => {
+    const { dirtyDescription } = this.state;
+
+    this.setState({ focused: false, dirtyDescription: null });
+
+    if (dirtyDescription !== null) {
+      this.props.onDescriptionChange(this.props.media.get('id'), dirtyDescription);
+    }
+  }
+
+  render () {
+    const { intl, media } = this.props;
+    const active          = this.state.hovered || this.state.focused;
+    const description     = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || '';
+    const focusX = media.getIn(['meta', 'focus', 'x']);
+    const focusY = media.getIn(['meta', 'focus', 'y']);
+    const x = ((focusX /  2) + .5) * 100;
+    const y = ((focusY / -2) + .5) * 100;
+
+    return (
+      <div className='compose-form-upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
+        <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
+          {({ scale }) => (
+            <div className='compose-form-upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
+              <div className={classNames('compose-form-upload__actions', { active })}>
+                <IconButton
+                  onClick={this.handleUndoClick}
+                  icon='times'
+                  title={intl.formatMessage(messages.undo)}
+                  text={intl.formatMessage(messages.undo)}
+                />
+
+                {
+                  media.get('type') === 'image' &&
+                  <IconButton
+                    onClick={this.handleFocalPointClick}
+                    icon='crosshairs'
+                    title={intl.formatMessage(messages.focus)}
+                    text={intl.formatMessage(messages.focus)}
+                  />
+                }
+              </div>
+
+              <div className={classNames('compose-form-upload__description', { active })}>
+                <label>
+                  <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
+
+                  <textarea
+                    placeholder={intl.formatMessage(messages.description)}
+                    value={description}
+                    maxLength={420}
+                    onFocus={this.handleInputFocus}
+                    onChange={this.handleInputChange}
+                    onBlur={this.handleInputBlur}
+                    onKeyDown={this.handleKeyDown}
+                  />
+                </label>
+              </div>
+            </div>
+          )}
+        </Motion>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/compose/components/upload/upload.scss

@@ -0,0 +1,78 @@
+.compose-form-upload {
+  flex: 1 1 0;
+  min-width: 40%;
+  margin: 5px;
+
+  &__actions {
+    background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+    opacity: 0;
+    transition: opacity .1s ease;
+
+    @include flex(space-between, flex-start);
+
+    .icon-button {
+      flex: 0 1 auto;
+      color: $gab-secondary-text;
+      padding: 10px;
+      font-family: inherit;
+
+      @include text-sizing(14px, 500);
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $gab-text-highlight;
+      }
+    }
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  &__description {
+    z-index: 2;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+    padding: 10px;
+    opacity: 0;
+    transition: opacity .1s ease;
+
+    @include abs-position(auto, 0, 0, 0);
+
+    textarea {
+      background: rgba(0, 0, 0, 0.3);
+      box-sizing: border-box;
+      background: transparent;
+      color: $gab-secondary-text;
+      border: 1px solid $gab-secondary-text;
+      outline: none;
+      padding: 10px;
+      margin: 0;
+      width: 100%;
+      font-family: inherit;
+
+      @include text-sizing(14px, 500);
+
+      &:focus {
+        color: #fff;
+      }
+
+      &::placeholder {
+        color: $gab-secondary-text;
+      }
+    }
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  &__thumbnail {
+    border-radius: 4px;
+    overflow: hidden;
+
+    @include size(100%, 140px);
+    @include background-image;
+  }
+}