Fix message display for new DB structure, show message flags

master
Vitaliy Filippov 2016-10-05 13:52:02 +03:00
parent 606865864b
commit 4ea0bdcb85
3 changed files with 31 additions and 13 deletions

View File

@ -6,20 +6,27 @@ const StoreListener = require('./StoreListener.js');
const Util = require('./Util.js');
var MessageInList = React.createClass({
msgClasses: [ 'unread', 'unseen', 'replied', 'pinned', 'sent', 'unloaded' ],
msgClasses: { unread: 'unread', unseen: 'unseen', answered: 'replied', flagged: 'pinned', sent: 'sent' },
render: function()
{
var msg = this.props.msg;
return <div data-i={this.props.i} className={'message'+(this.msgClasses.map(c => (msg[c] ? ' '+c : '')).join(''))+
(this.props.selected ? ' selected' : '')+(msg.thread && this.props.threads ? ' thread0' : '')} onMouseDown={this.props.onClick}>
return <div data-i={this.props.i} className={'message'+
(msg.body_text || msg.body_html ? '' : ' unloaded')+
(msg.flags.map(c => (this.msgClasses[c] ? ' '+this.msgClasses[c] : '')).join(''))+
(this.props.selected ? ' selected' : '')+
(msg.thread && this.props.threads ? ' thread0' : '')} onMouseDown={this.props.onClick}>
<div className="icon" style={{ width: (20+10*(msg.level||0)), backgroundPosition: (10*(msg.level||0))+'px 7px' }}></div>
<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_name||msg.to_email) : (msg.from_name||msg.from_email))}</div>
<div className="from" style={{ left: (21+10*(msg.level||0)) }}>
{(msg.props.sent ? 'To '+(msg.props.to[0][0]||msg.props.to[0][1]) : (msg.props.from ? msg.props.from[0]||msg.props.from[1] : ''))}
</div>
<div className="size">{Util.formatBytes(msg.size||0)}</div>
<div className="attach" style={msg.attach ? null : { display: 'none' }}></div>
<div className="attach" style={msg.props.attachments && msg.props.attachments.length ? null : { display: 'none' }}></div>
<div className="time">{Util.formatDate(msg.time)}</div>
</div>
}
});

View File

@ -53,6 +53,7 @@ var MessageView = React.createClass({
});
}
}
// TODO list attachments
return <div className={'message-view'+(!msg ? ' no-mail-shown' : '')+(!this.props.quickReply ? ' no-quick' : '')}>
<div className="actions">
<DropDownButton dropdownId="reply" icon="mail_reply" text="Reply" />
@ -82,24 +83,34 @@ var MessageView = React.createClass({
<div className="header-table">
<div className="header">
<div className="field">From</div>
<div className="value"><a className="button">{msg.from_name+' <'+msg.from_email+'>'}</a></div>
<div className="value"><a className="button">{msg.props.from ? msg.props.from[0]+' <'+msg.props.from[1]+'>' : 'unknown'}</a></div>
</div>
<div className="header">
<div className="field">To</div>
<div className="value"><a className="button">{msg.to_list}</a></div>
<div className="value">
{msg.props.to.map(a => <a className="button" title={a[0] ? a[0]+' <'+a[1]+'>' : a[1]}>{a[0] || a[1]}</a>)}
</div>
</div>
{msg.cc_list ?
{msg.props.cc.length ?
<div className="header">
<div className="field">Cc</div>
<div className="value">
{[ msg.cc_list ].map(cc => <a className="button">{cc}</a>)}
{msg.props.cc.map(a => <a className="button" title={a[0] ? a[0]+' <'+a[1]+'>' : a[1]}>{a[0] || a[1]}</a>)}
</div>
</div>
: null}
{msg.replyto_email ?
{msg.props.bcc.length ?
<div className="header">
<div className="field">Bcc</div>
<div className="value">
{msg.props.bcc.map(a => <a className="button" title={a[0] ? a[0]+' <'+a[1]+'>' : a[1]}>{a[0] || a[1]}</a>)}
</div>
</div>
: null}
{msg.props.replyto ?
<div className="header">
<div className="field">Reply-to</div>
<div className="value"><a className="button">{msg.replyto_name+' <'+msg.replyto_email+'>'}</a></div>
<div className="value"><a className="button">{msg.props.replyto[0]+' <'+msg.props.replyto[1]+'>'}</a></div>
</div>
: null}
</div>
@ -108,7 +119,7 @@ var MessageView = React.createClass({
? <div className="blocked-images">
<img src="icons/block.png" /> This message contains blocked images.
<a className="button raised" onClick={this.showImages}>Load Images</a>
<label><input type="checkbox" /> Always load from {msg.from_email}</label>
{(msg.props.from ? <label><input type="checkbox" /> Always load from {msg.props.from[1]}</label> : null)}
</div>
: null),
(html

View File

@ -25,7 +25,7 @@ module.exports.formatDate = function(dt)
{
var d = dt.getDate();
var m = dt.getMonth()+1;
return (d < 10 ? '0' : '')+d+' '+(m < 10 ? '0' : '')+m+' '+dt.getFullYear();
return (d < 10 ? '0' : '')+d+'.'+(m < 10 ? '0' : '')+m+'.'+dt.getFullYear();
}
else if (dt.getTime() < tod.getTime())
{