imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Resolved #5324

Browse Source
pull/5598/head
Armağan Ünlü 5 years ago
parent 025608c337
commit adca1f4057
7 changed files with 256 additions and 198 deletions
Show Stats Download Patch File Download Diff File

65
modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
Unescape View File

@ -22,15 +22,26 @@
</abp-card-body>
</abp-card>
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "1" })
}
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{
@await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "1" })
}
<hr class="my-5" />
<abp-row>
<abp-column size-md="_6">
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = "1" })
}
</abp-column>
<abp-column size-md="_6">
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "1" })
}
</abp-column>
<abp-column size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{
@await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "1" })
}
</abp-column>
</abp-row>
<abp-card>
<abp-card-body class="p-5">
<abp-blockquote class="text-center">
@ -41,19 +52,23 @@
</abp-blockquote>
</abp-card-body>
</abp-card>
<hr>
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = "2" })
}
<hr>
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "2" })
}
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{
@await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "2" })
}
<hr class="my-5" />
<abp-row>
<abp-column size-md="_6">
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new { entityType = "quote", entityId = "2" })
}
</abp-column>
<abp-column size-md="_6">
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "2" })
}
</abp-column>
<abp-column size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{
@await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "2" })
}
</abp-column>
</abp-row>

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

@ -15,189 +15,198 @@
@{
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; font-size: 14px">@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>
@<div class="cms-comment-form-area bg-light card p-3 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 m-0">
<textarea class="form-control" name="commentText" placeholder="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"])..." rows="3"></textarea>
</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"]
</div>
<div class="col-auto">
<div class="text-right">
<abp-button type="submit" button-type="Primary" size="Block">
<i class="fa fa-comment-alt mr-1"></i> @L["Send"]
</abp-button>
@if (cancelButton)
{
<abp-button type="button" button-type="Light" class="reply-cancel-button mb-2" size="Block_Small" data-reply-id="@(repliedCommentId?.ToString() ?? "")">
<i class="fa fa-times mr-1"></i> @L["Cancel"]
</abp-button>
</div>
}
</div>
</div>
</form>
</div>;
</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 class="cms-comment-content-area" data-id="@id.ToString()">
<p class="m-0">
@text
</p>
</div>;
}
@{
Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply) =>
@<div class="text-right">
@if (!isReply)
@<div class="inner-comment-buttons text-left">
@if (!isReply)
{
@if (CurrentUser.IsAuthenticated)
{
@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>
}
<a href="#" class="comment-links comment-reply-link btn btn-sm shadow-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 (authorId == CurrentUser.Id)
else
{
<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>
<a href="@(Model.LoginUrl + "_" + id)" class="btn btn-sm btn-light shadow-sm"> @L["LoginToReply"]</a>
}
</div>;
}
@if (authorId == CurrentUser.Id)
{
<a href="#" class="comment-links comment-delete-link btn btn-sm shadow-sm btn-link text-muted bg-white " data-id="@id.ToString()">
<i class="fa fa-trash mr -1"></i> @L["Delete"]
</a>
<a href="#" class="comment-links comment-edit-link btn btn-sm shadow-sm btn-link text-muted bg-white" data-id="@id.ToString()">
<i class="fa fa-pencil mr -1 "></i> @L["Edit"]
</a>
}
</div>;
}
@{
Func<dynamic, IHtmlContent> GetEditArea(Guid id, string text) =>
@<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">
@<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-3 mx-0 mt-3">
<form class="cms-comment-update-form">
<input hidden value="@id.ToString()" name="id" />
<div class="form-row">
<div class="col">
<div class="form-group m-0">
<textarea class="form-control" name="commentText" rows="3">@text</textarea>
</div>
</div>
<div class="col-auto">
<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>
<abp-button type="submit" button-type="Primary" size="Block"> @L["Update"] </abp-button>
<abp-button type="button" button-type="Light" size="Block_Small" class="comment-edit-cancel-button" data-id="@id.ToString()"><i class="fa fa-times mr-1"></i> @L["Cancel"] </abp-button>
</div>
</form>
</div>
</div>
</div>
</div>;
</form>
</div>
</div>;
}
<div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
<div>
<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>
}
@if (CurrentUser.IsAuthenticated)
{
<div id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}")">
@GetCommentArea(null).Invoke(null)
</div>
@foreach (var comment in Model.Comments)
{
<div class="comment">
<div class="card p-4 mx-0 my-4">
<h5>
@GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
</h5>
@GetCommentContentArea(comment.Id, comment.Text).Invoke(null)
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new {entityType = "comment", entityId = comment.Id.ToString()})
}
}
else if (!string.IsNullOrWhiteSpace(Model.LoginUrl))
{
<div class="text-right">
<a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
</div>
}
@foreach (var comment in Model.Comments)
{
<div class="comment">
<div class="card p-3 mx-0 my-4">
<h5>
@GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
</h5>
@GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
@GetEditArea(comment.Id, comment.Text).Invoke(null)
@GetCommentContentArea(comment.Id, comment.Text).Invoke(null)
@if (comment.Replies.Any())
{
@foreach (var reply in comment.Replies)
<div class="form-row mt-2">
<div class="col">
<div class="my-2 ">
@GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
</div>
</div>
<div class="col-auto">
<div class="reaction-in-comment">
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
<div class="bg-light card p-4 mx-0 mt-3">
<div class="comment">
<div>
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
}
</div>
</div>
</div>
@GetEditArea(comment.Id, comment.Text).Invoke(null)
<h5>
@GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
</h5>
@if (comment.Replies.Any())
{
@foreach (var reply in comment.Replies)
{
<div class="bg-light card p-3 mx-0 mt-3">
<div class="comment">
<h5>
@GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
</h5>
@GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
@GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
<div class="form-row mt-2">
<div class="col">
<div class="my-2 ">
@GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
</div>
</div>
<div class="col-auto">
<div class="reaction-in-comment">
@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).Invoke(null)
@GetEditArea(reply.Id, reply.Text).Invoke(null)
</div>
</div>
</div>
}
@if (comment.Replies.Count >= 3)
{
<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>
}
@GetEditArea(reply.Id, reply.Text).Invoke(null)
</div>
}
</div>
}
@if (CurrentUser.IsAuthenticated)
@if (comment.Replies.Count >= 3)
{
@GetCommentArea(comment.Id, true).Invoke(null)
<div class=" mt-2">
@if (CurrentUser.IsAuthenticated)
{
<a href="#" class="comment-links comment-reply-link btn btn-primary btn-sm" 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-light shadow-sm"> @L["LoginToReply"]</a>
}
</div>
}
}
@if (CurrentUser.IsAuthenticated)
{
@GetCommentArea(comment.Id, true).Invoke(null)
}
</div>
</div>
}
</div>
</div>
}
</div>

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

