feat: Add CTAs below the post CTA - MEED-2072 - Meeds-io/MIPs#54 (#339)

This fix will change the display of the send kudos action used in the composer.
Meeds-io · Sep 28, 2023 · 07598dc · 07598dc
1 parent 699b7ef
commit 07598dc
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 17 deletions.
diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_en.properties b/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
@@ -5,6 +5,7 @@ NewKudosSentActivityComment.activity_kudos=<i class="uiIcon fa fa-award uiIconKu
 NewKudosSentActivityComment.activity_kudos_content={3} Kudos to {1} {2}
 NewKudosSentActivityComment.activity_kudos_title=Kudos to {0}
 
+kudos.title=Kudos
 exoplatform.kudos.title.sendAKudos=Send a Kudos
 exoplatform.kudos.content.to=To:
 exoplatform.kudos.choose.audience=Choose an audience:

diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties b/kudos-services/src/main/resources/locale/addon/Kudos_fr.properties
@@ -5,6 +5,7 @@ NewKudosSentActivityComment.activity_kudos=<i class="uiIcon fa fa-award uiIconKu
 NewKudosSentActivityComment.activity_kudos_content={3} Kudos \u00E0 {1} {2}
 NewKudosSentActivityComment.activity_kudos_title=Kudos \u00E0 {0}
 
+kudos.title=Kudos
 exoplatform.kudos.title.sendAKudos=Envoyer un kudos
 exoplatform.kudos.content.to=\u00C0 :
 exoplatform.kudos.choose.audience=Choisir l'audience :

diff --git a/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js b/kudos-webapps/src/main/webapp/vue-app/js/Kudos.js
@@ -225,6 +225,11 @@ export function registerComposerExtension() {
     vueComponent: Vue.options.components['send-kudos-composer'],
     rank: 1,
   });
+  extensionRegistry.registerComponent('ActivityToolbarAction', 'activity-toolbar-action', {
+    id: 'sendKudosToolbarButton',
+    vueComponent: Vue.options.components['send-kudos-toolbar-action'],
+    rank: 10,
+  });
 }
 
 export function registerFavoriteExtensions(title) {

diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue b/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosComposer.vue
@@ -1,29 +1,24 @@
 <template>
-  <v-card 
-    class="d-flex flex-row" 
-    outlined 
-    flat 
-    hover
-    @click="openSendKudosDrawer" >
-    <v-card-actions class="ms-4 py-3">
-      <v-icon
-        color="primary"
-        size="50">
-        fa-award
-      </v-icon>
-    </v-card-actions>
-    <v-card-title class="caption font-weight-bold">
+  <div
+    class="d-flex flex-row align-center" 
+    @click="openSendKudosDrawer">
+    <v-icon
+      color="primary"
+      size="50">
+      fa-award
+    </v-icon>
+    <v-span class="caption font-weight-bold ms-5">
       {{ $t('exoplatform.kudos.title.sendAKudos') }}
-    </v-card-title>
-  </v-card>
+    </v-span>
+  </div>
 </template>
 <script>
 export default {
   methods: {
     openSendKudosDrawer() {
       document.dispatchEvent(new CustomEvent('activity-composer-closed'));
       document.dispatchEvent(new CustomEvent('exo-kudos-open-send-modal', {detail: {
-        id: eXo.env.portal.spaceId,
+        id: eXo.env.portal.userIdentityId,
         type: 'USER_PROFILE',
         parentId: '',
         owner: eXo.env.portal.userName,

diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosToolbarAction.vue b/kudos-webapps/src/main/webapp/vue-app/kudos/components/SendKudosToolbarAction.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-btn
+    :ripple="false"
+    class="d-flex flex-row align-center py-2"
+    text
+    @click="openSendKudosDrawer">
+    <v-icon
+      color="primary"
+      size="27">
+      fa-award
+    </v-icon>
+    <v-span class="body-2 font-weight-bold ms-5  mt-1 dark-grey-color">
+      {{ $t('kudos.title') }}
+    </v-span>
+  </v-btn>
+</template>
+<script>
+export default {
+  methods: {
+    openSendKudosDrawer() {
+      document.dispatchEvent(new CustomEvent('exo-kudos-open-send-modal', {detail: {
+        id: eXo.env.portal.userIdentityId,
+        type: 'USER_PROFILE',
+        parentId: '',
+        owner: eXo.env.portal.userName,
+        spaceURL: eXo.env.portal.spaceUrl,
+        readOnlySpace: true
+      }}));
+    },
+  },
+};
+</script> 
diff --git a/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js b/kudos-webapps/src/main/webapp/vue-app/kudos/initComponents.js
@@ -3,6 +3,7 @@ import KudosAPI from './components/KudosAPI.vue';
 import KudosApp from './components/KudosApp.vue';
 import KudosButton from '../kudos/components/KudosButton.vue';
 import SendKudosComposer from '../kudos/components/SendKudosComposer.vue';
+import SendKudosToolbarAction from '../kudos/components/SendKudosToolbarAction.vue';
 import PopoverKudosButton from '../kudos/components/PopoverKudosButton.vue';
 import ActivityKudosReactionItem from './components/ActivityKudosReactionItem.vue';
 import ActivityKudosReactionList from './components/ActivityKudosReactionList.vue';
@@ -28,6 +29,7 @@ const components = {
   'kudos-overview': KudosOverview,
   'kudos-overview-card': KudosOverviewCard,
   'send-kudos-composer': SendKudosComposer,
+  'send-kudos-toolbar-action': SendKudosToolbarAction,
 };
 
 for (const key in components) {