[TAS-2734]💄 Display DRM information on product page #1989

AuroraHuang22 · 2024-12-18T00:44:44Z

notion-workspace · 2024-12-18T00:44:49Z

williamchong · 2024-12-19T09:14:55Z

src/components/NFTBook/Tooltips.vue

+      'shadow-md',
+    ]"
+  >
+    <h4 class="font-600 text-dark-gray">{{ tooltipTitle }}</h4>


Not sure if we want to use h* tag on hover tooltips

nwingt · 2024-12-27T01:59:43Z

src/components/Icon/Info.vue

+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2791_3213)">
+      <path
+        d="M7.33334 11.3333H8.66667V7.33334H7.33334V11.3333ZM8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8 13.3333C5.06 13.3333 2.66667 10.94 2.66667 8.00001C2.66667 5.06001 5.06 2.66668 8 2.66668C10.94 2.66668 13.3333 5.06001 13.3333 8.00001C13.3333 10.94 10.94 13.3333 8 13.3333ZM7.33334 6.00001H8.66667V4.66668H7.33334V6.00001Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2791_3213">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>


Try optimize the SVG with https://jakearchibald.github.io/svgomg/ and also remove width & height attribute

nwingt · 2024-12-27T02:00:46Z

src/components/NFTBook/SpecTableItemAccessMethod.vue

+    tooltipsContent() {
+      return this.isDownloadable
+        ? {
+            title: this.$t(
+              'nft_details_page_label_access_methods_tooltips_title_drm_free'
+            ),
+            text: this.$t(
+              'nft_details_page_label_access_methods_tooltips_text_drm_free'
+            ),
+          }
+        : {
+            title: this.$t(
+              'nft_details_page_label_access_methods_tooltips_title_drm'
+            ),
+            text: this.$t(
+              'nft_details_page_label_access_methods_tooltips_text_drm'
+            ),
+          };
+    },


Suggested change

tooltipsContent() {

return this.isDownloadable

? {

title: this.$t(

'nft_details_page_label_access_methods_tooltips_title_drm_free'

),

text: this.$t(

'nft_details_page_label_access_methods_tooltips_text_drm_free'

),

}

: {

title: this.$t(

'nft_details_page_label_access_methods_tooltips_title_drm'

),

text: this.$t(

'nft_details_page_label_access_methods_tooltips_text_drm'

),

};

},

tooltipContent() {

return this.isDownloadable

? {

title: this.$t(

'nft_details_page_label_access_methods_tooltip_title_drm_free'

),

text: this.$t(

'nft_details_page_label_access_methods_tooltip_text_drm_free'

),

}

: {

title: this.$t(

'nft_details_page_label_access_methods_tooltip_title_drm'

),

text: this.$t(

'nft_details_page_label_access_methods_tooltip_text_drm'

),

};

},

nwingt · 2024-12-27T02:01:04Z

src/components/NFTBook/SpecTableValue.vue

+      @mouseenter="hoverTooltips"
+    >
+      <IconInfo />
+      <NFTBookTooltips


Suggested change

<NFTBookTooltips

<NFTBookTooltip

nwingt · 2024-12-27T02:01:26Z

src/components/NFTBook/Tooltips.vue

