Remove threeDots menu container, use icons instead

davue · Apr 17, 2020 · 7079897 · 7079897
1 parent 665b2cc
commit 7079897
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 42 deletions.
diff --git a/static/js/index.js b/static/js/index.js
@@ -145,7 +145,6 @@ ep_comments.prototype.init = function(){
     // hide the option window when it show the edit form
     var $commentOptions = $commentBox.children('.comment-options'); // edit, delete actions
     $commentOptions.addClass('hidden');
-    $commentBox.children('.comment-options-button').removeClass('comment-options-selected');
 
     // hide the comment author name and the comment text
     $commentBox.children('.comment-author-name, .comment-text').addClass('hidden');
@@ -181,21 +180,6 @@ ep_comments.prototype.init = function(){
     });
   });
 
-  this.container.parent().on("click", ".comment-options-button", function(){ // three dots button
-    // if it exists any other comment option window open, hide them
-    var $padOuter = $('iframe[name="ace_outer"]').contents();
-    var $thisCommentOption = $(this).siblings('.comment-options');
-    $padOuter.find('.comment-options').not($thisCommentOption).addClass('hidden');
-
-    // unselect any other three dots selected
-    $thisThreeDotsClicked = $(this);
-    $padOuter.find('.comment-options-button').not($thisThreeDotsClicked).removeClass('comment-options-selected');
-
-    $(this).siblings('.comment-options').toggleClass('hidden');
-    var threeDotsButtonIsSelected = $(this).siblings('.comment-options').hasClass('hidden') === false;
-    $(this).toggleClass('comment-options-selected', threeDotsButtonIsSelected);
-  });
-
   // hide the edit form and make the comment author and text visible again
   this.container.parent().on("click", ".comment-edit-cancel", function(e){
     e.preventDefault();
@@ -270,12 +254,6 @@ ep_comments.prototype.init = function(){
 
   });
 
-  this.container.parent().on("mouseleave", ".comment-options-wrapper", function(){
-    var $padOuter = $('iframe[name="ace_outer"]').contents();
-    $padOuter.find('.comment-options-button').removeClass('comment-options-selected');
-    $padOuter.find('.comment-options').addClass('hidden');
-  });
-
   // User accepts a change
   this.container.on("submit", ".comment-changeTo-form", function(e){
     e.preventDefault();

diff --git a/static/tests/frontend/specs/commentEdit.js b/static/tests/frontend/specs/commentEdit.js
@@ -283,8 +283,6 @@ ep_comments_page_test_helper.commentEdit = {
   },
   clickEditCommentReplyButton: function () {
     var outer$ = helper.padOuter$;
-    var $threeDots = outer$('.comment-options-button').last();
-    $threeDots.click();
     var $editButton = outer$(".comment-edit").last();
     $editButton.click();
   },

diff --git a/templates/comments.html b/templates/comments.html
@@ -3,16 +3,8 @@
 <script id="commentsTemplate" type="text/html">
     <note id="${commentId}" class="sidebar-comment" title="${date}" data-commentid="${commentId}">
         <div class="comment-options-wrapper">
-          <span class="comment-options-button">
-            <span class="comment-options-button--icon"></span>
-          </span>
-          <div class="comment-options hidden">
-            <p data-l10n-id="ep_comments_page.delete_comment.title" class="comment-delete-container">
-                <span class="comment-delete" title="Delete this comment" data-l10n-id="ep_comments_page.delete_comment.title">delete</span>
-            </p>
-            <p class="comment-edit-container">
-                <span class="comment-edit" title="Edit this comment" data-l10n-id="ep_comments_page.edit_comment.title">edit</span>
-            </p>
+            <span class="comment-delete buttonicon buttonicon-trash" data-l10n-id="ep_comments_page.delete_comment.title"></span>
+            <span class="comment-edit buttonicon buttonicon-pencil" data-l10n-id="ep_comments_page.edit_comment.title"></span>
           </div>
         </div>
         <address class="comment-author-name">${name}:</address>
@@ -89,14 +81,8 @@
 <script id="replyTemplate" type="text/html">
     <note id="${replyId}" class="sidebar-comment-reply" data-commentid="${replyId}">
         <div class="comment-options-wrapper">
-          <span class="comment-options-button">
-            <span class="comment-options-button--icon"></span>
-          </span>
-          <div class="comment-options hidden">
-            <p class="comment-edit-container">
-                <span class="comment-edit" title="Edit this comment" data-l10n-id="ep_comments_page.edit_comment.title">edit</span>
-            </p>
-          </div>
+          <span class="comment-edit buttonicon buttonicon-pencil" title="Edit this comment" data-l10n-id="ep_comments_page.edit_comment.title"></span>
+        </div>
         </div>
         <address class="comment-author-name">${name}:</address>
         <section class="comment-text">${text}</section>