Add doodle feature back (#2652)

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 (
       <div className='compose-form__upload-button'>
-        <IconButton icon='paperclip' iconComponent={PhotoLibraryIcon} title={message} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
+        <DropdownIconButton
+          icon='paperclip'
+          iconComponent={PhotoLibraryIcon}
+          title={message}
+          disabled={disabled}
+          onChange={this.handleSelect}
+          value='upload'
+          options={options}
+        />
         <label>
           <span style={{ display: 'none' }}>{message}</span>
           <input

app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 
 import { uploadCompose } from '../../../actions/compose';
+import { openModal } from '../../../actions/modal';
 import UploadButton from '../components/upload_button';
 
 const mapStateToProps = state => ({
@@ -14,6 +15,12 @@ const mapDispatchToProps = dispatch => ({
     dispatch(uploadCompose(files));
   },
 
+  onDoodleOpen() {
+    dispatch(openModal({
+      modalType: 'DOODLE',
+      modalProps: { noEsc: true, noClose: true },
+    }));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(UploadButton);

app/javascript/flavours/glitch/locales/en.json

@@ -14,6 +14,7 @@
   "column_subheading.lists": "Lists",
   "column_subheading.navigation": "Navigation",
   "community.column_settings.allow_local_only": "Show local-only toots",
+  "compose.attach.doodle": "Draw something",
   "compose.change_federation": "Change federation settings",
   "compose.content-type.change": "Change advanced formatting options",
   "compose.content-type.html": "HTML",