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

Merge pull request #5223 from abpframework/au-cms-kit-reactions-comment-design 

Resolved #4874
pull/5232/head
Halil İbrahim Kalkan 6 years ago
committed by GitHub
parent
ee09f69b01 d3b28845b8
commit
78ae8545e8
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 171 additions and 160 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
  2. 21
      modules/cms-kit/src/Volo.CmsKit.Common.Web/CmsKitCommonWebModule.cs
  3. 6
      modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Reactions/StandardReactions.cs
  4. 8
      modules/cms-kit/src/Volo.CmsKit.Domain/Volo/CmsKit/CmsKitDomainModule.cs
  5. 162
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
  6. 44
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
  7. 17
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
  8. 2
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js

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

@ -8,52 +8,45 @@
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection
@model IndexModel @model IndexModel
@inject IStringLocalizer<AbpUiResource> Localizer @inject IStringLocalizer<AbpUiResource> Localizer
<h1>CMS Kit DEMO</h1> <h1 class="text-center">CMS Kit DEMO</h1>
<abp-card class="mb-3"> <abp-card>
<abp-card-body> <abp-card-body class="p-5">
<abp-blockquote> <abp-blockquote class="text-center">
<p> <p class="h2 mb-4">
Any fool can write code that a computer can understand. Good programmers write code that humans can understand. "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
</p> </p>
<footer> <p class="m-0">- Martin Fowler</p>
Martin Fowler
</footer>
</abp-blockquote> </abp-blockquote>
</abp-card-body> </abp-card-body>
<abp-card-footer>
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new {entityType = "quote", entityId = "1"})
<hr/>
}
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{
@await Component.InvokeAsync(typeof(CommentingViewComponent), new {entityType = "quote", entityId = "1"})
}
</abp-card-footer>
</abp-card> </abp-card>
<abp-card class="mb-3"> @if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
<abp-card-body> {
<abp-blockquote> @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "1" })
<p> }
Writing code is very simple, but writing simple code is the hardest thing there is! @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{
@await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "1" })
}
<hr class="my-5" />
<abp-card>
<abp-card-body class="p-5">
<abp-blockquote class="text-center">
<p class="h2 mb-4">
"Writing code is very simple, but writing simple code is the hardest thing there is!"
</p> </p>
<footer> <p class="m-0"> - Halil ibrahim Kalkan <small class="d-block text-muted">Inspired from Johan Cruyff</small></p>
Halil ibrahim Kalkan <small>(inspired from Johan Cruyff)</small>
</footer>
</abp-blockquote> </abp-blockquote>
</abp-card-body> </abp-card-body>
<abp-card-footer>
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "quote", entityId = "2" })
<hr />
}
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{
@await Component.InvokeAsync(typeof(CommentingViewComponent), new { entityType = "quote", entityId = "2" })
}
</abp-card-footer>
</abp-card> </abp-card>
@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" />

21
modules/cms-kit/src/Volo.CmsKit.Common.Web/CmsKitCommonWebModule.cs
View File

