From 50d3083cbddf410e9024fb59559c46e9390a5662 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 13 Nov 2016 19:08:52 +0100 Subject: Making upload button into a smaller icon button --- .../javascripts/components/actions/follow.jsx | 48 ------ .../compose/components/character_counter.jsx | 24 +++ .../features/compose/components/compose_form.jsx | 180 +++++++++++++++++++++ .../features/compose/components/drawer.jsx | 26 +++ .../features/compose/components/navigation_bar.jsx | 30 ++++ .../compose/components/reply_indicator.jsx | 57 +++++++ .../features/compose/components/upload_button.jsx | 39 +++++ .../features/compose/components/upload_form.jsx | 34 ++++ .../compose/containers/compose_form_container.jsx | 58 +++++++ .../compose/containers/navigation_container.jsx | 8 + .../compose/containers/upload_button_container.jsx | 17 ++ .../compose/containers/upload_form_container.jsx | 17 ++ .../components/features/compose/index.jsx | 9 +- .../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 --- .../javascripts/components/reducers/follow.jsx | 29 ---- .../javascripts/components/reducers/index.jsx | 2 - 27 files changed, 494 insertions(+), 638 deletions(-) delete mode 100644 app/assets/javascripts/components/actions/follow.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/character_counter.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/compose_form.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/drawer.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/navigation_bar.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/reply_indicator.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/upload_button.jsx create mode 100644 app/assets/javascripts/components/features/compose/components/upload_form.jsx create mode 100644 app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx create mode 100644 app/assets/javascripts/components/features/compose/containers/navigation_container.jsx create mode 100644 app/assets/javascripts/components/features/compose/containers/upload_button_container.jsx create mode 100644 app/assets/javascripts/components/features/compose/containers/upload_form_container.jsx 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 delete mode 100644 app/assets/javascripts/components/reducers/follow.jsx diff --git a/app/assets/javascripts/components/actions/follow.jsx b/app/assets/javascripts/components/actions/follow.jsx deleted file mode 100644 index 8eb440789..000000000 --- a/app/assets/javascripts/components/actions/follow.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import api from '../api' - -export const FOLLOW_CHANGE = 'FOLLOW_CHANGE'; -export const FOLLOW_SUBMIT_REQUEST = 'FOLLOW_SUBMIT_REQUEST'; -export const FOLLOW_SUBMIT_SUCCESS = 'FOLLOW_SUBMIT_SUCCESS'; -export const FOLLOW_SUBMIT_FAIL = 'FOLLOW_SUBMIT_FAIL'; - -export function changeFollow(text) { - return { - type: FOLLOW_CHANGE, - text: text - }; -}; - -export function submitFollow(router) { - return function (dispatch, getState) { - dispatch(submitFollowRequest()); - - api(getState).post('/api/v1/follows', { - uri: getState().getIn(['follow', 'text']) - }).then(function (response) { - dispatch(submitFollowSuccess(response.data)); - router.push(`/accounts/${response.data.id}`); - }).catch(function (error) { - dispatch(submitFollowFail(error)); - }); - }; -}; - -export function submitFollowRequest() { - return { - type: FOLLOW_SUBMIT_REQUEST - }; -}; - -export function submitFollowSuccess(account) { - return { - type: FOLLOW_SUBMIT_SUCCESS, - account: account - }; -}; - -export function submitFollowFail(error) { - return { - type: FOLLOW_SUBMIT_FAIL, - error: error - }; -}; diff --git a/app/assets/javascripts/components/features/compose/components/character_counter.jsx b/app/assets/javascripts/components/features/compose/components/character_counter.jsx new file mode 100644 index 000000000..f0c1b7c8d --- /dev/null +++ b/app/assets/javascripts/components/features/compose/components/character_counter.jsx @@ -0,0 +1,24 @@ +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 ( + + {diff} + + ); + } + +}); + +export default CharacterCounter; diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx new file mode 100644 index 000000000..ead8e0008 --- /dev/null +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -0,0 +1,180 @@ +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'; +import UploadButtonContainer from '../containers/upload_button_container'; + +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 => ; + +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 => ( +