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

Resolved #4874

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

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

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

@@ -18,14 +18,18 @@ namespace Volo.CmsKit.Web
         {
             Configure<CmsKitUiOptions>(options =>
             {
-                options.ReactionIcons[StandardReactions.Smile] = new LocalizableIconDictionary("/cms-kit/icons/smile.png");
-                options.ReactionIcons[StandardReactions.ThumbsUp] = new LocalizableIconDictionary("/cms-kit/icons/thumbsup.png");
-                options.ReactionIcons[StandardReactions.Confused] = new LocalizableIconDictionary("/cms-kit/icons/confused.png");
-                options.ReactionIcons[StandardReactions.Eyes] = new LocalizableIconDictionary("/cms-kit/icons/eyes.png");
-                options.ReactionIcons[StandardReactions.Heart] = new LocalizableIconDictionary("/cms-kit/icons/heart.png");
-                options.ReactionIcons[StandardReactions.Hooray] = new LocalizableIconDictionary("/cms-kit/icons/hooray.png");
-                options.ReactionIcons[StandardReactions.Rocket] = new LocalizableIconDictionary("/cms-kit/icons/rocket.png");
-                options.ReactionIcons[StandardReactions.ThumbsDown] = new LocalizableIconDictionary("/cms-kit/icons/thumbsdown.png");
+                options.ReactionIcons[StandardReactions.Smile] = new LocalizableIconDictionary("fas fa-smile text-warning");
+                options.ReactionIcons[StandardReactions.ThumbsUp] = new LocalizableIconDictionary("fa fa-thumbs-up text-primary");
+                options.ReactionIcons[StandardReactions.Confused] = new LocalizableIconDictionary("fas fa-surprise text-warning");
+                options.ReactionIcons[StandardReactions.Eyes] = new LocalizableIconDictionary("fas fa-meh-rolling-eyes text-warning");
+                options.ReactionIcons[StandardReactions.Heart] = new LocalizableIconDictionary("fa fa-heart text-danger");
+                options.ReactionIcons[StandardReactions.HeartBroken] = new LocalizableIconDictionary("fas fa-heart-broken text-danger");
+                options.ReactionIcons[StandardReactions.Wink] = new LocalizableIconDictionary("fas fa-grin-wink text-warning");
+                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 =>
@@ -35,3 +39,4 @@ namespace Volo.CmsKit.Web
         }
     }
 }
+

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

@@ -8,7 +8,11 @@
         public const string Confused = "_CF";
         public const string Eyes = "_EY";
         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 Victory = "_VI";
+        public const string Rock = "_RC";
     }
 }

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

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

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

@@ -15,101 +15,107 @@
 
 @{
     Func<dynamic, IHtmlContent> GetCommentTitle(CmsUserDto author, DateTime creationTime) =>
-        @<span>
-            <i class="fa fa-comment-o"></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>@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 @(repliedCommentId.HasValue ? "pl-5" : "pt-4")"
-              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-group">
-                    <label> @(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? L["YourComment"] : L["YourReply"]) </label>
-                    <textarea class="form-control" name="commentText" 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>
-                @if (cancelButton)
-                {
-                    <abp-button type="button" button-type="Secondary" class="reply-cancel-button" data-reply-id="@(repliedCommentId?.ToString() ?? "")"> @L["Cancel"] </abp-button>
-                }
-                <abp-button type="submit" button-type="Primary"> @L["Send"] </abp-button>
-            </form>
-        </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>
+                </div>
+            </div>
+        </form>
+    </div>;
 }
 @{
     Func<dynamic, IHtmlContent> GetCommentContentArea(Guid id, string text) =>
-        @<div>
-            <div class="cms-comment-content-area" data-id="@id.ToString()">
-                <p>
-                    @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 class="pb-4">
-            <div class="float-right">
-                @if (!isReply)
+    @<div>
+        <div class="text-right">
+            @if (!isReply)
+            {
+                @if (CurrentUser.IsAuthenticated)
                 {
-                    @if (CurrentUser.IsAuthenticated)
-                    {
-                        <a href="#" class="comment-reply-link" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}_{id}_link")">
-                            <i class="fa fa-reply"></i> @L["Reply"]
-                        </a>
-                    }
-                    else
-                    {
-                        <a href="@(Model.LoginUrl + "_" + id)"> @L["LoginToReply"]</a>
-                    }
+                    <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 (authorId == CurrentUser.Id)
+                else
                 {
-                    @if (!isReply)
-                    {
-                        <span> | </span>
-                    }
+                    <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" data-id="@id.ToString()">
-                        <i class="fa fa-trash"></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>
 
-                    <span> | </span>
 
-                    <a href="#" class="comment-edit-link" data-id="@id.ToString()">
-                        <i class="fa fa-pencil"></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"/>
+                    <input hidden value="@id.ToString()" name="id" />
                     <div class="form-group">
                         <textarea class="form-control" name="commentText" rows="3">@text</textarea>
                     </div>
-                    <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 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 class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
-
-    <div class="pl-5 pt-3">
-        <h4>
-            @L["Comments"]
-        </h4>
+    <div>
+        <h5 class="mb-0 mt-4">
+           <i class="fas fa-comment-alt"></i> @L["Comments"]
+        </h5>
         @foreach (var comment in Model.Comments)
         {
-            <div class="comment pt-2 mt-1 mb-1">
-                <div class="border-bottom">
+            <div class="comment">
+                <div class="card p-4 mx-0 my-4">
                     <h5>
                         @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
                     </h5>
@@ -119,7 +125,7 @@
                     @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
                     {
                         @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)
@@ -131,28 +137,28 @@
 
                     @if (comment.Replies.Any())
                     {
-                        <div class="pl-5">
-                            @foreach (var reply in comment.Replies)
-                            {
-                                <div class="comment pt-3">
-                                    <div class="border-bottom">
+                        @foreach (var reply in comment.Replies)
+                        {
+                            <div class="bg-light card p-4 mx-0 mt-3">
+                                <div class="comment">
+                                    <div>
 
-                                        <h6>
+                                        <h5>
                                             @GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
-                                        </h6>
+                                        </h5>
 
                                         @GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
 
                                         @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
                                         {
                                             @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)
                                     </div>
                                 </div>
-                            }
-                        </div>
+                            </div>
+                        }
                     }
                 </div>
             </div>
@@ -166,7 +172,7 @@
             }
             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>
                 </div>
             }

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

@@ -1,25 +1,29 @@
 @inject ICurrentUser CurrentUser
 @using Volo.Abp.Users
 @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)
-    {
-        <a class="cms-reaction-select-icon" tabindex="0"><i class="fa fa-smile-o"></i></a>
-        <div class="cms-reaction-selection-popover-content" style="display: none">
-            @foreach (var reaction in Model.Reactions)
-            {
-                <span class="mr-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name">
-                    <img src="@reaction.Icon" width="18" height="18"/>
-                </span>
-            }
+                @if (CurrentUser.IsAuthenticated)
+                {
+                    <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">
+                        @foreach (var reaction in Model.Reactions)
+                        {
+                        <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"> 
+                            <i class="@reaction.Icon fa-2x"></i>
+                        </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>
-    }
-    @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>
+    </div>

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

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

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

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