Further improvements to dropdown html

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>;
   }