mirror of
https://github.com/nextcloud/server.git
synced 2026-05-28 04:32:30 -04:00
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>
This commit is contained in:
Abijeet
parent
001cd986ed
commit
872853af58
4 changed files with 151 additions and 25 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
122
apps/comments/js/commentsmodifymenu.js
Normal file
122
apps/comments/js/commentsmodifymenu.js
Normal file
|
|
@ -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);;
|
||||
|
|
@ -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}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"commentcollection.js",
|
||||
"commentsummarymodel.js",
|
||||
"commentstabview.js",
|
||||
"commentsmodifymenu.js",
|
||||
"filesplugin.js",
|
||||
"activitytabviewplugin.js",
|
||||
"vendor/Caret.js/dist/jquery.caret.min.js",
|
||||
|
|
|
|||
Loading…
Reference in a new issue