Progress

app/javascript/gabsocial/components/divider.js

@@ -4,18 +4,20 @@ const cx = classnames.bind(_s)
 
 export default class Divider extends PureComponent {
   static propTypes = {
-    small: PropTypes.bool
+    small: PropTypes.bool,
+    invisible: PropTypes.bool,
   }
+
   render() {
-    const { small } = this.props
+    const { small, invisible } = this.props
 
     const classes = cx({
       default: 1,
-      borderBottom1PX: 1,
-      borderColorSecondary2: 1,
+      borderBottom1PX: !invisible,
+      borderColorSecondary2: !invisible,
       width100PC: 1,
       marginBottom15PX: !small,
-      marginVertical10PX: small,
+      marginVertical10PX: small || invisible,
     })
 
     return (

app/javascript/gabsocial/components/file_input.js

@@ -0,0 +1,100 @@
+import classNames from 'classnames/bind'
+import Image from './image'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default class FileInput extends PureComponent {
+  static propTypes = {
+    onChange: PropTypes.func,
+    file: PropTypes.any,
+    fileType: PropTypes.string,
+    disabled: PropTypes.bool,
+    title: PropTypes.string,
+    height: PropTypes.string,
+    width: PropTypes.string,
+  }
+
+  static defaultProps = {
+    fileType: 'image'
+  }
+
+  state = {
+    file: null,
+  }
+
+  handleOnChange = (e) => {
+    this.props.onChange(e)
+    this.setState({
+      file: URL.createObjectURL(e.target.files[0])
+    })
+  }
+
+  render() {
+    const {
+      fileType,
+      disabled,
+      title,
+      height,
+      width,
+    } = this.props
+    const { file } = this.state
+
+    const imageClasses = cx({
+      border2PX: 1,
+      borderDashed: 1,
+      borderColorSecondary: 1,
+      backgroundColorPrimary: 1,
+      paddingHorizontal10PX: 1,
+      paddingVertical10PX: 1,
+      radiusSmall: 1,
+      cursorPointer: 1,
+    })
+
+    return (
+      <div>
+        {
+          !!title &&
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+            <Text size='small' weight='medium' color='secondary'>
+              {title}
+            </Text>
+          </div>
+        }
+
+        <label
+          className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
+          htmlFor={`file-input-${title}`}
+          style={{
+            width,
+            height,
+          }}
+        >
+          <Image
+            className={imageClasses}
+            width={width}
+            height={height}
+            src={fileType === 'image' ? file : null}
+          />
+          {
+            !file &&
+            <div className={[_s.positionAbsolute, _s.cursorPointer].join(' ')}>
+              <Text size='medium' color='secondary'>
+                Click Here to Upload
+              </Text>
+            </div>
+          }
+        </label>
+
+        <input
+          id={`file-input-${title}`}
+          className={_s.displayNone}
+          disabled={disabled}
+          onChange={this.handleOnChange}
+          type='file'
+        />
+
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/input.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames/bind'
 import Icon from './icon'
+import Text from './text'
 
 const cx = classNames.bind(_s)
 
@@ -14,10 +15,22 @@ export default class Input extends PureComponent {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onClear: PropTypes.func,
+    title: PropTypes.string,
   }
 
   render() {
-    const { placeholder, prependIcon, value, hasClear, onChange, onKeyUp, onFocus, onBlur, onClear } = this.props
+    const {
+      placeholder,
+      prependIcon,
+      value,
+      hasClear,
+      onChange,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      onClear,
+      title
+    } = this.props
 
     const inputClasses = cx({
       default: 1,
@@ -35,29 +48,39 @@ export default class Input extends PureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+      <div>
         {
-          !!prependIcon &&
-          <Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
-        }
-
-        <input
-          className={inputClasses}
-          type='text'
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onKeyUp={onKeyUp}
-          onFocus={onFocus}
-          onBlur={onBlur}
-        />
-
-        {
-          hasClear &&
-          <div role='button' tabIndex='0' className={'btnClasses'} onClick={onClear}>
-            <Icon id='close' width='10px' height='10px' className={_s.fillColorWhite} aria-label='Clear' />
+          !!title &&
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+            <Text size='small' weight='medium' color='secondary'>
+              {title}
+            </Text>
           </div>
         }
+        <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+          {
+            !!prependIcon &&
+            <Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
+          }
+
+          <input
+            className={inputClasses}
+            type='text'
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onKeyUp={onKeyUp}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+
+          {
+            hasClear &&
+            <div role='button' tabIndex='0' className={'btnClasses'} onClick={onClear}>
+              <Icon id='close' width='10px' height='10px' className={_s.fillColorWhite} aria-label='Clear' />
+            </div>
+          }
+        </div>
       </div>
     )
   }

app/javascript/gabsocial/components/modal/feature_modal.js

@@ -0,0 +1,73 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage } from 'react-intl';
+import Video from '../../features/video';
+
+export const previewState = 'previewVideoModal';
+
+export default class FeatureModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    status: ImmutablePropTypes.map,
+    time: PropTypes.number,
+    onClose: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  componentDidMount () {
+    if (this.context.router) {
+      const history = this.context.router.history;
+
+      history.push(history.location.pathname, previewState);
+
+      this.unlistenHistory = history.listen(() => {
+        this.props.onClose();
+      });
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.context.router) {
+      this.unlistenHistory();
+
+      if (this.context.router.history.location.state === previewState) {
+        this.context.router.history.goBack();
+      }
+    }
+  }
+
+  handleStatusClick = e => {
+    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
+    }
+  }
+
+  render () {
+    const { media, status, time, onClose } = this.props;
+
+    const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
+
+    return (
+      <div className='modal-root__modal video-modal'>
+        <div>
+          <Video
+            preview={media.get('preview_url')}
+            blurhash={media.get('blurhash')}
+            src={media.get('url')}
+            startTime={time}
+            onCloseVideo={onClose}
+            link={link}
+            detailed
+            alt={media.get('description')}
+          />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/components/textarea.js

@@ -0,0 +1,77 @@
+import classNames from 'classnames/bind'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default class Textarea extends PureComponent {
+  static propTypes = {
+    placeholder: PropTypes.string,
+    prependIcon: PropTypes.string,
+    value: PropTypes.string,
+    hasClear: PropTypes.bool,
+    onChange: PropTypes.func,
+    onKeyUp: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onClear: PropTypes.func,
+    title: PropTypes.string,
+  }
+
+  render() {
+    const {
+      placeholder,
+      prependIcon,
+      value,
+      hasClear,
+      onChange,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      onClear,
+      title
+    } = this.props
+
+    const inputClasses = cx({
+      default: 1,
+      text: 1,
+      outlineNone: 1,
+      lineHeight125: 1,
+      displayBlock: 1,
+      paddingVertical10PX: 1,
+      backgroundTransparent: 1,
+      fontSize15PX: 1,
+      flexGrow1: 1,
+      heightMax100VH: 1,
+      resizeVertical: 1,
+      paddingHorizontal5PX: !!prependIcon,
+      paddingLeft15PX: !prependIcon,
+      paddingRight15PX: !hasClear,
+    })
+
+    return (
+      <div>
+        {
+          !!title &&
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+            <Text size='small' weight='medium' color='secondary'>
+              {title}
+            </Text>
+          </div>
+        }
+        <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.alignItemsCenter].join(' ')}>
+          <textarea
+            className={inputClasses}
+            type='text'
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onKeyUp={onKeyUp}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+
+        </div>
+      </div>
+    )
+  }
+}