Fix #131 - Make active favourite buttons yellow
parent
ca3b364aea
commit
36921be9aa
|
@ -7,7 +7,9 @@ const IconButton = React.createClass({
|
|||
icon: React.PropTypes.string.isRequired,
|
||||
onClick: React.PropTypes.func.isRequired,
|
||||
size: React.PropTypes.number,
|
||||
active: React.PropTypes.bool
|
||||
active: React.PropTypes.bool,
|
||||
style: React.PropTypes.object,
|
||||
activeStyle: React.PropTypes.object
|
||||
},
|
||||
|
||||
getDefaultProps () {
|
||||
|
@ -26,7 +28,7 @@ const IconButton = React.createClass({
|
|||
},
|
||||
|
||||
render () {
|
||||
const style = {
|
||||
let style = {
|
||||
display: 'inline-block',
|
||||
border: 'none',
|
||||
padding: '0',
|
||||
|
@ -39,6 +41,10 @@ const IconButton = React.createClass({
|
|||
...this.props.style
|
||||
};
|
||||
|
||||
if (this.props.active) {
|
||||
style = { ...style, ...this.props.activeStyle };
|
||||
}
|
||||
|
||||
return (
|
||||
<button aria-label={this.props.title} title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={style}>
|
||||
<i className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
|
||||
|
|
|
@ -49,7 +49,7 @@ const StatusActionBar = React.createClass({
|
|||
<div style={{ marginTop: '10px', overflow: 'hidden' }}>
|
||||
<div style={{ float: 'left', marginRight: '18px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
|
||||
<div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>
|
||||
<div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} /></div>
|
||||
<div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
|
||||
|
||||
<div onClick={e => e.stopPropagation()} style={{ width: '18px', height: '18px', float: 'left' }}>
|
||||
<DropdownMenu items={menu} icon='ellipsis-h' size={18} />
|
||||
|
|
|
@ -17,22 +17,42 @@ const ActionBar = React.createClass({
|
|||
|
||||
mixins: [PureRenderMixin],
|
||||
|
||||
handleReplyClick () {
|
||||
this.props.onReply(status);
|
||||
},
|
||||
|
||||
handleReblogClick () {
|
||||
this.props.onReblog(status);
|
||||
},
|
||||
|
||||
handleFavouriteClick () {
|
||||
this.props.onFavourite(status);
|
||||
},
|
||||
|
||||
handleDeleteClick () {
|
||||
this.props.onDelete(status);
|
||||
},
|
||||
|
||||
handleMentionClick () {
|
||||
this.props.onMention(status.get('account'));
|
||||
},
|
||||
|
||||
render () {
|
||||
const { status, me } = this.props;
|
||||
|
||||
let menu = [];
|
||||
|
||||
if (me === status.getIn(['account', 'id'])) {
|
||||
menu.push({ text: 'Delete', action: () => this.props.onDelete(status) });
|
||||
menu.push({ text: 'Delete', action: this.handleDeleteClick });
|
||||
} else {
|
||||
menu.push({ text: 'Mention', action: () => this.props.onMention(status.get('account')) });
|
||||
menu.push({ text: 'Mention', action: this.handleMentionClick });
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ background: '#2f3441', display: 'flex', flexDirection: 'row', borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px 0' }}>
|
||||
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title='Reply' icon='reply' onClick={() => this.props.onReply(status)} /></div>
|
||||
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={() => this.props.onReblog(status)} /></div>
|
||||
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={() => this.props.onFavourite(status)} /></div>
|
||||
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
|
||||
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>
|
||||
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
|
||||
<div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} /></div>
|
||||
</div>
|
||||
);
|
||||
|
|
Reference in New Issue