Reposition settings popup on layout change

master
Vitaliy Filippov 2016-06-22 00:50:07 +03:00
parent 98c031fcea
commit 116c1f2fc4
2 changed files with 33 additions and 4 deletions

View File

@ -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
{

32
mail.js
View File

@ -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',