@ -18,14 +18,18 @@ namespace Volo.CmsKit.Web
{ {
Configure<CmsKitUiOptions>(options => Configure<CmsKitUiOptions>(options =>
{ {
options.ReactionIcons[StandardReactions.Smile] = new LocalizableIconDictionary("/cms-kit/icons/smile.png"); options.ReactionIcons[StandardReactions.Smile] = new LocalizableIconDictionary("fas fa-smile text-warning");
options.ReactionIcons[StandardReactions.ThumbsUp] = new LocalizableIconDictionary("/cms-kit/icons/thumbsup.png"); options.ReactionIcons[StandardReactions.ThumbsUp] = new LocalizableIconDictionary("fa fa-thumbs-up text-primary");
options.ReactionIcons[StandardReactions.Confused] = new LocalizableIconDictionary("/cms-kit/icons/confused.png"); options.ReactionIcons[StandardReactions.Confused] = new LocalizableIconDictionary("fas fa-surprise text-warning");
options.ReactionIcons[StandardReactions.Eyes] = new LocalizableIconDictionary("/cms-kit/icons/eyes.png"); options.ReactionIcons[StandardReactions.Eyes] = new LocalizableIconDictionary("fas fa-meh-rolling-eyes text-warning");
options.ReactionIcons[StandardReactions.Heart] = new LocalizableIconDictionary("/cms-kit/icons/heart.png"); options.ReactionIcons[StandardReactions.Heart] = new LocalizableIconDictionary("fa fa-heart text-danger");
options.ReactionIcons[StandardReactions.Hooray] = new LocalizableIconDictionary("/cms-kit/icons/hooray.png"); options.ReactionIcons[StandardReactions.HeartBroken] = new LocalizableIconDictionary("fas fa-heart-broken text-danger");
options.ReactionIcons[StandardReactions.Rocket] = new LocalizableIconDictionary("/cms-kit/icons/rocket.png"); options.ReactionIcons[StandardReactions.Wink] = new LocalizableIconDictionary("fas fa-grin-wink text-warning");
options.ReactionIcons[StandardReactions.ThumbsDown] = new LocalizableIconDictionary("/cms-kit/icons/thumbsdown.png"); options.ReactionIcons[StandardReactions.Pray] = new LocalizableIconDictionary("fas fa-praying-hands text-info");
options.ReactionIcons[StandardReactions.Rocket] = new LocalizableIconDictionary("fa fa-rocket text-success");
options.ReactionIcons[StandardReactions.ThumbsDown] = new LocalizableIconDictionary("fa fa-thumbs-down text-secondary");
options.ReactionIcons[StandardReactions.Victory] = new LocalizableIconDictionary("fas fa-hand-peace text-warning");
options.ReactionIcons[StandardReactions.Rock] = new LocalizableIconDictionary("fas fa-hand-rock text-warning");
}); });
Configure<AbpVirtualFileSystemOptions>(options => Configure<AbpVirtualFileSystemOptions>(options =>
@ -35,3 +39,4 @@ namespace Volo.CmsKit.Web
} }
} }
} }

6
modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Reactions/StandardReactions.cs
View File

@ -8,7 +8,11 @@
public const string Confused = "_CF"; public const string Confused = "_CF";
public const string Eyes = "_EY"; public const string Eyes = "_EY";
public const string Heart = "_HE"; public const string Heart = "_HE";
public const string Hooray = "_HO"; public const string HeartBroken = "_HB";
public const string Wink = "_WI";
public const string Pray = "_PR";
public const string Rocket = "_RO"; public const string Rocket = "_RO";
public const string Victory = "_VI";
public const string Rock = "_RC";
} }
} }

8
modules/cms-kit/src/Volo.CmsKit.Domain/Volo/CmsKit/CmsKitDomainModule.cs
View File

@ -16,14 +16,18 @@ namespace Volo.CmsKit
{ {
Configure<CmsKitOptions>(options => Configure<CmsKitOptions>(options =>
{ {
options.Reactions.AddOrReplace(StandardReactions.Smile);
options.Reactions.AddOrReplace(StandardReactions.ThumbsUp); options.Reactions.AddOrReplace(StandardReactions.ThumbsUp);
options.Reactions.AddOrReplace(StandardReactions.ThumbsDown); options.Reactions.AddOrReplace(StandardReactions.ThumbsDown);
options.Reactions.AddOrReplace(StandardReactions.Smile);
options.Reactions.AddOrReplace(StandardReactions.Wink);
options.Reactions.AddOrReplace(StandardReactions.Confused); options.Reactions.AddOrReplace(StandardReactions.Confused);
options.Reactions.AddOrReplace(StandardReactions.Victory);
options.Reactions.AddOrReplace(StandardReactions.Rock);
options.Reactions.AddOrReplace(StandardReactions.Eyes); options.Reactions.AddOrReplace(StandardReactions.Eyes);
options.Reactions.AddOrReplace(StandardReactions.Heart); options.Reactions.AddOrReplace(StandardReactions.Heart);
options.Reactions.AddOrReplace(StandardReactions.Hooray); options.Reactions.AddOrReplace(StandardReactions.HeartBroken);
options.Reactions.AddOrReplace(StandardReactions.Rocket); options.Reactions.AddOrReplace(StandardReactions.Rocket);
options.Reactions.AddOrReplace(StandardReactions.Pray);
}); });
} }
} }

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

