Merge pull request #6124 from Ocelot-Social-Community/6014-feature-webapp-join-leave-button-on-group-page-is-misleading

feat(webapp):  set different icon and text on join leave button, when member is pending

webapp/components/Button/JoinLeaveButton.vue

@@ -6,6 +6,7 @@
     :icon="icon"
     :filled="isMember && !hovered"
     :danger="isMember && hovered"
+    v-tooltip="tooltip"
     @mouseenter.native="onHover"
     @mouseleave.native="hovered = false"
     @click.prevent="toggle"
@@ -24,6 +25,7 @@ export default {
     group: { type: Object, required: true },
     userId: { type: String, required: true },
     isMember: { type: Boolean, required: true },
+    isNonePendingMember: { type: Boolean, required: true },
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
   },
@@ -35,17 +37,33 @@ export default {
   },
   computed: {
     icon() {
-      if (this.isMember && this.hovered) {
-        return 'close'
-      } else {
-        return this.isMember ? 'check' : 'plus'
+      if (this.isMember) {
+        if (this.isNonePendingMember) {
+          return this.hovered ? 'close' : 'check'
+        } else {
+          return this.hovered ? 'close' : 'question-circle'
+        }
       }
+      return 'plus'
     },
     label() {
       if (this.isMember) {
-        return this.$t('group.joinLeaveButton.iAmMember')
-      } else {
-        return this.$t('group.joinLeaveButton.join')
+        if (this.isNonePendingMember) {
+          return this.hovered
+            ? this.$t('group.joinLeaveButton.leave')
+            : this.$t('group.joinLeaveButton.iAmMember')
+        } else {
+          return this.$t('group.joinLeaveButton.pendingMember')
+        }
+      }
+      return this.$t('group.joinLeaveButton.join')
+    },
+    tooltip() {
+      return {
+        content: this.$t('group.joinLeaveButton.tooltip'),
+        placement: 'right',
+        show: this.isMember && !this.isNonePendingMember && this.hovered,
+        trigger: this.isMember && !this.isNonePendingMember ? 'hover' : 'manual',
       }
     },
   },

webapp/locales/de.json

@@ -447,7 +447,10 @@
     "in": "in",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
-      "join": "Beitreten"
+      "join": "Beitreten",
+      "leave": "Verlassen",
+      "pendingMember": "Ausstehendes Mitglied",
+      "tooltip": "Der Gruppeninhaber muss dich noch bestätigen."
     },
     "labelSlug": "Eindeutiger Gruppenname",
     "leaveModal": {
@@ -482,7 +485,7 @@
       "admin": "Administrator",
       "owner": "Inhaber",
       "pending": "Ausstehendes Mitglied",
-      "usual": "Einfaches Mitglied"
+      "usual": "Mitglied"
     },
     "save": "Neue Gruppe anlegen",
     "type": "Öffentlichkeit der Gruppe",

webapp/locales/en.json

@@ -447,7 +447,10 @@
     "in": "in",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
-      "join": "Join"
+      "join": "Join",
+      "leave": "Leave",
+      "pendingMember": "Pending member",
+      "tooltip": "The group owner has yet to confirm you."
     },
     "labelSlug": "Unique group name",
     "leaveModal": {
@@ -482,7 +485,7 @@
       "admin": "Administrator",
       "owner": "Owner",
       "pending": "Pending Member",
-      "usual": "Simple Member"
+      "usual": "Member"
     },
     "save": "Create new group",
     "type": "Visibility of the group",

webapp/locales/es.json

@@ -302,7 +302,8 @@
     "goal": null,
     "joinLeaveButton": {
       "iAmMember": null,
-      "join": null
+      "join": null,
+      "pendingMember": null
     },
     "membersCount": null,
     "membersListTitle": null

webapp/locales/fr.json

@@ -291,7 +291,8 @@
     "goal": null,
     "joinLeaveButton": {
       "iAmMember": null,
-      "join": null
+      "join": null,
+      "pendingMember": null
     },
     "membersCount": null,
     "membersListTitle": null

webapp/locales/it.json

@@ -299,7 +299,8 @@
     "goal": null,
     "joinLeaveButton": {
       "iAmMember": null,
-      "join": null
+      "join": null,
+      "pendingMember": null
     },
     "membersCount": null,
     "membersListTitle": null

webapp/locales/nl.json

@@ -87,7 +87,8 @@
     "goal": null,
     "joinLeaveButton": {
       "iAmMember": null,
-      "join": null
+      "join": null,
+      "pendingMember": null
     },
     "membersCount": null,
     "membersListTitle": null

webapp/locales/pl.json

@@ -171,7 +171,8 @@
     "goal": null,
     "joinLeaveButton": {
       "iAmMember": null,
-      "join": null
+      "join": null,
+      "pendingMember": null
     },
     "membersCount": null,
     "membersListTitle": null

webapp/locales/pt.json

@@ -337,7 +337,8 @@
     "goal": null,
     "joinLeaveButton": {
       "iAmMember": null,
-      "join": null
+      "join": null,
+      "pendingMember": null
     },
     "membersCount": null,
     "membersListTitle": null

webapp/locales/ru.json

@@ -316,7 +316,8 @@
     "goal": null,
     "joinLeaveButton": {
       "iAmMember": null,
-      "join": null
+      "join": null,
+      "pendingMember": null
     },
     "membersCount": null,
     "membersListTitle": null

webapp/pages/group/_id/_slug.vue

@@ -102,6 +102,7 @@
               :group="group || {}"
               :userId="currentUser.id"
               :isMember="isGroupMember"
+              :isNonePendingMember="isGroupMemberNonePending"
               :disabled="isGroupOwner"
               :loading="$apollo.loading"
               @prepare="prepareJoinLeave"