Restyle status message input on profile settings

1 files changed, 33 insertions, 22 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 70f20c5c7cf..e34db893989 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -33,19 +33,24 @@ const categoryLabelMap = {
 const IS_VISIBLE = 'is-visible';
 const IS_RENDERED = 'is-rendered';
 
-class AwardsHandler {
+export class AwardsHandler {
   constructor(emoji) {
     this.emoji = emoji;
     this.eventListeners = [];
+    this.toggleButtonSelector = '.js-add-award';
+    this.menuClass = 'js-award-emoji-menu';
+  }
+
+  bindEvents() {
     // If the user shows intent let's pre-build the menu
     this.registerEventListener(
       'one',
       $(document),
       'mouseenter focus',
-      '.js-add-award',
+      this.toggleButtonSelector,
       'mouseenter focus',
       () => {
-        const $menu = $('.emoji-menu');
+        const $menu = $(`.${this.menuClass}`);
         if ($menu.length === 0) {
           requestAnimationFrame(() => {
             this.createEmojiMenu();
@@ -53,7 +58,7 @@ class AwardsHandler {
         }
       },
     );
-    this.registerEventListener('on', $(document), 'click', '.js-add-award', e => {
+    this.registerEventListener('on', $(document), 'click', this.toggleButtonSelector, e => {
       e.stopPropagation();
       e.preventDefault();
       this.showEmojiMenu($(e.currentTarget));
@@ -61,15 +66,17 @@ class AwardsHandler {
 
     this.registerEventListener('on', $('html'), 'click', e => {
       const $target = $(e.target);
-      if (!$target.closest('.emoji-menu').length) {
+      if (!$target.closest(`.${this.menuClass}`).length) {
         $('.js-awards-block.current').removeClass('current');
-        if ($('.emoji-menu').is(':visible')) {
-          $('.js-add-award.is-active').removeClass('is-active');
-          this.hideMenuElement($('.emoji-menu'));
+        if ($(`.${this.menuClass}`).is(':visible')) {
+          $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active');
+          this.hideMenuElement($(`.${this.menuClass}`));
         }
       }
     });
-    this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', e => {
+
+    const emojiButtonSelector = `.js-awards-block .js-emoji-btn, .${this.menuClass} .js-emoji-btn`;
+    this.registerEventListener('on', $(document), 'click', emojiButtonSelector, e => {
       e.preventDefault();
       const $target = $(e.currentTarget);
       const $glEmojiElement = $target.find('gl-emoji');
@@ -101,7 +108,7 @@ class AwardsHandler {
       $addBtn.closest('.js-awards-block').addClass('current');
     }
 
-    const $menu = $('.emoji-menu');
+    const $menu = $(`.${this.menuClass}`);
     const $thumbsBtn = $menu.find('[data-name="thumbsup"], [data-name="thumbsdown"]').parent();
     const $userAuthored = this.isUserAuthored($addBtn);
     if ($menu.length) {
@@ -118,7 +125,7 @@ class AwardsHandler {
     } else {
       $addBtn.addClass('is-loading is-active');
       this.createEmojiMenu(() => {
-        const $createdMenu = $('.emoji-menu');
+        const $createdMenu = $(`.${this.menuClass}`);
         $addBtn.removeClass('is-loading');
         this.positionMenu($createdMenu, $addBtn);
         return setTimeout(() => {
@@ -156,7 +163,7 @@ class AwardsHandler {
     }
 
     const emojiMenuMarkup = `
-      <div class="emoji-menu">
+      <div class="emoji-menu ${this.menuClass}">
         <input type="text" name="emoji-menu-search" value="" class="js-emoji-menu-search emoji-search search-input form-control" placeholder="Search emoji" />
 
         <div class="emoji-menu-content">
@@ -185,7 +192,7 @@ class AwardsHandler {
 
     // Avoid the jank and render the remaining categories separately
     // This will take more time, but makes UI more responsive
-    const menu = document.querySelector('.emoji-menu');
+    const menu = document.querySelector(`.${this.menuClass}`);
     const emojiContentElement = menu.querySelector('.emoji-menu-content');
     const remainingCategories = Object.keys(categoryMap).slice(1);
     const allCategoriesAddedPromise = remainingCategories.reduce(
@@ -270,9 +277,9 @@ class AwardsHandler {
     if (isInVueNoteablePage() && !isMainAwardsBlock) {
       const id = votesBlock.attr('id').replace('note_', '');
 
-      this.hideMenuElement($('.emoji-menu'));
+      this.hideMenuElement($(`.${this.menuClass}`));
 
-      $('.js-add-award.is-active').removeClass('is-active');
+      $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active');
       const toggleAwardEvent = new CustomEvent('toggleAward', {
         detail: {
           awardName: emoji,
@@ -291,9 +298,9 @@ class AwardsHandler {
       return typeof callback === 'function' ? callback() : undefined;
     });
 
-    this.hideMenuElement($('.emoji-menu'));
+    this.hideMenuElement($(`.${this.menuClass}`));
 
-    return $('.js-add-award.is-active').removeClass('is-active');
+    return $(`${this.toggleButtonSelector}.is-active`).removeClass('is-active');
   }
 
   addAwardToEmojiBar(votesBlock, emoji, checkForMutuality) {
@@ -321,7 +328,7 @@ class AwardsHandler {
 
   getVotesBlock() {
     if (isInVueNoteablePage()) {
-      const $el = $('.js-add-award.is-active').closest('.note.timeline-entry');
+      const $el = $(`${this.toggleButtonSelector}.is-active`).closest('.note.timeline-entry');
 
       if ($el.length) {
         return $el;
@@ -458,7 +465,7 @@ class AwardsHandler {
   }
 
   createEmoji(votesBlock, emoji) {
-    if ($('.emoji-menu').length) {
+    if ($(`.${this.menuClass}`).length) {
       this.createAwardButtonForVotesBlock(votesBlock, emoji);
     }
     this.createEmojiMenu(() => {
@@ -538,7 +545,7 @@ class AwardsHandler {
       this.searchEmojis(term);
     });
 
-    const $menu = $('.emoji-menu');
+    const $menu = $(`.${this.menuClass}`);
     this.registerEventListener('on', $menu, transitionEndEventString, e => {
       if (e.target === e.currentTarget) {
         // Clear the search
@@ -608,7 +615,7 @@ class AwardsHandler {
     this.eventListeners.forEach(entry => {
       entry.element.off.call(entry.element, ...entry.args);
     });
-    $('.emoji-menu').remove();
+    $(`.${this.menuClass}`).remove();
   }
 }
 
@@ -616,7 +623,11 @@ let awardsHandlerPromise = null;
 export default function loadAwardsHandler(reload = false) {
   if (!awardsHandlerPromise || reload) {
     awardsHandlerPromise = import(/* webpackChunkName: 'emoji' */ './emoji').then(
-      Emoji => new AwardsHandler(Emoji),
+      Emoji => {
+        const awardsHandler = new AwardsHandler(Emoji);
+        awardsHandler.bindEvents();
+        return awardsHandler;
+      },
     );
   }
   return awardsHandlerPromise;