Moves the edit and delete options into a dropdown menu.

Fixes #7281

- Added a new View to render the dropdown.
- Modified the existing code.

Signed-off-by: Abijeet <abijeetpatro@gmail.com>

apps/comments/css/comments.scss

@@ -49,10 +49,6 @@
 	opacity: 1;
 }
 
-#commentsTabView .newCommentForm .cancel {
-	margin-right: 6px;
-}
-
 #commentsTabView .newCommentForm div.message {
 	resize: none;
 }
@@ -182,8 +178,7 @@
 #commentsTabView .comment .action {
 	opacity: 0.3;
 	padding: 14px;
-	display: inline-block;
-	vertical-align: middle;
+	display: block;
 }
 
 #commentsTabView .comment .action:hover,
@@ -193,9 +188,6 @@
 
 #commentsTabView .newCommentRow .action-container {
 	margin-left: auto;
-	/** setting minimum width so as to avoid these two buttons from appearing on top of
-		each other when author name is long. width = icon-width * 2 + (inline-block gap) **/
-	min-width: 92px;
 }
 
 #commentsTabView .comment.disabled {
@@ -214,4 +206,4 @@
 
 .app-files .action-comment {
 	padding: 16px 14px;
-}
+}

apps/comments/js/commentsmodifymenu.js

@@ -0,0 +1,122 @@
+/*
+ * Copyright (c) 2018
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+(function() {
+	var TEMPLATE_MENU =
+		'<ul>' +
+		'{{#each items}}' +
+		'<li>' +
+		'<a href="#" class="menuitem action action-{{name}} permanent" data-action="{{name}}">' +
+			'{{#if iconClass}}' +
+				'<span class="icon {{iconClass}}"></span>' +
+			'{{else}}' +
+				'<span class="no-icon"></span>' +
+			'{{/if}}' +
+			'<span>{{displayName}}</span>' +
+		'</li>' +
+		'{{/each}}' +
+		'</ul>';
+
+	/**
+	 * Construct a new CommentsModifyMenuinstance
+	 * @constructs CommentsModifyMenu
+	 * @memberof OC.Comments
+	 */
+	var CommentsModifyMenu = OC.Backbone.View.extend({
+		tagName: 'div',
+		className: 'commentsModifyMenu popovermenu bubble menu',
+		_scopes: [
+			{
+				name: 'edit',
+				displayName:  t('comments', 'Edit comment'),
+				iconClass: 'icon-rename'
+			},
+			{
+				name: 'delete',
+				displayName: t('comments', 'Delete comment'),
+				iconClass: 'icon-delete'
+			}
+		],
+		initialize: function() {
+
+		},
+		events: {
+			'click a.action': '_onClickAction'
+		},
+
+		template: Handlebars.compile(TEMPLATE_MENU),
+
+		/**
+		 * Event handler whenever an action has been clicked within the menu
+		 *
+		 * @param {Object} event event object
+		 */
+		_onClickAction: function(event) {
+			var $target = $(event.currentTarget);
+			if (!$target.hasClass('menuitem')) {
+				$target = $target.closest('.menuitem');
+			}
+
+			this.trigger('select:menu-item-clicked', event, $target.data('action'));
+
+			OC.hideMenus();
+		},
+
+		/**
+		 * Renders the menu with the currently set items
+		 */
+		render: function() {
+			this.$el.html(this.template({
+				items: this._scopes
+			}));
+		},
+
+		/**
+		 * Displays the menu
+		 */
+		show: function(context) {
+			this._context = context;
+
+			for(var i in this._scopes) {
+				this._scopes[i].active = false;
+			}
+
+
+			var $el = $(context.target);
+			var offsetIcon = $el.offset();
+			var offsetContainer = $el.closest('.authorRow').offset();
+
+			// adding some extra top offset to push the menu below the button.
+			var position = {
+				top: offsetIcon.top - offsetContainer.top + 48,
+				left: '',
+				right: ''
+			};
+
+			position.left = offsetIcon.left - offsetContainer.left;
+
+			if (position.left > 200) {
+				// we need to position the menu to the right.
+				position.left = '';
+				position.right = this.$el.closest('.comment').find('.date').width();
+				this.$el.removeClass('menu-left').addClass('menu-right');
+			} else {
+				this.$el.removeClass('menu-right').addClass('menu-left');
+			}
+			this.$el.css(position);
+			this.render();
+			this.$el.removeClass('hidden');
+
+			OC.showMenu(null, this.$el);
+		}
+	});
+
+	OCA.Comments = OCA.Comments || {};
+	OCA.Comments.CommentsModifyMenu = CommentsModifyMenu;
+})(OC, OCA);;

