kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Add frequently used emojis back to awards menu

Browse source 
Thanks @filipa for the shout`
This commit is contained in:
Eric Eastwood 2017-03-09 11:55:18 -06:00
parent 130fd255bc
commit 3f5919e2c4
3 changed files with 61 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/assets/javascripts/awards_handler.js
View file

@ -45,12 +45,12 @@ function buildCategoryMap() {
});
}
function renderCategory(name, emojiList) {
function renderCategory(name, emojiList, opts = {}) {
return `
<h5 class="emoji-menu-title">
${name}
</h5>
<ul class="clearfix emoji-menu-list">
<ul class="clearfix emoji-menu-list ${opts.menuListClass}">
${emojiList.map(emojiName => `
<li class="emoji-menu-list-item">
<button class="emoji-menu-btn text-center js-emoji-btn" type="button">
@ -140,9 +140,6 @@ AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
const $createdMenu = $('.emoji-menu');
$addBtn.removeClass('is-loading');
this.positionMenu($createdMenu, $addBtn);
if (!this.frequentEmojiBlockRendered) {
this.renderFrequentlyUsedBlock();
}
return setTimeout(() => {
$createdMenu.addClass('is-visible');
$('#emoji_search').focus();
@ -165,11 +162,21 @@ AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
const emojisInCategory = categoryMap[categoryNameKey];
const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory);
// Render the frequently used
const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
let frequentlyUsedCatgegory = '';
if (frequentlyUsedEmojis.length > 0) {
frequentlyUsedCatgegory = renderCategory('Frequently used', frequentlyUsedEmojis, {
menuListClass: 'frequent-emojis',
});
}
const emojiMenuMarkup = `
<div class="emoji-menu">
<input type="text" name="emoji_search" id="emoji_search" value="" class="emoji-search search-input form-control" placeholder="Search emoji" />
<div class="emoji-menu-content">
${frequentlyUsedCatgegory}
${firstCategory}
</div>
</div>
@ -457,19 +464,6 @@ AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmoj
return _.compact(_.uniq(frequentlyUsedEmojis));
};
AwardsHandler.prototype.renderFrequentlyUsedBlock = function renderFrequentlyUsedBlock() {
if (Cookies.get('frequently_used_emojis')) {
const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
const ul = $('<ul class="clearfix emoji-menu-list frequent-emojis">');
for (let i = 0, len = frequentlyUsedEmojis.length; i < len; i += 1) {
const emoji = frequentlyUsedEmojis[i];
$(`.emoji-menu-content [data-name="${emoji}"]`).closest('li').clone().appendTo(ul);
}
$('.emoji-menu-content').prepend(ul).prepend($('<h5>').text('Frequently used'));
}
this.frequentEmojiBlockRendered = true;
};
AwardsHandler.prototype.setupSearch = function setupSearch() {
this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => {
const term = $(e.target).val().trim();

4
changelogs/unreleased/add-frequently-used-emojis-back-to-menu.yml Normal file
View file

@ -0,0 +1,4 @@
---
title: Add frequently used emojis back to awards menu
merge_request:
author:

50
spec/javascripts/awards_handler_spec.js
View file

@ -1,6 +1,7 @@
/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, max-len */
import promisePolyfill from 'es6-promise';
import Cookies from 'js-cookie';
import AwardsHandler from '~/awards_handler';
promisePolyfill.polyfill();
@ -208,8 +209,8 @@ promisePolyfill.polyfill();
expect($('[data-name=alien]').is(':visible')).toBe(true);
})
.then(done)
.catch(() => {
done.fail('Failed to open and build emoji menu');
.catch((err) => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
});
@ -232,8 +233,8 @@ promisePolyfill.polyfill();
it('should add selected emoji to awards block', function(done) {
return openEmojiMenuAndAddEmoji()
.then(done)
.catch(() => {
done.fail('Failed to open and build emoji menu');
.catch((err) => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
it('should remove already selected emoji', function(done) {
@ -247,7 +248,46 @@ promisePolyfill.polyfill();
})
.then(done)
.catch((err) => {
done.fail('Failed to open and build emoji menu');
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
});
describe('frequently used emojis', function() {
beforeEach(() => {
// Clear it out
Cookies.set('frequently_used_emojis', '');
});
it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', function(done) {
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), (title) => {
expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used');
});
})
.then(done)
.catch((err) => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
it('should have any frequently used section when there are frequently used emojis', function(done) {
awardsHandler.addEmojiToFrequentlyUsedList('8ball');
return openAndWaitForEmojiMenu()
.then(() => {
const emojiMenu = document.querySelector('.emoji-menu');
const hasFrequentlyUsedHeading = Array.prototype.some.call(emojiMenu.querySelectorAll('.emoji-menu-title'), title =>
title.textContent.trim().toLowerCase() === 'frequently used'
);
expect(hasFrequentlyUsedHeading).toBe(true);
})
.then(done)
.catch((err) => {
done.fail(`Failed to open and build emoji menu: ${err.message}`);
});
});
});