From 2c9123660df2e7a336c862052c36a4bbbd194837 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Sat, 21 Oct 2017 00:44:57 +0200 Subject: [PATCH] new tootbox look and removed old doodle button files --- .../compose/attach_options/index.js | 89 ++++++++++++++++--- .../components/compose/dropdown/index.js | 7 +- .../compose/components/compose_form.js | 11 ++- .../compose/components/doodle_button.js | 41 --------- .../containers/doodle_button_container.js | 15 ---- .../styles/mastodon/components.scss | 5 ++ 6 files changed, 90 insertions(+), 78 deletions(-) delete mode 100644 app/javascript/mastodon/features/compose/components/doodle_button.js delete mode 100644 app/javascript/mastodon/features/compose/containers/doodle_button_container.js diff --git a/app/javascript/glitch/components/compose/attach_options/index.js b/app/javascript/glitch/components/compose/attach_options/index.js index d770012d7..4340972f0 100644 --- a/app/javascript/glitch/components/compose/attach_options/index.js +++ b/app/javascript/glitch/components/compose/attach_options/index.js @@ -1,10 +1,15 @@ // Package imports // import React from 'react'; import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; import { injectIntl, defineMessages } from 'react-intl'; // Our imports // import ComposeDropdown from '../dropdown/index'; +import { uploadCompose } from '../../../../mastodon/actions/compose'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { openModal } from '../../../../mastodon/actions/modal'; // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * @@ -17,21 +22,63 @@ const messages = defineMessages({ { id: 'compose.attach', defaultMessage: 'Attach...' }, }); +const mapStateToProps = state => ({ + // This horrible expression is copied from vanilla upload_button_container + disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')), + resetFileKey: state.getIn(['compose', 'resetFileKey']), + acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']), +}); + +const mapDispatchToProps = dispatch => ({ + onSelectFile (files) { + dispatch(uploadCompose(files)); + }, + onOpenDoodle () { + dispatch(openModal('DOODLE', { noEsc: true })); + }, +}); @injectIntl -export default class ComposeAttachOptions extends React.PureComponent { +@connect(mapStateToProps, mapDispatchToProps) +export default class ComposeAttachOptions extends ImmutablePureComponent { static propTypes = { intl : PropTypes.object.isRequired, + resetFileKey: PropTypes.number, + acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired, + disabled: PropTypes.bool, + onSelectFile: PropTypes.func.isRequired, + onOpenDoodle: PropTypes.func.isRequired, }; - handleClick = e => { - const bt = e.target.datset.index; - //TODO + handleItemClick = bt => { + if (bt === 'upload') { + this.fileElement.click(); + } + + if (bt === 'doodle') { + this.props.onOpenDoodle(); + } + + this.dropdown.setState({ open: false }); }; + handleFileChange = (e) => { + if (e.target.files.length > 0) { + this.props.onSelectFile(e.target.files); + } + } + + setFileRef = (c) => { + this.fileElement = c; + } + + setDropdownRef = (c) => { + this.dropdown = c; + } + render () { - const { intl } = this.props; + const { intl, resetFileKey, disabled, acceptContentTypes } = this.props; const options = [ { icon: 'cloud-upload', text: messages.upload, name: 'upload' }, @@ -39,13 +86,13 @@ export default class ComposeAttachOptions extends React.PureComponent { ]; const optionElems = options.map((item) => { + const hdl = () => this.handleItemClick(item.name); return (
@@ -53,19 +100,33 @@ export default class ComposeAttachOptions extends React.PureComponent {
- {item.text} + {intl.formatMessage(item.text)}
); }); return ( - - {optionElems} - +
+ + {optionElems} + + +
); } diff --git a/app/javascript/glitch/components/compose/dropdown/index.js b/app/javascript/glitch/components/compose/dropdown/index.js index cbae0f5a0..5f6467155 100644 --- a/app/javascript/glitch/components/compose/dropdown/index.js +++ b/app/javascript/glitch/components/compose/dropdown/index.js @@ -16,6 +16,7 @@ export default class ComposeDropdown extends React.PureComponent { title: PropTypes.string.isRequired, icon: PropTypes.string, highlight: PropTypes.bool, + disabled: PropTypes.bool, children: PropTypes.arrayOf(PropTypes.node).isRequired, }; @@ -39,6 +40,7 @@ export default class ComposeDropdown extends React.PureComponent { } onToggleDropdown = () => { + if (this.props.disabled) return; this.setState({ open: !this.state.open }); }; @@ -48,7 +50,7 @@ export default class ComposeDropdown extends React.PureComponent { render () { const { open } = this.state; - let { highlight, title, icon } = this.props; + let { highlight, title, icon, disabled } = this.props; if (!icon) icon = 'ellipsis-h'; @@ -56,11 +58,12 @@ export default class ComposeDropdown extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 17f5bde4b..4b393bf8b 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -5,8 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import ReplyIndicatorContainer from '../containers/reply_indicator_container'; import AutosuggestTextarea from '../../../components/autosuggest_textarea'; -import UploadButtonContainer from '../containers/upload_button_container'; -import DoodleButtonContainer from '../containers/doodle_button_container'; import { defineMessages, injectIntl } from 'react-intl'; import Collapsable from '../../../components/collapsable'; import SpoilerButtonContainer from '../containers/spoiler_button_container'; @@ -20,6 +18,7 @@ import { isMobile } from '../../../is_mobile'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { length } from 'stringz'; import { countableText } from '../util/counter'; +import ComposeAttachOptions from '../../../../glitch/components/compose/attach_options/index'; const messages = defineMessages({ placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, @@ -241,12 +240,12 @@ export default class ComposeForm extends ImmutablePureComponent {
- - - - + +
+ +
diff --git a/app/javascript/mastodon/features/compose/components/doodle_button.js b/app/javascript/mastodon/features/compose/components/doodle_button.js deleted file mode 100644 index 0af02458f..000000000 --- a/app/javascript/mastodon/features/compose/components/doodle_button.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import IconButton from '../../../components/icon_button'; -import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -const messages = defineMessages({ - doodle: { id: 'doodle_button.label', defaultMessage: 'Add a drawing' }, -}); - -const iconStyle = { - height: null, - lineHeight: '27px', -}; - -@injectIntl -export default class UploadButton extends ImmutablePureComponent { - - static propTypes = { - disabled: PropTypes.bool, - onOpenCanvas: PropTypes.func.isRequired, - style: PropTypes.object, - intl: PropTypes.object.isRequired, - }; - - handleClick = () => { - this.props.onOpenCanvas(); - } - - render () { - - const { intl, disabled } = this.props; - - return ( -
- -
- ); - } - -} diff --git a/app/javascript/mastodon/features/compose/containers/doodle_button_container.js b/app/javascript/mastodon/features/compose/containers/doodle_button_container.js deleted file mode 100644 index 5ada4514f..000000000 --- a/app/javascript/mastodon/features/compose/containers/doodle_button_container.js +++ /dev/null @@ -1,15 +0,0 @@ -import { connect } from 'react-redux'; -import DoodleButton from '../components/doodle_button'; -import { openModal } from '../../../actions/modal'; - -const mapStateToProps = state => ({ - disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')), -}); - -const mapDispatchToProps = dispatch => ({ - onOpenCanvas () { - dispatch(openModal('DOODLE', { noEsc: true })); - }, -}); - -export default connect(mapStateToProps, mapDispatchToProps)(DoodleButton); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6fe179581..306a0457d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -322,6 +322,11 @@ } } +.compose-form__buttons-separator { + border-left: 1px solid #c3c3c3; + margin: 0 3px; +} + .compose-form__upload-button-icon { line-height: 27px; }