@ -15,101 +15,107 @@
@{ @{
Func<dynamic, IHtmlContent> GetCommentTitle(CmsUserDto author, DateTime creationTime) => Func<dynamic, IHtmlContent> GetCommentTitle(CmsUserDto author, DateTime creationTime) =>
@<span> @<span>
<i class="fa fa-comment-o"></i> <i class="far fa-comment-alt mr-2"></i>
@((string.IsNullOrWhiteSpace(author.Name) @((string.IsNullOrWhiteSpace(author.Name)
? author.UserName ? author.UserName
: author.Name + " " + author.Surname).Trim()) : author.Name + " " + author.Surname).Trim())
<small>@creationTime.ToString()</small> <small class="text-muted float-right" style="opacity: .5;">@creationTime.ToString()</small>
</span>; </span>;
} }
@{ @{
Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) => Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
@<div class="cms-comment-form-area @(repliedCommentId.HasValue ? "pl-5" : "pt-4")" @<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() ?? "")" data-reply-id="@(repliedCommentId?.ToString() ?? "")"
style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")"> style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
<form class="cms-comment-form"> <form class="cms-comment-form">
<input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId"/> <input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId" />
<div class="form-group"> <div class="form-row">
<label> @(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"]) </label> <div class="col">
<textarea class="form-control" name="commentText" rows="3"></textarea> <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>
@if (cancelButton) <div class="col-auto">
{ <div class="text-right">
<abp-button type="button" button-type="Secondary" class="reply-cancel-button" data-reply-id="@(repliedCommentId?.ToString() ?? "")"> @L["Cancel"] </abp-button> @if (cancelButton)
} {
<abp-button type="submit" button-type="Primary"> @L["Send"] </abp-button> <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>
</form> }
</div>; <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>
</form>
</div>;
} }
@{ @{
Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) => Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) =>
@<div> @<div>
<div class="cms-comment-content-area" data-id="@id.ToString()"> <div class="cms-comment-content-area" data-id="@id.ToString()">
<p> <p class="m-0">
@text @text
</p> </p>
</div> </div>
</div>; </div>;
} }
@{ @{
Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply, string text) => Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply, string text) =>
@<div class="pb-4"> @<div>
<div class="float-right"> <div class="text-right">
@if (!isReply) @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 href="#" class="comment-reply-link" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}_link")"> </a>
<i class="fa fa-reply"></i> @L["Reply"]
</a>
}
else
{
<a href="@(Model.LoginUrl + "_" + id)"> @L["LoginToReply"]</a>
}
} }
@if (authorId == CurrentUser.Id) else
{ {
@if (!isReply) <a href="@(Model.LoginUrl + "_" + id)" class="btn btn-sm btn-primary shadow-sm"> @L["LoginToReply"]</a>
{ }
<span> | </span> }
} @if (authorId == CurrentUser.Id)
{
<a href="#" class="comment-delete-link" data-id="@id.ToString()"> <a href="#" class="comment-delete-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
<i class="fa fa-trash"></i> @L["Delete"] <i class="fa fa-trash mr-1 text-danger"></i> @L["Delete"]
</a> </a>
<span> | </span>
<a href="#" class="comment-edit-link" data-id="@id.ToString()"> <a href="#" class="comment-edit-link btn btn-sm shadow-sm bg-white" data-id="@id.ToString()">
<i class="fa fa-pencil"></i> @L["Edit"] <i class="fa fa-pencil mr-1 text-info"></i> @L["Edit"]
</a> </a>
} }
</div> </div>
<div class="cms-comment-edit-area" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}")" data-id="@id.ToString()" style="display:none"> <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"> <form class="cms-comment-update-form">
<input hidden value="@id.ToString()" name="id"/> <input hidden value="@id.ToString()" name="id" />
<div class="form-group"> <div class="form-group">
<textarea class="form-control" name="commentText" rows="3">@text</textarea> <textarea class="form-control" name="commentText" rows="3">@text</textarea>
</div> </div>
<abp-button type="button" button-type="Secondary" class="comment-edit-cancel-button" data-id="@id.ToString()"> @L["Cancel"] </abp-button> <div class="text-right">
<abp-button type="submit" button-type="Primary"> @L["Update"] </abp-button> <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> </form>
</div> </div>
</div>; </div>
</div>;
} }
<div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId"> <div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
<div>
<div class="pl-5 pt-3"> <h5 class="mb-0 mt-4">
<h4> <i class="fas fa-comment-alt"></i> @L["Comments"]
@L["Comments"] </h5>
</h4>
@foreach (var comment in Model.Comments) @foreach (var comment in Model.Comments)
{ {
<div class="comment pt-2 mt-1 mb-1"> <div class="comment">
<div class="border-bottom"> <div class="card p-4 mx-0 my-4">
<h5> <h5>
@GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null) @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
</h5> </h5>
@ -119,7 +125,7 @@
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>()) @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{ {
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent),
new {entityType = "comment", entityId = comment.Id.ToString()}) new { entityType = "comment", entityId = comment.Id.ToString() })
} }
@GetCommentActionArea(comment.Id, comment.Author.Id, false, comment.Text).Invoke(null) @GetCommentActionArea(comment.Id, comment.Author.Id, false, comment.Text).Invoke(null)
@ -131,28 +137,28 @@
@if (comment.Replies.Any()) @if (comment.Replies.Any())
{ {
<div class="pl-5"> @foreach (var reply in comment.Replies)
@foreach (var reply in comment.Replies) {
{ <div class="bg-light card p-4 mx-0 mt-3">
<div class="comment pt-3"> <div class="comment">
<div class="border-bottom"> <div>
<h6> <h5>
@GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null) @GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
</h6> </h5>
@GetCommentContentArea(reply.Id, reply.Text).Invoke(null) @GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>()) @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{ {
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent),
new {entityType = "comment", entityId = reply.Id.ToString()}) new { entityType = "comment", entityId = reply.Id.ToString() })
} }
@GetCommentActionArea(reply.Id, reply.Author.Id, true, reply.Text).Invoke(null) @GetCommentActionArea(reply.Id, reply.Author.Id, true, reply.Text).Invoke(null)
</div> </div>
</div> </div>
} </div>
</div> }
} }
</div> </div>
</div> </div>
@ -166,7 +172,7 @@
} }
else if (!string.IsNullOrWhiteSpace(Model.LoginUrl)) else if (!string.IsNullOrWhiteSpace(Model.LoginUrl))
{ {
<div class="float-right mb-2"> <div class="text-right">
<a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a> <a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
</div> </div>
} }

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

