From 50d3083cbddf410e9024fb59559c46e9390a5662 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 13 Nov 2016 19:08:52 +0100
Subject: Making upload button into a smaller icon button

---
 .../features/ui/components/character_counter.jsx   |  24 ---
 .../features/ui/components/compose_form.jsx        | 178 ---------------------
 .../components/features/ui/components/drawer.jsx   |  26 ---
 .../features/ui/components/follow_form.jsx         |  44 -----
 .../features/ui/components/navigation_bar.jsx      |  30 ----
 .../features/ui/components/reply_indicator.jsx     |  57 -------
 .../features/ui/components/upload_button.jsx       |  37 -----
 .../features/ui/components/upload_form.jsx         |  43 -----
 .../ui/containers/compose_form_container.jsx       |  58 -------
 .../ui/containers/follow_form_container.jsx        |  24 ---
 .../ui/containers/navigation_container.jsx         |   8 -
 .../ui/containers/upload_form_container.jsx        |  25 ---
 12 files changed, 554 deletions(-)
 delete mode 100644 app/assets/javascripts/components/features/ui/components/character_counter.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/components/compose_form.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/components/drawer.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/components/follow_form.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/components/navigation_bar.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/components/reply_indicator.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/components/upload_button.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/components/upload_form.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/containers/follow_form_container.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/containers/navigation_container.jsx
 delete mode 100644 app/assets/javascripts/components/features/ui/containers/upload_form_container.jsx

(limited to 'app/assets/javascripts/components/features/ui')

