about summary refs log tree commit diff
diff options
context:
space:
mode:
authorSurinna Curtis <ekiru.0@gmail.com>2017-06-29 23:45:09 -0500
committerGô Shoemake <marrus-sh@users.noreply.github.com>2017-07-04 21:33:53 -0700
commitdd49c10cdb67fd7221cc48f9adeaa1d30ae36a6b (patch)
tree6cb70bd8b091e74afc06261e5c6162eeeb357284
parent85d5249479e8d30061082b4f2a805446fe472e88 (diff)
Further improvements to dropdown html
-rw-r--r--app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js26
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>;
   }