Merge pull request #180 from jusrus01/improving-reactions

Fixed popover placement and added more translations

Author: SauliusStankevicius

src/webapp/src/client/app/common/directives/wall/message-like/list/like-list-popover/like-list-popover.directive.js

@@ -4,18 +4,20 @@
     angular
         .module('simoonaApp.Common')
         .directive('aceMessageLikeListPopover', messageLikeListPopover)
-        .constant('popoverLikeCount', 10);
+        .constant('popoverLikeCount', 10)
+        .constant('popoverSwitchPositionValue', { y: 385 });
 
     messageLikeListPopover.$inject = [
         '$compile',
         '$window',
         '$templateCache',
         '$uibModal',
         'likeTypes',
-        'popoverLikeCount'
+        'popoverLikeCount',
+        'popoverSwitchPositionValue'
     ];
 
-    function messageLikeListPopover($compile, $window, $templateCache, $uibModal, likeTypes, popoverLikeCount) {
+    function messageLikeListPopover($compile, $window, $templateCache, $uibModal, likeTypes, popoverLikeCount, popoverSwitchPositionValue) {
         var lastLikePopoverElement;
         var directive = {
             restrict: 'A',
@@ -24,7 +26,6 @@
             scope: {
                 likes: '=',
                 modalLikes: '=',
-                popoverPlacement: '@',
                 popoverTitle: '@',
                 popoverEmoji: '@',
                 allLikeTypes: '@',
@@ -57,12 +58,20 @@
             element.popover({
                 html: true,
                 content: popoverContent,
-                placement: scope.popoverPlacement,
-                trigger: 'hover',
+                placement: getPopoverPlacement,
+                trigger: 'hover'
             }).click(function (event) {
                 angular.element(this).popover('hide');
                 event.stopPropagation();
             });
+
+            function getPopoverPlacement() {
+                if(element[0].getBoundingClientRect().y > popoverSwitchPositionValue.y) {
+                    return 'top';
+                }
+
+                return 'bottom';
+            }
         }
     }
 

src/webapp/src/client/app/common/directives/wall/message-like/list/like-list-popover/like-list-popover.html

@@ -15,8 +15,10 @@
                 </a>
             </li>
 
-            <p class="likes-list-span blue" ng-if="hiddenUserCount > 0">
-                and {{hiddenUserCount}} more...
+            <p class="likes-list-span blue"
+               ng-if="hiddenUserCount > 0"
+               translate="common.moreCount"
+               translate-values="{ 'one' : hiddenUserCount }">
             </p>
         </ul>
     </script>

src/webapp/src/client/app/common/directives/wall/message-like/list/like-list.html

@@ -25,8 +25,7 @@
                likes="filteredLikesByType[like.type]"
                style="text-decoration: none"
                popover-title="{{like.resource}}"
-               popover-emoji="{{like.emoji}}"
-               popover-placement="top">{{like.emoji}}</a>
+               popover-emoji="{{like.emoji}}">{{like.emoji}}</a>
 
             <span ng-if="filteredLikes[key].length <= 1">
                 {{like.emoji}}
@@ -57,8 +56,7 @@
                likes="filteredLikesByType[like.type]"
                style="text-decoration: none"
                popover-title="{{like.resource}}"
-               popover-emoji="{{like.emoji}}"
-               popover-placement="top">{{like.emoji}}</a>
+               popover-emoji="{{like.emoji}}">{{like.emoji}}</a>
 
             <span ng-if="filteredLikes[key].length <= 1">
                 {{like.emoji}}
@@ -80,7 +78,6 @@
        likes="positionedLikes"
        modal-likes="filteredLikesByType"
        all-like-types="true"
-       popover-placement="top"
        data-test-id="{{::likeType}}-like-others">
        <span translate="common.others" translate-values="{ likeCount: positionedLikes.length - 1 }"></span>
     </a>

src/webapp/src/client/resources/en_US/common.json

@@ -199,5 +199,6 @@
   "emojiSad": "Sad",
   "emojiGrumpyCat": "Angry",
   "emojiAll" : "All",
-  "more" : "More"
+  "more" : "More",
+  "moreCount" : "and {{one}} more..."
 }

src/webapp/src/client/resources/lt_LT/common.json

@@ -199,5 +199,6 @@
   "emojiSad": "Liūdnas (-a)",
   "emojiGrumpyCat": "Piktas (-a)",
   "emojiAll" : "Visi",
-  "more" : "Daugiau"
+  "more" : "Daugiau",
+  "moreCount" : "ir dar {{one}}..."
 }