likeopera-frontend/MailSettingsWindow.js

45 lines
2.4 KiB
JavaScript

import React from 'react';
import DropDownBase from './DropDownBase.js';
import ListSortSettings from './ListSortSettings.js';
export default class MailSettingsWindow extends DropDownBase
{
render()
{
return <div ref="dd" onClick={this.onClick} className={'dropdown window'+(this.state.visible ? ' visible' : '')}
id={'dropdown-'+this.props.id} tabIndex="1" style={{ top: this.state.top, left: this.state.left }}>
<div ref="callout" className="callout-top" style={{ left: this.state.calloutLeft }}></div>
<div className="text">Mail Layout</div>
<div className="layouts">
<a onClick={this.switchLayout} className={'button mail-message-on-right'+(this.props.layout == 'message-on-right' ? ' selected' : '')} title="List and Message on Right"><span></span></a>
<a onClick={this.switchLayout} className={'button mail-message-on-bottom'+(this.props.layout == 'message-on-bottom' ? ' selected' : '')} title="List and Message Below"><span></span></a>
<a onClick={this.switchLayout} className={'button mail-message-invisible'+(this.props.layout == 'message-invisible' ? ' selected' : '')} title="List Only"><span></span></a>
</div>
<div className="split"><i></i></div>
<div className="text">Default List Sorting</div>
<ListSortSettings className="fields" sort={this.props.defaultSorting} />
<div className="fields">
<label><input type="checkbox" checked={this.props.quickReply} onClick={this.props.toggleQuickReply} /> Show Quick Reply</label>
</div>
<div className="split"><i></i></div>
<div className="text">Mark as Read</div>
<div className="fields">
<select className="sortby" defaultValue={this.props.markDelay}>
<option value="-1">Manually</option>
<option value="0">On Select</option>
<option value="1">After 1 second</option>
<option value="3">After 3 seconds</option>
<option value="5">After 5 seconds</option>
</select>
</div>
</div>
}
switchLayout = (ev) =>
{
let t = ev.target.nodeName == 'A' ? ev.target : ev.target.parentNode;
let l = / mail-(\S+)/.exec(t.className)[1];
this.props.setLayout(l);
}
}