Switch layout via primitive store
parent
0f38cac953
commit
98c031fcea
106
mail.js
106
mail.js
|
|
@ -26,6 +26,21 @@ function getOffset(elem)
|
|||
}
|
||||
}
|
||||
|
||||
var Store = {
|
||||
layout: 'message-on-right',
|
||||
listeners: {},
|
||||
on: function(ev, cb)
|
||||
{
|
||||
this.listeners[ev] = this.listeners[ev] || [];
|
||||
this.listeners[ev].push(cb);
|
||||
},
|
||||
setLayout: function(l)
|
||||
{
|
||||
this.layout = l;
|
||||
(this.listeners['setLayout'] || []).map(i => i());
|
||||
}
|
||||
};
|
||||
|
||||
var DropDownBase = {
|
||||
instances: {},
|
||||
componentDidMount: function()
|
||||
|
|
@ -391,14 +406,16 @@ var MailSettingsWindow = React.createClass({
|
|||
<div ref="callout" className="callout-top" style={{ left: this.state.calloutLeft }}></div>
|
||||
<div className="text">Mail Layout</div>
|
||||
<div className="layouts">
|
||||
<a className={'button mail-message-on-right'+(this.props.layout == 'r' ? ' selected' : '')} title="List and Message on Right"><span></span></a>
|
||||
<a className={'button mail-message-on-bottom'+(this.props.layout == 'b' ? ' selected' : '')} title="List and Message Below"><span></span></a>
|
||||
<a className={'button mail-message-invisible'+(this.props.layout == 'l' ? ' selected' : '')} title="List Only"><span></span></a>
|
||||
<a onClick={this.switchLayout} className={'button mail-message-on-right'+(this.state.layout == 'message-on-right' ? ' selected' : '')} title="List and Message on Right"><span></span></a>
|
||||
<a onClick={this.switchLayout} className={'button mail-message-on-bottom'+(this.state.layout == 'message-on-bottom' ? ' selected' : '')} title="List and Message Below"><span></span></a>
|
||||
<a onClick={this.switchLayout} className={'button mail-message-invisible'+(this.state.layout == 'message-invisible' ? ' selected' : '')} title="List Only"><span></span></a>
|
||||
</div>
|
||||
<div className="split"><i></i></div>
|
||||
<div className="text">Default List Sorting</div>
|
||||
<ListSortSettings className="fields" sort={this.props.defaultSorting} />
|
||||
<label><input type="checkbox" checked={this.state.showQuickReply ? 'checked' : null} onClick={this.showQuickReply} /> Show Quick Reply</label>
|
||||
<div className="fields">
|
||||
<label><input type="checkbox" checked={this.state.showQuickReply} onClick={this.showQuickReply} /> Show Quick Reply</label>
|
||||
</div>
|
||||
<div className="split"><i></i></div>
|
||||
<div className="text">Mark as Read</div>
|
||||
<div className="fields">
|
||||
|
|
@ -412,14 +429,26 @@ var MailSettingsWindow = React.createClass({
|
|||
</div>
|
||||
</div>
|
||||
},
|
||||
componentDidMount: function()
|
||||
{
|
||||
Store.on('setLayout', this.setLayout);
|
||||
},
|
||||
setLayout: function()
|
||||
{
|
||||
this.setState({ layout: Store.layout });
|
||||
},
|
||||
switchLayout: function(ev)
|
||||
{
|
||||
var t = ev.target.nodeName == 'A' ? ev.target : ev.target.parentNode;
|
||||
var l = / mail-(\S+)/.exec(t.className)[1];
|
||||
Store.setLayout(l);
|
||||
},
|
||||
getInitialState: function()
|
||||
{
|
||||
// TODO: get it from store
|
||||
return { showQuickReply: this.props.showQuickReply && true };
|
||||
return { showQuickReply: this.props.showQuickReply && true, layout: Store.layout };
|
||||
},
|
||||
showQuickReply: function()
|
||||
{
|
||||
// TODO: dispatch action instead of direct set state
|
||||
this.setState({ showQuickReply: !this.state.showQuickReply });
|
||||
}
|
||||
});
|
||||
|
|
@ -454,7 +483,6 @@ var dropdown_settings = React.createElement(
|
|||
MailSettingsWindow, {
|
||||
id: 'settings',
|
||||
window: true,
|
||||
layout: 'r',
|
||||
showQuickReply: true,
|
||||
markDelay: -1,
|
||||
defaultSorting: {
|
||||
|
|
@ -574,13 +602,6 @@ var FolderList = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
var Tab = React.createClass({
|
||||
render: function()
|
||||
{
|
||||
return <i></i>
|
||||
}
|
||||
});
|
||||
|
||||
var TabPanel = React.createClass({
|
||||
render: function()
|
||||
{
|
||||
|
|
@ -588,7 +609,7 @@ var TabPanel = React.createClass({
|
|||
var body = [];
|
||||
for (var i = 0; i < this.state.tabs.length; i++)
|
||||
{
|
||||
var t = this.state.tabs[i].props;
|
||||
var t = this.state.tabs[i];
|
||||
bar.push(
|
||||
<div key={'t'+i} className={'tab'+(i == this.state.selected ? ' selected' : '')+(t.noclose ? ' noclose' : '')}
|
||||
id={'t-tab'+i} onClick={this.switchTab} style={i == this.state.closing ? { width: '1px', padding: '0', opacity: '0' } : null}>
|
||||
|
|
@ -603,15 +624,18 @@ var TabPanel = React.createClass({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="tab-panel">
|
||||
return <div className="tab-panel">
|
||||
<div className="tab-bar">{bar}</div>
|
||||
{body}
|
||||
</div>)
|
||||
</div>
|
||||
},
|
||||
componentWillReceiveProps: function(nextProps, nextContent)
|
||||
{
|
||||
this.setState({ selected: this.state.selected % nextProps.tabs.length, tabs: nextProps.tabs });
|
||||
},
|
||||
getInitialState: function()
|
||||
{
|
||||
return { selected: 0, tabs: this.props.children.slice(0) };
|
||||
return { selected: 0, tabs: this.props.tabs };
|
||||
},
|
||||
switchTab: function(ev)
|
||||
{
|
||||
|
|
@ -775,11 +799,11 @@ 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), backgroundPosition: (10*msg.level)+'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>
|
||||
{msg.thread ? <div className={'expand'+(msg.collapsed ? '' : ' collapse')}></div> : null}
|
||||
<div className="bullet"></div>
|
||||
<div className="from" style={{ left: (21+10*msg.level) }}>{(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>
|
||||
<div className="size">{formatBytes(msg.size)}</div>
|
||||
<div className="attach" style={msg.attach ? null : { display: 'none' }}></div>
|
||||
<div className="time">{formatDate(msg.date)}</div>
|
||||
|
|
@ -985,6 +1009,39 @@ var listGroups = [ {
|
|||
} ]
|
||||
} ];
|
||||
|
||||
var AllTabs = React.createClass({
|
||||
componentDidMount: function()
|
||||
{
|
||||
Store.on('setLayout', this.setLayout);
|
||||
},
|
||||
setLayout: function()
|
||||
{
|
||||
this.setState({ layout: Store.layout });
|
||||
},
|
||||
getInitialState: function()
|
||||
{
|
||||
return { layout: Store.layout };
|
||||
},
|
||||
render: function()
|
||||
{
|
||||
return React.createElement(TabPanel, { tabs: [
|
||||
{
|
||||
className: this.state.layout,
|
||||
noclose: true,
|
||||
icon: 'mail_unread',
|
||||
title: 'Unread (64)',
|
||||
children: [ <MessageList groups={listGroups} />, <MessageView /> ]
|
||||
},
|
||||
{
|
||||
icon: 'mail_drafts',
|
||||
i16: true,
|
||||
title: 'Compose Message',
|
||||
children: <ComposeWindow accounts={composeAccounts} />
|
||||
}
|
||||
] });
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
{dropdown_account}
|
||||
|
|
@ -996,10 +1053,7 @@ ReactDOM.render(
|
|||
{dropdown_list_sort}
|
||||
{dropdown_settings}
|
||||
<FolderList accounts={accounts} progress="33" />
|
||||
<TabPanel>
|
||||
<Tab className="message-on-right" noclose="1" icon="mail_unread" title="Unread (64)"><MessageList groups={listGroups} /><MessageView /></Tab>
|
||||
<Tab icon="mail_drafts" i16="1" title="Compose Message"><ComposeWindow accounts={composeAccounts} /></Tab>
|
||||
</TabPanel>
|
||||
<AllTabs />
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue