Update “No Emoji Found” layout

release
Etienne Lemay 2017-04-18 11:20:17 -04:00
parent b1d5c70bd2
commit f07c0c0638
4 changed files with 24 additions and 20 deletions

View File

@ -41,7 +41,7 @@ import { Picker } from 'emoji-mart'
#### I18n #### I18n
```js ```js
search: 'Search', search: 'Search',
notfound: 'No emoji found', notfound: 'No Emoji Found',
categories: { categories: {
search: 'Search Results', search: 'Search Results',
recent: 'Frequently Used', recent: 'Frequently Used',

View File

@ -104,9 +104,6 @@
background-color: #f4f4f4; background-color: #f4f4f4;
border-radius: 100%; border-radius: 100%;
} }
.emoji-mart-no-results .emoji-mart-emoji:hover:before {
content: none;
}
.emoji-mart-category-label { .emoji-mart-category-label {
z-index: 2; z-index: 2;
@ -137,9 +134,14 @@
padding-top: 70px; padding-top: 70px;
color: #858585; color: #858585;
} }
.emoji-mart-no-results span { .emoji-mart-no-results .emoji-mart-category-label {
display: inline-block; display: none;
vertical-align: middle; }
.emoji-mart-no-results .emoji-mart-no-results-label {
margin-top: .2em;
}
.emoji-mart-no-results .emoji-mart-emoji:hover:before {
content: none;
} }
.emoji-mart-preview { .emoji-mart-preview {

View File

@ -118,7 +118,7 @@ export default class Category extends React.Component {
} }
} }
return <div ref='container' className='emoji-mart-category' style={containerStyles}> return <div ref='container' className={`emoji-mart-category ${emojis && !emojis.length ? 'emoji-mart-no-results' : ''}`} style={containerStyles}>
<div style={labelStyles} data-name={name} className='emoji-mart-category-label'> <div style={labelStyles} data-name={name} className='emoji-mart-category-label'>
<span style={labelSpanStyles} ref='label'>{i18n.categories[name.toLowerCase()]}</span> <span style={labelSpanStyles} ref='label'>{i18n.categories[name.toLowerCase()]}</span>
</div> </div>
@ -132,19 +132,21 @@ export default class Category extends React.Component {
)} )}
{emojis && !emojis.length && {emojis && !emojis.length &&
<div className='emoji-mart-no-results'> <div>
<div>
<Emoji <Emoji
{...emojiProps} {...emojiProps}
size={22} size={38}
emoji='sleuth_or_spy' emoji='sleuth_or_spy'
onOver={null} onOver={null}
onLeave={null} onLeave={null}
onClick={null} onClick={null}
/> />
</div>
<span className='emoji-mart-no-results-label'> <div className='emoji-mart-no-results-label'>
{i18n.notfound} {i18n.notfound}
</span> </div>
</div> </div>
} }
</div> </div>

View File

@ -14,7 +14,7 @@ const SEARCH_CATEGORY = { name: 'Search', emojis: null, anchor: false }
const I18N = { const I18N = {
search: 'Search', search: 'Search',
notfound: 'No emoji found', notfound: 'No Emoji Found',
categories: { categories: {
search: 'Search Results', search: 'Search Results',
recent: 'Frequently Used', recent: 'Frequently Used',