Remove test data, load messages from backend
parent
07621b0d5a
commit
243599601c
|
|
@ -38,7 +38,7 @@ var AccountFolders = module.exports = React.createClass({
|
|||
{
|
||||
var i = t.getAttribute('data-i');
|
||||
this.setState({ selected: i });
|
||||
this.props.onSelect(this, i);
|
||||
this.props.onSelect(this.props.accountIndex, i);
|
||||
}
|
||||
// FIXME: send select event + switch focus to message list if folder changed
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
const React = require('react');
|
||||
const AccountFolders = require('./AccountFolders.js');
|
||||
const DropDownButton = require('./DropDownButton.js');
|
||||
const Store = require('./Store.js');
|
||||
|
||||
var FolderList = module.exports = React.createClass({
|
||||
render: function()
|
||||
|
|
@ -15,8 +16,8 @@ var FolderList = module.exports = React.createClass({
|
|||
</div>
|
||||
// TODO: keyboard navigation
|
||||
<div className="listview" tabIndex="1">
|
||||
{this.props.accounts.map(function(account) {
|
||||
return <AccountFolders key={'a'+account.accountId} onSelect={self.onSelectFolder} {...account} />
|
||||
{this.props.accounts.map(function(account, i) {
|
||||
return <AccountFolders key={'a'+account.accountId} accountIndex={i} onSelect={self.onSelectFolder} {...account} />
|
||||
})}
|
||||
</div>
|
||||
<div className="progress-bar" ref="pbar">
|
||||
|
|
@ -27,11 +28,15 @@ var FolderList = module.exports = React.createClass({
|
|||
</div>
|
||||
</div>
|
||||
},
|
||||
onSelectFolder: function(folders, i)
|
||||
onSelectFolder: function(accIndex, folderIndex)
|
||||
{
|
||||
if (this.prevSelected && this.prevSelected != folders)
|
||||
var acc = this.props.accounts[accIndex];
|
||||
var folder = this.props.accounts[accIndex].folders[folderIndex];
|
||||
if (folder.folderId)
|
||||
Store.loadFolder(folder.folderId);
|
||||
if (this.prevSelected && this.prevSelected != accIndex)
|
||||
this.prevSelected.setState({ selected: -1 });
|
||||
this.prevSelected = folders;
|
||||
this.prevSelected = accIndex;
|
||||
},
|
||||
getInitialState: function()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ var MessageInList = React.createClass({
|
|||
<div className="subject" style={{ paddingLeft: (20+10*(msg.level||0)) }}>{msg.subject}</div>
|
||||
{msg.thread && this.props.threads ? <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>
|
||||
<div className="size">{Util.formatBytes(msg.size)}</div>
|
||||
<div className="from" style={{ left: (21+10*(msg.level||0)) }}>{(msg.sent || msg.outgoing ? 'To '+(msg.to_name||msg.to_email) : (msg.from_name||msg.from_email))}</div>
|
||||
<div className="size">{Util.formatBytes(msg.size||0)}</div>
|
||||
<div className="attach" style={msg.attach ? null : { display: 'none' }}></div>
|
||||
<div className="time">{Util.formatDate(msg.time)}</div>
|
||||
</div>
|
||||
|
|
@ -157,15 +157,15 @@ 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" hidden={this.props.layout == 'message-on-right'}
|
||||
title="Settings for this folder" icon="config" />
|
||||
<DropDownButton dropdownId="settings" className="settings" whole="1" hidden={self.props.layout == 'message-on-right'}
|
||||
title="Settings for self folder" icon="config" />
|
||||
<DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
|
||||
title="Sorting settings" icon="list_sort" />
|
||||
<div className="clear"></div>
|
||||
</div>
|
||||
<div ref="scroll" className="listview" tabIndex="1" onScroll={this.changeFirstDay} onKeyDown={this.onListKeyDown}>
|
||||
<div ref="title" className="day first-day" style={{ top: this.state.firstDayTop }}>{this.state.firstDay}</div>
|
||||
{(this.props.groups||[]).map(function(grp, i) {
|
||||
<div ref="scroll" className="listview" tabIndex="1" onScroll={self.changeFirstDay} onKeyDown={self.onListKeyDown}>
|
||||
<div ref="title" className="day first-day" style={{ top: self.state.firstDayTop }}>{self.state.firstDay}</div>
|
||||
{(self.props.groups||[]).map(function(grp, i) {
|
||||
if (i > 0)
|
||||
total++;
|
||||
var start = total+(self.state.firstGrp == i ? self.state.firstMsg : 0);
|
||||
|
|
@ -181,9 +181,9 @@ var MessageList = React.createClass({
|
|||
self.getMessages(grp,
|
||||
self.state.firstGrp == i ? self.state.firstMsg : 0,
|
||||
self.state.lastGrp == i ? self.state.lastMsg+1 : grp.messageCount
|
||||
).map((msg, j) => (msg
|
||||
).map(function(msg, j) { return (msg
|
||||
? [
|
||||
<MessageInList threads={this.props.threads} msg={msg} i={start+j} selected={self.isSelected(start+j)} onClick={self.onListItemClick} />,
|
||||
<MessageInList threads={self.props.threads} msg={msg} i={start+j} selected={self.isSelected(start+j)} onClick={self.onListItemClick} />,
|
||||
/*(msg.thread && Store.threads ?
|
||||
<div className="thread">
|
||||
{msg.thread.map(reply => <MessageInList msg={reply} i={0} onClick={self.onListItemClick} />)}
|
||||
|
|
@ -191,7 +191,7 @@ var MessageList = React.createClass({
|
|||
: null)*/
|
||||
]
|
||||
: <div data-i={start+j} className={'message'+(self.isSelected(start+j) ? ' selected' : '')} onMouseDown={self.onListItemClick}></div>
|
||||
)),
|
||||
); }),
|
||||
(self.state.lastGrp == i
|
||||
? <div className="placeholder" style={{ height: itemH*(grp.messageCount-self.state.lastMsg-1) }}></div>
|
||||
: null)
|
||||
|
|
|
|||
|
|
@ -47,24 +47,24 @@ var MessageView = React.createClass({
|
|||
<div className="header-table">
|
||||
<div className="header">
|
||||
<div className="field">From</div>
|
||||
<div className="value"><a className="button">{msg.from+' <'+msg.fromEmail+'>'}</a></div>
|
||||
<div className="value"><a className="button">{msg.from_name+' <'+msg.from_email+'>'}</a></div>
|
||||
</div>
|
||||
<div className="header">
|
||||
<div className="field">To</div>
|
||||
<div className="value"><a className="button">{msg.to}</a></div>
|
||||
<div className="value"><a className="button">{msg.to_list}</a></div>
|
||||
</div>
|
||||
{msg.cc ?
|
||||
{msg.cc_list ?
|
||||
<div className="header">
|
||||
<div className="field">Cc</div>
|
||||
<div className="value">
|
||||
{msg.cc.map(cc => <a className="button">{cc}</a>)}
|
||||
{[ msg.cc_list ].map(cc => <a className="button">{cc}</a>)}
|
||||
</div>
|
||||
</div>
|
||||
: null}
|
||||
{msg.replyto ?
|
||||
{msg.replyto_email ?
|
||||
<div className="header">
|
||||
<div className="field">Reply-to</div>
|
||||
<div className="value"><a className="button">{msg.replyto}</a></div>
|
||||
<div className="value"><a className="button">{msg.replyto_name+' <'+msg.replyto_email+'>'}</a></div>
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
|
|
@ -76,7 +76,7 @@ var MessageView = React.createClass({
|
|||
<label><input type="checkbox" /> Always load from {msg.from}</label>
|
||||
</div>
|
||||
: null),
|
||||
<div className="text" dangerouslySetInnerHTML={{ __html: msg.body }}></div>,
|
||||
<div className="text" dangerouslySetInnerHTML={{ __html: msg.body_html }}></div>,
|
||||
this.props.quickReply ?
|
||||
<div className="quick-reply">
|
||||
<textarea></textarea>
|
||||
|
|
|
|||
14
Store.js
14
Store.js
|
|
@ -8,6 +8,7 @@ var Store = module.exports = {
|
|||
msg: null,
|
||||
threads: false,
|
||||
accounts: [],
|
||||
messages: []
|
||||
},
|
||||
|
||||
listeners: [],
|
||||
|
|
@ -98,5 +99,18 @@ var Store = module.exports = {
|
|||
}
|
||||
Store.set('accounts', accounts);
|
||||
});
|
||||
},
|
||||
|
||||
loadFolder: function(folderId)
|
||||
{
|
||||
superagent.get('backend/messages').query({ folderId: folderId, limit: 50, offset: 0 }).end(function(err, res)
|
||||
{
|
||||
var msgs = res.body.messages;
|
||||
Store.set('listGroups', [ {
|
||||
name: 'TODAY',
|
||||
messageCount: msgs.length,
|
||||
messages: msgs
|
||||
} ]);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
42
mail.js
42
mail.js
|
|
@ -11,48 +11,6 @@ const AllDropdowns = require('./AllDropdowns.js');
|
|||
|
||||
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame;
|
||||
|
||||
var msg2 = [];
|
||||
msg2[5] = {
|
||||
subject: 'кошку хочешь?))',
|
||||
sent: true,
|
||||
from: 'Виталий Филиппов',
|
||||
fromEmail: 'vitalif@mail.ru',
|
||||
to: 'Margarita Philippova',
|
||||
time: '2016-06-14 21:24',
|
||||
body: 'к нам тут пришла какая-то и к нам в дом рвётся, симпатишная) потеряшка какая-то, но явно домашняя, не боится людей))',
|
||||
thread: [ {
|
||||
subject: 'Re: кошку хочешь?))',
|
||||
from: 'Margarita Philippova',
|
||||
fromEmail: 'philippova.marga@gmail.com',
|
||||
to: 'Виталий Филиппов',
|
||||
time: '2016-06-14 22:31',
|
||||
level: 1,
|
||||
body: 'Нет, конечно, не хочу. Я уеду в Баку, а кошка как? Уеду в Астану - а кошка как? Наташа меня Сухорукова приглашает в Барселону - а кошку куда? Я только испытала радость облегчения от того, что у меня больше нет горшочных цветов - и кошку мне? НЕт! Папику предложи - у него уже много зверья, одной кошкой больше - одной меньше - какая разница?'
|
||||
} ]
|
||||
};
|
||||
|
||||
Store.listGroups = [ {
|
||||
name: 'TODAY',
|
||||
messageCount: 10,
|
||||
messages: [ {
|
||||
subject: 'The Glossary of Happiness By Emily Anthes , May 12, 2016',
|
||||
from: 'Margarita Philippova',
|
||||
fromEmail: 'philippova.marga@gmail.com',
|
||||
to: 'Виталий Филиппов',
|
||||
time: '2016-06-20 00:11:18',
|
||||
unread: true,
|
||||
body: '<pre><a href="http://www.newyorker.com/tech/elements/the-glossary-of-happiness">http://www.newyorker.com/tech/elements/the-glossary-of-happiness</a><br />\
|
||||
<br />\
|
||||
--<br />\
|
||||
Best regards,<br />\
|
||||
Margarita Philippova</pre>'
|
||||
} ]
|
||||
}, {
|
||||
name: 'LAST WEEK',
|
||||
messageCount: 15,
|
||||
messages: msg2
|
||||
} ];
|
||||
|
||||
var AllTabs = StoreListener(TabPanel, function(data)
|
||||
{
|
||||
return { tabs: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue