Show popover to react.

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@@ -1,6 +1,6 @@
 {
   "culture": "en",
   "texts": {
-
+    "PickYourReaction": "Pick your reaction"
   }
 }

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json

@@ -1,5 +1,6 @@
 {
   "culture": "tr",
   "texts": {
+    "PickYourReaction": "Tepkinizi seçin"
   }
 }

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

@@ -1,22 +1,18 @@
 @model Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewModel
-<span class="cms-reaction-selection" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
-    <div>
-        Pick a reaction:
+<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>
+    <div class="cms-reaction-selection-popover-content" style="display: none">
         @foreach (var reaction in Model.Reactions)
         {
-            <span class="mr-2">
-                <img src="@reaction.Icon" width="16" height="16" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")"/>
-            </span>
-        }
-    </div>
-    <div>
-        Current reactions:
-        @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
-        {
-            <span class="mr-2">
-                <img src="@reaction.Icon" width="20" height="20" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")"/>
-                <span> @reaction.Count</span>
+            <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>
         }
     </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>
+    }
 </span>

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

@@ -1,8 +1,13 @@
-.cms-reaction-icon
+.cms-reaction-select-icon
 {
     cursor: pointer;
 }
+.cms-reaction-icon
+{
+    cursor: pointer;
+    padding: 2px;
+}
 .cms-reaction-icon-selected
 {
-    border: 1px solid gray;
+    background-color: #eee;
 }

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

@@ -1,19 +1,30 @@
 (function ($) {
+
+    var l = abp.localization.getResource('CmsKit');
+
+    var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList;
+
+    if (myDefaultWhiteList.img.indexOf('data-name') < 0) {
+        myDefaultWhiteList['img'].push('data-name');
+    }
+
     $(document).ready(function () {
 
         abp.widgets.CmsReactionSelection = function ($widget) {
-            var $reactionSelection = $widget.find('.cms-reaction-selection');
             var widgetManager = $widget.data('abp-widget-manager');
+            var $reactionArea = $widget.find('.cms-reaction-area');
+            var $selectIcon = $widget.find('.cms-reaction-select-icon');
+            var $popoverContent = $widget.find('.cms-reaction-selection-popover-content');
 
             function getFilters() {
                 return {
-                    entityType: $reactionSelection.attr('data-entity-type'),
-                    entityId: $reactionSelection.attr('data-entity-id')
+                    entityType: $reactionArea.attr('data-entity-type'),
+                    entityId: $reactionArea.attr('data-entity-id')
                 };
             }
 
-            function init() {
-                $widget.find('.cms-reaction-icon').each(function () {
+            function registerClickOfReactionIcons($container) {
+                $container.find('.cms-reaction-icon').each(function () {
                     var $icon = $(this);
                     $icon.click(function () {
                         var methodName = $icon.hasClass('cms-reaction-icon-selected') ? 'delete' : 'create';
@@ -22,24 +33,41 @@
                                 reactionName: $icon.attr('data-name')
                             })
                         ).then(function () {
+                            $selectIcon.popover('hide');
                             widgetManager.refresh($widget);
                         });
                     });
                 });
             }
 
+            function init() {
+
+                $selectIcon.popover({
+                    placement: 'right',
+                    html: true,
+                    title: l('PickYourReaction'),
+                    content: $popoverContent.html()
+                }).on('shown.bs.popover', function () {
+                    var $popover = $('#' + $selectIcon.attr('aria-describedby'));
+                    registerClickOfReactionIcons($popover);
+                });
+
+                registerClickOfReactionIcons($widget);
+            }
+
             return {
                 init: init,
                 getFilters: getFilters
             };
         };
 
-        $('.abp-widget-wrapper[data-widget-name="CmsReactionSelection"]').each(function () {
-            var widgetManager = new abp.WidgetManager({
-                wrapper: $(this),
-            });
+        $('.abp-widget-wrapper[data-widget-name="CmsReactionSelection"]')
+            .each(function () {
+                var widgetManager = new abp.WidgetManager({
+                    wrapper: $(this),
+                });
 
-            widgetManager.init();
-        });
+                widgetManager.init();
+            });
     });
 })(jQuery);