Fix message display for new DB structure, show message flags
parent
606865864b
commit
4ea0bdcb85
|
@ -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>
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
2
Util.js
2
Util.js
|
@ -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())
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue