2018-12-02 19:27:22 +03:00
import React from 'react' ;
import DropDownBase from './DropDownBase.js' ;
import ListSortSettings from './ListSortSettings.js' ;
2016-09-11 15:49:57 +03:00
2019-05-14 15:49:20 +03:00
export default class MailSettingsWindow extends DropDownBase
2018-12-02 19:27:22 +03:00
{
render ( )
2016-09-11 15:49:57 +03:00
{
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 } } > < / d i v >
< div className = "text" > Mail Layout < / d i v >
< div className = "layouts" >
2016-10-01 17:21:32 +03:00
< a onClick = { this . switchLayout } className = { 'button mail-message-on-right' + ( this . props . layout == 'message-on-right' ? ' selected' : '' ) } title = "List and Message on Right" > < span > < / s p a n > < / a >
< a onClick = { this . switchLayout } className = { 'button mail-message-on-bottom' + ( this . props . layout == 'message-on-bottom' ? ' selected' : '' ) } title = "List and Message Below" > < span > < / s p a n > < / a >
< a onClick = { this . switchLayout } className = { 'button mail-message-invisible' + ( this . props . layout == 'message-invisible' ? ' selected' : '' ) } title = "List Only" > < span > < / s p a n > < / a >
2016-09-11 15:49:57 +03:00
< / d i v >
< div className = "split" > < i > < / i > < / d i v >
< div className = "text" > Default List Sorting < / d i v >
< ListSortSettings className = "fields" sort = { this . props . defaultSorting } / >
< div className = "fields" >
2019-05-14 15:49:20 +03:00
< label > < input type = "checkbox" checked = { this . props . quickReply } onClick = { this . props . toggleQuickReply } / > Show Quick Reply < / l a b e l >
2016-09-11 15:49:57 +03:00
< / d i v >
< div className = "split" > < i > < / i > < / d i v >
< div className = "text" > Mark as Read < / d i v >
< div className = "fields" >
< select className = "sortby" defaultValue = { this . props . markDelay } >
< option value = "-1" > Manually < / o p t i o n >
< option value = "0" > On Select < / o p t i o n >
< option value = "1" > After 1 second < / o p t i o n >
< option value = "3" > After 3 seconds < / o p t i o n >
< option value = "5" > After 5 seconds < / o p t i o n >
< / s e l e c t >
< / d i v >
< / d i v >
2018-12-02 19:27:22 +03:00
}
switchLayout = ( ev ) =>
2016-09-11 15:49:57 +03:00
{
2019-05-14 15:49:20 +03:00
let t = ev . target . nodeName == 'A' ? ev . target : ev . target . parentNode ;
let l = / mail-(\S+)/ . exec ( t . className ) [ 1 ] ;
this . props . setLayout ( l ) ;
2016-09-11 15:49:57 +03:00
}
2018-12-02 19:27:22 +03:00
}