Merge pull request #5801 from Jarsen136/issue-5775

fix: Activity event improvements
kodadot · Apr 27, 2023 · cd50b75 · cd50b75
2 parents 6687ea6 + 90af86d
commit cd50b75
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 90 deletions.
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
@@ -5,7 +5,7 @@
         <div class="column">
           <span>{{ $t('activity.event.item') }}</span>
         </div>
-        <div class="column">
+        <div class="column is-1">
           <span>{{ $t('activity.event.event') }}</span>
         </div>
         <div class="column">

diff --git a/components/collection/activity/events/eventRow/EventRowAvatar.vue b/components/collection/activity/events/eventRow/EventRowAvatar.vue
diff --git a/components/collection/activity/events/eventRow/EventRowDesktop.vue b/components/collection/activity/events/eventRow/EventRowDesktop.vue
@@ -1,21 +1,27 @@
 <template>
   <div class="columns mb-2">
-    <div class="column">
+    <div class="column is-clipped">
       <div class="is-flex is-align-items-center">
         <nuxt-link
           :to="`/${urlPrefix}/gallery/${event.nft.id}`"
           class="height-50px">
-          <EventRowAvatar :avatar="avatar" :name="event.nft.name" />
+          <NeoAvatar
+            :avatar="avatar"
+            :placeholder="placeholder"
+            :name="event.nft.name"
+            :size="50" />
         </nuxt-link>
-        <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
-          <div class="ml-5 has-text-weight-bold is-clipped elipsis">
+        <nuxt-link
+          class="is-ellipsis is-inline-block"
+          :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+          <span class="ml-5 has-text-weight-bold is-clipped">
             {{ event.nft.name }}
-          </div>
+          </span>
         </nuxt-link>
       </div>
     </div>
 
-    <div class="column">
+    <div class="column is-1">
       <div class="height-50px is-flex is-align-items-center">
         <div
           class="border is-size-7 is-justify-content-center py-1 my-2 is-flex is-align-items-center fixed-width fixed-height"
@@ -25,7 +31,7 @@
       </div>
     </div>
 
-    <div class="column">
+    <div class="column is-ellipsis">
       <div class="height-50px is-flex is-align-items-center">
         <div v-if="amount === blank">
           {{ blank }}
@@ -84,14 +90,16 @@ import {
   getToAddress,
   interactionNameMap,
 } from './common'
-import EventRowAvatar from './EventRowAvatar.vue'
+
+import { NeoAvatar } from '@kodadot1/brick'
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
   event: InteractionWithNFT | Offer
 }>()
 
 const avatar = ref<string>()
