feat: Review Invitation gadget UI when tablet - MEED-3376 - Meeds-io/…

…MIPs#113 (#3539) This PR allows to review the UI of the people overview gadget when mobile and tablet. (cherry picked from commit 0a376a0)
Meeds-io · Feb 28, 2024 · e3867d0 · e3867d0
1 parent 435b2cb
commit e3867d0
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 63 deletions.
diff --git a/webapp/portlet/src/main/resources/locale/portlet/Portlets_en.properties b/webapp/portlet/src/main/resources/locale/portlet/Portlets_en.properties
@@ -588,6 +588,7 @@ activity.singleComment=1 comment
 activity.noComments=No comment yet
 activity.window.title=Activity: {0}
 activity.label=activity
+activity.reactions.seeMore=See more
 
 #####################################################################################
 #                                    Textarea                                       #

diff --git a/webapp/portlet/src/main/resources/locale/portlet/social/PeopleOverview_en.properties b/webapp/portlet/src/main/resources/locale/portlet/social/PeopleOverview_en.properties
@@ -1,5 +1,9 @@
+peopleOverview.label.title=People Connections
 peopleOverview.label.invitations=Invitations
 peopleOverview.label.pending=Sent Requests
 peopleOverview.label.noResults=Nobody found.
 peopleOverview.label.showMore=Show more
 peopleOverview.connectionsInCommon={0} connections in common
+peopleOverview.label.network=Create your network
+peopleOverview.label.connect=Connect with others
+
diff --git a/webapp/portlet/src/main/resources/locale/portlet/social/PeopleOverview_ms.properties b/webapp/portlet/src/main/resources/locale/portlet/social/PeopleOverview_ms.properties
@@ -1,5 +1,5 @@
 peopleOverview.label.invitations=Invitations
-peopleOverview.label.pending=Sent Requests
+peopleOverview.label.pending=Requests
 peopleOverview.label.noResults=Nobody found.
 peopleOverview.label.showMore=Show more
 peopleOverview.connectionsInCommon={0} connections in common
diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less
@@ -139,21 +139,11 @@
           z-index: 1;
         }
         .seeMoreLikersDetails {
-          position: absolute;
           top: 0;
           left: 0;
           right: 0;
-          text-align: center;
           width: 30px;
           height: 30px;
-          color: white;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          font-size: 15px;
-          font-weight: bold;
-          z-index: 1;
         }
       }
     }

diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/PeopleOverview/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/PeopleOverview/Style.less
@@ -22,27 +22,6 @@
 @import "../../mixins.less";
 
 #PeopleOverview {
