vitalif
/
likeopera-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Code style

master
Vitaliy Filippov 2019-05-20 00:27:28 +03:00
parent 1641162813
commit 89a44d590c
5 changed files with 127 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
DropDownBase.js
View File

@ -109,7 +109,7 @@ function getOffset(elem)
else
{
let top = 0, left = 0;
while(elem)
while (elem)
{
top = top + parseInt(elem.offsetTop);
left = left + parseInt(elem.offsetLeft);

18
DropDownMenu.js
View File

@ -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}
tabIndex="1" style={{ top: this.state.top, left: this.state.left }} onClick={this.myOnClick} onKeyDown={this.onKeyDown}
onMouseOver={this.onMouseOver}>
{this.state.items.map(function(i, index) {
return (i.split
? <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' : ''))}>
{i.hotkey ? <div className="hotkey">{i.hotkey}</div> : null}
{i.icon ? <img src={'icons/'+i.icon+'.png'} /> : null}
<span>{i.text}</span>
</div>
);
})}
{this.state.items.map((i, index) => (i.split
? <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' : ''))}>
{i.hotkey ? <div className="hotkey">{i.hotkey}</div> : null}
{i.icon ? <img src={'icons/'+i.icon+'.png'} /> : null}
<span>{i.text}</span>
</div>
))}
</div>
}

2
ListSortSettings.js
View File

@ -6,7 +6,7 @@ export default class ListSortSettings extends React.PureComponent
{
return <div className={this.props.className} value={this.props.sort.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>
))}
</select>

88
MessageList.js
View File

@ -219,11 +219,52 @@ export default class MessageList extends ListWithSelection
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()
{
let total = 0;
let itemH = (this.props.layout == 'message-on-right' ? 60 : 30);
return <div className="message-list">
this.itemH = (this.props.layout == 'message-on-right' ? 60 : 30);
this.total = 0;
return (<div className="message-list">
<div className="top-border-gradient"></div>
<div className="bottom-border-gradient"></div>
<div className="actions">
@ -243,46 +284,9 @@ export default class MessageList extends ListWithSelection
style={{ top: this.state.firstDayTop, display: this.state.firstDay ? '' : 'none' }}>
{(this.state.firstDay||'').toUpperCase()}
</div>
{(this.props.groups||[]).map((grp, i) =>
{
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;
})}
{(this.props.groups||[]).map(this.renderGroup)}
</div>
</div>
</div>);
}
componentDidMount()

144
MessageView.js
View File

@ -73,82 +73,80 @@ export default class MessageView extends React.PureComponent
<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.props.from ? msg.props.from[0]+' <'+msg.props.from[1]+'>' : 'unknown'}</a></div>
<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">
<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 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 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>
{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>
: null
)
: null),
] : null}
</div>
}