[TAS-2441] ✨ Implement collector memo section #2002

AuroraHuang22 · 2024-12-24T12:44:14Z

default.mp4

notion-workspace · 2024-12-24T12:44:20Z

nwingt · 2024-12-27T05:18:14Z

src/components/NFTPage/CollectorMessageList/Item.vue

+        v-if="authorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          authorReplied ? 'group-hover:right-[22px]' : '',


Suggested change

authorReplied ? 'group-hover:right-[22px]' : '',

{ 'group-hover:right-[22px]': authorReplied },

🎨 Improve style formatting & props naming

nwingt · 2024-12-27T05:18:51Z

src/components/NFTPage/CollectorMessageList/Item.vue

+      ]"
+      :style="bgStyle"
+    >
+      <p class="block text-[16px] line-clamp-4">{{ buyerMessage }}</p>


Suggested change

<p class="block text-[16px] line-clamp-4">{{ buyerMessage }}</p>

<p class="block text-[16px] line-clamp-4" v-text="buyerMessage" />

🎨 Improve style formatting & props naming

nwingt · 2024-12-27T05:19:34Z

src/components/NFTPage/CollectorMessageList/Item.vue

+    buyerMessage() {
+      return this.message?.buyerMessage;
+    },
+    authorReplied() {


Suggested change

authorReplied() {

hasAuthorReplied() {

🎨 Improve style formatting & props naming

nwingt · 2024-12-27T05:24:04Z

src/pages/nft/class/_classId/index.vue

+      isHistoryInfoLoading: false,
+      isFinishedLoadingHistory: false,


Suggested change

isHistoryInfoLoading: false,

isFinishedLoadingHistory: false,

isHistoryInfoLoading: false,

hasHistoryInfoLoaded: false,

🎨 Improve style formatting & props naming

nwingt · 2024-12-27T05:26:35Z

src/util/ui.js

+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;
+  }
+  return value;
+}
+


Can reuse this instead?

liker-land/src/util/ui.js

Lines 12 to 23 in 447460d

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;

}

♻️ Reuse ellipsis functions for memo name

nwingt · 2024-12-27T05:43:31Z

the resolution of avatar images are too low in retina display, please use 2x or even 3x of the current size

nwingt · 2024-12-27T05:47:45Z

src/components/ScrollingList.vue

+    durationTime() {
+      return this.animationDuration;
+    },


maybe add unit here?

🎨 Adjust animationDuration props type

nwingt · 2024-12-27T05:51:14Z

src/components/ScrollingList.vue

+  .animate-scroll {
+    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);
+  }


Suggested change

.animate-scroll {

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);

}

.animate-scroll,

.animate-scroll.delay {

animation: scroll var(--animation-duration, 60s) infinite linear;

}

.animate-scroll.delay {

animation-delay: calc(var(--animation-duration, 60s) * -1);

}

💄 Simplify css style

nwingt · 2024-12-27T05:56:23Z

src/components/ScrollingList.vue