@ -1,25 +1,29 @@
@inject ICurrentUser CurrentUser @inject ICurrentUser CurrentUser
@using Volo.Abp.Users @using Volo.Abp.Users
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewComponent.ReactionSelectionViewModel @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewComponent.ReactionSelectionViewModel
<span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId"> <div class="text-right">
<div class="px-2 py-1 my-3 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) @if (CurrentUser.IsAuthenticated)
{ {
<a class="cms-reaction-select-icon" tabindex="0"><i class="fa fa-smile-o"></i></a> <a class="cms-reaction-select-icon" href="#"><i class="fa fa-smile-o text-muted"></i></a>
<div class="cms-reaction-selection-popover-content" style="display: none"> <div class="cms-reaction-selection-popover-content" style="display: none">
@foreach (var reaction in Model.Reactions) @foreach (var reaction in Model.Reactions)
{ {
<span class="mr-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name"> <span class="m-2 p-2 w-25 d-inline-block text-center cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "shadow-sm bg-light rounded cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name">
<img src="@reaction.Icon" width="18" height="18"/> <i class="@reaction.Icon fa-2x"></i>
</span> </span>
} }
</div>
}
@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")">
<i class="@reaction.Icon"></i>
<small class="text-muted" style="opacity: .75;">@(reaction.Count)</small>
</span>
}
</span>
</div> </div>
} </div>
@foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
{
<span class="mr-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
<img src="@reaction.Icon" width="18" height="18"/>
@(reaction.Count)
</span>
}
</span>

17
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
View File

@ -1,13 +1,8 @@
.cms-reaction-select-icon .cms-reaction-select-icon, .cms-reaction-icon {
{
cursor: pointer; cursor: pointer;
} }
.cms-reaction-icon .cms-reaction-selection-popover-content i.fa-2x{
{ width: 25%;
cursor: pointer; display: inline-block;
padding: 3px 5px 5px; float: left;
} }
.cms-reaction-icon-selected
{
background-color: #eef;
}

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

@ -47,7 +47,7 @@
function init() { function init() {
$selectIcon.popover({ $selectIcon.popover({
placement: 'right', placement: 'left',
html: true, html: true,
trigger: 'focus', trigger: 'focus',
title: l('PickYourReaction'), title: l('PickYourReaction'),

Write Preview
Loading…
Cancel
Save