Code style
parent
1641162813
commit
89a44d590c
|
@ -109,7 +109,7 @@ function getOffset(elem)
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
let top = 0, left = 0;
|
let top = 0, left = 0;
|
||||||
while(elem)
|
while (elem)
|
||||||
{
|
{
|
||||||
top = top + parseInt(elem.offsetTop);
|
top = top + parseInt(elem.offsetTop);
|
||||||
left = left + parseInt(elem.offsetLeft);
|
left = left + parseInt(elem.offsetLeft);
|
||||||
|
|
|
@ -12,16 +12,14 @@ export default class DropDownMenu extends DropDownBase
|
||||||
return <div ref="dd" className={'dropdown'+(this.state.visible ? ' visible' : '')} id={'dropdown-'+this.props.id}
|
return <div ref="dd" className={'dropdown'+(this.state.visible ? ' visible' : '')} id={'dropdown-'+this.props.id}
|
||||||
tabIndex="1" style={{ top: this.state.top, left: this.state.left }} onClick={this.myOnClick} onKeyDown={this.onKeyDown}
|
tabIndex="1" style={{ top: this.state.top, left: this.state.left }} onClick={this.myOnClick} onKeyDown={this.onKeyDown}
|
||||||
onMouseOver={this.onMouseOver}>
|
onMouseOver={this.onMouseOver}>
|
||||||
{this.state.items.map(function(i, index) {
|
{this.state.items.map((i, index) => (i.split
|
||||||
return (i.split
|
? <div key={index} className="split"><i></i></div>
|
||||||
? <div key={index} className="split"><i></i></div> :
|
: <div key={index} data-index={index} className={'item'+(i.i16 ? ' i16' : '')+(i.disabled ? ' disabled' : (sel == index ? ' over' : ''))}>
|
||||||
<div key={index} data-index={index} className={'item'+(i.i16 ? ' i16' : '')+(i.disabled ? ' disabled' : (sel == index ? ' over' : ''))}>
|
{i.hotkey ? <div className="hotkey">{i.hotkey}</div> : null}
|
||||||
{i.hotkey ? <div className="hotkey">{i.hotkey}</div> : null}
|
{i.icon ? <img src={'icons/'+i.icon+'.png'} /> : null}
|
||||||
{i.icon ? <img src={'icons/'+i.icon+'.png'} /> : null}
|
<span>{i.text}</span>
|
||||||
<span>{i.text}</span>
|
</div>
|
||||||
</div>
|
))}
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ export default class ListSortSettings extends React.PureComponent
|
||||||
{
|
{
|
||||||
return <div className={this.props.className} value={this.props.sort.sortby}>
|
return <div className={this.props.className} value={this.props.sort.sortby}>
|
||||||
<select className="sortby">
|
<select className="sortby">
|
||||||
{['sent date', 'status', 'label', 'size', 'subject'].map((i) => (
|
{['sent date', 'status', 'label', 'size', 'subject'].map(i => (
|
||||||
<option key={'s'+i} value={i}>Sort by {i}</option>
|
<option key={'s'+i} value={i}>Sort by {i}</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
|
|
@ -219,11 +219,52 @@ export default class MessageList extends ListWithSelection
|
||||||
this._searchTimeout = setTimeout(() => this.props.search(s), 300);
|
this._searchTimeout = setTimeout(() => this.props.search(s), 300);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderGroup = (grp, i) =>
|
||||||
|
{
|
||||||
|
if (i > 0)
|
||||||
|
{
|
||||||
|
this.total++;
|
||||||
|
}
|
||||||
|
let start = this.total+(this.state.firstGrp == i ? this.state.firstMsg : 0);
|
||||||
|
let r = [
|
||||||
|
i > 0 ? <div className="day" data-i={this.total-1}>{grp.name.toUpperCase()}</div> : null,
|
||||||
|
<div className="day-list">
|
||||||
|
{(this.state.firstGrp > i || this.state.lastGrp < i
|
||||||
|
? <div className="placeholder" style={{ height: this.itemH*grp.messageCount }}></div>
|
||||||
|
: [
|
||||||
|
(this.state.firstGrp == i
|
||||||
|
? <div className="placeholder" style={{ height: this.itemH*this.state.firstMsg }}></div>
|
||||||
|
: null),
|
||||||
|
this.getMessages(grp,
|
||||||
|
this.state.firstGrp == i ? this.state.firstMsg : 0,
|
||||||
|
this.state.lastGrp == i ? this.state.lastMsg+1 : grp.messageCount
|
||||||
|
).map((msg, j) => (msg
|
||||||
|
? [
|
||||||
|
<MessageInList threads={this.props.threads} msg={msg} i={start+j} selected={this.isSelected(start+j)} onClick={this.onListItemClick} />,
|
||||||
|
/*(msg.thread && this.props.threads ?
|
||||||
|
<div className="thread">
|
||||||
|
{msg.thread.map(reply => <MessageInList msg={reply} i={0} onClick={this.onListItemClick} />)}
|
||||||
|
</div>
|
||||||
|
: null)*/
|
||||||
|
]
|
||||||
|
: <div data-i={start+j} className={'message'+(this.isSelected(start+j) ? ' selected' : '')} onMouseDown={this.onListItemClick}></div>
|
||||||
|
)),
|
||||||
|
(this.state.lastGrp == i
|
||||||
|
? <div className="placeholder" style={{ height: this.itemH*(grp.messageCount-this.state.lastMsg-1) }}></div>
|
||||||
|
: null)
|
||||||
|
]
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
];
|
||||||
|
this.total += grp.messageCount;
|
||||||
|
return r;
|
||||||
|
}
|
||||||
|
|
||||||
render()
|
render()
|
||||||
{
|
{
|
||||||
let total = 0;
|
this.itemH = (this.props.layout == 'message-on-right' ? 60 : 30);
|
||||||
let itemH = (this.props.layout == 'message-on-right' ? 60 : 30);
|
this.total = 0;
|
||||||
return <div className="message-list">
|
return (<div className="message-list">
|
||||||
<div className="top-border-gradient"></div>
|
<div className="top-border-gradient"></div>
|
||||||
<div className="bottom-border-gradient"></div>
|
<div className="bottom-border-gradient"></div>
|
||||||
<div className="actions">
|
<div className="actions">
|
||||||
|
@ -243,46 +284,9 @@ export default class MessageList extends ListWithSelection
|
||||||
style={{ top: this.state.firstDayTop, display: this.state.firstDay ? '' : 'none' }}>
|
style={{ top: this.state.firstDayTop, display: this.state.firstDay ? '' : 'none' }}>
|
||||||
{(this.state.firstDay||'').toUpperCase()}
|
{(this.state.firstDay||'').toUpperCase()}
|
||||||
</div>
|
</div>
|
||||||
{(this.props.groups||[]).map((grp, i) =>
|
{(this.props.groups||[]).map(this.renderGroup)}
|
||||||
{
|
|
||||||
if (i > 0)
|
|
||||||
total++;
|
|
||||||
let start = total+(this.state.firstGrp == i ? this.state.firstMsg : 0);
|
|
||||||
let r = [
|
|
||||||
i > 0 ? <div className="day" data-i={total-1}>{grp.name.toUpperCase()}</div> : null,
|
|
||||||
<div className="day-list">
|
|
||||||
{(this.state.firstGrp > i || this.state.lastGrp < i
|
|
||||||
? <div className="placeholder" style={{ height: itemH*grp.messageCount }}></div>
|
|
||||||
: [
|
|
||||||
(this.state.firstGrp == i
|
|
||||||
? <div className="placeholder" style={{ height: itemH*this.state.firstMsg }}></div>
|
|
||||||
: null),
|
|
||||||
this.getMessages(grp,
|
|
||||||
this.state.firstGrp == i ? this.state.firstMsg : 0,
|
|
||||||
this.state.lastGrp == i ? this.state.lastMsg+1 : grp.messageCount
|
|
||||||
).map((msg, j) => (msg
|
|
||||||
? [
|
|
||||||
<MessageInList threads={this.props.threads} msg={msg} i={start+j} selected={this.isSelected(start+j)} onClick={this.onListItemClick} />,
|
|
||||||
/*(msg.thread && this.props.threads ?
|
|
||||||
<div className="thread">
|
|
||||||
{msg.thread.map(reply => <MessageInList msg={reply} i={0} onClick={this.onListItemClick} />)}
|
|
||||||
</div>
|
|
||||||
: null)*/
|
|
||||||
]
|
|
||||||
: <div data-i={start+j} className={'message'+(this.isSelected(start+j) ? ' selected' : '')} onMouseDown={this.onListItemClick}></div>
|
|
||||||
)),
|
|
||||||
(this.state.lastGrp == i
|
|
||||||
? <div className="placeholder" style={{ height: itemH*(grp.messageCount-this.state.lastMsg-1) }}></div>
|
|
||||||
: null)
|
|
||||||
]
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
];
|
|
||||||
total += grp.messageCount;
|
|
||||||
return r;
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount()
|
componentDidMount()
|
||||||
|
|
144
MessageView.js
144
MessageView.js
|
@ -73,82 +73,80 @@ export default class MessageView extends React.PureComponent
|
||||||
<div className="flex1"></div>
|
<div className="flex1"></div>
|
||||||
</div>
|
</div>
|
||||||
{msg ? [
|
{msg ? [
|
||||||
<div className="headers">
|
<div className="headers">
|
||||||
<div className="top">
|
<div className="top">
|
||||||
<div className="pin"></div>
|
<div className="pin"></div>
|
||||||
<div className="time">{this.formatLongDate(msg.time)}</div>
|
<div className="time">{this.formatLongDate(msg.time)}</div>
|
||||||
<div className="subject">{msg.subject}</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.props.from ? msg.props.from[0]+' <'+msg.props.from[1]+'>' : 'unknown'}</a></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="header">
|
<div className="header-table">
|
||||||
<div className="field">To</div>
|
<div className="header">
|
||||||
<div className="value">
|
<div className="field">From</div>
|
||||||
{msg.props.to.map(a => <a className="button" title={a[0] ? a[0]+' <'+a[1]+'>' : a[1]}>{a[0] || a[1]}</a>)}
|
<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">
|
||||||
|
{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.props.cc.length
|
||||||
|
? <div className="header">
|
||||||
|
<div className="field">Cc</div>
|
||||||
|
<div className="value">
|
||||||
|
{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.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">
|
||||||
|
{[msg.props.replyto].map(a => <a className="button" title={a[0] ? a[0]+' <'+a[1]+'>' : a[1]}>{a[0] || a[1]}</a>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
: null}
|
||||||
|
{msg.props.attachments && msg.props.attachments.length
|
||||||
|
? <div className="header">
|
||||||
|
<div className="field">Attachments</div>
|
||||||
|
<div className="value">
|
||||||
|
{msg.props.attachments.map(a => (
|
||||||
|
<a className="button" title={a.name} href={"backend/attachment/?msgId="+msg.id+"&sha1="+a.sha1} target="_blank">
|
||||||
|
{a.name+' ('+Util.formatBytes(a.size)+')'}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
: null}
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
(this.state.blockedImages && !this.state.showImages
|
||||||
|
? <div className="blocked-images">
|
||||||
|
<img src="icons/block.png" /> This message contains blocked images.
|
||||||
|
<a className="button raised" onClick={this.showImages}>Load Images</a>
|
||||||
|
{(msg.props.from ? <label><input type="checkbox" /> Always load from {msg.props.from[1]}</label> : null)}
|
||||||
|
</div>
|
||||||
|
: null),
|
||||||
|
(html
|
||||||
|
? <div className="text" dangerouslySetInnerHTML={{ __html: html }}></div>
|
||||||
|
: <div className="text plain">{msg.body_text}</div>),
|
||||||
|
(this.props.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>
|
||||||
</div>
|
</div>
|
||||||
{msg.props.cc.length ?
|
: null),
|
||||||
<div className="header">
|
|
||||||
<div className="field">Cc</div>
|
|
||||||
<div className="value">
|
|
||||||
{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.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">
|
|
||||||
{[msg.props.replyto].map(a => <a className="button" title={a[0] ? a[0]+' <'+a[1]+'>' : a[1]}>{a[0] || a[1]}</a>)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: null}
|
|
||||||
{msg.props.attachments && msg.props.attachments.length ?
|
|
||||||
<div className="header">
|
|
||||||
<div className="field">Attachments</div>
|
|
||||||
<div className="value">
|
|
||||||
{msg.props.attachments.map(a => (
|
|
||||||
<a className="button" title={a.name} href={"backend/attachment/?msgId="+msg.id+"&sha1="+a.sha1} target="_blank">
|
|
||||||
{a.name+' ('+Util.formatBytes(a.size)+')'}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: null}
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
(this.state.blockedImages && !this.state.showImages
|
|
||||||
? <div className="blocked-images">
|
|
||||||
<img src="icons/block.png" /> This message contains blocked images.
|
|
||||||
<a className="button raised" onClick={this.showImages}>Load Images</a>
|
|
||||||
{(msg.props.from ? <label><input type="checkbox" /> Always load from {msg.props.from[1]}</label> : null)}
|
|
||||||
</div>
|
|
||||||
: null),
|
|
||||||
(html
|
|
||||||
? <div className="text" dangerouslySetInnerHTML={{ __html: html }}></div>
|
|
||||||
: <div className="text plain">{msg.body_text}</div>
|
|
||||||
),
|
|
||||||
(this.props.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}
|
] : null}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue