diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx index caa6784cb9..ed2cbb04f2 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx @@ -7,10 +7,14 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; import PhotoLibraryIcon from '@/material-icons/400-20px/photo_library.svg?react'; -import { IconButton } from 'flavours/glitch/components/icon_button'; +import BrushIcon from '@/material-icons/400-24px/brush.svg?react'; +import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react'; + +import { DropdownIconButton } from './dropdown_icon_button'; const messages = defineMessages({ upload: { id: 'upload_button.label', defaultMessage: 'Add images, a video or an audio file' }, + doodle: { id: 'compose.attach.doodle', defaultMessage: 'Draw something' }, }); const makeMapStateToProps = () => { @@ -21,16 +25,12 @@ const makeMapStateToProps = () => { return mapStateToProps; }; -const iconStyle = { - height: null, - lineHeight: '27px', -}; - class UploadButton extends ImmutablePureComponent { static propTypes = { disabled: PropTypes.bool, onSelectFile: PropTypes.func.isRequired, + onDoodleOpen: PropTypes.func.isRequired, style: PropTypes.object, resetFileKey: PropTypes.number, acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired, @@ -43,8 +43,12 @@ class UploadButton extends ImmutablePureComponent { } }; - handleClick = () => { - this.fileElement.click(); + handleSelect = (value) => { + if (value === 'upload') { + this.fileElement.click(); + } else { + this.props.onDoodleOpen(); + } }; setRef = (c) => { @@ -56,9 +60,32 @@ class UploadButton extends ImmutablePureComponent { const message = intl.formatMessage(messages.upload); + const options = [ + { + icon: 'cloud-upload', + iconComponent: UploadFileIcon, + value: 'upload', + text: intl.formatMessage(messages.upload), + }, + { + icon: 'paint-brush', + iconComponent: BrushIcon, + value: 'doodle', + text: intl.formatMessage(messages.doodle), + }, + ]; + return (
- +