Use React to switch icons
parent
81af806dfd
commit
97d7dc3e9f
|
|
@ -0,0 +1,83 @@
|
|||
a.button .img
|
||||
{
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
vertical-align: top;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.message-list .actions .threads .img
|
||||
{
|
||||
background: url(icons/thread.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-list .actions .threads.checked .img
|
||||
{
|
||||
display: inline-block;
|
||||
background: url(icons/thread_selected.png) no-repeat;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
vertical-align: top;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.message-view .actions .action-read .img
|
||||
{
|
||||
background: url(icons/read.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-read .txt:before
|
||||
{
|
||||
content: "Read";
|
||||
}
|
||||
|
||||
.message-view .actions .action-read.checked .img
|
||||
{
|
||||
background: url(icons/read_selected.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-read.checked .txt:before
|
||||
{
|
||||
content: "Unread";
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam .img
|
||||
{
|
||||
background: url(icons/spam.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam .txt:before
|
||||
{
|
||||
content: "Spam";
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam.checked .img
|
||||
{
|
||||
background: url(icons/spam_selected.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam.checked .txt:before
|
||||
{
|
||||
content: "Not Spam";
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete .img
|
||||
{
|
||||
background: url(icons/delete.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete .txt:before
|
||||
{
|
||||
content: "Delete";
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete.checked .img
|
||||
{
|
||||
background: url(icons/delete_selected.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete.checked .txt:before
|
||||
{
|
||||
content: "Undelete";
|
||||
}
|
||||
84
mail.css
84
mail.css
|
|
@ -123,15 +123,6 @@ button:active, button.pressed, a.button:active, a.button.pressed
|
|||
|
||||
button::-moz-focus-inner { border: 0; }
|
||||
|
||||
a.button .img
|
||||
{
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
vertical-align: top;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
box-sizing: border-box;
|
||||
|
|
@ -757,21 +748,6 @@ div
|
|||
float: left;
|
||||
}
|
||||
|
||||
.message-list .actions .threads .img
|
||||
{
|
||||
background: url(icons/thread.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-list .actions .threads.checked .img
|
||||
{
|
||||
display: inline-block;
|
||||
background: url(icons/thread_selected.png) no-repeat;
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
vertical-align: top;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.message-list .actions .list-sort
|
||||
{
|
||||
float: right;
|
||||
|
|
@ -1190,66 +1166,6 @@ div
|
|||
border-bottom: 1px solid #aca9a7;
|
||||
}
|
||||
|
||||
.message-view .actions .action-read .img
|
||||
{
|
||||
background: url(icons/read.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-read .txt:before
|
||||
{
|
||||
content: "Read";
|
||||
}
|
||||
|
||||
.message-view .actions .action-read.checked .img
|
||||
{
|
||||
background: url(icons/read_selected.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-read.checked .txt:before
|
||||
{
|
||||
content: "Unread";
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam .img
|
||||
{
|
||||
background: url(icons/spam.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam .txt:before
|
||||
{
|
||||
content: "Spam";
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam.checked .img
|
||||
{
|
||||
background: url(icons/spam_selected.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-spam.checked .txt:before
|
||||
{
|
||||
content: "Not Spam";
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete .img
|
||||
{
|
||||
background: url(icons/delete.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete .txt:before
|
||||
{
|
||||
content: "Delete";
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete.checked .img
|
||||
{
|
||||
background: url(icons/delete_selected.png) no-repeat;
|
||||
}
|
||||
|
||||
.message-view .actions .action-delete.checked .txt:before
|
||||
{
|
||||
content: "Undelete";
|
||||
}
|
||||
|
||||
.message-on-bottom .message-view .actions .settings
|
||||
{
|
||||
display: none;
|
||||
|
|
|
|||
1
mail.htm
1
mail.htm
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="mail.css" />
|
||||
<link rel="stylesheet" type="text/css" href="mail-raw.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="dropdown" id="dropdown-account" tabindex="1">
|
||||
|
|
|
|||
13
mail.js
13
mail.js
|
|
@ -171,9 +171,8 @@ var DropDownButton = React.createClass({
|
|||
return <a ref="btn" title={(this.state.checked ? this.props.checkedTitle : null) || this.props.title} onClick={this.onClickButton}
|
||||
className={'button '+(this.props.dropdownId ? '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 className="img"></span> : null}
|
||||
{((this.state.checked ? this.props.checkedText : null) || this.props.text) || null}
|
||||
{this.props.icon ? <img src={'icons/'+(this.state.checked && this.props.checkedIcon || this.props.icon)+'.png'} /> : null}
|
||||
{this.state.checked && this.props.checkedText || this.props.text || null}
|
||||
{this.props.dropdownId ? <span className="down" onClick={this.onClickDown}></span> : null}
|
||||
</a>
|
||||
},
|
||||
|
|
@ -758,7 +757,7 @@ var MessageList = React.createClass({
|
|||
<input type="text" placeholder="Search mail" />
|
||||
</div>
|
||||
<DropDownButton dropdownId="threads" className="threads"
|
||||
title="Show Message Thread" checkedTitle="Hide Message Thread" cssIcon="1" checkable="1" />
|
||||
title="Show Message Thread" checkedTitle="Hide Message Thread" icon="thread" checkedIcon="thread_selected" checkable="1" />
|
||||
<DropDownButton dropdownId="settings" className="settings" whole="1"
|
||||
title="Settings for this folder" icon="config" />
|
||||
<DropDownButton dropdownId="list-sort" className="list-sort" whole="1"
|
||||
|
|
@ -798,9 +797,9 @@ var MessageView = React.createClass({
|
|||
<DropDownButton dropdownId="reply" icon="mail_reply" text="Reply" />
|
||||
<a className="button"><img src="icons/mail_reply_all.png" />Reply All</a>
|
||||
<DropDownButton dropdownId="forward" icon="mail_forward" text="Forward" />
|
||||
<DropDownButton className="action-read" cssIcon="1" checkable="1" text="Read" checkedText="Unread" />
|
||||
<DropDownButton className="action-spam" cssIcon="1" checkable="1" text="Spam" checkedText="Not Spam" />
|
||||
<DropDownButton dropdownId="delete" className="action-delete" cssIcon="1" checkable="1" text="Delete" checkedText="Undelete" />
|
||||
<DropDownButton className="action-read" icon="read" checkedIcon="read_selected" checkable="1" text="Read" checkedText="Unread" />
|
||||
<DropDownButton className="action-spam" icon="spam" checkedIcon="spam_selected" checkable="1" text="Spam" checkedText="Not Spam" />
|
||||
<DropDownButton dropdownId="delete" className="action-delete" icon="delete" checkedIcon="delete_selected" checkable="1" text="Delete" checkedText="Undelete" />
|
||||
<a className="button show-dropdown"><img src="icons/label.png" />Label <span className="down"></span></a>
|
||||
<DropDownButton dropdownId="settings" whole="1" icon="config" text="Settings" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue