From 116c1f2fc404455de43fde14ba7950b0ca97406a Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Wed, 22 Jun 2016 00:50:07 +0300
Subject: [PATCH] Reposition settings popup on layout change

---
 mail.css |  5 +++++
 mail.js  | 32 ++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/mail.css b/mail.css
index c32805c..e7bc11e 100644
--- a/mail.css
+++ b/mail.css
@@ -922,6 +922,11 @@ div
 	overflow: hidden;
 }
 
+.message-on-right .message-list .listview .message .subject
+{
+	padding-left: 0 !important;
+}
+
 .message-on-bottom .message-list .listview .message .subject,
 .message-invisible .message-list .listview .message .subject
 {
diff --git a/mail.js b/mail.js
index 3b7532d..80b01f9 100644
--- a/mail.js
+++ b/mail.js
@@ -1,3 +1,5 @@
+window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame;
+
 function getOffset(elem)
 {
     if (elem.getBoundingClientRect)
@@ -800,7 +802,7 @@ var MessageInList = React.createClass({
         var msg = this.props.msg;
         return <div className={'message'+(this.msgClasses.map(c => (msg[c] ? ' '+c : '')).join(''))+(msg.thread ? ' thread0' : '')}>
             <div className="icon" style={{ width: (20+10*(msg.level||0)), backgroundPosition: (10*(msg.level||0))+'px 7px' }}></div>
-            <div className="subject">{msg.subject}</div>
+            <div className="subject" style={{ paddingLeft: (20+10*(msg.level||0)) }}>{msg.subject}</div>
             {msg.thread ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null}
             <div className="bullet"></div>
             <div className="from" style={{ left: (21+10*(msg.level||0)) }}>{(msg.sent || msg.outgoing ? 'To '+msg.to : msg.from)}</div>
@@ -831,7 +833,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 dropdownId="settings" className="settings" whole="1"
+                <DropDownButton ref="setBtn" dropdownId="settings" className="settings" whole="1"
                     title="Settings for this folder" icon="config" />
                 <DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
                     title="Sorting settings" icon="list_sort" />
@@ -874,7 +876,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 dropdownId="settings" whole="1" icon="config" text="Settings" />
+                <DropDownButton ref="setBtn" dropdownId="settings" whole="1" icon="config" text="Settings" />
             </div>
             <div className="nomail">
                 <div className="flex1"></div>
@@ -1016,7 +1018,29 @@ var AllTabs = React.createClass({
     },
     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()
     {
@@ -1030,7 +1054,7 @@ var AllTabs = React.createClass({
                 noclose: true,
                 icon: 'mail_unread',
                 title: 'Unread (64)',
-                children: [ <MessageList groups={listGroups} />, <MessageView /> ]
+                children: [ <MessageList ref="list" groups={listGroups} />, <MessageView ref="view" /> ]
             },
             {
                 icon: 'mail_drafts',