Commit f0e12d84 authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Phil Hughes

Display default status emoji if only message is entered

parent ee578b07
...@@ -3,15 +3,22 @@ import createFlash from '~/flash'; ...@@ -3,15 +3,22 @@ import createFlash from '~/flash';
import GfmAutoComplete from '~/gfm_auto_complete'; import GfmAutoComplete from '~/gfm_auto_complete';
import EmojiMenu from './emoji_menu'; import EmojiMenu from './emoji_menu';
const defaultStatusEmoji = 'speech_balloon';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const toggleEmojiMenuButtonSelector = '.js-toggle-emoji-menu'; const toggleEmojiMenuButtonSelector = '.js-toggle-emoji-menu';
const toggleEmojiMenuButton = document.querySelector(toggleEmojiMenuButtonSelector); const toggleEmojiMenuButton = document.querySelector(toggleEmojiMenuButtonSelector);
const statusEmojiField = document.getElementById('js-status-emoji-field'); const statusEmojiField = document.getElementById('js-status-emoji-field');
const statusMessageField = document.getElementById('js-status-message-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 removeStatusEmoji = () => {
const statusEmoji = toggleEmojiMenuButton.querySelector('gl-emoji'); const statusEmoji = findStatusEmoji();
if (statusEmoji) { if (statusEmoji) {
statusEmoji.remove(); statusEmoji.remove();
} }
...@@ -19,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -19,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
const selectEmojiCallback = (emoji, emojiTag) => { const selectEmojiCallback = (emoji, emojiTag) => {
statusEmojiField.value = emoji; statusEmojiField.value = emoji;
findNoEmojiPlaceholder().classList.add('hidden'); toggleNoEmojiPlaceholder(false);
removeStatusEmoji(); removeStatusEmoji();
toggleEmojiMenuButton.innerHTML += emojiTag; toggleEmojiMenuButton.innerHTML += emojiTag;
}; };
...@@ -29,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -29,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
statusEmojiField.value = ''; statusEmojiField.value = '';
statusMessageField.value = ''; statusMessageField.value = '';
removeStatusEmoji(); removeStatusEmoji();
findNoEmojiPlaceholder().classList.remove('hidden'); toggleNoEmojiPlaceholder(true);
}); });
const emojiAutocomplete = new GfmAutoComplete(); const emojiAutocomplete = new GfmAutoComplete();
...@@ -44,6 +51,23 @@ document.addEventListener('DOMContentLoaded', () => { ...@@ -44,6 +51,23 @@ document.addEventListener('DOMContentLoaded', () => {
selectEmojiCallback, selectEmojiCallback,
); );
emojiMenu.bindEvents(); 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!')); .catch(() => createFlash('Failed to load emoji list!'));
}); });
---
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 ...@@ -130,5 +130,15 @@ describe 'User edit profile' do
visit user_path(user) visit user_path(user)
expect(page).not_to have_selector '.cover-status' expect(page).not_to have_selector '.cover-status'
end 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
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment