fix: Move Download button

components/gallery/GalleryItemButton/GalleryItemButton.vue

@@ -6,11 +6,7 @@
 
     <GalleryItemMoreActionBtn
       :nft="nft"
-      :image-url="nftMetadata?.image"
-      :image-data="imageData"
-      :mime-type="nftMimeType"
       :abi="abi"
-      data-testid="gallery-item-more-button"
     />
   </div>
 </template>
@@ -20,9 +16,8 @@ import GalleryItemMoreActionBtn from './GalleryItemMoreActionBtn.vue'
 import { extractTwitterIdFromDescription } from '@/utils/parse'
 
 const { $i18n } = useNuxtApp()
-const imageData = ref()
 
-const { getNft: nft, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType, getAbi: abi } = storeToRefs(useNftStore())
+const { getNft: nft, getAbi: abi } = storeToRefs(useNftStore())
 
 const customSharingContent = computed(() => {
   const twitterId = nft.value?.meta?.description
@@ -31,8 +26,6 @@ const customSharingContent = computed(() => {
 
   return twitterId ? $i18n.t('sharing.nftWithArtist', [twitterId]) : ''
 })
-
-onKodahashRenderCompleted(({ payload }) => imageData.value = payload.image)
 </script>
 
 <style scoped lang="scss">

components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue

@@ -20,15 +20,6 @@
           :active="active"
         />
       </template>
-
-      <NeoDropdownItem
-        v-if="isDownloadEnabled"
-        data-testid="gallery-item-more-dropdown-download"
-        @click="downloadMedia"
-      >
-        Download
-      </NeoDropdownItem>
-
       <template
         v-if="isOwner && !hasOperationsDisabled(urlPrefix)"
       >
@@ -68,15 +59,12 @@ import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { useQuery } from '@tanstack/vue-query'
 import GalleryItemEditNftButton from './GalleryItemEditNftButton.vue'
-import { downloadImage } from '@/utils/download'
-import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
-import { isMobileDevice } from '@/utils/extension'
 import { hasOperationsDisabled } from '@/utils/prefix'
 import { refreshOdaTokenMetadata } from '@/services/oda'
 import type { NFT } from '@/types'
 import type { Abi } from '@/composables/transaction/types'
 
-const { $i18n, $consola } = useNuxtApp()
+const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 const { isCurrentAccount } = useAuth()
 const { transaction, isLoading, status } = useTransaction()
@@ -87,9 +75,6 @@ const route = useRoute()
 
 const props = defineProps<{
   nft?: NFT
-  mimeType?: string
-  imageUrl?: string
-  imageData?: string
   abi?: Abi | null
 }>()
 
@@ -122,47 +107,6 @@ const signingModalTitle = computed(() => {
   )
 })
 
-const isDownloadEnabled = computed(() => {
-  const mimeType = props.mimeType
-  return ((
-    (mimeType?.includes('image') || mimeType?.includes('text/html'))
-    && props.imageUrl) || props.imageData
-  )
-})
-
-const downloadMedia = async () => {
-  let imageUrl = sanitizeIpfsUrl(props.imageUrl)
-
-  if (!imageUrl) {
-    return
-  }
-
-  if (props.imageData) {
-    const blob = await $fetch<Blob>(props.imageData)
-    imageUrl = URL.createObjectURL(blob)
-  }
-  else if (props.mimeType?.includes('image')) {
-    imageUrl = toOriginalContentUrl(imageUrl)
-  }
-
-  if (isMobileDevice) {
-    toast($i18n.t('toast.downloadOnMobile'))
-    setTimeout(() => {
-      window.open(imageUrl, '_blank')
-    }, 2000)
-    return
-  }
-
-  try {
-    toast($i18n.t('toast.downloadImage'))
-    downloadImage(imageUrl, `${props.nft?.collection?.name}_${props.nft?.name}`)
-  }
-  catch (error) {
-    $consola.warn('[ERR] unable to fetch image')
-    toast($i18n.t('toast.downloadError'))
-  }
-}
-
 const burn = () => {
   openUserCartModal('burn')
 }

components/gallery/GalleryItemToolBar.vue

@@ -1,12 +1,13 @@
 <template>
   <div
-    class="w-full xl:w-[465px] xl:ml-4 mr-4 mt-6 px-6 py-3 h-11 rounded-[43px] gap-8 flex justify-center border border-gray-400"
+    class="w-full xl:w-[465px] xl:ml-4 mr-4 mt-6 px-6 py-3 h-11 rounded-[43px] gap-4 flex justify-center border border-gray-400"
   >
     <NeoTooltip
       :label="$t('reload')"
       position="top"
     >
-      <a
+      <NeoButton
+        variant="icon"
         no-shadow
         @click="handleReloadClick"
       >
@@ -16,55 +17,78 @@
           :label="$t('reload')"
           :spin="isLoading"
         />
-      </a>
+      </NeoButton>
     </NeoTooltip>
     <NeoTooltip
       :label="$t('fullscreen')"
       position="top"
     >
-      <a
+      <NeoButton
+        variant="icon"
         no-shadow
         @click="$emit('toggle')"
       >
         <NeoIcon
           icon="arrow-up-right-and-arrow-down-left-from-center"
           size="medium"
         />
-      </a>
+      </NeoButton>
     </NeoTooltip>
     <NeoTooltip
       :label="$t('newTab')"
       position="top"
     >
-      <a
+      <NeoButton
         v-if="disableNewTab"
+        variant="icon"
         no-shadow
         @click="handleNewTab"
       >
         <NeoIcon
           icon="arrow-up-right"
           size="medium"
         />
-      </a>
+      </NeoButton>
+
       <NeoIcon
         v-else
         icon="arrow-up-right"
         size="medium"
         class="text-k-grey"
       />
     </NeoTooltip>
+    <NeoTooltip
+      v-if="isDownloadEnabled"
+      :label="$t('moreActions.download')"
+      position="top"
+    >
+      <NeoButton
+        variant="icon"
+        data-testid="gallery-item-more-dropdown-download"
+        no-shadow
+        @click="downloadMedia"
+      >
+        <NeoIcon
+          icon="arrow-down-to-line"
+          size="medium"
+        />
+      </NeoButton>
+    </NeoTooltip>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
+import { NeoIcon, NeoTooltip, NeoButton } from '@kodadot1/brick'
 
 import {
   determineElementType,
   mediaTypeElementSelectors,
   resolveMedia,
   MediaType,
 } from '@/utils/gallery/media'
+import { downloadImage } from '@/utils/download'
+import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
+import { isMobileDevice } from '@/utils/extension'
 
 type ReloadElement =
   | HTMLIFrameElement
@@ -78,9 +102,12 @@ const props = defineProps<{
   containerId: string
 }>()
 
-const { getNft: nft, getNftImage: nftImage, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
+const { getNft: nft, getNftImage: nftImage, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
 
 const isLoading = ref(false)
+const { toast } = useToast()
+const { $i18n, $consola } = useNuxtApp()
+const imageData = ref()
 
 const image = computed(() => {
   if (!nftImage.value) {
@@ -90,6 +117,49 @@ const image = computed(() => {
   return nftImage.value
 })
 
+const nftImageUrl = computed(() => nftMetadata.value?.image)
+
+const isDownloadEnabled = computed(() => {
+  const mimeType = nftMimeType.value
+  return ((
+    (mimeType?.includes('image') || mimeType?.includes('text/html'))
+    && nftImageUrl.value) || imageData.value
+  )
+})
+
+const downloadMedia = async () => {
+  let imageUrl = sanitizeIpfsUrl(nftImageUrl.value)
+
+  if (!imageUrl) {
+    return
+  }
+
+  if (imageData.value) {
+    const blob = await $fetch<Blob>(imageData.value)
+    imageUrl = URL.createObjectURL(blob)
+  }
+  else if (nftMimeType.value?.includes('image')) {
+    imageUrl = toOriginalContentUrl(imageUrl)
+  }
+
+  if (isMobileDevice) {
+    toast($i18n.t('toast.downloadOnMobile'))
+    setTimeout(() => {
+      window.open(imageUrl, '_blank')
+    }, 2000)
+    return
+  }
+
+  try {
+    toast($i18n.t('toast.downloadImage'))
+    downloadImage(imageUrl, `${nft.value?.collection?.name}_${nft.value?.name}`)
+  }
+  catch (error) {
+    $consola.warn('[ERR] unable to fetch image')
+    toast($i18n.t('toast.downloadError'))
+  }
+}
+
 const mediaAndImageType = computed(() => {
   const animationMediaType = resolveMedia(nftAnimationMimeType.value)
   const imageMediaType = resolveMedia(nftMimeType.value)
@@ -160,4 +230,6 @@ const disableNewTab = computed(() => {
 
   return nftImage.value && nftMimeType.value
 })
+
+onKodahashRenderCompleted(({ payload }) => imageData.value = payload.image)
 </script>

tests/e2e/galleryitem.spec.ts

@@ -51,9 +51,8 @@ test('Gallery item Interactions', async ({ page }) => {
     await expect(page.getByTestId('gallery-item-chart')).toBeVisible()
   })
 
-  // More Button
-  await test.step('More Button Functionality', async () => {
-    await page.getByTestId('gallery-item-more-button').click()
+  // Download Button
+  await test.step('Download Button Functionality', async () => {
     const downloadPromise = page.waitForEvent('download')
     await page.getByTestId('gallery-item-more-dropdown-download').click()
     await downloadPromise