114 lines
5.0 KiB
JavaScript
114 lines
5.0 KiB
JavaScript
const React = require('react');
|
|
const DropDownButton = require('./DropDownButton.js');
|
|
const Store = require('./Store.js');
|
|
const Util = require('./Util.js');
|
|
|
|
var MessageView = module.exports = React.createClass({
|
|
formatLongDate: function(dt)
|
|
{
|
|
if (!(dt instanceof Date))
|
|
dt = new Date(dt.replace(' ', 'T'));
|
|
var h = dt.getHours();
|
|
var m = dt.getMinutes();
|
|
var s = dt.getSeconds();
|
|
return Util.WeekDays[dt.getDay()]+' '+dt.getDate()+' '+Util.Months[dt.getMonth()]+' '+dt.getFullYear()+' '+(h < 10 ? '0' : '')+h+':'+(m < 10 ? '0' : '')+m+':'+(s < 10 ? '0' : '')+s
|
|
//return dt.toLocaleString();
|
|
},
|
|
componentDidMount: function()
|
|
{
|
|
Store.on('quickReply', this.setQuickReply);
|
|
Store.on('msg', this.setMsg);
|
|
},
|
|
componentWillUnmount: function()
|
|
{
|
|
Store.un('quickReply', this.setQuickReply);
|
|
Store.un('msg', this.setMsg);
|
|
},
|
|
setQuickReply: function()
|
|
{
|
|
this.setState({ quickReply: Store.quickReply });
|
|
},
|
|
setMsg: function()
|
|
{
|
|
this.setState({ msg: Store.msg });
|
|
},
|
|
getInitialState: function()
|
|
{
|
|
return { quickReply: Store.quickReply };
|
|
},
|
|
render: function()
|
|
{
|
|
var msg = this.state.msg;
|
|
return <div className={'message-view'+(!msg ? ' no-mail-shown' : '')+(!this.state.quickReply ? ' no-quick' : '')}>
|
|
<div className="actions">
|
|
<DropDownButton dropdownId="reply" icon="mail_reply" text="Reply" />
|
|
<a className="button"><img src="icons/mail_reply_all.png" />Reply All</a>
|
|
<DropDownButton dropdownId="forward" icon="mail_forward" text="Forward" />
|
|
<DropDownButton className="action-read" icon="read" checkedIcon="read_selected" checkable="1" text="Read" checkedText="Unread" />
|
|
<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" />
|
|
<a className="button show-dropdown"><img src="icons/label.png" />Label <span className="down"></span></a>
|
|
<DropDownButton ref="setBtn" dropdownId="settings" whole="1" icon="config" text="Settings" />
|
|
</div>
|
|
<div className="nomail">
|
|
<div className="flex1"></div>
|
|
<div className="middle">
|
|
<img src="icons/no_mail.png" />
|
|
<div className="txt">No message selected</div>
|
|
</div>
|
|
<div className="flex1"></div>
|
|
</div>
|
|
{msg ? [
|
|
<div className="headers">
|
|
<div className="top">
|
|
<div className="pin"></div>
|
|
<div className="time">{this.formatLongDate(msg.time)}</div>
|
|
<div className="subject">{msg.subject}</div>
|
|
</div>
|
|
<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>
|
|
<div className="header">
|
|
<div className="field">To</div>
|
|
<div className="value"><a className="button">{msg.to}</a></div>
|
|
</div>
|
|
{msg.cc ?
|
|
<div className="header">
|
|
<div className="field">Cc</div>
|
|
<div className="value">
|
|
{msg.cc.map(cc => <a className="button">{cc}</a>)}
|
|
</div>
|
|
</div>
|
|
: null}
|
|
{msg.replyto ?
|
|
<div className="header">
|
|
<div className="field">Reply-to</div>
|
|
<div className="value"><a className="button">{msg.replyto}</a></div>
|
|
</div>
|
|
: null}
|
|
</div>
|
|
</div>,
|
|
(msg.blockedImages ?
|
|
<div className="blocked-images">
|
|
<img src="icons/block.png" /> This message contains blocked images.
|
|
<a className="button raised">Load Images</a>
|
|
<label><input type="checkbox" /> Always load from {msg.from}</label>
|
|
</div>
|
|
: null),
|
|
<div className="text" dangerouslySetInnerHTML={{ __html: msg.body }}></div>,
|
|
this.state.quickReply ?
|
|
<div className="quick-reply">
|
|
<textarea></textarea>
|
|
<div className="btns">
|
|
<a className="button"><img src="icons/mail_send.png" /> Quick Reply</a>
|
|
<a className="button"><img src="icons/mail_reply_all.png" /> Quick Reply All</a>
|
|
</div>
|
|
</div>
|
|
: null
|
|
] : null}
|
|
</div>
|
|
}
|
|
});
|