diff --git a/app/assets/javascripts/components/features/ui/components/character_counter.jsx b/app/assets/javascripts/components/features/ui/components/character_counter.jsx
deleted file mode 100644
index f0c1b7c8d..000000000
--- a/app/assets/javascripts/components/features/ui/components/character_counter.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-const CharacterCounter = React.createClass({
-
-  propTypes: {
-    text: React.PropTypes.string.isRequired,
-    max: React.PropTypes.number.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  render () {
-    const diff = this.props.max - this.props.text.length;
-
-    return (
-      <span style={{ fontSize: '16px', cursor: 'default' }}>
-        {diff}
-      </span>
-    );
-  }
-
-});
-
-export default CharacterCounter;
diff --git a/app/assets/javascripts/components/features/ui/components/compose_form.jsx b/app/assets/javascripts/components/features/ui/components/compose_form.jsx
deleted file mode 100644
index aef228d58..000000000
--- a/app/assets/javascripts/components/features/ui/components/compose_form.jsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import CharacterCounter from './character_counter';
-import Button from '../../../components/button';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ReplyIndicator from './reply_indicator';
-import UploadButton from './upload_button';
-import Autosuggest from 'react-autosuggest';
-import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container';
-import { debounce } from 'react-decoration';
-
-const getTokenForSuggestions = (str, caretPosition) => {
-  let word;
-
-  let left  = str.slice(0, caretPosition).search(/\S+$/);
-  let right = str.slice(caretPosition).search(/\s/);
-
-  if (right < 0) {
-    word = str.slice(left);
-  } else {
-    word = str.slice(left, right + caretPosition);
-  }
-
-  if (!word || word.trim().length < 2 || word[0] !== '@') {
-    return null;
-  }
-
-  word = word.trim().toLowerCase().slice(1);
-
-  if (word.length > 0) {
-    return word;
-  } else {
-    return null;
-  }
-};
-
-const getSuggestionValue = suggestionId => suggestionId;
-const renderSuggestion   = suggestionId => <AutosuggestAccountContainer id={suggestionId} />;
-
-const textareaStyle = {
-  display: 'block',
-  boxSizing: 'border-box',
-  width: '100%',
-  height: '100px',
-  resize: 'none',
-  border: 'none',
-  color: '#282c37',
-  padding: '10px',
-  fontFamily: 'Roboto',
-  fontSize: '14px',
-  margin: '0'
-};
-
-const renderInputComponent = inputProps => (
-  <textarea {...inputProps} placeholder='What is on your mind?'  className='compose-form__textarea' style={textareaStyle} />
-);
-
-const ComposeForm = React.createClass({
-
-  propTypes: {
-    text: React.PropTypes.string.isRequired,
-    suggestion_token: React.PropTypes.string,
-    suggestions: React.PropTypes.array,
-    is_submitting: React.PropTypes.bool,
-    is_uploading: React.PropTypes.bool,
-    in_reply_to: ImmutablePropTypes.map,
-    onChange: React.PropTypes.func.isRequired,
-    onSubmit: React.PropTypes.func.isRequired,
-    onCancelReply: React.PropTypes.func.isRequired,
-    onClearSuggestions: React.PropTypes.func.isRequired,
-    onFetchSuggestions: React.PropTypes.func.isRequired,
-    onSuggestionSelected: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  handleChange (e) {
-    if (typeof e.target.value === 'undefined' || typeof e.target.value === 'number') {
-      return;
-    }
-
-    this.props.onChange(e.target.value);
-  },
-
-  handleKeyUp (e) {
-    if (e.keyCode === 13 && e.ctrlKey) {
-      this.props.onSubmit();
-    }
-  },
-
-  handleSubmit () {
-    this.props.onSubmit();
-  },
-
-  componentDidUpdate (prevProps) {
-    if (prevProps.text !== this.props.text || prevProps.in_reply_to !== this.props.in_reply_to) {
-      const textarea = this.autosuggest.input;
-
-      if (textarea) {
-        textarea.focus();
-      }
-    }
-  },
-
-  onSuggestionsClearRequested () {
-    this.props.onClearSuggestions();
-  },
-
-  @debounce(500)
-  onSuggestionsFetchRequested ({ value }) {
-    const textarea = this.autosuggest.input;
-
-    if (textarea) {
-      const token = getTokenForSuggestions(value, textarea.selectionStart);
-
-      if (token !== null) {
-        this.props.onFetchSuggestions(token);
-      } else {
-        this.props.onClearSuggestions();
-      }
-    }
-  },
-
-  onSuggestionSelected (e, { suggestionValue }) {
-    const textarea = this.autosuggest.input;
-
-    if (textarea) {
-      this.props.onSuggestionSelected(textarea.selectionStart, suggestionValue);
-    }
-  },
-
-  setRef (c) {
-    this.autosuggest = c;
-  },
-
-  render () {
-    let replyArea  = '';
-    const disabled = this.props.is_submitting || this.props.is_uploading;
-
-    if (this.props.in_reply_to) {
-      replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />;
-    }
-
-    const inputProps = {
-      placeholder: 'What is on your mind?',
-      value: this.props.text,
-      onKeyUp: this.handleKeyUp,
-      onChange: this.handleChange,
-      disabled: disabled
-    };
-
-    return (
-      <div style={{ padding: '10px' }}>
-        {replyArea}
-
-        <Autosuggest
-          ref={this.setRef}
-          suggestions={this.props.suggestions}
-          focusFirstSuggestion={true}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          onSuggestionSelected={this.onSuggestionSelected}
-          getSuggestionValue={getSuggestionValue}
-          renderSuggestion={renderSuggestion}
-          renderInputComponent={renderInputComponent}
-          inputProps={inputProps}
-        />
-
-        <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-          <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={disabled} /></div>
-          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div>
-        </div>
-      </div>
-    );
-  }
-
-});
-
-export default ComposeForm;
diff --git a/app/assets/javascripts/components/features/ui/components/drawer.jsx b/app/assets/javascripts/components/features/ui/components/drawer.jsx
deleted file mode 100644
index d31d0e453..000000000
--- a/app/assets/javascripts/components/features/ui/components/drawer.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-const style = {
-  boxSizing: 'border-box',
-  background: '#454b5e',
-  padding: '0',
-  display: 'flex',
-  flexDirection: 'column',
-  overflowY: 'auto'
-};
-
-const Drawer = React.createClass({
-
-  mixins: [PureRenderMixin],
-
-  render () {
-    return (
-      <div className='drawer' style={style}>
-        {this.props.children}
-      </div>
-    );
-  }
-
-});
-
-export default Drawer;
diff --git a/app/assets/javascripts/components/features/ui/components/follow_form.jsx b/app/assets/javascripts/components/features/ui/components/follow_form.jsx
deleted file mode 100644
index 4ba5dfc25..000000000
--- a/app/assets/javascripts/components/features/ui/components/follow_form.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import IconButton      from '../../../components/icon_button';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-const FollowForm = React.createClass({
-
-  contextTypes: {
-    router: React.PropTypes.object
-  },
-
-  propTypes: {
-    text: React.PropTypes.string.isRequired,
-    is_submitting: React.PropTypes.bool,
-    onChange: React.PropTypes.func.isRequired,
-    onSubmit: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  handleChange (e) {
-    this.props.onChange(e.target.value);
-  },
-
-  handleKeyUp (e) {
-    if (e.keyCode === 13) {
-      this.handleSubmit();
-    }
-  },
-
-  handleSubmit () {
-    this.props.onSubmit(this.context.router);
-  },
-
-  render () {
-    return (
-      <div style={{ display: 'flex', lineHeight: '20px', padding: '10px', background: '#373b4a' }}>
-        <input autoComplete='off' type='text' disabled={this.props.is_submitting} placeholder='username@domain' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='follow-form__input' style={{ flex: '1 1 auto', boxSizing: 'border-box', display: 'block', border: 'none', padding: '10px', fontFamily: 'Roboto', color: '#282c37', fontSize: '14px', margin: '0' }} />
-        <div style={{ padding: '10px', paddingRight: '0' }}><IconButton title='Follow' size={20} icon='user-plus' onClick={this.handleSubmit} disabled={this.props.is_submitting} /></div>
-      </div>
-    );
-  }
-
-});
-
-export default FollowForm;
diff --git a/app/assets/javascripts/components/features/ui/components/navigation_bar.jsx b/app/assets/javascripts/components/features/ui/components/navigation_bar.jsx
deleted file mode 100644
index d2dae141f..000000000
--- a/app/assets/javascripts/components/features/ui/components/navigation_bar.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar             from '../../../components/avatar';
-import IconButton         from '../../../components/icon_button';
-import DisplayName        from '../../../components/display_name';
-import { Link }           from 'react-router';
-
-const NavigationBar = React.createClass({
-  propTypes: {
-    account: ImmutablePropTypes.map.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  render () {
-    return (
-      <div style={{ padding: '10px', display: 'flex', cursor: 'default' }}>
-        <Link to={`/accounts/${this.props.account.get('id')}`} style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} size={40} /></Link>
-
-        <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>
-          <strong style={{ fontWeight: '500', display: 'block', color: '#fff' }}>{this.props.account.get('acct')}</strong>
-          <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}>Settings</a> · <Link to='/timelines/public' style={{ color: 'inherit', textDecoration: 'none' }}>Public timeline</Link> · <a href='/auth/sign_out' data-method='delete' style={{ color: 'inherit', textDecoration: 'none' }}>Logout</a>
-        </div>
-      </div>
-    );
-  }
-
-});
-
-export default NavigationBar;
diff --git a/app/assets/javascripts/components/features/ui/components/reply_indicator.jsx b/app/assets/javascripts/components/features/ui/components/reply_indicator.jsx
deleted file mode 100644
index 6298d3de9..000000000
--- a/app/assets/javascripts/components/features/ui/components/reply_indicator.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
-import IconButton from '../../../components/icon_button';
-import DisplayName from '../../../components/display_name';
-import emojione from 'emojione';
-
-emojione.imageType = 'png';
-emojione.sprites = false;
-emojione.imagePathPNG = '/emoji/';
-
-const ReplyIndicator = React.createClass({
-
-  contextTypes: {
-    router: React.PropTypes.object
-  },
-
-  propTypes: {
-    status: ImmutablePropTypes.map.isRequired,
-    onCancel: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  handleClick () {
-    this.props.onCancel();
-  },
-
-  handleAccountClick (e) {
-    if (e.button === 0) {
-      e.preventDefault();
-      this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
-    }
-  },
-
-  render () {
-    let content = { __html: emojione.unicodeToImage(this.props.status.get('content')) };
-
-    return (
-      <div style={{ background: '#9baec8', padding: '10px' }}>
-        <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
-          <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title='Cancel' icon='times' onClick={this.handleClick} /></div>
-
-          <a href={this.props.status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
-            <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div>
-            <DisplayName account={this.props.status.get('account')} />
-          </a>
-        </div>
-
-        <div className='reply-indicator__content' dangerouslySetInnerHTML={content} />
-      </div>
-    );
-  }
-
-});
-
-export default ReplyIndicator;
diff --git a/app/assets/javascripts/components/features/ui/components/upload_button.jsx b/app/assets/javascripts/components/features/ui/components/upload_button.jsx
deleted file mode 100644
index 9e9fc7298..000000000
--- a/app/assets/javascripts/components/features/ui/components/upload_button.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Button          from '../../../components/button';
-
-const UploadButton = React.createClass({
-
-  propTypes: {
-    disabled: React.PropTypes.bool,
-    onSelectFile: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  handleChange (e) {
-    if (e.target.files.length > 0) {
-      this.props.onSelectFile(e.target.files);
-    }
-  },
-
-  handleClick () {
-    this.refs.fileElement.click();
-  },
-
-  render () {
-    return (
-      <div>
-        <Button disabled={this.props.disabled} onClick={this.handleClick} block={true}>
-          <i className='fa fa-fw fa-photo' /> Add media
-        </Button>
-
-        <input ref='fileElement' type='file' multiple={false} onChange={this.handleChange} disabled={this.props.disabled} style={{ display: 'none' }} />
-      </div>
-    );
-  }
-
-});
-
-export default UploadButton;
diff --git a/app/assets/javascripts/components/features/ui/components/upload_form.jsx b/app/assets/javascripts/components/features/ui/components/upload_form.jsx
deleted file mode 100644
index d584e9ab7..000000000
--- a/app/assets/javascripts/components/features/ui/components/upload_form.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import UploadButton       from './upload_button';
-import IconButton         from '../../../components/icon_button';
-
-const UploadForm = React.createClass({
-
-  propTypes: {
-    media: ImmutablePropTypes.list.isRequired,
-    is_uploading: React.PropTypes.bool,
-    onSelectFile: React.PropTypes.func.isRequired,
-    onRemoveFile: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  render () {
-    let uploads = this.props.media.map(function (attachment) {
-      return (
-        <div key={attachment.get('id')} style={{ borderRadius: '4px', marginBottom: '10px' }} className='transparent-background'>
-          <div style={{ width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
-            <IconButton icon='times' title='Undo' size={36} onClick={() => this.props.onRemoveFile(attachment.get('id'))} />
-          </div>
-        </div>
-      );
-    }.bind(this));
-
-    const noMoreAllowed = (this.props.media.some(m => m.get('type') === 'video')) || (this.props.media.size > 3);
-
-    return (
-      <div style={{ marginBottom: '20px', padding: '10px', paddingTop: '0' }}>
-        <UploadButton onSelectFile={this.props.onSelectFile} disabled={this.props.is_uploading || noMoreAllowed } />
-
-        <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-          {uploads}
-        </div>
-      </div>
-    );
-  }
-
-});
-
-export default UploadForm;
diff --git a/app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx b/app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx
deleted file mode 100644
index 87bcd6b99..000000000
--- a/app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { connect } from 'react-redux';
-import ComposeForm from '../components/compose_form';
-import {
-  changeCompose,
-  submitCompose,
-  cancelReplyCompose,
-  clearComposeSuggestions,
-  fetchComposeSuggestions,
-  selectComposeSuggestion
-} from '../../../actions/compose';
-import { makeGetStatus } from '../../../selectors';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = function (state, props) {
-    return {
-      text: state.getIn(['compose', 'text']),
-      suggestion_token: state.getIn(['compose', 'suggestion_token']),
-      suggestions: state.getIn(['compose', 'suggestions']).toJS(),
-      is_submitting: state.getIn(['compose', 'is_submitting']),
-      is_uploading: state.getIn(['compose', 'is_uploading']),
-      in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to']))
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = function (dispatch) {
-  return {
-    onChange (text) {
-      dispatch(changeCompose(text));
-    },
-
-    onSubmit () {
-      dispatch(submitCompose());
-    },
-
-    onCancelReply () {
-      dispatch(cancelReplyCompose());
-    },
-
-    onClearSuggestions () {
-      dispatch(clearComposeSuggestions());
-    },
-
-    onFetchSuggestions (token) {
-      dispatch(fetchComposeSuggestions(token));
-    },
-
-    onSuggestionSelected (position, accountId) {
-      dispatch(selectComposeSuggestion(position, accountId));
-    }
-  }
-};
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(ComposeForm);
diff --git a/app/assets/javascripts/components/features/ui/containers/follow_form_container.jsx b/app/assets/javascripts/components/features/ui/containers/follow_form_container.jsx
deleted file mode 100644
index 05cfb7c1d..000000000
--- a/app/assets/javascripts/components/features/ui/containers/follow_form_container.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { connect }                    from 'react-redux';
-import FollowForm                     from '../components/follow_form';
-import { changeFollow, submitFollow } from '../../../actions/follow';
-
-const mapStateToProps = function (state, props) {
-  return {
-    text: state.getIn(['follow', 'text']),
-    is_submitting: state.getIn(['follow', 'is_submitting'])
-  };
-};
-
-const mapDispatchToProps = function (dispatch) {
-  return {
-    onChange: function (text) {
-      dispatch(changeFollow(text));
-    },
-
-    onSubmit: function (router) {
-      dispatch(submitFollow(router));
-    }
-  }
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(FollowForm);
diff --git a/app/assets/javascripts/components/features/ui/containers/navigation_container.jsx b/app/assets/javascripts/components/features/ui/containers/navigation_container.jsx
deleted file mode 100644
index 51e2513d8..000000000
--- a/app/assets/javascripts/components/features/ui/containers/navigation_container.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { connect }   from 'react-redux';
-import NavigationBar from '../components/navigation_bar';
-
-const mapStateToProps = (state, props) => ({
-  account: state.getIn(['accounts', state.getIn(['meta', 'me'])])
-});
-
-export default connect(mapStateToProps)(NavigationBar);
diff --git a/app/assets/javascripts/components/features/ui/containers/upload_form_container.jsx b/app/assets/javascripts/components/features/ui/containers/upload_form_container.jsx
deleted file mode 100644
index 6554f944f..000000000
--- a/app/assets/javascripts/components/features/ui/containers/upload_form_container.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { connect }                          from 'react-redux';
-import UploadForm                           from '../components/upload_form';
-import { uploadCompose, undoUploadCompose } from '../../../actions/compose';
-
-const mapStateToProps = function (state, props) {
-  return {
-    media: state.getIn(['compose', 'media_attachments']),
-    progress: state.getIn(['compose', 'progress']),
-    is_uploading: state.getIn(['compose', 'is_uploading'])
-  };
-};
-
-const mapDispatchToProps = function (dispatch) {
-  return {
-    onSelectFile: function (files) {
-      dispatch(uploadCompose(files));
-    },
-
-    onRemoveFile: function (media_id) {
-      dispatch(undoUploadCompose(media_id));
-    }
-  }
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(UploadForm);
-- 
cgit