+const { placeholder } = useTheme()
 
 const interactionName = computed(
   () => interactionNameMap[props.event.interaction] || props.event.interaction
@@ -117,14 +125,11 @@ const getAvatar = async () => {
 .fixed-width {
   width: 66px;
 }
+
 .fixed-height {
   height: 22px;
 }
 .height-50px {
   height: 50px;
 }
-
-.elipsis {
-  text-overflow: ellipsis;
-}
 </style>
diff --git a/components/collection/activity/events/eventRow/EventRowTablet.vue b/components/collection/activity/events/eventRow/EventRowTablet.vue
@@ -1,59 +1,61 @@
 <template>
-  <div class="mb-5">
-    <div class="is-flex height-50px line-height-1">
+  <div class="mb-6 is-flex is-flex-direction-column gap-10px">
+    <div class="is-flex height-70px line-height-1">
       <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
         <div class="mr-5">
-          <EventRowAvatar :avatar="avatar" :name="event.nft.name" />
+          <NeoAvatar
+            :avatar="avatar"
+            :placeholder="placeholder"
+            :name="event.nft.name"
+            :size="70" />
         </div>
       </nuxt-link>
       <div
-        class="is-flex is-flex-direction-column is-flex-grow-1 is-justify-content-space-between">
-        <div class="is-flex is-justify-content-space-between">
-          <nuxt-link :to="`/${urlPrefix}/gallery/${event.nft.id}`">
-            <div class="has-text-weight-bold is-clipped elipsis">
-              {{ event.nft.name }}
-            </div>
-          </nuxt-link>
-          <CommonTokenMoney v-if="amount !== blank" :value="amount" />
-        </div>
+        class="is-flex is-flex-direction-column is-justify-content-center gap-10px is-flex-grow-1">
+        <nuxt-link
+          class="is-ellipsis is-inline-block mobile-fixed-width"
+          :to="`/${urlPrefix}/gallery/${event.nft.id}`">
+          <span class="has-text-weight-bold">
+            {{ event.nft.name }}
+          </span>
+        </nuxt-link>
+
         <div
-          class="is-flex is-justify-content-space-between is-align-items-center">
-          <div
-            class="border is-size-7 is-justify-content-center py-1 is-flex is-align-items-center fixed-width fixed-height"
-            :class="getInteractionColor(event.interaction)">
-            {{ interactionName }}
-          </div>
-          <div>
-            {{ timeAgo(event.timestamp) }}
-          </div>
+          class="border is-size-7 is-justify-content-center is-flex is-align-items-center fixed-width fixed-height"
+          :class="getInteractionColor(event.interaction)">
+          {{ interactionName }}
         </div>
       </div>
     </div>
-    <div class="is-flex mt-4 gap">
-      <div class="is-flex is-align-items-center">
+    <div class="is-flex">
+      <div class="is-flex is-justify-content-space-between is-flex-grow-1">
+        <CommonTokenMoney v-if="amount !== blank" :value="amount" />
+        <span v-else>
+          {{ blank }}
+        </span>
+        <span>
+          {{ timeAgo(event.timestamp) }}
+        </span>
+      </div>
+    </div>
+
+    <div class="is-flex gap">
+      <div v-if="fromAddress !== blank" class="is-flex is-align-items-center">
         <span class="is-size-7 mr-3">{{ $t('activity.event.from') }}:</span>
         <nuxt-link
-          v-if="fromAddress !== blank"
           :to="`/${urlPrefix}/u/${fromAddress}`"
-          class="has-text-link">
+          class="has-text-link is-ellipsis">
           <IdentityIndex ref="identity" :address="fromAddress" show-clipboard />
         </nuxt-link>
-        <div v-else>
-          {{ blank }}
-        </div>
       </div>
 
-      <div class="is-flex is-align-items-center">
+      <div v-if="toAddress !== blank" class="is-flex is-align-items-center">
         <span class="is-size-7 mr-3">{{ $t('activity.event.to') }}:</span>
         <nuxt-link
-          v-if="toAddress !== blank"
           :to="`/${urlPrefix}/u/${toAddress}`"
-          class="has-text-link">
+          class="has-text-link is-ellipsis">
           <IdentityIndex ref="identity" :address="toAddress" show-clipboard />
         </nuxt-link>
-        <div v-else>
-          {{ blank }}
-        </div>
       </div>
     </div>
   </div>
@@ -75,15 +77,15 @@ import {
   getToAddress,
   interactionNameMap,
 } from './common'
-import EventRowAvatar from './EventRowAvatar.vue'
+import { NeoAvatar } from '@kodadot1/brick'
 
 const { urlPrefix } = usePrefix()
 const props = defineProps<{
   event: InteractionWithNFT | Offer
 }>()
 
 const avatar = ref<string>()
-
+const { placeholder } = useTheme()
 const interactionName = computed(
   () => interactionNameMap[props.event.interaction] || props.event.interaction
 )
@@ -105,19 +107,30 @@ const getAvatar = async () => {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
 .fixed-width {
   width: 66px;
 }
+.mobile-fixed-width {
+  @include mobile {
+    width: 240px;
+  }
+}
 .fixed-height {
   height: 22px;
 }
-.height-50px {
-  height: 50px;
+.height-70px {
+  height: 70px;
 }
 .line-height-1 {
   line-height: 1;
 }
 
+.gap-10px {
+  gap: 10px;
+}
+
 .gap {
   gap: 1rem;
 }

diff --git a/libs/ui/src/components/NeoAvatar/NeoAvatar.scss b/libs/ui/src/components/NeoAvatar/NeoAvatar.scss
@@ -0,0 +1,4 @@
+.neo-avatar {
+  max-width: none !important;
+  object-fit: cover;
+}
diff --git a/libs/ui/src/components/NeoAvatar/NeoAvatar.story.vue b/libs/ui/src/components/NeoAvatar/NeoAvatar.story.vue
@@ -0,0 +1,21 @@
+<template>
+  <Story title="NeoAvatar">
+    <Variant title="Nft Avatar">
+      <NeoAvatar
+        :avatar="image"
+        :placeholder="image"
+        :name="name"
+        :size="size" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import NeoAvatar from './NeoAvatar.vue'
+
+const image =
+  'https://kodadot.mypinata.cloud/ipfs/bafybeigdh3ecetqmzplrjrovs5po23vwpikh2vgtfjai4vky5qzitjzaq4'
+
+const name = 'NFT Avatar'
+const size = 70
+</script>
diff --git a/libs/ui/src/components/NeoAvatar/NeoAvatar.vue b/libs/ui/src/components/NeoAvatar/NeoAvatar.vue
@@ -0,0 +1,39 @@
+<template>
+  <img
+    v-if="avatar"
+    :src="avatar"
+    :alt="name"
+    class="border neo-avatar"
+    :style="customStyle"
+    @error="onError" />
+  <img
+    v-else
+    :src="placeholder"
+    :style="customStyle"
+    class="border neo-avatar" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  avatar?: string
+  placeholder: string
+  name: string
+  size: number
+}>()
+
+const customStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+}))
+
+const onError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  if (target) {
+    target.src = props.placeholder
+  }
+}
+</script>
+
+<style lang="scss">
+@import './NeoAvatar.scss';
+</style>
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -20,5 +20,6 @@ export { default as NeoTabItem } from './components/NeoTab/NeoTabItem'
 export { default as NeoIcon } from './components/NeoIcon/NeoIcon'
 export { default as NeoCollapse } from './components/NeoCollapse/NeoCollapse'
 export { default as NeoModal } from './components/NeoModal/NeoModal'
+export { default as NeoAvatar } from './components/NeoAvatar/NeoAvatar'
 
 export { default as Neo } from '@oruga-ui/oruga'