Add more reaction icons

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

@@ -20,6 +20,12 @@ public override void ConfigureServices(ServiceConfigurationContext context)
             {
                 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");
             });
 
             Configure<AbpVirtualFileSystemOptions>(options =>

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

@@ -2,7 +2,13 @@
 {
     public static class StandardReactions
     {
-        public const string Smile = "SM";
-        public const string ThumbsUp = "TU";
+        public const string Smile = "_SM";
+        public const string ThumbsUp = "_TU";
+        public const string ThumbsDown = "_TD";
+        public const string Confused = "_CF";
+        public const string Eyes = "_EY";
+        public const string Heart = "_HE";
+        public const string Hooray = "_HO";
+        public const string Rocket = "_RO";
     }
 }

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

@@ -16,6 +16,12 @@ public override void ConfigureServices(ServiceConfigurationContext context)
             {
                 options.Reactions.AddOrReplace(StandardReactions.Smile);
                 options.Reactions.AddOrReplace(StandardReactions.ThumbsUp);
+                options.Reactions.AddOrReplace(StandardReactions.ThumbsDown);
+                options.Reactions.AddOrReplace(StandardReactions.Confused);
+                options.Reactions.AddOrReplace(StandardReactions.Eyes);
+                options.Reactions.AddOrReplace(StandardReactions.Heart);
+                options.Reactions.AddOrReplace(StandardReactions.Hooray);
+                options.Reactions.AddOrReplace(StandardReactions.Rocket);
             });
         }
     }

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

@@ -1,18 +1,19 @@
 @model Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewModel
 <span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
-    <span class="cms-reaction-select-icon"><i class="fa fa-smile-o"></i></span>
+    <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">
-                <img src="@reaction.Icon" width="18" height="18" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")"/>
+            <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>
         }
     </div>
     @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
     {
-        <span class="mr-1">
-            <img src="@reaction.Icon" width="18" height="18" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")"/>@(reaction.Count)
+        <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"/>
+            @(reaction.Count)
         </span>
     }
 </span>

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

@@ -5,9 +5,9 @@
 .cms-reaction-icon
 {
     cursor: pointer;
-    padding: 2px;
+    padding: 3px 5px 5px;
 }
 .cms-reaction-icon-selected
 {
-    background-color: #eee;
+    background-color: #eef;
 }

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

@@ -4,8 +4,8 @@
 
     var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList;
 
-    if (myDefaultWhiteList.img.indexOf('data-name') < 0) {
-        myDefaultWhiteList['img'].push('data-name');
+    if (myDefaultWhiteList.span.indexOf('data-reaction-name') < 0) {
+        myDefaultWhiteList.span.push('data-reaction-name');
     }
 
     $(document).ready(function () {
@@ -30,7 +30,7 @@
                         var methodName = $icon.hasClass('cms-reaction-icon-selected') ? 'delete' : 'create';
                         volo.cmsKit.reactions.reactionPublic[methodName](
                             $.extend(getFilters(), {
-                                reactionName: $icon.attr('data-name')
+                                reactionName: $icon.attr('data-reaction-name')
                             })
                         ).then(function () {
                             $selectIcon.popover('hide');
@@ -45,6 +45,7 @@
                 $selectIcon.popover({
                     placement: 'right',
                     html: true,
+                    trigger: 'focus',
                     title: l('PickYourReaction'),
                     content: $popoverContent.html()
                 }).on('shown.bs.popover', function () {