apps/comments/js/commentstabview.js

@@ -27,9 +27,7 @@
 		'        <div class="author currentUser">{{actorDisplayName}}</div>' +
 		'{{#if isEditMode}}' +
 		'        <div class="action-container">' +
-		'            <a href="#" class="action delete icon icon-delete has-tooltip" title="{{deleteTooltip}}"></a>' +
 		'            <a href="#" class="action cancel icon icon-close has-tooltip" title="{{cancelText}}"></a>' +
-		'            <div class="deleteLoading icon-loading-small hidden"></div>'+
 		'        </div>' +
 		'{{/if}}' +
 		'    </div>' +
@@ -46,7 +44,8 @@
 		'        <div class="avatar{{#if isUserAuthor}} currentUser{{/if}}" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
 		'        <div class="author{{#if isUserAuthor}} currentUser{{/if}}">{{actorDisplayName}}</div>' +
 		'{{#if isUserAuthor}}' +
-		'        <a href="#" class="action edit icon icon-rename has-tooltip" title="{{editTooltip}}"></a>' +
+		'        <a href="#" class="action more icon icon-more has-tooltip"></a>' +
+		'        <div class="deleteLoading icon-loading-small hidden"></div>' +
 		'{{/if}}' +
 		'        <div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
 		'    </div>' +
@@ -64,12 +63,11 @@
 		id: 'commentsTabView',
 		className: 'tab commentsTabView',
 		_autoCompleteData: undefined,
+		_commentsModifyMenu: undefined,
 
 		events: {
 			'submit .newCommentForm': '_onSubmitComment',
 			'click .showMore': '_onClickShowMore',
-			'click .action.edit': '_onClickEditComment',
-			'click .action.delete': '_onClickDeleteComment',
 			'click .cancel': '_onClickCloseComment',
 			'click .comment': '_onClickComment',
 			'keyup div.message': '_onTextChange',
@@ -114,7 +112,6 @@
 				actorId: currentUser.uid,
 				actorDisplayName: currentUser.displayName,
 				newMessagePlaceholder: t('comments', 'New comment …'),
-				deleteTooltip: t('comments', 'Delete comment'),
 				submitText: t('comments', 'Post'),
 				cancelText: t('comments', 'Cancel'),
 				tag: 'li'
@@ -402,6 +399,24 @@
 				// it is the case when writing a comment and mentioning a person
 				$message = $el;
 			}
+
+
+			if (!editionMode) {
+				var self = this;
+				// add the dropdown menu to display the edit and delete option
+				var modifyCommentMenu = new OCA.Comments.CommentsModifyMenu();
+				$el.find('.authorRow').append(modifyCommentMenu.$el);
+				$el.find('.more').on('click', _.bind(modifyCommentMenu.show, modifyCommentMenu));
+
+				self.listenTo(modifyCommentMenu, 'select:menu-item-clicked', function(ev, action) {
+					if (action === 'edit') {
+						self._onClickEditComment(ev);
+					} else if (action === 'delete') {
+						self._onClickDeleteComment(ev);
+					}
+				});
+			}
+
 			this._postRenderMessage($message, editionMode);
 		},
 
@@ -568,15 +583,13 @@
 			var $comment = $(ev.target).closest('.comment');
 			var commentId = $comment.data('id');
 			var $loading = $comment.find('.deleteLoading');
-			var $commentField = $comment.find('.message');
-			var $submit = $comment.find('.submit');
-			var $cancel = $comment.find('.cancel');
+			var $moreIcon = $comment.find('.more');
 
-			$commentField.prop('contenteditable', false);
-			$submit.prop('disabled', true);
-			$cancel.prop('disabled', true);
 			$comment.addClass('disabled');
 			$loading.removeClass('hidden');
+			$moreIcon.addClass('hidden');
+
+			$comment.data('commentEl', $comment);
 
 			this.collection.get(commentId).destroy({
 				success: function() {
@@ -585,10 +598,8 @@
 				},
 				error: function() {
 					$loading.addClass('hidden');
+					$moreIcon.removeClass('hidden');
 					$comment.removeClass('disabled');
-					$commentField.prop('contenteditable', true);
-					$submit.prop('disabled', false);
-					$cancel.prop('disabled', false);
 
 					OC.Notification.showTemporary(t('comments', 'Error occurred while retrieving comment with ID {id}', {id: commentId}));
 				}

apps/comments/js/merged.json

@@ -4,6 +4,7 @@
   "commentcollection.js",
   "commentsummarymodel.js",
   "commentstabview.js",
+  "commentsmodifymenu.js",
   "filesplugin.js",
   "activitytabviewplugin.js",
   "vendor/Caret.js/dist/jquery.caret.min.js",