+  props: {
+    animationDuration: {
+      type: String,
+      default: '60s',


Should we add unit here or just number?

🎨 Adjust animationDuration props type

nwingt · 2025-01-09T09:08:07Z

src/components/NFTPage/CollectorMessageList/Identity.vue

+      <p class="text-like-green hover:underline" align="center">
+        {{ formattedUserDisplayNameFull }}
+      </p>


align="center" should not have effect in <p/>

Suggested change

<p class="text-like-green hover:underline" align="center">

{{ formattedUserDisplayNameFull }}

</p>

<p

class="text-like-green text-center hover:underline"

v-text="formattedUserDisplayNameFull"

/>

♻️ Simplify code and enhance formatting

nwingt · 2025-01-09T09:10:16Z

src/components/NFTPage/CollectorMessageList/Item.vue

+      <svg
+        v-if="hasAuthorReplied"
+        :class="[
+          'absolute bottom-0 right-[6px]',
+          { 'group-hover:right-[22px]': hasAuthorReplied },
+        ]"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="10" cy="10" r="9.5" fill="#F7F7F7" stroke="#E1E1E1" />
+        <g opacity="0.5" clip-path="url(#clip0_2298_5781)">
+          <path
+            d="M5.2658 8.70773L8.70338 5.73928C9.00428 5.47941 9.47851 5.69037 9.47851 6.09404V7.65758C12.6158 7.69349 15.1035 8.32226 15.1035 11.2954C15.1035 12.4954 14.3304 13.6843 13.4759 14.3058C13.2093 14.4998 12.8292 14.2563 12.9275 13.9419C13.8132 11.1097 12.5075 10.3578 9.47851 10.3142V12.0312C9.47851 12.4355 9.0039 12.6456 8.70338 12.386L5.2658 9.41726C5.04957 9.23051 5.04927 8.89474 5.2658 8.70773Z"
+            fill="#9B9B9B"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2298_5781">
+            <rect
+              width="10"
+              height="10"
+              fill="white"
+              transform="translate(5.10352 5)"
+            />
+          </clipPath>
+        </defs>
+      </svg>


I think this SVG can be simplified, try union the paths or make a compound path

I wont recommend to use <clipPath/> unless it is necessary as id is problematic

♻️ Simplify code and enhance formatting

nwingt · 2025-01-09T09:13:14Z

src/pages/nft/class/_classId/index.vue

+            <div v-else>
+              <div
+                class="flex items-center justify-between mb-[24px] px-[16px] laptop:px-0 sm:px-[32px]"
+              >
+                <h3
+                  class="text-[28px] font-600 text-center text-like-green"
+                  v-text="$t('nft_collector_message_label')"
+                />
+                <ButtonV2
+                  preset="tertiary"
+                  size="mini"
+                  :text="$t('nft_collector_message_view_all')"
+                  @click="handleClickMoreCollectorMessage"
+                />
+              </div>
+              <NFTPageCollectorMessageList
+                class="transform -translate-x-1/2 w-[100vw] left-1/2"
+                :class-id="classId"
+                :creator-avatar="creatorAvatar"
+                :messages="filterCollectorsWithReplies"
+                :scroll-speed="7.5"
+              />
+              <div
+                :class="[
+                  'relative',
+                  'flex',
+                  'justify-between',
+                  'h-[180px] laptop:h-[204px]',
+                  'z-50',
+                  '-mx-[12px] laptop:-mx-[24px] desktop:-mx-[calc((100vw-962px)/2)]',
+                  '-mt-[180px] laptop:-mt-[204px]',
+                  'pointer-events-none',
+                ]"
+              >
+                <div :class="[overlayClasses, 'bg-gradient-to-r']" />
+                <div :class="[overlayClasses, 'bg-gradient-to-l']" />
+              </div>
+            </div>


Can use <template/> here, no need for extra div

Suggested change

<div v-else>

<div

class="flex items-center justify-between mb-[24px] px-[16px] laptop:px-0 sm:px-[32px]"

>

<h3

class="text-[28px] font-600 text-center text-like-green"

v-text="$t('nft_collector_message_label')"

/>

<ButtonV2

preset="tertiary"

size="mini"

:text="$t('nft_collector_message_view_all')"

@click="handleClickMoreCollectorMessage"

/>

</div>

<NFTPageCollectorMessageList

class="transform -translate-x-1/2 w-[100vw] left-1/2"

:class-id="classId"

:creator-avatar="creatorAvatar"

:messages="filterCollectorsWithReplies"

:scroll-speed="7.5"

/>

<div

:class="[

'relative',

'flex',

'justify-between',

'h-[180px] laptop:h-[204px]',

'z-50',

'-mx-[12px] laptop:-mx-[24px] desktop:-mx-[calc((100vw-962px)/2)]',

'-mt-[180px] laptop:-mt-[204px]',

'pointer-events-none',

]"

>

<div :class="[overlayClasses, 'bg-gradient-to-r']" />

<div :class="[overlayClasses, 'bg-gradient-to-l']" />

</div>

</div>

<template v-else>

<div

class="flex items-center justify-between mb-[24px] px-[16px] laptop:px-0 sm:px-[32px]"

>

<h3

class="text-[28px] font-600 text-center text-like-green"

v-text="$t('nft_collector_message_label')"

/>

<ButtonV2

preset="tertiary"

size="mini"

:text="$t('nft_collector_message_view_all')"

@click="handleClickMoreCollectorMessage"

/>

</div>

<NFTPageCollectorMessageList

class="transform -translate-x-1/2 w-[100vw] left-1/2"

:class-id="classId"

:creator-avatar="creatorAvatar"

:messages="filterCollectorsWithReplies"

:scroll-speed="7.5"

/>

<div

:class="[

'relative',

'flex',

'justify-between',

'h-[180px] laptop:h-[204px]',

'z-50',

'-mx-[12px] laptop:-mx-[24px] desktop:-mx-[calc((100vw-962px)/2)]',

'-mt-[180px] laptop:-mt-[204px]',

'pointer-events-none',

]"

>

<div :class="[overlayClasses, 'bg-gradient-to-r']" />

<div :class="[overlayClasses, 'bg-gradient-to-l']" />

</div>

</template>

♻️ Simplify code and enhance formatting

williamchong · 2025-01-10T04:20:52Z

src/pages/nft/class/_classId/index.vue

+          if (!a.buyerMessage && b.buyerMessage) {
+            return 1;
+          }
+          return b.authorReply - a.authorReply;


