mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-07 17:07:19 +02:00
Code Issues Releases Wiki Activity

Add a small "type to search" instruction to the top of the emoji popup

Browse Source
This commit is contained in:
Toby Zerner
2018-11-12 17:25:02 +10:30
parent 3d0097ea12
commit b3d0dd3aa9
3 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/emoji/js/src/forum/addComposerAutocomplete.js
View File

@@ -84,7 +84,7 @@ export default function addComposerAutocomplete() {
key={emoji} key={emoji}
onclick={() => applySuggestion(emoji)} onclick={() => applySuggestion(emoji)}
onmouseenter={function() { onmouseenter={function() {
dropdown.setIndex($(this).parent().index()); dropdown.setIndex($(this).parent().index() - 1);
}}> }}>
<img alt={emoji} class="emoji" draggable="false" src={'//twemoji.maxcdn.com/2/72x72/' + code + '.png'}/> <img alt={emoji} class="emoji" draggable="false" src={'//twemoji.maxcdn.com/2/72x72/' + code + '.png'}/>
{name} {name}

5
extensions/emoji/js/src/forum/components/AutocompleteDropdown.js
View File

@@ -10,6 +10,7 @@ export default class AutocompleteDropdown extends Component {
view() { view() {
return ( return (
<ul className="Dropdown-menu EmojiDropdown"> <ul className="Dropdown-menu EmojiDropdown">
<li className="Dropdown-header" key="0">{app.translator.trans('flarum-emoji.forum.composer.type_to_search_text')}</li>
{this.props.items.map(item => <li key={item.attrs.key}>{item}</li>)} {this.props.items.map(item => <li key={item.attrs.key}>{item}</li>)}
</ul> </ul>
); );
@@ -36,14 +37,14 @@ export default class AutocompleteDropdown extends Component {
} }
complete() { complete() {
this.$('li').eq(this.index).find('button').click(); this.$('li:not(.Dropdown-header)').eq(this.index).find('button').click();
} }
setIndex(index, scrollToItem) { setIndex(index, scrollToItem) {
if (this.keyWasJustPressed && !scrollToItem) return; if (this.keyWasJustPressed && !scrollToItem) return;
const $dropdown = this.$(); const $dropdown = this.$();
const $items = $dropdown.find('li'); const $items = $dropdown.find('li:not(.Dropdown-header)');
let rangedIndex = index; let rangedIndex = index;
if (rangedIndex < 0) { if (rangedIndex < 0) {

8
extensions/emoji/less/forum.less
View File

@@ -23,6 +23,14 @@ img.emoji {
margin-left: -30px; margin-left: -30px;
} }
} }
.Dropdown-header {
color: @muted-more-color;
text-transform: none;
font-weight: normal;
padding-bottom: 5px;
font-size: 11px;
}
} }
.ComposerBody-emojiWrapper { .ComposerBody-emojiWrapper {