Merge pull request #65 from MozillaSocial/fix/discover-copy-dropdown

fix(discover): add dropdown menu to recommendation cards [MOSOWEB-72]
MozillaSocial · Oct 17, 2023 · 719183c · 719183c
2 parents 3c06afa + 5326207
commit 719183c
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/components/recommendation/RecommendationArticle.vue b/components/recommendation/RecommendationArticle.vue
@@ -18,15 +18,14 @@ function checkIntersection([{ isIntersecting }]: [{ isIntersecting: boolean }]):
 }
 
 const clipboard = useClipboard()
-async function copyLink(url: string, event: Event): void {
- event.preventDefault()
+async function copyLink(url: string): void {
  if (url)
  await clipboard.copy(url)
 }
 </script>
 
 <template>
- <NuxtLink ref="target" :to="item.url" target="_blank" external p-y-16px p-x-8px flex border="b base">
+ <NuxtLink ref="target" :to="item.url" target="_blank" external mt-5 p-x-8px flex>
  <div class="content" w-full pr>
  <h4 text-sm text-secondary>
  {{ item.publisher }}
@@ -40,13 +39,26 @@ async function copyLink(url: string, event: Event): void {
  </div>
  <div class="media" relative overflow-hidden max-w-120px min-w-120px>
  <img :src="item.image.sizes?.[0]?.url" rounded-lg overflow-hidden w-full ha>
- <div m-y-4px flex flex-justify-end>
- <button p-12px text-xl @click="copyLink(item.url, $event)">
- <div i-ri:share-line />
- </button>
- </div>
  </div>
  </NuxtLink>
+ <div flex flex-justify-end p-3 border="b base">
+ <CommonDropdown flex-none ms3 placement="bottom">
+ <button flex gap-1 items-center w-full rounded op75 text-xl hover="op100 text-purple" group aria-label="Share actions">
+ <div rounded-5 p2 elk-group-hover="bg-purple/10">
+ <div i-mi:share />
+ </div>
+ </button>
+ <template #popper>
+ <div flex="~ col">
+ <CommonDropdownItem
+ :text="$t('menu.copy_link')"
+ icon="i-ri:link"
+ @click="copyLink(item.url)"
+ />
+ </div>
+ </template>
+ </CommonDropdown>
+ </div>
 </template>
 
 <style scoped>

diff --git a/locales/de-DE.json b/locales/de-DE.json
@@ -231,6 +231,7 @@
  "add_personal_note": "Persönliche Notiz zu {0} hinzufügen",
  "block_account": "Sperre {0}",
  "block_domain": "Sperre Domain {0}",
+ "copy_link": "Link kopieren",
  "copy_link_to_post": "Link zu diesem Beitrag kopieren",
  "copy_original_link_to_post": "Link zum Originalbeitrag kopieren",
  "delete": "Löschen",

diff --git a/locales/en.json b/locales/en.json
@@ -253,6 +253,7 @@
  "add_personal_note": "Add personal note to {0}",
  "block_account": "Block {0}",
  "block_domain": "Block domain {0}",
+ "copy_link": "Copy link",
  "copy_link_to_post": "Copy link to this post",
  "copy_original_link_to_post": "Copy original link to this post",
  "delete": "Delete",

diff --git a/locales/es.json b/locales/es.json
@@ -231,6 +231,7 @@
  "add_personal_note": "Agregar una nota personal a {0}",
  "block_account": "Bloquear a {0}",
  "block_domain": "Bloquear dominio {0}",
+ "copy_link": "Copiar enlace",
  "copy_link_to_post": "Copiar enlace",
  "copy_original_link_to_post": "Copiar enlace original a esta publicación",
  "delete": "Borrar",

diff --git a/locales/fr-FR.json b/locales/fr-FR.json
@@ -232,6 +232,7 @@
  "add_personal_note": "Ajouter une note personnelle à {0}",
  "block_account": "Bloquer {0}",
  "block_domain": "Bloquer le domaine {0}",
+ "copy_link": "Copier le lien",
  "copy_link_to_post": "Copier le lien du message",
  "copy_original_link_to_post": "Copiez le lien d'origine vers ce message",
  "delete": "Supprimer",

diff --git a/locales/it-IT.json b/locales/it-IT.json
@@ -231,6 +231,7 @@
  "add_personal_note": "Aggiungi nota personale a {0}",
  "block_account": "Blocca {0}",
  "block_domain": "Blocca dominio {0}",
+ "copy_link": "Copia link",
  "copy_link_to_post": "Copia link a questo post",
  "copy_original_link_to_post": "Copia link originale a questo post",
  "delete": "Elimina",