Add new emoji picker

app/assets/javascripts/application.js.erb

@@ -22,8 +22,7 @@
 //= require bootstrap-colorselector
 //= require bootstrap-tagsinput.min
 //= require bootstrap-checkbox.min
-//= require emojione.min
-//= require emojionearea.min
+//= require emoji_button
 //= require typeahead.bundle.min
 //= require nested_form_fields
 //= require highlight.pack

app/assets/javascripts/repositories/renderers/columns/status.js

@@ -1,4 +1,4 @@
-/* global dropdownSelector I18n */
+/* global dropdownSelector I18n twemoji */
 /* eslint-disable no-unused-vars */
 
 var StatusColumnHelper = (function() {
@@ -34,9 +34,17 @@ var StatusColumnHelper = (function() {
       singleSelect: true,
       selectAppearance: 'simple',
       closeOnSelect: true,
-      onChange: function() {
+      onChange: () => {
         var values = dropdownSelector.getValues('#' + select);
         $hiddenField.val(values);
+      },
+      optionClass: 'emoji-status',
+      optionLabel: (data) => {
+        return twemoji.parse(data.label);
+      },
+      tagClass: 'emoji-status',
+      tagLabel: (data) => {
+        return twemoji.parse(data.label);
       }
     });
   }

app/assets/javascripts/repositories/renderers/edit_renderers.js

@@ -84,7 +84,7 @@ $.fn.dataTable.render.editRepositoryStatusValue = function(formId, columnId, cel
   if (currentElement.length) {
     currentValue = {
       value: currentElement.attr('data-value-id'),
-      label: iconElement.text() + ' ' + currentElement.text()
+      label: iconElement.find('img').attr('alt') + ' ' + currentElement.text()
     };
   }
 

app/assets/javascripts/repositories/renderers/view_renderers.js

@@ -1,4 +1,4 @@
-/* global I18n */
+/* global I18n twemoji */
 
 $.fn.dataTable.render.RepositoryAssetValue = function(data) {
   var asset = data.value;
@@ -41,8 +41,10 @@ $.fn.dataTable.render.defaultRepositoryListValue = function() {
 
 $.fn.dataTable.render.RepositoryStatusValue = function(data) {
   return `
-    <span class="repository-status-value-icon">${data.value.icon}</span>
+  <div class="repository-status-value-container" title="${data.value.icon} ${data.value.status}">
+    <span class="repository-status-value-icon">${twemoji.parse(data.value.icon)}</span>
     <span data-value-id="${data.value.id}" class="status-label">${data.value.status}</span>
+  </div>
   `;
 };
 

app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js

@@ -1,5 +1,6 @@
-/* global GLOBAL_CONSTANTS I18n */
-/* eslint-disable no-unused-vars */
+/* global GLOBAL_CONSTANTS I18n EmojiButton twemoji */
+/* eslint-disable no-unused-vars, no-use-before-define, consistent-return, no-param-reassign */
+
 var RepositoryStatusColumnType = (function() {
   var manageModal = '#manage-repository-column';
   var iconId = '.status-item-icon';
@@ -23,12 +24,12 @@ var RepositoryStatusColumnType = (function() {
     $.each($statusRows, (index, statusRow) => {
       var $row = $(statusRow);
       var $statusField = $row.find('.status-item-field');
-      var iconPlaceholder = $row.find(iconId)[0].emojioneArea.editor.hasClass('has-placeholder');
+      var iconPlaceholder = $row.find(iconId).attr('emoji');
       var stringLength = $statusField.val().length;
 
       if (stringLength < GLOBAL_CONSTANTS.NAME_MIN_LENGTH
           || stringLength > GLOBAL_CONSTANTS.NAME_MAX_LENGTH
-          || iconPlaceholder) {
+          || !iconPlaceholder) {
         $row.addClass('error').attr('data-error-text', I18n.t('libraries.manange_modal_column.status_type.errors.icon_and_name_error'));
       } else {
         $row.removeClass('error');
@@ -47,14 +48,56 @@ var RepositoryStatusColumnType = (function() {
   }
 
   function initEmojiPicker(iconElem) {
-    iconElem.emojioneArea({
-      standalone: true,
-      autocomplete: false,
-      pickerPosition: 'bottom',
-      events: {
-        emojibtn_click: function(button, event) {
-          validateForm();
-        }
+    var picker = new EmojiButton();
+    var icon = $(iconElem)[0];
+    picker.on('emoji', emoji => {
+      $(iconElem).attr('emoji', emoji).html(twemoji.parse(emoji));
+    });
+    $(icon).click(() => {
+      if (picker.pickerVisible) {
+        picker.hidePicker();
+      } else {
+        picker.showPicker(icon);
+      }
+      setTimeout(() => {
+        replaceEmojies($('.emoji-picker.visible .emoji-picker__tab-body.active'));
+        $.each($('.emoji-picker__tab-body .emoji-picker__emojis'), (i, scrollContainer) => {
+          $(scrollContainer).off('scroll').on('scroll', function() {
+            replaceEmojies($(this).closest('.emoji-picker__tab-body'));
+          });
+        });
+      }, 0);
+      $('.emoji-picker__tabs').off('click', '.emoji-picker__tab')
+        .on('click', '.emoji-picker__tab', function() {
+          $.each($('.emoji-picker__tab'), (i, tab) => {
+            if ($(tab).hasClass('active')) {
+              replaceEmojies($($('.emoji-picker__tab-body')[i]));
+            }
+          });
+        });
+
+      $('.emoji-picker__tab-body.active').off('click', '.emoji-picker__emoji')
+        .on('click', '.emoji-picker__emoji', function() {
+          $.each($('.emoji-picker__variant-popup .emoji-picker__emoji'), (i, button) => {
+            $(button).addClass('updated');
+            button.innerHTML = twemoji.parse(button.innerHTML);
+          });
+        });
+    });
+  }
+
+  function replaceEmojies(tabBody) {
+    var container = tabBody.find('.emoji-picker__emojis');
+    var containerHeight = container.height();
+    $.each(tabBody.find('.emoji-picker__emoji:not(.updated)'), (i, button) => {
+      var buttonPosition = $(button).offset().top - container.offset().top;
+      var buttonVisible = containerHeight > buttonPosition - 100;
+      if (buttonVisible && !$(button).hasClass('updated')) {
+        $(button).addClass('updated');
+        button.innerHTML = twemoji.parse(button.innerHTML);
+      }
+      if (!buttonVisible) {
+        return false;
       }
     });
   }
@@ -143,7 +186,7 @@ var RepositoryStatusColumnType = (function() {
         var $item = $(value);
         var id = $item.data('id');
         var removed = $item.data('removed');
-        var icon = $item.find(iconId)[0].emojioneArea.getText();
+        var icon = $item.find(iconId).attr('emoji');
         var status = $item.find('input.status-item-field').val();
 
         if (removed && id) { // flag as item for removing
@@ -159,6 +202,13 @@ var RepositoryStatusColumnType = (function() {
       });
 
       return repositoryColumnParams;
+    },
+
+    updateLoadedEmojies: () => {
+      $.each($('.status-column-type .status-item-icon'), (i, icon) => {
+        initEmojiPicker(icon);
+        $(icon).html(twemoji.parse(icon.innerHTML));
+      });
     }
   };
 }());

app/assets/javascripts/repository_columns/index.js

@@ -188,6 +188,8 @@ var RepositoryColumns = (function() {
         $manageModal
           .trigger('columnModal::partialLoadedFor' + columnType);
 
+        RepositoryStatusColumnType.updateLoadedEmojies();
+
         if (button.data('action') === 'new') {
           $('[data-column-type="RepositoryTextValue"]').show();
           $('#new-repo-column-submit').show();

app/assets/stylesheets/repository/repository_table.scss

@@ -19,10 +19,6 @@
     }
   }
 
-  .repository-status-value-icon {
-    margin-right: 5px;
-  }
-
   .dropdown-selector-container {
     width: 150px;
   }
@@ -79,7 +75,7 @@
       }
     }
 
-    span  {
+    span {
       color: $brand-primary;
       cursor: pointer;
 
@@ -94,6 +90,47 @@
     min-width: 150px;
   }
 
+  // Status
+  .repository-status-value-container {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  .repository-status-value-icon {
+    .emoji {
+      height: 24px;
+      margin-right: 5px;
+      min-width: 24px;
+      width: 24px;
+    }
+  }
+
+  .dropdown-selector-container {
+    .emoji-status {
+      .emoji {
+        height: 24px;
+        margin-right: 5px;
+        min-width: 24px;
+        transition: .3s;
+        width: 24px;
+      }
+    }
+
+    &.open {
+      .ds-simple.emoji-status {
+        .emoji {
+          height: 12px;
+          margin-right: 2px;
+          min-width: 12px;
+          width: 12px;
+        }
+      }
+    }
+  }
+
   // DateTime
   .datetime-container {
     display: flex;

app/assets/stylesheets/repository_columns/status_type.scss

@@ -1,12 +1,19 @@
+// scss-lint:disable SelectorFormat
+
 @import "constants";
 
+.status-item-list {
+  max-height: 350px;
+  overflow-y: auto;
+}
+
 .status-item-container {
   align-items: center;
   display: flex;
   height: 34px;
   margin-bottom: 5px;
-  transition: .3s;
   position: relative;
+  transition: .3s;
 
   .status-item-field {
     border: 1px solid $input-border;
@@ -19,24 +26,23 @@
   }
 
   .status-item-icon {
+    align-items: center;
+    border: $border-default;
     border-radius: 4px 0 0 4px;
+    cursor: pointer;
+    display: flex;
     height: 34px;
+    justify-content: center;
+    min-width: 34px;
 
-    .emojionearea-editor {
-      padding: 6px !important;
-
-      &::before {
-        border-left: 0 !important;
-      }
+    .emoji {
+      height: 24px;
+      width: 24px;
     }
 
-    .emojionearea-button > div {
-      display: none !important;
-    }
-
-    .emojionearea-search > input {
-      border: $border-default !important;
-      border-radius: $border-radius-default !important;
+    &:not([emoji])::after {
+      @include font-awesome;
+      content: $font-fas-exclamation-circle;
     }
   }
 
@@ -118,3 +124,69 @@
     padding-left: 5px;
   }
 }
+
+.emoji-picker {
+  z-index: 10000;
+
+
+  .emoji-picker__search-container {
+    align-items: center;
+    display: none;
+
+    .emoji-picker__search {
+      font-size: 14px;
+    }
+
+    .emoji-picker__search-icon {
+      line-height: 100%;
+      top: auto;
+    }
+  }
+
+  .emoji-picker__tab {
+    font-size: 24px;
+  }
+
+  .emoji-picker__tab-body {
+    transition: 0s;
+
+    h2 {
+      font-size: 14px;
+      margin-bottom: 5px;
+    }
+  }
+
+  .emoji-picker__preview {
+    display: none;
+  }
+
+  .emoji-picker__emoji {
+    opacity: 0;
+
+    .emoji {
+      height: 22px;
+      width: 22px;
+    }
+
+    &.updated {
+      opacity: 1;
+    }
+  }
+
+  .emoji-picker__emojis {
+    height: 14rem;
+  }
+
+  .emoji-picker__variant-popup {
+    align-items: center;
+    display: flex;
+
+    .emoji-picker__variant-popup-close-button {
+      flex-grow: 1;
+      height: auto;
+      position: relative;
+      text-align: right;
+      top: auto;
+    }
+  }
+}

app/assets/stylesheets/shared_styles/constants/fonts.scss

@@ -18,6 +18,7 @@ $font-fas-exclamation-triangle: "\f071";
 $font-fas-lock: "\f023";
 $font-fas-angle-left: "\f104";
 $font-fas-angle-right: "\f105";
+$font-fas-exclamation-circle: "\f06a";
 
 @mixin font-h1 {
   font-size: 24px;

app/views/layouts/application.html.erb

@@ -26,6 +26,8 @@
     <%= javascript_pack_tag 'tui_image_editor' %>
     <%= stylesheet_pack_tag 'tui_image_editor_styles' %>
 
+    <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
+
   </head>
   <body
     class="<%= yield :body_class %>"

app/views/repository_columns/manage_column_partials/_status.html.erb

@@ -5,7 +5,7 @@
   <div class="col-sm-9 status-item-list">
     <% column.repository_status_items.each do |item| %>
       <div class="status-item-container" data-id="<%= item.id %>">
-        <div class="status-item-icon"><span><%= item.icon %></span></div>
+        <div class="status-item-icon" emoji="<%= item.icon %>"><%= item.icon %></div>
         <input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>"
                class="status-item-field"
                type="text"