mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[PLT-7317] Fix emoji picker preview (#7136)

Просмотр исходного кода 
* fix emoji picker preview

* make use of sprite-sheet CSS for all system emojis
Этот коммит содержится в:
Saturnino Abril
2017-08-08 23:48:41 +08:00
коммит произвёл GitHub
родитель 6964ae61dc
Коммит e359e28018
6 изменённых файлов: 73 добавлений и 108 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

35
webapp/components/emoji_picker/components/emoji_picker_item.jsx
Просмотреть файл

@@ -35,7 +35,7 @@ export default class EmojiPickerItem extends React.PureComponent {
}
handleMouseOut() {
this.props.onItemOut(this.props.emoji);
this.props.onItemOut();
}
handleClick() {
@@ -45,21 +45,7 @@ export default class EmojiPickerItem extends React.PureComponent {
render() {
let item = null;
if (this.props.category === 'recent' || this.props.category === 'custom') {
item = (
<span
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onClick={this.handleClick}
className='emoji-picker__item-wrapper'
>
<img
className='emoji-picker__item emoticon'
src={EmojiStore.getEmojiImageUrl(this.props.emoji)}
/>
</span>
);
} else {
if (this.props.emoji.category) {
let className;
if (this.props.isLoaded) {
className = 'emojisprite';
@@ -67,7 +53,7 @@ export default class EmojiPickerItem extends React.PureComponent {
className = 'emojisprite-loading';
}
className += ' emoji-category-' + this.props.category;
className += ' emoji-category-' + this.props.emoji.category;
className += ' emoji-' + this.props.emoji.filename;
item = (
@@ -81,7 +67,22 @@ export default class EmojiPickerItem extends React.PureComponent {
/>
</div>
);
} else {
item = (
<span
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onClick={this.handleClick}
className='emoji-picker__item-wrapper'
>
<img
className='emoji-picker__item emoticon'
src={EmojiStore.getEmojiImageUrl(this.props.emoji)}
/>
</span>
);
}
return item;
}
}

31
webapp/components/emoji_picker/components/emoji_picker_preview.jsx
Просмотреть файл

@@ -22,22 +22,29 @@ export default class EmojiPickerPreview extends React.Component {
let aliases;
let previewImage;
if (emoji.aliases) {
if (emoji.aliases && emoji.category) {
// This is a system emoji which only has a list of aliases
name = emoji.aliases[0];
aliases = emoji.aliases;
previewImage = (<span className='sprite-preview'><img
src='/static/images/img_trans.gif'
className={' emojisprite-preview emoji-' + emoji.filename + ' '}
/></span>);
previewImage = (
<span className='sprite-preview'>
<img
src='/static/images/img_trans.gif'
className={'emojisprite-preview emoji-category-' + emoji.category + ' emoji-' + emoji.filename}
/>
</span>
);
} else {
// This is a custom emoji that matches the model on the server
name = emoji.name;
aliases = [emoji.name];
previewImage = (<img
className='emoji-picker__preview-image'
src={EmojiStore.getEmojiImageUrl(emoji)}
/>);
previewImage = (
<img
className='emoji-picker__preview-image'
src={EmojiStore.getEmojiImageUrl(emoji)}
/>
);
}
return (
@@ -47,9 +54,9 @@ export default class EmojiPickerPreview extends React.Component {
</div>
<div className='emoji-picker__preview-image-label-box'>
<span className='emoji-picker__preview-name'>{name}</span>
<span
className='emoji-picker__preview-aliases'
>{ ':' + aliases[0] + ':'}</span>
<span className='emoji-picker__preview-aliases'>
{':' + aliases[0] + ':'}
</span>
</div>
</div>
);

70
webapp/components/emoji_picker/emoji_picker.jsx
Просмотреть файл

@@ -119,17 +119,23 @@ export default class EmojiPicker extends React.Component {
handleItemOver(emoji) {
clearTimeout(this.timeouthandler);
this.setState({selected: emoji});
this.setState({
selected: emoji
});
}
handleItemOut() {
this.timeouthandler = setTimeout(() => this.setState({selected: null}), 500);
this.timeouthandler = setTimeout(() => this.setState({
selected: null
}), 500);
}
handleItemUnmount(emoji) {
// Prevent emoji preview from showing emoji which is not present anymore (due to filter)
if (this.state.selected === emoji) {
this.setState({selected: null});
this.setState({
selected: null
});
}
}
@@ -235,9 +241,7 @@ export default class EmojiPicker extends React.Component {
let header = null;
if (items.length > 0) {
header = (
<div
className='emoji-picker__category-header'
>
<div className='emoji-picker__category-header'>
<FormattedMessage id={'emoji_picker.' + category}/>
</div>
);
@@ -257,56 +261,6 @@ export default class EmojiPicker extends React.Component {
);
}
renderPreview(selected) {
if (selected) {
let name;
let aliases;
let previewImage;
if (selected.name) {
// This is a custom emoji that matches the model on the server
name = selected.name;
aliases = [selected.name];
previewImage = (
<img
className='emoji-picker__preview-image'
align='absmiddle'
src={EmojiStore.getEmojiImageUrl(selected)}
/>
);
} else {
// This is a system emoji which only has a list of aliases
name = selected.aliases[0];
aliases = selected.aliases;
previewImage = (
<span>
<img
src='/static/images/img_trans.gif'
className={' emojisprite-preview emoji-' + selected.filename + ' '}
align='absmiddle'
/>
</span>
);
}
return (
<div className='emoji-picker__preview'>
{previewImage}
<span className='emoji-picker__preview-name'>{name}</span>
<span className='emoji-picker__preview-aliases'>{aliases.map((alias) => ':' + alias + ':').join(' ')}</span>
</div>
);
}
return (
<span className='emoji-picker__preview-placeholder'>
<FormattedMessage
id='emoji_picker.emojiPicker'
defaultMessage='Emoji Picker'
/>
</span>
);
}
render() {
const items = [];
@@ -473,7 +427,9 @@ export default class EmojiPicker extends React.Component {
>
{items}
</div>
<EmojiPickerPreview emoji={this.state.selected}/>
<EmojiPickerPreview
emoji={this.state.selected}
/>
</div>
);
}