@ -1 +1,6 @@

.cms-reaction-select-icon:hover{
text-decoration: none;
}
.comment-links:hover {
text-decoration: none;
}

77
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
Unescape View File

@ -5,42 +5,57 @@
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
@inject IHtmlLocalizer<CmsKitResource> L
<div class="cms-rating-area container" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
@if (CurrentUser.IsAuthenticated)
{
<div class="m-auto">
<span class="my-rating-5" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
<span class="live-rating">@(Model.CurrentRating != null ? Model.CurrentRating + " | " : 0 + "")</span>
<div class="text-center text-md-left">
<div class="cms-rating-area d-inline-block px-2 py-1 my-2 card border-0 shadow-sm " data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
@if (CurrentUser.IsAuthenticated)
{
<span class="my-rating" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
<small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + " " : 0 + "")</small>
@if (Model.CurrentRating != null)
{
<a href="#" class="rating-undo-link m-auto">
<i class="fa fa-undo"></i> @L["Undo"]
<a href="#" class="rating-undo-link">
<small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
</a>
}
</div>
if (Model.Ratings != null)
{
<div class="row text-center col-6 mt-3">
@foreach (var rating in Model.Ratings)
{
<div class="side col-2">
<div>@rating.StarCount @L["Star"]</div>
</div>
<div class="middle col-8">
<div class="bar-container">
<div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
if (Model.Ratings != null)
{
<a href="#" class="text-muted ml-1" data-toggle="modal" data-target="#ratingDetail">
<i class="fas fa-info-circle"></i>
</a>
<div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row text-center">
@foreach (var rating in Model.Ratings)
{
<div class="col">
<label>@rating.StarCount @L["Star"]</label>
<div class="bar-container">
<div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
</div>
<div><small class="text-muted">@rating.Count Rate(s)</small> </div>
</div>
}
</div>
</div>
</div>
</div>
<div class="side col-2">
<div>@rating.Count</div>
</div>
}
</div>
</div>
}
}
else
{
<span class="my-rating" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
<span class="rating-login"></span>
}
}
else
{
<span class="my-rating-5" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
<span class="rating-login"></span>
}
</div>
</div>

8
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
Unescape View File

@ -41,4 +41,12 @@
.right {
display: none;
}
}
.jq-star {
top: -2px !important;
position: relative;
}
.rating-undo-link:hover {
text-decoration:none;
}

8
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js
Unescape View File

@ -14,11 +14,17 @@
}
function registerCreateOfNewRating() {
$widget.find(".my-rating-5").each(function () {
$widget.find(".my-rating").each(function () {
var authenticated = $(this).attr("data-authenticated");
$(this).starRating({
initialRating: 0,
starSize: 16,
emptyColor: '#eee',
hoverColor: '#ffc107',
activeColor: '#ffc107',
useGradient: false,
strokeWidth: 0,
disableAfterRate: true,
useFullStars: true,
readOnly: authenticated === "True",

8
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
Unescape View File

@ -4,8 +4,8 @@
@if (CurrentUser.IsAuthenticated || Model.Reactions.Count(r => r.Count > 0) > 0)
{
<div class="text-right">
<div class="px-2 py-1 my-3 card border-0 shadow-sm d-inline-block">
<div class="text-center text-md-right">
<div class="px-2 py-1 my-2 card border-0 shadow-sm d-inline-block">
<span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
@if (CurrentUser.IsAuthenticated)
@ -24,9 +24,9 @@
}
@foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
{
<span class="ml-3 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
<span class="ml-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
<i class="@reaction.Icon"></i>
<small class="text-muted" style="opacity: .75;">@(reaction.Count)</small>
<small class="text-muted" style="opacity: .45;">@(reaction.Count)</small>
</span>
}
</span>

Write Preview
Loading…
Cancel
Save