treehouse
/
emoji-mart-lazyload
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make anchors color customizable

release
Etienne Lemay 2016-07-21 15:33:18 -04:00
parent 4006308614
commit 2d3f789079
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/emoji-picker.css
View File

@ -41,14 +41,11 @@
overflow: hidden; overflow: hidden;
transition: color .1s ease-out; transition: color .1s ease-out;
} }
.emoji-picker-anchor:hover { .emoji-picker-anchor:hover,
.emoji-picker-anchor-selected {
color: #464646; color: #464646;
} }
.emoji-picker-anchor-selected,
.emoji-picker-anchor-selected:hover {
color: #ae65c5;
}
.emoji-picker-anchor-selected .emoji-picker-anchor-bar { .emoji-picker-anchor-selected .emoji-picker-anchor-bar {
bottom: 0; bottom: 0;
} }
@ -57,7 +54,7 @@
position: absolute; position: absolute;
bottom: -3px; left: 0; bottom: -3px; left: 0;
width: 100%; height: 3px; width: 100%; height: 3px;
background-color: #ae65c5; background-color: #464646;
} }
.emoji-picker-anchors i { .emoji-picker-anchors i {

10
src/components/anchors.js
View File

@ -18,12 +18,13 @@ export default class Anchors extends React.Component {
} }
render() { render() {
var { categories, onAnchorClick } = this.props, var { categories, onAnchorClick, color } = this.props,
{ selected } = this.state { selected } = this.state
return <div className='emoji-picker-anchors'> return <div className='emoji-picker-anchors'>
{categories.map((category, i) => { {categories.map((category, i) => {
var { name, anchor } = category var { name, anchor } = category,
isSelected = name == selected
if (anchor) { if (anchor) {
return null return null
@ -34,10 +35,11 @@ export default class Anchors extends React.Component {
key={name} key={name}
title={name} title={name}
onClick={() => onAnchorClick(category, i)} onClick={() => onAnchorClick(category, i)}
className={`emoji-picker-anchor ${name == selected ? 'emoji-picker-anchor-selected' : ''}`} className={`emoji-picker-anchor ${isSelected ? 'emoji-picker-anchor-selected' : ''}`}
style={{ color: isSelected ? color : null }}
> >
<InlineSVG src={SVGs[name]} /> <InlineSVG src={SVGs[name]} />
<span className='emoji-picker-anchor-bar'></span> <span className='emoji-picker-anchor-bar' style={{ backgroundColor: color }}></span>
</span> </span>
) )
})} })}

5
src/components/picker.js
View File

@ -216,7 +216,7 @@ export default class Picker extends React.Component {
} }
render() { render() {
var { perLine, emojiSize, sheetURL, style, title, emoji } = this.props, var { perLine, emojiSize, sheetURL, style, title, emoji, color } = this.props,
{ skin } = this.state, { skin } = this.state,
width = (perLine * (emojiSize + 12)) + 12 + 2 width = (perLine * (emojiSize + 12)) + 12 + 2
@ -224,6 +224,7 @@ export default class Picker extends React.Component {
<div className='emoji-picker-bar'> <div className='emoji-picker-bar'>
<Anchors <Anchors
ref='anchors' ref='anchors'
color={color}
categories={CATEGORIES} categories={CATEGORIES}
onAnchorClick={this.handleAnchorClick.bind(this)} onAnchorClick={this.handleAnchorClick.bind(this)}
/> />
@ -283,6 +284,7 @@ Picker.propTypes = {
style: React.PropTypes.object, style: React.PropTypes.object,
title: React.PropTypes.string, title: React.PropTypes.string,
emoji: React.PropTypes.string, emoji: React.PropTypes.string,
color: React.PropTypes.string,
sheetURL: React.PropTypes.string.isRequired, sheetURL: React.PropTypes.string.isRequired,
} }
@ -294,4 +296,5 @@ Picker.defaultProps = {
skin: 1, skin: 1,
title: 'EmojiPicker', title: 'EmojiPicker',
emoji: 'tophat', emoji: 'tophat',
color: '#ae65c5',
} }