Update “No Emoji Found” layout
parent
b1d5c70bd2
commit
f07c0c0638
|
@ -41,7 +41,7 @@ import { Picker } from 'emoji-mart'
|
|||
#### I18n
|
||||
```js
|
||||
search: 'Search',
|
||||
notfound: 'No emoji found',
|
||||
notfound: 'No Emoji Found',
|
||||
categories: {
|
||||
search: 'Search Results',
|
||||
recent: 'Frequently Used',
|
||||
|
|
|
@ -104,9 +104,6 @@
|
|||
background-color: #f4f4f4;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.emoji-mart-no-results .emoji-mart-emoji:hover:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.emoji-mart-category-label {
|
||||
z-index: 2;
|
||||
|
@ -137,9 +134,14 @@
|
|||
padding-top: 70px;
|
||||
color: #858585;
|
||||
}
|
||||
.emoji-mart-no-results span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
.emoji-mart-no-results .emoji-mart-category-label {
|
||||
display: none;
|
||||
}
|
||||
.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 {
|
||||
|
|
|
@ -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'>
|
||||
<span style={labelSpanStyles} ref='label'>{i18n.categories[name.toLowerCase()]}</span>
|
||||
</div>
|
||||
|
@ -132,19 +132,21 @@ export default class Category extends React.Component {
|
|||
)}
|
||||
|
||||
{emojis && !emojis.length &&
|
||||
<div className='emoji-mart-no-results'>
|
||||
<Emoji
|
||||
{...emojiProps}
|
||||
size={22}
|
||||
emoji='sleuth_or_spy'
|
||||
onOver={null}
|
||||
onLeave={null}
|
||||
onClick={null}
|
||||
/>
|
||||
<div>
|
||||
<div>
|
||||
<Emoji
|
||||
{...emojiProps}
|
||||
size={38}
|
||||
emoji='sleuth_or_spy'
|
||||
onOver={null}
|
||||
onLeave={null}
|
||||
onClick={null}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className='emoji-mart-no-results-label'>
|
||||
<div className='emoji-mart-no-results-label'>
|
||||
{i18n.notfound}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
@ -14,7 +14,7 @@ const SEARCH_CATEGORY = { name: 'Search', emojis: null, anchor: false }
|
|||
|
||||
const I18N = {
|
||||
search: 'Search',
|
||||
notfound: 'No emoji found',
|
||||
notfound: 'No Emoji Found',
|
||||
categories: {
|
||||
search: 'Search Results',
|
||||
recent: 'Frequently Used',
|
||||
|
|
Loading…
Reference in New Issue