Added resolvable discussion frontend

4 files changed, 104 insertions, 1 deletions

diff --git a/app/assets/javascripts/comment_type_toggle.js b/app/assets/javascripts/comment_type_toggle.js
new file mode 100644
index 00000000000..75b6f60cabb
--- /dev/null
+++ b/app/assets/javascripts/comment_type_toggle.js
@@ -0,0 +1,32 @@
+import DropLab from '@gitlab-org/droplab';
+import InputSetter from '@gitlab-org/droplab/dist/plugins/InputSetter';
+
+class CommentTypeToggle {
+  constructor(trigger, list, input, button, secondaryButton) {
+    this.trigger = trigger;
+    this.list = list;
+    this.input = input;
+    this.button = button;
+    this.secondaryButton = secondaryButton;
+  }
+
+  initDroplab() {
+    this.droplab = new DropLab();
+    this.droplab.init(this.trigger, this.list, [InputSetter], {
+      InputSetter: [{
+        input: this.input,
+        valueAttribute: 'data-value',
+      },
+      {
+        input: this.button,
+        valueAttribute: 'data-button-text',
+      },
+      {
+        input: this.secondaryButton,
+        valueAttribute: 'data-secondary-button-text',
+      }],
+    });
+  }
+}
+
+export default CommentTypeToggle;
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index e7c98e16581..06072faa472 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -3,6 +3,8 @@
 /* global DropzoneInput */
 /* global autosize */
 
+import CommentTypeToggle from './comment_type_toggle';
+
 window.gl = window.gl || {};
 
 function GLForm(form) {
@@ -41,6 +43,20 @@ GLForm.prototype.setupForm = function() {
   this.form.find('.js-note-discard').hide();
   this.form.show();
   if (this.isAutosizeable) this.setupAutosize();
+
+  this.initCommentTypeToggle();
+};
+
+GLForm.prototype.initCommentTypeToggle = function () {
+  this.commentTypeToggle = new CommentTypeToggle(
+    this.form[0].querySelector('.js-comment-type-dropdown .dropdown-toggle'),
+    this.form[0].querySelector('.js-comment-type-dropdown .dropdown-menu'),
+    document.getElementById('note_type'),
+    this.form[0].querySelector('.js-comment-type-dropdown .js-comment-submit-button'),
+    document.querySelector('.js-note-target-close'),
+  );
+
+  this.commentTypeToggle.initDroplab();
 };
 
 GLForm.prototype.setupAutosize = function () {
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 63a5d25a1dc..33749d6ed9e 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -452,7 +452,7 @@ require('./task_list');
       form.addClass("js-main-target-form");
       form.find("#note_line_code").remove();
       form.find("#note_position").remove();
-      form.find("#note_type").remove();
+      form.find("#note_type").val('');
       form.find("#in_reply_to_discussion_id").remove();
       form.find('.js-comment-resolve-button').closest('comment-and-resolve-btn').remove();
       return this.parentTimeline = form.parents('.timeline');
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 927bf9805ce..8bc988b40cb 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -310,3 +310,58 @@
     margin-bottom: 10px;
   }
 }
+
+.comment-type-dropdown {
+  .dropdown-toggle .fa {
+    color: $white-light;
+    padding-right: 2px;
+    margin-top: 2px;
+    pointer-events: none;
+  }
+
+  .dropdown-menu {
+    top: initial;
+    bottom: 40px;
+    width: 297px;
+  }
+
+  .description {
+    display: inline-block;
+    white-space: normal;
+    margin-left: 8px;
+    padding-right: 33px;
+  }
+
+  li {
+    white-space: nowrap;
+    border-radius: 0;
+    cursor: pointer;
+    padding-top: 6px;
+
+    &:hover,
+    &:focus {
+      background-color: $dropdown-hover-color;
+      color: $white-light;
+    }
+
+    &.droplab-item-selected i {
+      visibility: visible;
+    }
+
+    i {
+      visibility: hidden;
+    }
+  }
+
+  i {
+    display: inline-block;
+    vertical-align: top;
+    padding-top: 2px;
+  }
+
+  .divider {
+    margin: 0 8px;
+    padding: 0;
+    border-top: $gray-darkest;
+  }
+}