feat: Fix activity reactions display when large screen - MEED-3361 - M…

…eeds-io/MIPs#113 (#3535) Before this change, when the screen width was between 1264px and 1364px, the activity actions move to the next line. This PR allows for CSS style adjustments to the activity footer reactions and actions to keep them on a single line. (cherry picked from commit 8d5197d)
Meeds-io · Feb 28, 2024 · 435b2cb · 435b2cb
1 parent b744f55
commit 435b2cb
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 31 deletions.
diff --git a/webapp/portlet/src/main/webapp/vue-apps/activity-reactions/components/ActivityReactions.vue b/webapp/portlet/src/main/webapp/vue-apps/activity-reactions/components/ActivityReactions.vue
@@ -3,35 +3,28 @@
     <div class="reactionsUsersAvatar position-relative d-none d-lg-inline">
       <div class="d-flex flex-nowrap">
         <exo-user-avatar
-          v-for="liker in likersToDisplay"
+          v-for="(liker, index) in likersToDisplay"
           :key="liker.id"
           :identity="liker"
           :size="30"
+          :class="[index === 0 && 'pl-4']"
           popover
-          avatar 
-          extra-class="me-1" />
+          avatar
+          compact
+          extra-class="me-1 transition-2s"/>
       </div>
     </div>
-    <div class="activityLikersAndKudosDrawer d-none d-lg-inline">
+    <div class="activityLikersAndKudosDrawer d-none d-lg-inline ml-n5">
       <div class="seeMoreReactionsContainer">
         <div
           v-if="seeMoreLikerToDisplay"
-          class="seeMoreLikers"
-          @click="openDrawer">
+          :class="displayAnimation && 'mt-n2 transition-2s'"
+          class="seeMoreLikers border-white"
+          @click="openDrawer"
+          @mouseover="showAvatarAnimation = true"
+          @mouseleave="showAvatarAnimation = false">
           <span class="seeMoreLikersDetails">+{{ showMoreLikersNumber }}</span>
         </div>
-        <p
-          v-if="likersNumber && likersNumber <= 1"
-          class="likersNumber my-auto pl-2 align-self-end caption text-no-wrap"
-          @click="openDrawer">
-          {{ likersNumber }} {{ $t('UIActivity.label.single_Reaction_Number') }}
-        </p>
-        <p
-          v-if="likersNumber > 1"
-          class="likersNumber my-auto pl-2 align-self-end caption text-no-wrap"
-          @click="openDrawer">
-          {{ likersNumber }} {{ $t('UIActivity.label.Reactions_Number') }}
-        </p>
       </div>
     </div>
     <activity-reactions-mobile
@@ -73,6 +66,7 @@ export default {
   },
   data: () => ({
     maxLikersToShow: 4,
+    showAvatarAnimation: false
   }),
   computed: {
     seeMoreLikerToDisplay () {
@@ -86,6 +80,9 @@ export default {
     },
     activityPosterId() {
       return this.activity && this.activity.identity && this.activity.identity.profile && this.activity.identity.profile.username;
+    },
+    displayAnimation() {
+      return this.showAvatarAnimation;
     }
   },
   methods: {

diff --git a/...et/src/main/webapp/vue-apps/activity-stream/components/activity/footer/ActivityFooter.vue b/...et/src/main/webapp/vue-apps/activity-stream/components/activity/footer/ActivityFooter.vue
@@ -7,7 +7,7 @@
       class="no-border-bottom mb-0 pa-3" />
     <div
       :class="actionBarBorderClass"
-      class="mb-0 d-flex flex-wrap flex-column flex-lg-row">
+      class="mb-0 d-flex flex-wrap flex-column flex-lg-row align-lg-center">
       <activity-reactions
         :activity-id="activityId"
         :activity="activity"
@@ -97,4 +97,4 @@ export default {
     },
   },
 };
-</script>
+</script>
diff --git a/...app/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue b/...app/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex ms-lg-4">
+  <div class="d-inline-flex ms-xl-4 ms-lg-3">
     <!-- Added for mobile -->
     <v-tooltip :disabled="isMobile" bottom>
       <template #activator="{ on, attrs }">
@@ -20,7 +20,7 @@
               :size="isMobile && '20' || '14'">
               fa-comment
             </v-icon>
-            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-2">
+            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-1">
               {{ $t('UIActivity.label.Comment') }}
             </span>
           </div>