Is authorReply a string? What is the expected sorting here?

williamchong · 2025-01-10T04:25:01Z

src/components/NFTPage/CollectorMessageList/index.vue

+  computed: {
+    displayMessages() {
+      if (this.messages.length < 3) return [];
+      let loopedMessages = [...this.messages];


Seems we don't changes this array, we don't need to clone it in that case

AuroraHuang22 added 7 commits December 23, 2024 20:08

✨ Add <ScrollingList /> for buyer message animation

a386b79

💄Init collectorMessageList UI on class page

8bef8cd

💄 Add <CollectorListDialog/>

5053719

🎨 Add props for min/max messages and multiplier

40e7350

💄 Add item card & hover effect

8c4db42

💄 Add overlay ui to list

e8317ef

📱Update item ui for mobile version

a5eaed8

AuroraHuang22 added a commit that referenced this pull request Dec 24, 2024

🔀 Merge #2002 into deploy/rinkeby

533ac6f

♻️ Optimize item background SVG

52456ef

nwingt reviewed Dec 27, 2024

View reviewed changes

AuroraHuang22 added 4 commits December 30, 2024 11:39

🎨 Improve style formatting & props naming

20146d6

♻️ Reuse ellipsis functions for memo name

55d7476

🎨 Adjust animationDuration props type

de12062

💄 Simplify css style

d3273c8

AuroraHuang22 marked this pull request as ready for review December 30, 2024 05:25

AuroraHuang22 requested review from williamchong and nwingt December 30, 2024 05:26

AuroraHuang22 added a commit that referenced this pull request Dec 30, 2024

🔀 Merge #2002 into deploy/rinkeby

fcd314f

AuroraHuang22 added 4 commits January 8, 2025 23:04

🎨 Update animation speed rate

09e61d5

💄 Update Identity spacing

471caaa

💄 Add defaultOpen prop to CollapsibleCard

99de825

🚸 Add friction for smooth scrolling behavior

4686c82

AuroraHuang22 added a commit that referenced this pull request Jan 8, 2025

🔀 Merge #2002 into deploy/rinkeby

f457098

AuroraHuang22 added a commit that referenced this pull request Jan 8, 2025

🔀 Merge #2002 into deploy/rinkeby

63fc840

💄 Use default scroll event for mobile

abad359

AuroraHuang22 force-pushed the feature/memo-section branch from 54857c8 to abad359 Compare January 9, 2025 01:41

AuroraHuang22 added a commit that referenced this pull request Jan 9, 2025

🔀 Merge #2002 into deploy/rinkeby

dd150c3

nwingt reviewed Jan 9, 2025

View reviewed changes

💄 Add padding for list in mobile version

ed4d5f3

AuroraHuang22 added a commit that referenced this pull request Jan 9, 2025

🔀 Merge #2002 into deploy/rinkeby

2159b1a

♻️ Simplify code and enhance formatting

1da56ca

AuroraHuang22 added a commit that referenced this pull request Jan 9, 2025

🔀 Merge #2002 into deploy/rinkeby

a5bdc21

AuroraHuang22 requested a review from nwingt January 9, 2025 09:50

nwingt approved these changes Jan 9, 2025

View reviewed changes

williamchong requested changes Jan 10, 2025

View reviewed changes

🔥 Remove unused code & logic

718e4ec

williamchong merged commit 7f87ac7 into likecoin:develop Jan 10, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TAS-2441] ✨ Implement collector memo section #2002

[TAS-2441] ✨ Implement collector memo section #2002

AuroraHuang22 commented Dec 24, 2024

notion-workspace bot commented Dec 24, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

nwingt commented Dec 27, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024 •

edited

Loading

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

nwingt Jan 9, 2025

AuroraHuang22 Jan 9, 2025

nwingt Jan 9, 2025

AuroraHuang22 Jan 9, 2025

nwingt Jan 9, 2025

AuroraHuang22 Jan 9, 2025

williamchong Jan 10, 2025

williamchong Jan 10, 2025

	authorReplied ? 'group-hover:right-[22px]' : '',
	{ 'group-hover:right-[22px]': authorReplied },

	<p class="block text-[16px] line-clamp-4">{{ buyerMessage }}</p>
	<p class="block text-[16px] line-clamp-4" v-text="buyerMessage" />

		isHistoryInfoLoading: false,
		isFinishedLoadingHistory: false,

	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;
	}

[TAS-2441] ✨ Implement collector memo section #2002

[TAS-2441] ✨ Implement collector memo section #2002

Conversation

AuroraHuang22 commented Dec 24, 2024

notion-workspace bot commented Dec 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nwingt commented Dec 27, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AuroraHuang22 Dec 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AuroraHuang22 Dec 30, 2024 •

edited

Loading