-  .peopleOverviewCard {
-    max-height: 114px;
-    min-height: 114px;
-    height: 114px;
-    max-width: ~"calc(50% - 5px)";
-    width: ~"calc(50% - 5px)";
-  }
-
-  .peopleOverviewCount {
-    font-size: 24px;
-    font-weight: bold;
-    width: 50px;
-    max-height: 30px;
-    margin: 10px auto;
-  }
-
-  .peopleOverviewTitle {
-    font-size: 16px;
-    min-width: 100px;
-  }
-
   .externalTagClass {
     color: @baseColorLight;
     font-weight: normal;

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
@@ -7,24 +7,36 @@
           :key="liker.id"
           :identity="liker"
           :size="30"
+          :allow-animation="likersToDisplay.length > 1"
           :class="[index === 0 && 'pl-4']"
           popover
           avatar
           compact
-          extra-class="me-1 transition-2s"/>
+          extra-class="me-1 transition-2s" />
       </div>
     </div>
     <div class="activityLikersAndKudosDrawer d-none d-lg-inline ml-n5">
-      <div class="seeMoreReactionsContainer">
-        <div
-          v-if="seeMoreLikerToDisplay"
-          :class="displayAnimation && 'mt-n2 transition-2s'"
-          class="seeMoreLikers border-white"
-          @click="openDrawer"
-          @mouseover="showAvatarAnimation = true"
-          @mouseleave="showAvatarAnimation = false">
-          <span class="seeMoreLikersDetails">+{{ showMoreLikersNumber }}</span>
-        </div>
+      <div v-if="seeMoreLikerToDisplay" class="seeMoreReactionsContainer">
+        <v-tooltip bottom>
+          <template #activator="{ on, attrs }">
+            <div
+                v-bind="attrs"
+                v-on="on"
+                :class="displayAnimation && 'mt-n2 transition-2s'"
+                class="seeMoreLikers border-white d-flex align-center justify-center clickable"
+                @click="openDrawer"
+                @mouseover="showAvatarAnimation = true"
+                @mouseleave="showAvatarAnimation = false">
+          <span
+              class="position-absolute subtitle-2 white--text font-weight-bold z-index-one text-center">
+            +{{ showMoreLikersNumber }}
+          </span>
+            </div>
+          </template>
+          <span>
+            {{ $t('activity.reactions.seeMore') }}
+          </span>
+        </v-tooltip>
       </div>
     </div>
     <activity-reactions-mobile

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
@@ -262,6 +262,10 @@ export default {
       type: Boolean,
       default: () => false,
     },
+    allowAnimation: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   data() {
     return {
@@ -340,7 +344,7 @@ export default {
         position: this.position,
         avatar: this.userAvatarUrl,
         external: this.isExternal,
-        allowAnimation: this.compact,
+        allowAnimation: this.compact && this.allowAnimation,
       };
     },
     componentClass() {

diff --git a/webapp/portlet/src/main/webapp/vue-apps/people-overview/components/PeopleOverview.vue b/webapp/portlet/src/main/webapp/vue-apps/people-overview/components/PeopleOverview.vue
@@ -1,20 +1,30 @@
 <template>
   <v-app>
-    <widget-wrapper>
-      <v-card class="border-box-sizing d-flex flex-row justify-center ma-0" flat>
-        <people-overview-card
-          id="peopleInvitationsOverview"
-          :title="$t('peopleOverview.label.invitations')"
-          :count="invitations"
-          :class="invitations === '-' && 'text-sub-title'"
-          @click="$refs.peopleDrawer.open('invitations', $t('peopleOverview.label.invitations'))" />
-        <v-divider class="peopleOverviewVertivalSeparator ma-auto" vertical />
-        <people-overview-card
-          id="peoplePendingOverview"
-          :title="$t('peopleOverview.label.pending')"
-          :count="pending"
-          :class="pending === '-' && 'text-sub-title'"
-          @click="$refs.peopleDrawer.open('pending', $t('peopleOverview.label.pending'))" />
+    <widget-wrapper :title="$t('peopleOverview.label.title')">
+      <v-card flat>
+        <div class="d-flex flex-row justify-space-around" v-if="invitations > 0 || pending > 0">
+          <people-overview-card
+              id="peopleInvitationsOverview"
+              :title="$t('peopleOverview.label.invitations')"
+              :count="invitations"
+              icon="fas fa-user-plus"
+              :class="invitations === '-' && 'text-sub-title'"
+              @click="$refs.peopleDrawer.open('invitations', $t('peopleOverview.label.invitations'))" />
+          <people-overview-card
+              id="peoplePendingOverview"
+              :title="$t('peopleOverview.label.pending')"
+              :count="pending"
+              icon="fas fa-user-clock"
+              :class="pending === '-' && 'text-sub-title'"
+              @click="$refs.peopleDrawer.open('pending', $t('peopleOverview.label.pending'))" />
+        </div>
+        <div v-else class="d-flex align-center justify-center">
+          <v-icon size="24" class="tertiary--text me-2">fas fa-user-plus</v-icon>
+          <div class="d-flex flex-column">
+            <span class="subtitle-1 text-color text-left">{{ $t('peopleOverview.label.network') }}</span>
+            <span class="subtitle-1 text-color text-left">{{ $t('peopleOverview.label.connect') }}</span>
+          </div>
+        </div>
       </v-card>
     </widget-wrapper>
     <people-overview-drawer ref="peopleDrawer" @refresh="refresh()" />
@@ -26,7 +36,7 @@ export default {
   data: () => ({
     invitations: '-',
     pending: '-',
-    initialized: false,
+    initialized: false
   }),
   watch: {
     initialized(newVal, oldVal) {

diff --git a/webapp/portlet/src/main/webapp/vue-apps/people-overview/components/PeopleOverviewCard.vue b/webapp/portlet/src/main/webapp/vue-apps/people-overview/components/PeopleOverviewCard.vue
@@ -5,10 +5,11 @@
     @click="count && $emit('click')">
     <div class="ma-auto">
       <div
-        class="peopleOverviewCount text-center pb-1">
-        {{ count }}
+        class="peopleOverviewCount d-flex align-center justify-center">
+        <v-icon size="22" class="tertiary--text me-2">{{ icon }}</v-icon>
+        <span class="text-h5 font-weight-bold text-color">{{ count }}</span>
       </div>
-      <div class="peopleOverviewTitle text-center text-truncate pt-1">
+      <div class="peopleOverviewTitle text-center text-truncate subtitle-1 pt-3 text-color">
         {{ title }}
       </div>
     </div>
@@ -30,6 +31,10 @@ export default {
       type: Number,
       default: () => 0,
     },
+    icon: {
+      type: String,
+      default: () => ''
+    }
   },
   computed: {
     clickable() {