editor: gutter comments - delete comment confirmation dialog

diff --git a/src/editor/modules/documentCanvas/canvas/comments/comment.html b/src/editor/modules/documentCanvas/canvas/comments/comment.html
index 68c14c1..3e9fb28 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/comments/comment.html
+++ b/src/editor/modules/documentCanvas/canvas/comments/comment.html
@@ -19,4 +19,11 @@
         <a href="#" class="edit-start-btn"><%= gettext('edit') %></a> -
         <a href="#" class="remove-btn"><%= gettext('remove') %></a>
     </div>
+    <div class="deleteDialog">
+        <div><%= gettext('Delete this comment?') %></div>
+        <div>
+            <button class="btn btn-mini deleteDialog-confirm"><%= gettext('Delete') %></button>
+            <button class="btn btn-mini deleteDialog-cancel"><%= gettext('Cancel') %></button>
+        </div>
+    </div>
 </div>

diff --git a/src/editor/modules/documentCanvas/canvas/comments/comments.js b/src/editor/modules/documentCanvas/canvas/comments/comments.js
index 692c0b7..632616b 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/comments/comments.js
+++ b/src/editor/modules/documentCanvas/canvas/comments/comments.js
@@ -158,8 +158,13 @@ var CommentView = function(commentNode) {
 
     this.contentElement = this.dom.find('.content');
     this.editElement = this.dom.find('.edit');
+    this.deleteDialogElement = this.dom.find('.deleteDialog');
 
     this.dom.find('.remove-btn').on('click', function() {
+        this.deleteDialogElement.show();
+    }.bind(this));
+
+    this.dom.find('.deleteDialog-confirm').on('click', function() {
         this.node.document.transaction(function() {
             this.node.detach();
         }.bind(this), {
@@ -169,6 +174,10 @@ var CommentView = function(commentNode) {
         });
     }.bind(this));
 
+    this.dom.find('.deleteDialog-cancel').on('click', function() {
+        this.deleteDialogElement.hide();
+    }.bind(this));
+
     this.dom.find('.edit-start-btn').on('click', function() {
         this.startEditing();
     }.bind(this));

diff --git a/src/editor/modules/documentCanvas/canvas/comments/comments.less b/src/editor/modules/documentCanvas/canvas/comments/comments.less
index 140e836..4c68e64 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/comments/comments.less
+++ b/src/editor/modules/documentCanvas/canvas/comments/comments.less
@@ -4,6 +4,7 @@
     font-size: 12px;
 
     .comment {
+        position: relative;
         
         border-color: @borderColor;
         border-style: solid;
@@ -34,6 +35,19 @@
         .edit {
             display: none;
         }
+
+        .deleteDialog {
+            display: none;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding-top: 15px;
+            color: white;
+            background-color: rgba(0,0,0,0.7);
+            text-align: center;
+        }
     }
 
     .newComment {