Reposition settings popup on layout change
parent
98c031fcea
commit
116c1f2fc4
5
mail.css
5
mail.css
|
@ -922,6 +922,11 @@ div
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-on-right .message-list .listview .message .subject
|
||||||
|
{
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.message-on-bottom .message-list .listview .message .subject,
|
.message-on-bottom .message-list .listview .message .subject,
|
||||||
.message-invisible .message-list .listview .message .subject
|
.message-invisible .message-list .listview .message .subject
|
||||||
{
|
{
|
||||||
|
|
32
mail.js
32
mail.js
|
@ -1,3 +1,5 @@
|
||||||
|
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame;
|
||||||
|
|
||||||
function getOffset(elem)
|
function getOffset(elem)
|
||||||
{
|
{
|
||||||
if (elem.getBoundingClientRect)
|
if (elem.getBoundingClientRect)
|
||||||
|
@ -800,7 +802,7 @@ var MessageInList = React.createClass({
|
||||||
var msg = this.props.msg;
|
var msg = this.props.msg;
|
||||||
return <div className={'message'+(this.msgClasses.map(c => (msg[c] ? ' '+c : '')).join(''))+(msg.thread ? ' thread0' : '')}>
|
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="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}
|
{msg.thread ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null}
|
||||||
<div className="bullet"></div>
|
<div className="bullet"></div>
|
||||||
<div className="from" style={{ left: (21+10*(msg.level||0)) }}>{(msg.sent || msg.outgoing ? 'To '+msg.to : msg.from)}</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>
|
</div>
|
||||||
<DropDownButton dropdownId="threads" className="threads"
|
<DropDownButton dropdownId="threads" className="threads"
|
||||||
title="Show Message Thread" checkedTitle="Hide Message Thread" icon="thread" checkedIcon="thread_selected" checkable="1" />
|
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" />
|
title="Settings for this folder" icon="config" />
|
||||||
<DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
|
<DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
|
||||||
title="Sorting settings" icon="list_sort" />
|
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 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" />
|
<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>
|
<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>
|
||||||
<div className="nomail">
|
<div className="nomail">
|
||||||
<div className="flex1"></div>
|
<div className="flex1"></div>
|
||||||
|
@ -1016,7 +1018,29 @@ var AllTabs = React.createClass({
|
||||||
},
|
},
|
||||||
setLayout: function()
|
setLayout: function()
|
||||||
{
|
{
|
||||||
|
var oldLayout = this.state.layout;
|
||||||
this.setState({ layout: Store.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()
|
getInitialState: function()
|
||||||
{
|
{
|
||||||
|
@ -1030,7 +1054,7 @@ var AllTabs = React.createClass({
|
||||||
noclose: true,
|
noclose: true,
|
||||||
icon: 'mail_unread',
|
icon: 'mail_unread',
|
||||||
title: 'Unread (64)',
|
title: 'Unread (64)',
|
||||||
children: [ <MessageList groups={listGroups} />, <MessageView /> ]
|
children: [ <MessageList ref="list" groups={listGroups} />, <MessageView ref="view" /> ]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'mail_drafts',
|
icon: 'mail_drafts',
|
||||||
|
|
Loading…
Reference in New Issue