tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

cmskit comments reply button and textbox placement

pull/5247/head
Yunus Emre Kalkan 6 years ago
parent
883ba2a401
commit
1b86dba8d6
2 changed files with 99 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 187
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
  2. 7
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.js

187
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
View File

@ -15,96 +15,99 @@
@{
Func<dynamic, IHtmlContent> GetCommentTitle(CmsUserDto author, DateTime creationTime) =>
@<span>
<i class="far fa-comment-alt mr-2"></i>
@((string.IsNullOrWhiteSpace(author.Name)
@<span>
<i class="far fa-comment-alt mr-2"></i>
@((string.IsNullOrWhiteSpace(author.Name)
? author.UserName
: author.Name + " " + author.Surname).Trim())
<small class="text-muted float-right" style="opacity: .5;">@creationTime.ToString()</small>
</span>;
<small class="text-muted float-right" style="opacity: .5;">@creationTime.ToString()</small>
</span>;
}
@{
Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
@<div class="cms-comment-form-area bg-light card p-4 mx-0 mt-4 @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
data-reply-id="@(repliedCommentId?.ToString() ?? "")"
style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
<form class="cms-comment-form">
<input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId" />
<div class="form-row">
<div class="col">
<div class="form-group">
<textarea class="form-control" name="commentText" placeholder="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"])..." rows="3"></textarea>
@<div class="cms-comment-form-area bg-light card p-4 mx-0 mt-4 @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
data-reply-id="@(repliedCommentId?.ToString() ?? "")"
style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
<form class="cms-comment-form">
<input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId"/>
<div class="form-row">
<div class="col">
<div class="form-group">
<textarea class="form-control" name="commentText" placeholder="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"])..." rows="3"></textarea>
</div>
</div>
</div>
<div class="col-auto">
<div class="text-right">
@if (cancelButton)
{
<abp-button type="button" button-type="Outline_Secondary" class="reply-cancel-button mb-2" size="Block" data-reply-id="@(repliedCommentId?.ToString() ?? "")"><i class="fa fa-times mr-1"></i> @L["Cancel"] </abp-button>
}
<abp-button type="submit" button-type="Primary" size="Block"><i class="fa fa-comment-alt mr-1"></i> @L["Send"]</abp-button>
<div class="col-auto">
<div class="text-right">
@if (cancelButton)
{
<abp-button type="button" button-type="Outline_Secondary" class="reply-cancel-button mb-2" size="Block" data-reply-id="@(repliedCommentId?.ToString() ?? "")">
<i class="fa fa-times mr-1"></i> @L["Cancel"]
</abp-button>
}
<abp-button type="submit" button-type="Primary" size="Block">
<i class="fa fa-comment-alt mr-1"></i> @L["Send"]
</abp-button>
</div>
</div>
</div>
</div>
</form>
</div>;
</form>
</div>;
}
@{
Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) =>
@<div>
<div class="cms-comment-content-area" data-id="@id.ToString()">
<p class="m-0">
@text
</p>
</div>
</div>;
@<div>
<div class="cms-comment-content-area" data-id="@id.ToString()">
<p class="m-0">
@text
</p>
</div>
</div>;
}
@{
Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply, string text) =>
@<div>
<div class="text-right">
@if (!isReply)
{
@if (CurrentUser.IsAuthenticated)
@<div>
<div class="text-right">
@if (!isReply)
{
<a href="#" class="comment-reply-link btn btn-sm btn-primary" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}_link")">
<i class="fa fa-reply mr-1"></i> @L["Reply"]
</a>
@if (CurrentUser.IsAuthenticated)
{
<a href="#" class="comment-reply-link btn btn-sm btn-primary" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}_link")">
<i class="fa fa-reply mr-1"></i> @L["Reply"]
</a>
}
else
{
<a href="@(Model.LoginUrl + "_" + id)" class="btn btn-sm btn-primary shadow-sm"> @L["LoginToReply"]</a>
}
}
else
@if (authorId == CurrentUser.Id)
{
<a href="@(Model.LoginUrl + "_" + id)" class="btn btn-sm btn-primary shadow-sm"> @L["LoginToReply"]</a>
}
}
@if (authorId == CurrentUser.Id)
{
<a href="#" class="comment-delete-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
<i class="fa fa-trash mr-1 text-danger"></i> @L["Delete"]
</a>
<a href="#" class="comment-delete-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
<i class="fa fa-trash mr-1 text-danger"></i> @L["Delete"]
</a>
<a href="#" class="comment-edit-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
<i class="fa fa-pencil mr-1 text-info"></i> @L["Edit"]
</a>
}
</div>
<div class="cms-comment-edit-area" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}")" data-id="@id.ToString()" style="display:none">
<a href="#" class="comment-edit-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
<i class="fa fa-pencil mr-1 text-info"></i> @L["Edit"]
</a>
}
</div>
<div class="cms-comment-edit-area" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}")" data-id="@id.ToString()" style="display:none">
<div class="card bg-light p-4 mx-0 mt-3">
<form class="cms-comment-update-form">
<input hidden value="@id.ToString()" name="id" />
<div class="form-group">
<textarea class="form-control" name="commentText" rows="3">@text</textarea>
</div>
<div class="text-right">
<abp-button type="button" button-type="Secondary" class="comment-edit-cancel-button" data-id="@id.ToString()"> @L["Cancel"] </abp-button>
<abp-button type="submit" button-type="Primary"> @L["Update"] </abp-button>
</div>
</form>
<div class="card bg-light p-4 mx-0 mt-3">
<form class="cms-comment-update-form">
<input hidden value="@id.ToString()" name="id"/>
<div class="form-group">
<textarea class="form-control" name="commentText" rows="3">@text</textarea>
</div>
<div class="text-right">
<abp-button type="button" button-type="Secondary" class="comment-edit-cancel-button" data-id="@id.ToString()"> @L["Cancel"] </abp-button>
<abp-button type="submit" button-type="Primary"> @L["Update"] </abp-button>
</div>
</form>
</div>
</div>
</div>
</div>;
</div>;
}
<div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
@ -112,20 +115,7 @@
<h5 class="mb-0 mt-4">
<i class="fas fa-comment-alt"></i> @L["Comments"]
</h5>
<div>
@if (CurrentUser.IsAuthenticated)
{
<div id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}")">
@GetCommentArea(null).Invoke(null)
</div>
}
else if (!string.IsNullOrWhiteSpace(Model.LoginUrl))
{
<div class="text-right">
<a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
</div>
}
</div>
@foreach (var comment in Model.Comments)
{
<div class="comment">
@ -138,17 +128,11 @@
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent),
new { entityType = "comment", entityId = comment.Id.ToString() })
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new {entityType = "comment", entityId = comment.Id.ToString()})
}
@GetCommentActionArea(comment.Id, comment.Author.Id, false, comment.Text).Invoke(null)
@if (CurrentUser.IsAuthenticated)
{
@GetCommentArea(comment.Id, true).Invoke(null)
}
@if (comment.Replies.Any())
{
@foreach (var reply in comment.Replies)
@ -165,8 +149,7 @@
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent),
new { entityType = "comment", entityId = reply.Id.ToString() })
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new {entityType = "comment", entityId = reply.Id.ToString()})
}
@GetCommentActionArea(reply.Id, reply.Author.Id, true, reply.Text).Invoke(null)
@ -174,7 +157,27 @@
</div>
</div>
}
@if (comment.Replies.Count >= 5)
{
<div class="text-right mt-4">
@if (CurrentUser.IsAuthenticated)
{
<a href="#" class="comment-reply-link btn btn-sm btn-primary" data-reply-id="@comment.Id.ToString()">
<i class="fa fa-reply mr-1"></i> @L["Reply"]
</a>
}
else
{
<a href="@(Model.LoginUrl + "_" + comment.Id)" class="btn btn-sm btn-primary shadow-sm"> @L["LoginToReply"]</a>
}
</div>
}
}
@if (CurrentUser.IsAuthenticated)
{
@GetCommentArea(comment.Id, true).Invoke(null)
}
</div>
</div>
}

7
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/default.js
View File

@ -58,10 +58,11 @@
var replyCommentId = $link.data('reply-id');
var $relatedCommentArea = $container.find('.cms-comment-form-area[data-reply-id=' + replyCommentId + ']');
var $links = $container.find('.comment-reply-link[data-reply-id=' + replyCommentId + ']');
$relatedCommentArea.show();
$relatedCommentArea.find('textarea').focus();
$link.removeAttr('href');
$links.addClass('disabled');
});
});
$container.find('.reply-cancel-button').each(function () {
@ -72,10 +73,10 @@
var replyCommentId = $button.data('reply-id');
var $relatedCommentArea = $container.find('.cms-comment-form-area[data-reply-id=' + replyCommentId + ']');
var $replyLink = $container.find('.comment-reply-link[data-reply-id=' + replyCommentId + ']');
var $links = $container.find('.comment-reply-link[data-reply-id=' + replyCommentId + ']');
$relatedCommentArea.hide();
$replyLink.attr('href', '#');
$links.removeClass('disabled');
});
});
}

Write Preview
Loading…
Cancel
Save