diff options
-rw-r--r-- | app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js | 26 |
1 files changed, 22 insertions, 4 deletions
diff --git a/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js b/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js index 0039ba52f..35a340565 100644 --- a/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js @@ -1,6 +1,11 @@ import React from 'react'; import IconButton from '../../../components/icon_button'; +const iconStyle = { + height: null, + lineHeight: '27px', +}; + export default class AdvancedOptionsDropdown extends React.PureComponent { onToggleDropdown = () => { this.setState({ open: !this.state.open }); @@ -32,18 +37,31 @@ export default class AdvancedOptionsDropdown extends React.PureComponent { render () { const { open } = this.state; - const dropdownItems = <div role='button' className='advanced-options-dropdown__option'> - <div className='advanced-options-dropdown__option__content'>test</div> - </div>; + + const options = [ + { icon: 'wifi', shortText: 'Local-only', longText: 'bla' }, + ]; + const optionElems = options.map((option) => { + return <div role='button' className='advanced-options-dropdown__option'> + <div className='advanced-options-dropdown__option__icon'> + <IconButton icon={option.icon} /> + </div> + <div className='advanced-options-dropdown__option__content'> + <strong>{option.shortText}</strong> + {option.longText} + </div> + </div>; + }); return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}> <div className='advanced-options-dropdown__value'> <IconButton className='advanced-options-dropdown__value' icon='ellipsis-h' active={open} size={18} inverted + style={iconStyle} onClick={this.onToggleDropdown} /> </div> <div className='advanced-options-dropdown__dropdown'> - {open && dropdownItems} + {optionElems} </div> </div>; } |