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

Port all other dropdowns to DropDownButton

master
Vitaliy Filippov 2016-06-21 18:31:21 +03:00
parent 4ee59393d5
commit 1e9bea827f
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
mail.js
View File

@ -168,16 +168,18 @@ var DropDownButton = React.createClass({
},
render: function()
{
return <a ref="btn" className={'button show-dropdown '+(this.state.pressed ? 'pressed ' : '')+(this.props.className || '')} onClick={this.onClickButton}>
return <a ref="btn" title={(this.state.checked ? this.props.checkedTitle : null) || this.props.title} onClick={this.onClickButton}
className={'button show-dropdown '+(this.state.checked ? 'checked ' : '')+
(this.state.pressed ? 'pressed ' : '')+(this.props.className || '')}>
{this.props.icon ? <img src={'icons/'+this.props.icon+'.png'} /> : null}
{this.props.cssIcon ? <span class="img"></span> : null}
{this.props.cssIcon ? <span className="img"></span> : null}
{this.props.text || null}
<span className="down" onClick={this.onClickDown}></span>
</a>
},
getInitialState: function()
{
return { pressed: false };
return { pressed: false, checked: false };
},
toggle: function()
{
@ -190,6 +192,8 @@ var DropDownButton = React.createClass({
{
if (this.props.whole)
this.toggle();
else if (this.props.checkable)
this.setState({ checked: !this.state.checked });
ev.stopPropagation();
},
onClickDown: function(ev)
@ -333,7 +337,7 @@ var ListSortSettingsWindow = React.createClass({
var sort = this.props.override ? this.props.sorting : this.props.defaultSorting;
return <div ref="dd" onClick={this.onClick} className={'dropdown window list-sort'+(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"></div>
<div ref="callout" className="callout-top" style={{ left: this.state.calloutLeft }}></div>
<div className="title">Sorting for {this.props.folder}</div>
<label><input type="checkbox" checked={this.props.override ? "checked" : null} /> Override default sorting</label>
<ListSortSettings className="sorting" sort={sort} />
@ -364,8 +368,9 @@ var MailSettingsWindow = React.createClass({
mixins: [ DropDownBase ],
render: function()
{
return <div ref="dd" onClick={this.onClick} className="dropdown window" id="dropdown-settings" tabIndex="1">
<div ref="callout" className="callout-top"></div>
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 className={'button mail-message-on-right'+(this.props.layout == 'r' ? ' selected' : '')} title="List and Message on Right"><span></span></a>
@ -750,10 +755,8 @@ var MessageList = React.createClass({
</div>
<DropDownButton dropdownId="threads" className="threads"
title="Show Message Thread" checkedTitle="Hide Message Thread" cssIcon="1" checkable="1" />
<a className="button whole show-dropdown settings" data-dropdown="settings">
<img src="icons/config.png" />
<span className="down"></span>
</a>
<DropDownButton dropdownId="settings" className="settings" whole="1"
title="Settings for this folder" icon="config" />
<DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
title="Sorting settings" icon="list_sort" />
<div className="clear"></div>
@ -778,7 +781,6 @@ var MessageList = React.createClass({
}
});
// TODO checkable, show-dropdown (button component)
var MessageView = React.createClass({
formatLongTime: function(d)
{
@ -789,14 +791,14 @@ var MessageView = React.createClass({
var msg = this.props.msg;
return <div className={'message-view'+(!msg ? ' no-mail-shown' : '')}>
<div className="actions">
<a className="button show-dropdown" data-dropdown="reply"><img src="icons/mail_reply.png" />Reply <span className="down"></span></a>
<DropDownButton dropdownId="reply" icon="mail_reply" text="Reply" />
<a className="button"><img src="icons/mail_reply_all.png" />Reply All</a>
<a className="button show-dropdown" data-dropdown="forward"><img src="icons/mail_forward.png" />Forward <span className="down"></span></a>
<DropDownButton dropdownId="forward" icon="mail_forward" text="Forward" />
<a className="button checkable action-read"><span className="img"></span><span className="txt"></span></a>
<a className="button checkable action-spam"><span className="img"></span><span className="txt"></span></a>
<a className="button checkable action-delete show-dropdown" data-dropdown="delete"><span className="img"></span><span className="txt"></span> <span className="down"></span></a>
<DropDownButton dropdownId="delete" className="action-delete" cssIcon="1" checkable="1" text="Delete" checkedText="Undelete" />
<a className="button show-dropdown"><img src="icons/label.png" />Label <span className="down"></span></a>
<a className="button whole show-dropdown settings" data-dropdown="settings"><img src="icons/config.png" />Settings <span className="down"></span></a>
<DropDownButton dropdownId="settings" whole="1" icon="config" text="Settings" />
</div>
<div className="nomail">
<div className="flex1"></div>