@@ -95,4 +95,4 @@ export default {
     },
   },
 };
-</script>
+</script>
diff --git a/...webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue b/...webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex ms-lg-4">
+  <div class="d-inline-flex ms-xl-4 ms-lg-3">
     <!-- Added for mobile -->
     <v-tooltip bottom>
       <template #activator="{ on, attrs }">
@@ -21,7 +21,7 @@
               :size="isMobile && '20' || '14'">
               fa-thumbs-up
             </v-icon>
-            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-2">
+            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-1">
               {{ $t('UIActivity.msg.LikeActivity') }}
             </span>
           </div>
@@ -106,4 +106,4 @@ export default {
     },
   },
 };
-</script>
+</script>
diff --git a/...ebapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue b/...ebapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex ms-lg-4">
+  <div class="d-inline-flex ms-xl-4 ms-lg-3">
     <!-- Added for mobile -->
     <v-tooltip :disabled="isMobile" bottom>
       <template #activator="{ on, attrs }">
@@ -21,7 +21,7 @@
               :size="isMobile && '20' || '14'">
               fa-share
             </v-icon>
-            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-2">
+            <span v-if="!isMobile" class="mx-auto mt-1 mt-lg-0 ms-lg-1">
               {{ $t('UIActivity.share') }}
             </span>
           </div>
@@ -97,4 +97,4 @@ export default {
     },
   },
 };
-</script>
+</script>
diff --git a/webapp/portlet/src/main/webapp/vue-apps/common/components/ExoUserAvatarsList.vue b/webapp/portlet/src/main/webapp/vue-apps/common/components/ExoUserAvatarsList.vue
@@ -104,6 +104,10 @@ export default {
       type: Boolean,
       default: () => false
     },
+    compact: {
+      type: Boolean,
+      default: () => false
+    },
   },
   computed: {
     usersToDisplay() {

diff --git a/webapp/portlet/src/main/webapp/vue-apps/common/components/UserAvatar.vue b/webapp/portlet/src/main/webapp/vue-apps/common/components/UserAvatar.vue
@@ -17,7 +17,7 @@
       @click="clickable && $emit('avatar-click', $event)">
       <v-avatar
         :size="size"
-        :class="avatarClass"
+        :class="[avatarClass, compact && 'border-white']"
         class="ma-0 flex-shrink-0">
         <img
           :src="userAvatarUrl"
@@ -258,6 +258,10 @@ export default {
       type: Boolean,
       default: () => true,
     },
+    compact: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   data() {
     return {
@@ -312,7 +316,7 @@ export default {
       return `${this.alignTop && 'align-start' || 'align-center'}`;
     },
     parentClass() {
-      return this.avatar && `${this.extraClass} flex-shrink-0` || this.extraClass || '';
+      return `${this.avatar && `${this.extraClass} flex-shrink-0` || this.extraClass || ''} ${this.compact && 'ml-n5'}`;
     },
     isMobile() {
       return this.$vuetify.breakpoint.name === 'xs' || this.$vuetify.breakpoint.name === 'sm';
@@ -336,6 +340,7 @@ export default {
         position: this.position,
         avatar: this.userAvatarUrl,
         external: this.isExternal,
+        allowAnimation: this.compact,
       };
     },
     componentClass() {

diff --git a/webapp/portlet/src/main/webapp/vue-apps/popover/main.js b/webapp/portlet/src/main/webapp/vue-apps/popover/main.js
@@ -23,12 +23,26 @@ Vue.directive('identity-popover', (el, binding) => {
   }
 
   el.addEventListener('mouseover', () => {
+    if (identity && identity.allowAnimation && isUser) {
+      el.classList.add('z-index-two', 'mt-n1');
+    }
     showPopover(el, identity, isUser);
   });
+  el.addEventListener('mouseleave', () => {
+    if (identity && identity.allowAnimation && isUser) {
+      el.classList.remove('z-index-two', 'mt-n1');
+    }
+  });
   el.addEventListener('focusin', () => {
+    if (identity && identity.allowAnimation && isUser) {
+      el.classList.add('z-index-two', 'mt-n1');
+    }
     showPopover(el, identity, isUser);
   });
   el.addEventListener('focusout', () => {
+    if (identity && identity.allowAnimation && isUser) {
+      el.classList.remove('z-index-two', 'mt-n1');
+    }
     document.dispatchEvent(new CustomEvent('popover-identity-hide'));
   });
 });