From 0bce76cc341020c4c1004ef20b345af35844b539 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Fri, 17 Jul 2020 22:13:25 +0300 Subject: [PATCH] Show popover to react. --- .../CmsKit/Localization/Resources/en.json | 2 +- .../CmsKit/Localization/Resources/tr.json | 1 + .../ReactionSelection/Default.cshtml | 26 ++++------ .../Components/ReactionSelection/default.css | 9 +++- .../Components/ReactionSelection/default.js | 50 +++++++++++++++---- 5 files changed, 59 insertions(+), 29 deletions(-) diff --git a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json index 2dd71201b7..e1bdb1b209 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json +++ b/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" } } diff --git a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json b/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json index d7fb14a7c7..ce0d27fd3c 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json +++ b/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" } } diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml index 3927ac3fdb..4a4ee6cfb5 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml +++ b/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 - -
- Pick a reaction: + + + -
- Current reactions: - @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0)) - { - - - @reaction.Count + + }
+ @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0)) + { + + @(reaction.Count) + + } diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css index 844fefaafa..e984fa3d77 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css +++ b/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; } diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js index 933d127e91..62a060a543 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js +++ b/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);