🔀 Merge #2002 into deploy/rinkeby

likecoin · Dec 30, 2024 · fcd314f · fcd314f
2 parents 76c8a35 + d3273c8
commit fcd314f
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 63 deletions.
diff --git a/src/assets/images/nft/books/collector-message-item-background-lg.svg b/src/assets/images/nft/books/collector-message-item-background-lg.svg
diff --git a/src/assets/images/nft/books/collector-message-item-background.svg b/src/assets/images/nft/books/collector-message-item-background.svg
diff --git a/src/components/NFTPage/CollectorMessageList/Identity.vue b/src/components/NFTPage/CollectorMessageList/Identity.vue
@@ -31,7 +31,7 @@
     />
     <div>
       <p class="text-like-green hover:underline" align="center">
-        {{ userDisplayNameFull | ellipsisCollectorAddress }}
+        {{ formattedUserDisplayNameFull }}
       </p>
     </div>
   </component>
@@ -41,15 +41,12 @@
 import { mapActions } from 'vuex';
 
 import { createUserInfoMixin } from '~/mixins/user-info';
-import { ellipsisCollectorAddress } from '~/util/ui';
+import { ellipsis } from '~/util/ui';
 
 const userInfoMixin = createUserInfoMixin({ walletKey: 'walletAddress' });
 
 export default {
   name: 'NFTPageCollectorMessageListIdentity',
-  filters: {
-    ellipsisCollectorAddress,
-  },
   mixins: [userInfoMixin],
   props: {
     walletAddress: {
@@ -85,6 +82,9 @@ export default {
         query: { tab: this.isCreatedTab ? 'created' : 'collected' },
       });
     },
+    formattedUserDisplayNameFull() {
+      return ellipsis(this.userDisplayNameFull, 13, 0);
+    },
   },
   watch: {
     walletAddress() {

diff --git a/src/components/NFTPage/CollectorMessageList/Item.vue b/src/components/NFTPage/CollectorMessageList/Item.vue
@@ -22,7 +22,7 @@
       ]"
       :style="bgStyle"
     >
-      <p class="block text-[16px] line-clamp-4">{{ buyerMessage }}</p>
+      <p class="block text-[16px] line-clamp-4" v-text="buyerMessage" />
       <NFTPageCollectorMessageListIdentity
         :is-show-type-label="false"
         :wallet-address="message.id"
@@ -31,12 +31,12 @@
       />
 
       <Identity
-        v-if="authorReplied"
+        v-if="hasAuthorReplied"
         :class="[
           'absolute bottom-0 right-[6px]',
           '!hidden',
           'transition-all duration-100',
-          authorReplied
+          hasAuthorReplied
             ? 'group-hover:!block group-hover:right-[8px]'
             : 'hidden',
         ]"
@@ -45,10 +45,10 @@
       />
 
       <svg
-        v-if="authorReplied"
+        v-if="hasAuthorReplied"
         :class="[
           'absolute bottom-0 right-[6px]',
-          authorReplied ? 'group-hover:right-[22px]' : '',
+          { 'group-hover:right-[22px]': hasAuthorReplied },
         ]"
         width="20"
         height="20"
@@ -99,7 +99,7 @@ export default {
     buyerMessage() {
       return this.message?.buyerMessage;
     },
-    authorReplied() {
+    hasAuthorReplied() {
       return this.message?.authorReply;
     },
     messagesPageLink() {

diff --git a/src/components/NFTPage/CollectorMessageList/index.vue b/src/components/NFTPage/CollectorMessageList/index.vue
@@ -61,7 +61,7 @@ export default {
       return loopedMessages;
     },
     durationTime() {
-      return `${this.messages.length * this.durationMultiplier}s`;
+      return `${this.messages.length * this.durationMultiplier}`;
     },
   },
   mounted() {

diff --git a/src/components/ScrollingList.vue b/src/components/ScrollingList.vue
@@ -34,8 +34,8 @@ export default {
   name: 'ScrollingList',
   props: {
     animationDuration: {
-      type: String,
-      default: '60s',
+      type: [String, Number],
+      default: '60',
     },
   },
   data() {
@@ -47,7 +47,7 @@ export default {
   },
   computed: {
     durationTime() {
-      return this.animationDuration;
+      return `${this.animationDuration}s`;
     },
   },
   methods: {
@@ -74,12 +74,11 @@ export default {
 
 <style scoped>
 @screen laptop {
-  .animate-scroll {
+  .animate-scroll,
+  .animate-scroll.delay {
     animation: scroll var(--animation-duration, 60s) infinite linear;
   }
-
   .animate-scroll.delay {
-    animation: scroll var(--animation-duration, 60s) infinite linear;
     animation-delay: calc(var(--animation-duration, 60s) * -1);
   }
 }

diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -528,7 +528,7 @@ export default {
       isOpeningCheckoutPage: false,
 
       isHistoryInfoLoading: false,
-      isFinishedLoadingHistory: false,
+      hasHistoryInfoLoaded: false,
       isOpeningCollectorListDialog: false,
     };
   },
@@ -1222,7 +1222,7 @@ export default {
         this.updateNFTHistory({ getAllUserInfo: false }),
       ]);
       this.isHistoryInfoLoading = false;
-      this.isFinishedLoadingHistory = true;
+      this.hasHistoryInfoLoaded = true;
     },
     getPurchaseEventParams(edition) {
       const customPriceInDecimal = this.customPrice

diff --git a/src/util/ui.js b/src/util/ui.js
@@ -9,29 +9,15 @@ const largeNumFormatter = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 2,
 });
 
-export function ellipsis(value) {
-  if (value) {
-    const len = value.length;
-    const dots = '...';
-    if (!value) return '';
-    if (value.length > 20) {
-      return value.substring(0, 8) + dots + value.substring(len - 6, len);
-    }
-    return value;
-  }
-  return value;
-}
+export function ellipsis(value, maxLength = 20, endLength = 6) {
+  if (!value) return '';
+  const len = value.length;
+  const dots = '...';
 
-export function ellipsisCollectorAddress(value) {
-  if (value) {
-    const len = value.length;
-    const dots = '...';
-    if (!value) return '';
-    if (value.length > 10) {
-      return value.substring(0, 8) + dots;
-    }
-    return value;
+  if (len > maxLength) {
+    return value.substring(0, 8) + dots + value.substring(len - endLength, len);
   }
+
   return value;
 }