diff --git a/app/javascript/article-form/articleForm.jsx b/app/javascript/article-form/articleForm.jsx index 55d17bdd7..b71b7701e 100644 --- a/app/javascript/article-form/articleForm.jsx +++ b/app/javascript/article-form/articleForm.jsx @@ -18,6 +18,18 @@ import Errors from './elements/errors'; import KeyboardShortcutsHandler from './elements/keyboardShortcutsHandler'; import Tags from '../shared/components/tags'; +const setupImageButton = ({ className = '', imgSrc, imgAltText = '', onClickCallback }) => { + return ( + + ) +} + export default class ArticleForm extends Component { static handleGistPreview() { const els = document.getElementsByClassName('ltag_gist-liquid-tag'); @@ -383,13 +395,12 @@ export default class ArticleForm extends Component { let moreConfigBottomButton = ''; if (version === 'v2') { moreConfigBottomButton = ( - + setupImageButton({ + className: 'articleform__detailsButton articleform__detailsButton--moreconfig articleform__detailsButton--bottom', + imgSrc: ThreeDotsIcon, + imgAltText: 'menu dots', + onClickCallback: this.toggleMoreConfig + }) ); controls = (
- - + { + setupImageButton({ + className: 'articleform__detailsButton articleform__detailsButton--image', + imgSrc: ImageUploadIcon, + imgAltText: 'Upload images', + onClickCallback: this.toggleImageManagement + }) + } + { + setupImageButton({ + className: 'articleform__detailsButton articleform__detailsButton--moreconfig', + imgSrc: ThreeDotsIcon, + imgAltText: 'Menu', + onClickCallback: this.toggleMoreConfig + }) + }
);