Display default status emoji if only message is entered
This commit is contained in:
parent
ee578b0756
commit
f0e12d84d2
|
@ -3,15 +3,22 @@ import createFlash from '~/flash';
|
|||
import GfmAutoComplete from '~/gfm_auto_complete';
|
||||
import EmojiMenu from './emoji_menu';
|
||||
|
||||
const defaultStatusEmoji = 'speech_balloon';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const toggleEmojiMenuButtonSelector = '.js-toggle-emoji-menu';
|
||||
const toggleEmojiMenuButton = document.querySelector(toggleEmojiMenuButtonSelector);
|
||||
const statusEmojiField = document.getElementById('js-status-emoji-field');
|
||||
const statusMessageField = document.getElementById('js-status-message-field');
|
||||
const findNoEmojiPlaceholder = () => document.getElementById('js-no-emoji-placeholder');
|
||||
|
||||
const toggleNoEmojiPlaceholder = (isVisible) => {
|
||||
const placeholderElement = document.getElementById('js-no-emoji-placeholder');
|
||||
placeholderElement.classList.toggle('hidden', !isVisible);
|
||||
};
|
||||
|
||||
const findStatusEmoji = () => toggleEmojiMenuButton.querySelector('gl-emoji');
|
||||
const removeStatusEmoji = () => {
|
||||
const statusEmoji = toggleEmojiMenuButton.querySelector('gl-emoji');
|
||||
const statusEmoji = findStatusEmoji();
|
||||
if (statusEmoji) {
|
||||
statusEmoji.remove();
|
||||
}
|
||||
|
@ -19,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
const selectEmojiCallback = (emoji, emojiTag) => {
|
||||
statusEmojiField.value = emoji;
|
||||
findNoEmojiPlaceholder().classList.add('hidden');
|
||||
toggleNoEmojiPlaceholder(false);
|
||||
removeStatusEmoji();
|
||||
toggleEmojiMenuButton.innerHTML += emojiTag;
|
||||
};
|
||||
|
@ -29,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
statusEmojiField.value = '';
|
||||
statusMessageField.value = '';
|
||||
removeStatusEmoji();
|
||||
findNoEmojiPlaceholder().classList.remove('hidden');
|
||||
toggleNoEmojiPlaceholder(true);
|
||||
});
|
||||
|
||||
const emojiAutocomplete = new GfmAutoComplete();
|
||||
|
@ -44,6 +51,23 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
selectEmojiCallback,
|
||||
);
|
||||
emojiMenu.bindEvents();
|
||||
|
||||
const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji);
|
||||
statusMessageField.addEventListener('input', () => {
|
||||
const hasStatusMessage = statusMessageField.value.trim() !== '';
|
||||
const statusEmoji = findStatusEmoji();
|
||||
if (hasStatusMessage && statusEmoji) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasStatusMessage) {
|
||||
toggleNoEmojiPlaceholder(false);
|
||||
toggleEmojiMenuButton.innerHTML += defaultEmojiTag;
|
||||
} else if (statusEmoji.dataset.name === defaultStatusEmoji) {
|
||||
toggleNoEmojiPlaceholder(true);
|
||||
removeStatusEmoji();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => createFlash('Failed to load emoji list!'));
|
||||
});
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Display default status emoji if only message is entered
|
||||
merge_request: 21330
|
||||
author:
|
||||
type: changed
|
|
@ -130,5 +130,15 @@ describe 'User edit profile' do
|
|||
visit user_path(user)
|
||||
expect(page).not_to have_selector '.cover-status'
|
||||
end
|
||||
|
||||
it 'displays a default emoji if only message is entered' do
|
||||
message = 'a status without emoji'
|
||||
visit(profile_path)
|
||||
fill_in 'js-status-message-field', with: message
|
||||
|
||||
within('.js-toggle-emoji-menu') do
|
||||
expect(page).to have_emoji('speech_balloon')
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
Loading…
Reference in New Issue