+
+<script>
+export default {
+  name: 'NFTBookTooltips',


Suggested change

name: 'NFTBookTooltips',

name: 'NFTBookTooltip',

nwingt · 2024-12-27T02:03:39Z

src/components/NFTBook/SpecTableValue.vue

+    onclickShowTooltips() {
+      this.showTooltips = true;
+      logTrackerEvent(this, 'NFTBook', 'TooltipsClicked', '', 1);
+    },


Should also emit an event for the outermost page to log event

nwingt · 2024-12-27T02:04:01Z

src/components/NFTBook/SpecTableValue.vue

+    <div
+      v-if="tooltipText"
+      class="cursor-pointer laptop:hidden"
+      @click="onclickShowTooltips"


Suggested change

@click="onclickShowTooltips"

@click="onclickShowTooltip"

nwingt · 2024-12-27T02:04:34Z

src/components/NFTBook/SpecTableValue.vue

+    hoverTooltips() {
+      logTrackerEvent(this, 'NFTBook', 'TooltipsHover', '', 1);
+    },
+    onclickShowTooltips() {
+      this.showTooltips = true;
+      logTrackerEvent(this, 'NFTBook', 'TooltipsClicked', '', 1);


Suggested change

hoverTooltips() {

logTrackerEvent(this, 'NFTBook', 'TooltipsHover', '', 1);

},

onclickShowTooltips() {

this.showTooltips = true;

logTrackerEvent(this, 'NFTBook', 'TooltipsClicked', '', 1);

hoverTooltip() {

logTrackerEvent(this, 'NFTBook', 'TooltipHover', '', 1);

},

onclickShowTooltip() {

this.showTooltip = true;

logTrackerEvent(this, 'NFTBook', 'TooltipClicked', '', 1);

nwingt · 2024-12-27T02:04:48Z

src/components/NFTBook/SpecTableValue.vue

+    closeTooltips() {
+      this.showTooltips = false;
+    },


Suggested change

closeTooltips() {

this.showTooltips = false;

},

closeTooltip() {

this.showTooltip = false;

},

nwingt · 2024-12-27T02:05:12Z

src/locales/en.json

+  "nft_details_page_label_access_methods_tooltips_text_drm": "Refers to eBooks that have digital rights management technology, allowing readers to open and read the content on our site.",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM Content",
+  "nft_details_page_label_access_methods_tooltips_text_drm_free": "Refers to eBooks without digital rights management technology, allowing readers to freely download and transfer the eBook to different devices.",
+  "nft_details_page_label_access_methods_tooltips_title_drm_free": "DRM-Free Content",


Suggested change

"nft_details_page_label_access_methods_tooltips_text_drm": "Refers to eBooks that have digital rights management technology, allowing readers to open and read the content on our site.",

"nft_details_page_label_access_methods_tooltips_title_drm": "DRM Content",

"nft_details_page_label_access_methods_tooltips_text_drm_free": "Refers to eBooks without digital rights management technology, allowing readers to freely download and transfer the eBook to different devices.",

"nft_details_page_label_access_methods_tooltips_title_drm_free": "DRM-Free Content",

"nft_details_page_label_access_methods_tooltip_text_drm": "Refers to eBooks that have digital rights management technology, allowing readers to open and read the content on our site.",

"nft_details_page_label_access_methods_tooltips_title_drm": "DRM Content",

"nft_details_page_label_access_methods_tooltip_text_drm_free": "Refers to eBooks without digital rights management technology, allowing readers to freely download and transfer the eBook to different devices.",

"nft_details_page_label_access_methods_tooltip_title_drm_free": "DRM-Free Content",

nwingt · 2024-12-27T02:05:36Z

src/components/NFTBook/SpecTableValue.vue

+    <div
+      v-if="tooltipText"
+      class="relative z-[300] hidden group laptop:block"
+      @mouseenter="hoverTooltips"


Suggested change

@mouseenter="hoverTooltips"

@mouseenter="hoverTooltip"

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

src/components/Icon/Info.vue

+<template>
+  <svg fill="none" viewBox="0 0 16 16">
+    <g clip-path="url(#a)">
+      <path
+        fill="currentColor"
+        d="M7.333 11.333h1.334v-4H7.333v4Zm.667-10A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333Zm0 12A5.34 5.34 0 0 1 2.667 8 5.34 5.34 0 0 1 8 2.667 5.34 5.34 0 0 1 13.333 8 5.34 5.34 0 0 1 8 13.333ZM7.333 6h1.334V4.667H7.333V6Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h16v16H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>


Suggested change

<template>

<svg fill="none" viewBox="0 0 16 16">

<g clip-path="url(#a)">

<path

fill="currentColor"

d="M7.333 11.333h1.334v-4H7.333v4Zm.667-10A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333Zm0 12A5.34 5.34 0 0 1 2.667 8 5.34 5.34 0 0 1 8 2.667 5.34 5.34 0 0 1 13.333 8 5.34 5.34 0 0 1 8 13.333ZM7.333 6h1.334V4.667H7.333V6Z"

/>

</g>

<defs>

<clipPath id="a">

<path fill="#fff" d="M0 0h16v16H0z" />

</clipPath>

</defs>

</svg>

</template>

<template>

<svg xmlns="http://www.w3.org/2000/svg" fill="none">

<path

fill="currentColor"

d="M7.333 11.333h1.334v-4H7.333v4Zm.667-10A6.67 6.67 0 0 0 1.333 8 6.67 6.67 0 0 0 8 14.667 6.67 6.67 0 0 0 14.667 8 6.67 6.67 0 0 0 8 1.333Zm0 12A5.34 5.34 0 0 1 2.667 8 5.34 5.34 0 0 1 8 2.667 5.34 5.34 0 0 1 13.333 8 5.34 5.34 0 0 1 8 13.333ZM7.333 6h1.334V4.667H7.333V6Z"

/>

</svg>

</template>

♻️ Optimize info Icon

AuroraHuang22 added 3 commits December 18, 2024 08:40

💄 Add <NFTBookTooltips/> for drm info

8c65138

💄 Add <BottomDialog/> for mobile version

75778f6

💄 Implement drm info UI to <SpecTableValue/>

ae69651

AuroraHuang22 requested review from williamchong and nwingt December 18, 2024 00:44

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

🔀 Merge #1989 into deploy/rinkeby

669eca4

williamchong reviewed Dec 19, 2024

View reviewed changes

AuroraHuang22 added 3 commits December 20, 2024 10:53

💄 Fix z-index issue

14a2c43

🚸 Improve backdrop behavior

1e6d2cc

💄 Adjust minor style issues

85a0a83

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

🔀 Merge #1989 into deploy/rinkeby

243c874

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

🔀 Merge #1989 into deploy/rinkeby

69bf95b

nwingt reviewed Dec 27, 2024

View reviewed changes

AuroraHuang22 added 3 commits December 27, 2024 10:56

♻️ Optimize info icon

0e0ce20

✏️ Fix tooltip typo

bbe3410

📈 Add event logging for tooltip clicks

938ccdc

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

🔀 Merge #1989 into deploy/rinkeby

038a4d0

AuroraHuang22 requested a review from nwingt December 27, 2024 03:30

nwingt reviewed Dec 27, 2024

View reviewed changes

♻️ Optimize info Icon

2875375

AuroraHuang22 requested a review from nwingt December 30, 2024 02:57

nwingt approved these changes Dec 30, 2024

View reviewed changes

williamchong merged commit a813b96 into likecoin:develop Dec 31, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TAS-2734]💄 Display DRM information on product page #1989

[TAS-2734]💄 Display DRM information on product page #1989

AuroraHuang22 commented Dec 18, 2024

notion-workspace bot commented Dec 18, 2024

williamchong Dec 19, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

nwingt Dec 27, 2024

AuroraHuang22 Dec 30, 2024

[TAS-2734]💄 Display DRM information on product page #1989

[TAS-2734]💄 Display DRM information on product page #1989

Conversation

AuroraHuang22 commented Dec 18, 2024

notion-workspace bot commented Dec 18, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment