new tootbox look and removed old doodle button files
This commit is contained in:
parent
05c63c5c99
commit
2c9123660d
|
@ -1,10 +1,15 @@
|
||||||
// Package imports //
|
// Package imports //
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
import { injectIntl, defineMessages } from 'react-intl';
|
import { injectIntl, defineMessages } from 'react-intl';
|
||||||
|
|
||||||
// Our imports //
|
// Our imports //
|
||||||
import ComposeDropdown from '../dropdown/index';
|
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...' },
|
{ 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
|
@injectIntl
|
||||||
export default class ComposeAttachOptions extends React.PureComponent {
|
@connect(mapStateToProps, mapDispatchToProps)
|
||||||
|
export default class ComposeAttachOptions extends ImmutablePureComponent {
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
intl : PropTypes.object.isRequired,
|
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 => {
|
handleItemClick = bt => {
|
||||||
const bt = e.target.datset.index;
|
if (bt === 'upload') {
|
||||||
//TODO
|
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 () {
|
render () {
|
||||||
const { intl } = this.props;
|
const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
|
||||||
|
|
||||||
const options = [
|
const options = [
|
||||||
{ icon: 'cloud-upload', text: messages.upload, name: 'upload' },
|
{ 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 optionElems = options.map((item) => {
|
||||||
|
const hdl = () => this.handleItemClick(item.name);
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
role='button'
|
role='button'
|
||||||
tabIndex='0'
|
tabIndex='0'
|
||||||
key={item.name}
|
key={item.name}
|
||||||
data-index={item.name}
|
onClick={hdl}
|
||||||
onClick={this.handleClick}
|
|
||||||
className='privacy-dropdown__option'
|
className='privacy-dropdown__option'
|
||||||
>
|
>
|
||||||
<div className='privacy-dropdown__option__icon'>
|
<div className='privacy-dropdown__option__icon'>
|
||||||
|
@ -53,19 +100,33 @@ export default class ComposeAttachOptions extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='privacy-dropdown__option__content'>
|
<div className='privacy-dropdown__option__content'>
|
||||||
<strong>{item.text}</strong>
|
<strong>{intl.formatMessage(item.text)}</strong>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ComposeDropdown
|
<div>
|
||||||
title={intl.formatMessage(messages.attach)}
|
<ComposeDropdown
|
||||||
icon='paperclip'
|
title={intl.formatMessage(messages.attach)}
|
||||||
>
|
icon='paperclip'
|
||||||
{optionElems}
|
disabled={disabled}
|
||||||
</ComposeDropdown>
|
ref={this.setDropdownRef}
|
||||||
|
>
|
||||||
|
{optionElems}
|
||||||
|
</ComposeDropdown>
|
||||||
|
<input
|
||||||
|
key={resetFileKey}
|
||||||
|
ref={this.setFileRef}
|
||||||
|
type='file'
|
||||||
|
multiple={false}
|
||||||
|
accept={acceptContentTypes.toArray().join(',')}
|
||||||
|
onChange={this.handleFileChange}
|
||||||
|
disabled={disabled}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,6 +16,7 @@ export default class ComposeDropdown extends React.PureComponent {
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
icon: PropTypes.string,
|
icon: PropTypes.string,
|
||||||
highlight: PropTypes.bool,
|
highlight: PropTypes.bool,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -39,6 +40,7 @@ export default class ComposeDropdown extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
onToggleDropdown = () => {
|
onToggleDropdown = () => {
|
||||||
|
if (this.props.disabled) return;
|
||||||
this.setState({ open: !this.state.open });
|
this.setState({ open: !this.state.open });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -48,7 +50,7 @@ export default class ComposeDropdown extends React.PureComponent {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { open } = this.state;
|
const { open } = this.state;
|
||||||
let { highlight, title, icon } = this.props;
|
let { highlight, title, icon, disabled } = this.props;
|
||||||
|
|
||||||
if (!icon) icon = 'ellipsis-h';
|
if (!icon) icon = 'ellipsis-h';
|
||||||
|
|
||||||
|
@ -56,11 +58,12 @@ export default class ComposeDropdown extends React.PureComponent {
|
||||||
<div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}>
|
<div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}>
|
||||||
<div className='advanced-options-dropdown__value'>
|
<div className='advanced-options-dropdown__value'>
|
||||||
<IconButton
|
<IconButton
|
||||||
className='advanced-options-dropdown__value'
|
className={'inverted'}
|
||||||
title={title}
|
title={title}
|
||||||
icon={icon} active={open || highlight}
|
icon={icon} active={open || highlight}
|
||||||
size={18}
|
size={18}
|
||||||
style={iconStyle}
|
style={iconStyle}
|
||||||
|
disabled={disabled}
|
||||||
onClick={this.onToggleDropdown}
|
onClick={this.onToggleDropdown}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,8 +5,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
|
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
|
||||||
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
|
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 { defineMessages, injectIntl } from 'react-intl';
|
||||||
import Collapsable from '../../../components/collapsable';
|
import Collapsable from '../../../components/collapsable';
|
||||||
import SpoilerButtonContainer from '../containers/spoiler_button_container';
|
import SpoilerButtonContainer from '../containers/spoiler_button_container';
|
||||||
|
@ -20,6 +18,7 @@ import { isMobile } from '../../../is_mobile';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import { length } from 'stringz';
|
import { length } from 'stringz';
|
||||||
import { countableText } from '../util/counter';
|
import { countableText } from '../util/counter';
|
||||||
|
import ComposeAttachOptions from '../../../../glitch/components/compose/attach_options/index';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
|
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
|
||||||
|
@ -241,12 +240,12 @@ export default class ComposeForm extends ImmutablePureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='compose-form__buttons'>
|
<div className='compose-form__buttons'>
|
||||||
<UploadButtonContainer />
|
<ComposeAttachOptions />
|
||||||
<DoodleButtonContainer />
|
|
||||||
<PrivacyDropdownContainer />
|
|
||||||
<ComposeAdvancedOptionsContainer />
|
|
||||||
<SensitiveButtonContainer />
|
<SensitiveButtonContainer />
|
||||||
|
<div className='compose-form__buttons-separator' />
|
||||||
|
<PrivacyDropdownContainer />
|
||||||
<SpoilerButtonContainer />
|
<SpoilerButtonContainer />
|
||||||
|
<ComposeAdvancedOptionsContainer />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='compose-form__publish'>
|
<div className='compose-form__publish'>
|
||||||
|
|
|
@ -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 (
|
|
||||||
<div className='compose-form__upload-button'>
|
|
||||||
<IconButton icon='pencil' title={intl.formatMessage(messages.doodle)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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);
|
|
|
@ -322,6 +322,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.compose-form__buttons-separator {
|
||||||
|
border-left: 1px solid #c3c3c3;
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.compose-form__upload-button-icon {
|
.compose-form__upload-button-icon {
|
||||||
line-height: 27px;
|
line-height: 27px;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue