Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added permanent reply textarea in comment popover

Browse source
This commit is contained in:
Alexei Koshelev 2022-10-29 02:55:40 +03:00
parent b111281778
commit 244ebd789d
7 changed files with 63 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/common/main/lib/collection/Comments.js
View file

@ -58,8 +58,9 @@ define([
this.each(function(comment) { this.each(function(comment) {
comment.set('editText', false); comment.set('editText', false);
comment.set('editTextInPopover', false); comment.set('editTextInPopover', false);
comment.set('showBtnsInPopover', false);
comment.set('showReply', false); comment.set('showReply', false);
comment.set('showReplyInPopover', false); comment.set('showReplyInPopover', true);
comment.set('hideAddReply', false); comment.set('hideAddReply', false);
}); });
}, },

8
apps/common/main/lib/controller/Comments.js
View file

@ -966,8 +966,14 @@ define([
if (!comment) continue; if (!comment) continue;
if(comment.get('replys').some(function(reply){ return reply.get('editTextInPopover'); })){
comment.set('showReplyInPopover', false);
}
if (this.subEditStrings[saveTxtId] && !hint) { if (this.subEditStrings[saveTxtId] && !hint) {
comment.set('editTextInPopover', true); comment.set('editTextInPopover', true);
comment.set('showReplyInPopover', false);
text = this.subEditStrings[saveTxtId]; text = this.subEditStrings[saveTxtId];
} }
else if (this.subEditStrings[saveTxtReplyId] && !hint) { else if (this.subEditStrings[saveTxtReplyId] && !hint) {
@ -1348,7 +1354,7 @@ define([
editText : false, editText : false,
last : undefined, last : undefined,
editTextInPopover : (this.editPopover ? true : false), editTextInPopover : (this.editPopover ? true : false),
showReplyInPopover : false, showReplyInPopover : true,
hideAddReply : !_.isUndefined(this.hidereply) ? this.hidereply : (this.showPopover ? true : false), hideAddReply : !_.isUndefined(this.hidereply) ? this.hidereply : (this.showPopover ? true : false),
scope : this.view, scope : this.view,
editable : (this.mode.canEditComments || (data.asc_getUserId() == this.currentUserId)) && AscCommon.UserInfoParser.canEditComment(data.asc_getUserName()), editable : (this.mode.canEditComments || (data.asc_getUserId() == this.currentUserId)) && AscCommon.UserInfoParser.canEditComment(data.asc_getUserName()),

3
apps/common/main/lib/model/Comment.js
View file

@ -72,7 +72,8 @@ define([
id : Common.UI.getId(), // internal id : Common.UI.getId(), // internal
time : 0, time : 0,
showReply : false, showReply : false,
showReplyInPopover : false, showReplyInPopover : true,
showBtnsInPopover : false,
editText : false, editText : false,
editTextInPopover : false, editTextInPopover : false,
last : undefined, last : undefined,

24
apps/common/main/lib/template/CommentsPopover.template
View file

@ -59,14 +59,16 @@
<% }); %> <% }); %>
<% } %> <% } %>
<!-- add reply button --> <!-- reply -->
<% if (!showReplyInPopover && !hideAddReply && !hint && !scope.viewmode) { %> <% if (showReplyInPopover && !hideAddReply && !hint && !scope.viewmode) { %>
<% if (replys.length && !add_arrow) { %> <div class="reply-ct">
<label class="user-reply" style="margin-left: 20px; margin-top: 5px;" role="presentation" tabindex="-1">textAddReply</label> <textarea class="msg-reply user-select" placeholder="textAddReply" maxlength="maxCommLength" spellcheck="false"></textarea>
<% } else { %> <% if(true) { %>
<label class="user-reply" role="presentation" tabindex="-1">textAddReply</label> <button class="btn normal dlg-btn primary btn-reply" id="id-comments-change-popover" style="display:none">textReply</button>
<button class="btn normal dlg-btn btn-close" style="display:none">textClose</button>
<% } %> <% } %>
</div>
<% } %> <% } %>
<!-- edit buttons --> <!-- edit buttons -->
@ -89,16 +91,6 @@
</div> </div>
<% } %> <% } %>
<!-- reply -->
<% if (showReplyInPopover) { %>
<div class="reply-ct">
<textarea class="msg-reply user-select" placeholder="textAddReply" maxlength="maxCommLength" spellcheck="false"></textarea>
<button class="btn normal dlg-btn primary btn-reply" id="id-comments-change-popover">textReply</button>
<button class="btn normal dlg-btn btn-close">textClose</button>
</div>
<% } %>
<!-- locked user --> <!-- locked user -->
<% if (lock) { %> <% if (lock) { %>

2
apps/common/main/lib/view/Comments.js
View file

@ -102,7 +102,7 @@ define([
var view = this, var view = this,
textBox = $(this.el).find('textarea'), textBox = $(this.el).find('textarea'),
domTextBox = null, domTextBox = null,
minHeight = 55, minHeight = 21,
lineHeight = 0, lineHeight = 0,
scrollPos = 0, scrollPos = 0,
oldHeight = 0, oldHeight = 0,

74
apps/common/main/lib/view/ReviewPopover.js
View file

@ -140,6 +140,10 @@ define([
body.css('position', 'relative'); body.css('position', 'relative');
} }
me.$window.on('focus', 'textarea', function(e) { me.commentsView.onFocusTextarea(e.currentTarget) });
me.$window.on('blur', 'textarea', function(e) { me.commentsView.onBlurTextarea(e.currentTarget) });
var CommentsPopoverDataView = Common.UI.DataView.extend((function () { var CommentsPopoverDataView = Common.UI.DataView.extend((function () {
var parentView = me; var parentView = me;
@ -152,6 +156,19 @@ define([
template: _.template('<div class="dataview-ct inner" style="overflow-y: visible;"></div>') template: _.template('<div class="dataview-ct inner" style="overflow-y: visible;"></div>')
}, },
onFocusTextarea: function(textarea) {
if($(textarea).parent().hasClass('reply-ct'))
me.$window.find('.reply-ct button').show();
},
onBlurTextarea: function(textarea) {
if($(textarea).parent().hasClass('reply-ct')){
setTimeout(() => {
me.$window.find('.reply-ct button').hide();
}, 120);
}
},
getTextBox: function () { getTextBox: function () {
var text = $(this.el).find('textarea'); var text = $(this.el).find('textarea');
return (text && text.length) ? text : undefined; return (text && text.length) ? text : undefined;
@ -177,7 +194,7 @@ define([
var view = this, var view = this,
textBox = this.$el.find('textarea'), textBox = this.$el.find('textarea'),
domTextBox = null, domTextBox = null,
minHeight = 55, minHeight = 21,
lineHeight = 0, lineHeight = 0,
scrollPos = 0, scrollPos = 0,
oldHeight = 0, oldHeight = 0,
@ -325,7 +342,8 @@ define([
} }
if (btn.hasClass('btn-edit')) { if (btn.hasClass('btn-edit')) {
var tip = btn.data('bs.tooltip'); var tip = btn.data('bs.tooltip'),
isEdit = false;
if (tip) tip.dontShow = true; if (tip) tip.dontShow = true;
if (!_.isUndefined(replyId)) { if (!_.isUndefined(replyId)) {
@ -333,26 +351,19 @@ define([
me.fireEvent('comment:editReply', [commentId, replyId, true]); me.fireEvent('comment:editReply', [commentId, replyId, true]);
this.replyId = replyId; this.replyId = replyId;
isEdit = true;
this.autoHeightTextBox();
me.calculateSizeOfContent();
me.setLeftTop(me.arrowPosX, me.arrowPosY, me.leftX);
me.calculateSizeOfContent();
readdresolves();
me.hookTextBox();
me.autoScrollToEditButtons();
this.setFocusToTextBox();
} else { } else {
if (!showEditBox) { if (!showEditBox) {
me.fireEvent('comment:closeEditing'); me.fireEvent('comment:closeEditing');
record.set('editTextInPopover', true); record.set('editTextInPopover', true);
me.fireEvent('comment:show', [commentId]); me.fireEvent('comment:show', [commentId]);
isEdit = true;
}
}
if(isEdit) {
record.set('showReplyInPopover', false);
this.autoHeightTextBox(); this.autoHeightTextBox();
me.calculateSizeOfContent(); me.calculateSizeOfContent();
@ -366,7 +377,6 @@ define([
me.autoScrollToEditButtons(); me.autoScrollToEditButtons();
this.setFocusToTextBox(); this.setFocusToTextBox();
} }
}
} else if (btn.hasClass('btn-delete')) { } else if (btn.hasClass('btn-delete')) {
var tip = btn.data('bs.tooltip'); var tip = btn.data('bs.tooltip');
if (tip) tip.dontShow = true; if (tip) tip.dontShow = true;
@ -386,23 +396,8 @@ define([
readdresolves(); readdresolves();
} else if (btn.hasClass('user-reply')) {
me.fireEvent('comment:closeEditing');
record.set('showReplyInPopover', true);
me.calculateSizeOfContent();
me.setLeftTop(me.arrowPosX, me.arrowPosY, me.leftX);
me.calculateSizeOfContent();
readdresolves();
this.autoHeightTextBox();
me.hookTextBox();
me.autoScrollToEditButtons();
this.setFocusToTextBox();
} else if (btn.hasClass('btn-reply', false)) { } else if (btn.hasClass('btn-reply', false)) {
if (showReplyBox) { if (true) {
this.clearTextBoxBind(); this.clearTextBoxBind();
me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]); me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]);
@ -412,10 +407,7 @@ define([
readdresolves(); readdresolves();
} }
} else if (btn.hasClass('btn-close', false)) { } else if (btn.hasClass('btn-close', false)) {
me.fireEvent('comment:closeEditing', [commentId]); me.hideComments();
me.calculateSizeOfContent();
me.fireEvent('comment:show', [commentId]);
readdresolves(); readdresolves();
} else if (btn.hasClass('btn-inner-edit', false)) { } else if (btn.hasClass('btn-inner-edit', false)) {
@ -447,9 +439,11 @@ define([
me.calculateSizeOfContent(); me.calculateSizeOfContent();
} }
record.set('showReplyInPopover', true);
readdresolves(); readdresolves();
} else if (btn.hasClass('btn-inner-close', false)) { } else if (btn.hasClass('btn-inner-close', false)) {
if (record.get('dummy')) { if (record.get('dummy')) {
me.clearDummyText(); me.clearDummyText();
me.hide(); me.hide();
@ -474,6 +468,7 @@ define([
me.setLeftTop(me.arrowPosX, me.arrowPosY, me.leftX); me.setLeftTop(me.arrowPosX, me.arrowPosY, me.leftX);
me.calculateSizeOfContent(); me.calculateSizeOfContent();
record.set('showReplyInPopover', true);
readdresolves(); readdresolves();
} else if (btn.hasClass('btn-resolve')) { } else if (btn.hasClass('btn-resolve')) {
@ -506,7 +501,7 @@ define([
}); });
me.on({ me.on({
'show': function () { 'show': function (picker, item, record, e) {
me.commentsView.autoHeightTextBox(); me.commentsView.autoHeightTextBox();
me.$window.find('textarea').keydown(function (event) { me.$window.find('textarea').keydown(function (event) {
if (event.keyCode == Common.UI.Keys.ESC) { if (event.keyCode == Common.UI.Keys.ESC) {
@ -516,8 +511,9 @@ define([
}, },
'animate:before': function () { 'animate:before': function () {
var text = me.$window.find('textarea'); var text = me.$window.find('textarea');
if (text && text.length) if (text && text.length && !$(text).parent().hasClass('reply-ct')){
text.focus(); me.commentsView.setFocusToTextBox();
}
} }
}); });
} }

2
apps/common/main/resources/less/comments.less
View file

@ -129,7 +129,7 @@
textarea { textarea {
width: 100%; width: 100%;
height: 55px; height: 21px;
resize: none; resize: none;
margin-bottom: 5px; margin-bottom: 5px;
border: @scaled-one-px-value-ie solid @border-regular-control-ie; border: @scaled-one-px-value-ie solid @border-regular-control-ie;