Move settings popup to other button redux way

ComposeWindow.js

@@ -27,8 +27,8 @@ var ComposeWindow = React.createClass({
                         <div className="field">From</div>
                         <div className="value">
                             <select>
-                                {this.props.accounts.map((a, i) =>
-                                    <option key={'a'+i}>{'"'+a.name+'" <'+a.email+'>'}</option>
+                                {this.props.accounts.filter(a => a.accountId).map((a, i) =>
+                                    <option key={'a'+a.accountId}>{'"'+a.name+'" <'+a.email+'>'}</option>
                                 )}
                             </select>
                         </div>

DropDownBase.js

@@ -63,6 +63,10 @@ var DropDownBase = module.exports = {
     {
         ev.stopPropagation();
     },
+    isVisible: function()
+    {
+        return this.state.visible;
+    },
     hide: function()
     {
         this.setState({ visible: false });

DropDownButton.js

@@ -2,10 +2,19 @@ const React = require('react');
 const DropDownBase = require('./DropDownBase.js');
 
 var DropDownButton = module.exports = React.createClass({
+    componentWillReceiveProps: function(nextProps)
+    {
+        if (!nextProps.hidden && this.props.hidden &&
+            DropDownBase.instances[this.props.dropdownId].isVisible())
+        {
+            DropDownBase.instances[this.props.dropdownId].showAt(this.refs.btn, this.unpress);
+        }
+    },
     render: function()
     {
         return <a ref="btn" title={(this.state.checked ? this.props.checkedTitle : null) || this.props.title} onClick={this.onClickButton}
             className={'button '+(this.props.dropdownId ? 'show-dropdown ' : '')+(this.state.checked ? 'checked ' : '')+
+            (this.state.hidden ? 'hidden ' : '')+
             (this.state.pressed ? 'pressed ' : '')+(this.props.className || '')}>
             {this.props.icon ? <img src={'icons/'+(this.state.checked && this.props.checkedIcon || this.props.icon)+'.png'} /> : null}
             {this.state.checked && this.props.checkedText || this.props.text || null}

MessageList.js

@@ -157,7 +157,7 @@ var MessageList = React.createClass({
                 </div>
                 <DropDownButton dropdownId="threads" className="threads"
                     title="Show Message Thread" checkedTitle="Hide Message Thread" icon="thread" checkedIcon="thread_selected" checkable="1" />
-                <DropDownButton ref="setBtn" dropdownId="settings" className="settings" whole="1"
+                <DropDownButton dropdownId="settings" className="settings" whole="1" hidden={this.props.layout == 'message-on-right'}
                     title="Settings for this folder" icon="config" />
                 <DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
                     title="Sorting settings" icon="list_sort" />

MessageView.js

@@ -27,7 +27,7 @@ var MessageView = React.createClass({
                 <DropDownButton className="action-spam" icon="spam" checkedIcon="spam_selected" checkable="1" text="Spam" checkedText="Not Spam" />
                 <DropDownButton dropdownId="delete" className="action-delete" icon="delete" checkedIcon="delete_selected" checkable="1" text="Delete" checkedText="Undelete" />
                 <a className="button show-dropdown"><img src="icons/label.png" />Label <span className="down"></span></a>
-                <DropDownButton ref="setBtn" dropdownId="settings" whole="1" icon="config" text="Settings" />
+                <DropDownButton dropdownId="settings" whole="1" icon="config" text="Settings" hidden={this.props.layout != 'message-on-right'} />
             </div>
             <div className="nomail">
                 <div className="flex1"></div>
@@ -91,4 +91,4 @@ var MessageView = React.createClass({
     }
 });
 
-module.exports = StoreListener(MessageView, (data) => { return { quickReply: data.quickReply, msg: data.msg }; });
+module.exports = StoreListener(MessageView, (data) => { return { layout: data.layout, quickReply: data.quickReply, msg: data.msg }; });

mail.js

@@ -72,51 +72,6 @@ var AllTabs = StoreListener(TabPanel, function(data)
     ] }
 });
 
-/*React.createClass({
-    componentDidMount: function()
-    {
-        Store.on('layout', this.setLayout);
-    },
-    componentWillUnmount: function()
-    {
-        Store.un('layout', this.setLayout);
-    },
-    setLayout: function()
-    {
-        var oldLayout = this.state.layout;
-        this.setState({ layout: Store.layout });
-        window.scrollBy(0, 0);
-        var self = this;
-        requestAnimationFrame(function()
-        {
-            var btn;
-            if (oldLayout == 'message-on-right' &&
-                Store.layout != 'message-on-right')
-            {
-                btn = self.refs.list.refs.setBtn;
-            }
-            else if (oldLayout != 'message-on-right' &&
-                Store.layout == 'message-on-right')
-            {
-                btn = self.refs.view.refs.setBtn;
-            }
-            if (btn)
-            {
-                btn.setState({ pressed: false });
-                btn.toggle();
-            }
-        });
-    },
-    getInitialState: function()
-    {
-        return { layout: Store.layout };
-    },
-    render: function()
-    {
-        return React.createElement();
-    }
-});*/
-
 ReactDOM.render(
     <div>
         {AllDropdowns()}