From 4675a77d1777d4fd625aeff5ef74d45a58c92200 Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Tue, 7 Mar 2023 18:23:05 -0500 Subject: [PATCH 01/25] feat: tooltip --- packages/fe/assets/scss/variables.scss | 3 + packages/fe/components/cid-card.vue | 13 +- packages/fe/components/cid-table.vue | 9 ++ packages/fe/components/icons/terminal.vue | 18 +++ packages/fe/components/tooltip.vue | 86 ++++++++++++ packages/fe/store/dataset.js | 158 +++++++++++----------- 6 files changed, 206 insertions(+), 81 deletions(-) create mode 100644 packages/fe/components/icons/terminal.vue create mode 100644 packages/fe/components/tooltip.vue diff --git a/packages/fe/assets/scss/variables.scss b/packages/fe/assets/scss/variables.scss index da3dae79..cda7db26 100644 --- a/packages/fe/assets/scss/variables.scss +++ b/packages/fe/assets/scss/variables.scss @@ -28,6 +28,9 @@ $athensGray: #E7E9ED; $capeCod: #3C4748; $grayNurse2: #E0E7E0; $dodgerBlue: #3DA2FF; +$blue: #001AFF; +$neptune: #74C3B5; + // ----------------------------------------------------------------- Breakpoints $breakpoint_Tiny: 25.9375rem; // 415px diff --git a/packages/fe/components/cid-card.vue b/packages/fe/components/cid-card.vue index e1585a01..c6be97ee 100644 --- a/packages/fe/components/cid-card.vue +++ b/packages/fe/components/cid-card.vue @@ -93,6 +93,13 @@ @click="toggleBottomPanel"> {{ open ? 'Less' : 'More' }} + + + + +
@@ -202,6 +209,7 @@ import Accordion from '@/components/accordion/accordion' import AccordionSection from '@/components/accordion/accordion-section' import AccordionHeader from '@/components/accordion/accordion-header' import AccordionContent from '@/components/accordion/accordion-content' +import Tooltip from '@/components/tooltip' // ====================================================================== Export export default { @@ -212,6 +220,7 @@ export default { ButtonToggle, CopyIcon, CIDSlider, + Tooltip, Accordion, AccordionSection, AccordionHeader, @@ -467,7 +476,7 @@ export default { .date { @include fontSize_16; @include fontWeight_Medium; - margin-bottom: 0.375rem; + margin-bottom: 0.70rem; @include medium { margin-bottom: 0; } @@ -493,7 +502,7 @@ export default { width: 1rem; height: 1rem; top: 0.25rem; - background-color: #74C3B5; + background-color: $neptune; border-radius: 50%; margin-right: 0.875rem; } diff --git a/packages/fe/components/cid-table.vue b/packages/fe/components/cid-table.vue index 84aa3585..d6e965df 100644 --- a/packages/fe/components/cid-table.vue +++ b/packages/fe/components/cid-table.vue @@ -88,6 +88,15 @@ export default { } .table { + .card-cutout-wrapper { + // reversing z-index based from page render order + // so that tooltip for "inspect" shows in front + @for $i from 1 through 20 { + &:nth-child(#{$i}) { + z-index: #{20 - $i}; + } + } + } &.null-state { padding: 1.8125rem 25%; @include small { diff --git a/packages/fe/components/icons/terminal.vue b/packages/fe/components/icons/terminal.vue new file mode 100644 index 00000000..685ad73d --- /dev/null +++ b/packages/fe/components/icons/terminal.vue @@ -0,0 +1,18 @@ + + + + diff --git a/packages/fe/components/tooltip.vue b/packages/fe/components/tooltip.vue new file mode 100644 index 00000000..8499f34b --- /dev/null +++ b/packages/fe/components/tooltip.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/packages/fe/store/dataset.js b/packages/fe/store/dataset.js index 31edfb03..f6487c6e 100644 --- a/packages/fe/store/dataset.js +++ b/packages/fe/store/dataset.js @@ -1,83 +1,83 @@ // ///////////////////////////////////////////////////////////////////// Imports // ----------------------------------------------------------------------------- -// import CloneDeep from 'lodash/cloneDeep' +import CloneDeep from 'lodash/cloneDeep' // /////////////////////////////////////////////////////////////////// Functions // ----------------------------------------------------------------------------- -// const getMockCids = () => { -// const mockCid = { -// title: 'Genome in a Bottle 001', -// hash: 'baga6ea4seaqih7gfqvkpvez3qlbajjolszk7vfqaatt5m2rdef52p3fq4jfpigi', -// fileExtensions: 'xml, txt, csv', -// size: 32000000000, -// expires: 'Feb 27 2023', -// storage_providers: [ -// { -// id: 'F0123431', -// dealId: '1472881', -// location: 'GB', -// expiry_date: 'Feb 27 2023', -// retrieval_rate: '100%', -// retrieval_commands: [ -// 'lotus client retrieve --miner f022352 baga6ea4seaqih7gfqvkpvez3qlbajjolszk7vfqaatt5m2rdef52p3fq4jfpigi publicdomainmovies.tar.01', -// 'pow ffs get baga6ea4seaqih7gfqvkpvez3qlbajjolszk7vfqaatt5m2rdef52p3fq4jfpigi retrieval.png' -// ] -// }, -// { -// id: 'F0123123', -// dealId: '1438903', -// location: 'GB', -// expiry_date: 'Feb 28 2023', -// retrieval_rate: '100%', -// retrieval_commands: [ -// 'lotus client retrieve --miner f022352 b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 publicdomainmovies.tar.01', -// 'pow ffs get b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 retrieval.png', -// 'pow ffs get b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 retrieval.png', -// 'pow ffs get b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 retrieval.png' -// ] -// }, -// { -// id: 'F012H890', -// dealId: '1472892', -// location: 'GB', -// expiry_date: 'Mar 28 2023', -// retrieval_rate: '100%', -// retrieval_commands: [ -// 'lotus client retrieve --miner f022352 88a601f0915f70051a32ac1c1e4b931c348467e70a0c2f7f72086967eeb79e29 publicdomainmovies.tar.01', -// 'pow ffs get 88a601f0915f70051a32ac1c1e4b931c348467e70a0c2f7f72086967eeb79e29 retrieval.png' -// ] -// }, -// { -// id: 'F0126789', -// dealId: '1472890', -// location: 'GB', -// expiry_date: 'Apr 1 2023', -// retrieval_rate: '100%', -// retrieval_commands: [ -// 'lotus client retrieve --miner f022352 444d11afee588638e0479240c55abc5dc8c21ef829f519b8a96db9134b6b41f0 publicdomainmovies.tar.01', -// 'pow ffs get 444d11afee588638e0479240c55abc5dc8c21ef829f519b8a96db9134b6b41f0 retrieval.png' -// ] -// } -// ], -// status: 'active' -// } -// const mockCids = [] -// for (let i = 0; i < 6; i++) { -// const cid = CloneDeep(mockCid) -// cid.title = `Genome in a Bottle 00${i}` -// cid.hash = Math.floor(Math.random() * 9999998873867900).toString() -// for (let j = 0; j < 4; j++) { -// cid.storage_providers[j].id = Math.floor(Math.random() * 9000).toString() -// cid.storage_providers[j].dealId = Math.floor(Math.random() * 10000).toString() -// } -// mockCids.push(cid) -// } -// return { -// data: { -// payload: mockCids -// } -// } -// } +const getMockCids = () => { + const mockCid = { + title: 'Genome in a Bottle 001', + hash: 'baga6ea4seaqih7gfqvkpvez3qlbajjolszk7vfqaatt5m2rdef52p3fq4jfpigi', + fileExtensions: 'xml, txt, csv', + size: 32000000000, + expires: 'Feb 27 2023', + storage_providers: [ + { + id: 'F0123431', + dealId: '1472881', + location: 'GB', + expiry_date: 'Feb 27 2023', + retrieval_rate: '100%', + retrieval_commands: [ + 'lotus client retrieve --miner f022352 baga6ea4seaqih7gfqvkpvez3qlbajjolszk7vfqaatt5m2rdef52p3fq4jfpigi publicdomainmovies.tar.01', + 'pow ffs get baga6ea4seaqih7gfqvkpvez3qlbajjolszk7vfqaatt5m2rdef52p3fq4jfpigi retrieval.png' + ] + }, + { + id: 'F0123123', + dealId: '1438903', + location: 'GB', + expiry_date: 'Feb 28 2023', + retrieval_rate: '100%', + retrieval_commands: [ + 'lotus client retrieve --miner f022352 b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 publicdomainmovies.tar.01', + 'pow ffs get b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 retrieval.png', + 'pow ffs get b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 retrieval.png', + 'pow ffs get b356c864441e1ca71dd4fe1fc455862350f6798c1f966a90ea3fcf60713b3548 retrieval.png' + ] + }, + { + id: 'F012H890', + dealId: '1472892', + location: 'GB', + expiry_date: 'Mar 28 2023', + retrieval_rate: '100%', + retrieval_commands: [ + 'lotus client retrieve --miner f022352 88a601f0915f70051a32ac1c1e4b931c348467e70a0c2f7f72086967eeb79e29 publicdomainmovies.tar.01', + 'pow ffs get 88a601f0915f70051a32ac1c1e4b931c348467e70a0c2f7f72086967eeb79e29 retrieval.png' + ] + }, + { + id: 'F0126789', + dealId: '1472890', + location: 'GB', + expiry_date: 'Apr 1 2023', + retrieval_rate: '100%', + retrieval_commands: [ + 'lotus client retrieve --miner f022352 444d11afee588638e0479240c55abc5dc8c21ef829f519b8a96db9134b6b41f0 publicdomainmovies.tar.01', + 'pow ffs get 444d11afee588638e0479240c55abc5dc8c21ef829f519b8a96db9134b6b41f0 retrieval.png' + ] + } + ], + status: 'active' + } + const mockCids = [] + for (let i = 0; i < 6; i++) { + const cid = CloneDeep(mockCid) + cid.title = `Genome in a Bottle 00${i}` + cid.hash = Math.floor(Math.random() * 9999998873867900).toString() + for (let j = 0; j < 4; j++) { + cid.storage_providers[j].id = Math.floor(Math.random() * 9000).toString() + cid.storage_providers[j].dealId = Math.floor(Math.random() * 10000).toString() + } + mockCids.push(cid) + } + return { + data: { + payload: mockCids + } + } +} // /////////////////////////////////////////////////////////////////////// State // ---------------------- https://vuex.vuejs.org/guide/modules.html#module-reuse @@ -119,13 +119,13 @@ const actions = { } }, // //////////////////////////////////////////////////////////////// getCidList - getCidList ({ commit, getters }, metadata) { + async getCidList ({ commit, getters }, metadata) { try { // const id = metadata.dataSetId // const response = await this.$axiosAuth('/get-cid-list', { params: { id } }) - // const response = await getMockCids() - // const cids = response.data.payload - const cids = false + const response = await getMockCids() + const cids = response.data.payload + // const cids = false commit('SET_CID_LIST', { cids }) } catch (e) { console.log('======================== [Store Action: dataset/getCidList]') From e608c068e1d300f191e58cd1ef10396869a7d3df Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Tue, 7 Mar 2023 18:26:47 -0500 Subject: [PATCH 02/25] feat: tooltip --- packages/fe/components/icons/terminal.vue | 26 ++++++++++++++--------- packages/fe/components/tooltip.vue | 2 +- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/fe/components/icons/terminal.vue b/packages/fe/components/icons/terminal.vue index 685ad73d..3a93a792 100644 --- a/packages/fe/components/icons/terminal.vue +++ b/packages/fe/components/icons/terminal.vue @@ -1,18 +1,24 @@ - + diff --git a/packages/fe/components/tooltip.vue b/packages/fe/components/tooltip.vue index 8499f34b..6fcac6d3 100644 --- a/packages/fe/components/tooltip.vue +++ b/packages/fe/components/tooltip.vue @@ -2,7 +2,7 @@
- {{btn}} + {{ btn }}
From d8d884148526ec3e85d8fabd1ce85ce41c7d935b Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Tue, 7 Mar 2023 18:27:32 -0500 Subject: [PATCH 03/25] feat: tooltip --- packages/fe/components/cid-card.vue | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/fe/components/cid-card.vue b/packages/fe/components/cid-card.vue index c6be97ee..739630dd 100644 --- a/packages/fe/components/cid-card.vue +++ b/packages/fe/components/cid-card.vue @@ -94,11 +94,6 @@ {{ open ? 'Less' : 'More' }} - - -
From 8b7b40bd05361b1e0b6726de577cc9e41fe3528c Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Wed, 8 Mar 2023 12:05:46 -0500 Subject: [PATCH 04/25] fix: breadcrumb should not show in 404 --- packages/fe/components/breadcrumbs.vue | 9 +++++---- packages/fe/components/tooltip.vue | 3 +++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/fe/components/breadcrumbs.vue b/packages/fe/components/breadcrumbs.vue index b23f47a5..305f8bef 100644 --- a/packages/fe/components/breadcrumbs.vue +++ b/packages/fe/components/breadcrumbs.vue @@ -46,7 +46,8 @@ export default { data () { return { - links: false + links: false, + hidden: false } }, @@ -60,9 +61,6 @@ export default { return this.siteContent.general.breadcrumbs_mapping } return false - }, - hidden () { - return this.links.length < 2 } }, @@ -90,9 +88,11 @@ export default { url: '/', text: breadcrumbs.index }] + this.hidden = true items.forEach((item, i) => { const routeName = items.slice(0, i + 1).join('-') if (breadcrumbs.hasOwnProperty(routeName)) { + this.hidden = false const url = `/${items.slice(0, i + 1).join('/')}` if (i !== items.length - 1 && routeName !== 'dataset') { links.push({ type: 'default', url, text: breadcrumbs[routeName] }) @@ -101,6 +101,7 @@ export default { } } else { if (this.dataset) { + // single dataset links.push({ text: this.dataset.name }) } } diff --git a/packages/fe/components/tooltip.vue b/packages/fe/components/tooltip.vue index 6fcac6d3..68faa238 100644 --- a/packages/fe/components/tooltip.vue +++ b/packages/fe/components/tooltip.vue @@ -81,6 +81,9 @@ export default { :deep(a) { color: $neptune; @include fontWeight_Semibold; + &:hover { + text-decoration: underline; + } } } From 9187089510400612b54556b3597ded7bb4789f5a Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Wed, 8 Mar 2023 12:10:47 -0500 Subject: [PATCH 05/25] fix: tooltip positioning on desktop nav --- packages/fe/components/site-header.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/fe/components/site-header.vue b/packages/fe/components/site-header.vue index 675bf835..cc45ff66 100644 --- a/packages/fe/components/site-header.vue +++ b/packages/fe/components/site-header.vue @@ -154,6 +154,10 @@ export default { margin-right: 0; } } + :deep(.tooltip) { + left: 50%; + transform: translateX(-50%); + } } @include large { From 478bd3d8310d89cec05efb4ef8c891bd2299517a Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Wed, 8 Mar 2023 13:45:32 -0500 Subject: [PATCH 06/25] feat: mobile tooltip in progress --- packages/fe/components/cid-card.vue | 29 ++++++++++++++++++++++++----- packages/fe/components/tooltip.vue | 29 ++++++++++++++++++++--------- 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/packages/fe/components/cid-card.vue b/packages/fe/components/cid-card.vue index 739630dd..11dfb309 100644 --- a/packages/fe/components/cid-card.vue +++ b/packages/fe/components/cid-card.vue @@ -72,8 +72,8 @@
- {{ expiryDate }} - {{ mobile ? 'Available Until' : 'Avail. Until' }} + {{ mobile ? 'Available Until' : 'Avail. Until' }} + {{ expiryDate }}
@@ -93,8 +93,8 @@ @click="toggleBottomPanel"> {{ open ? 'Less' : 'More' }} - - + +
@@ -190,6 +190,9 @@
+ + + @@ -263,6 +266,12 @@ export default { }, storageProviders () { return this.cidData.storage_providers + }, + tooltipText () { + return `You can access a preview of the files within this CID, however at this time it must be downloaded and unpacked from the zst format. Learn more` + }, + tooltipBtn () { + return 'Inspect files' } }, @@ -340,6 +349,7 @@ export default { .bottom-content { @include medium { padding-top: 1.125rem; + padding-bottom: 0; } } @@ -361,6 +371,12 @@ export default { } } +.inspect-file-mobile { + display: flex; + justify-content: right; + padding-right: 1.875rem; +} + // //////////////////////////////////////////////////////////////////// CID INFO .title-mobile { font-size: 1.375rem; @@ -442,6 +458,9 @@ export default { .replica-list { margin: 0.875rem 0; + @include medium { + margin: 0; + } } .replica { width: 0.8125rem; @@ -507,7 +526,7 @@ export default { // ///////////////////////////////////////////////////// STORAGE PROVIDERS PANEL .mobile-sp-section-heading { .heading { - @include fontSize_20; + @include fontSize_24; @include fontWeight_Medium; line-height: leading(24, 20); margin: 0.625rem 0; diff --git a/packages/fe/components/tooltip.vue b/packages/fe/components/tooltip.vue index 68faa238..e8bdd7f0 100644 --- a/packages/fe/components/tooltip.vue +++ b/packages/fe/components/tooltip.vue @@ -1,5 +1,5 @@ @@ -56,6 +58,14 @@ export default { CIDCard }, + props: { + copy: { + type: Object, + required: true, + default: () => ({}) + } + }, + data () { return { mobileTable: false, @@ -88,15 +98,6 @@ export default { } .table { - .card-cutout-wrapper { - // reversing z-index based from page render order - // so that tooltip for "inspect" shows in front - @for $i from 1 through 20 { - &:nth-child(#{$i}) { - z-index: #{20 - $i}; - } - } - } &.null-state { padding: 1.8125rem 25%; @include small { diff --git a/packages/fe/content/pages/dataset-single.json b/packages/fe/content/pages/dataset-single.json new file mode 100644 index 00000000..0447e6a0 --- /dev/null +++ b/packages/fe/content/pages/dataset-single.json @@ -0,0 +1,22 @@ +{ + "page_content": { + "cidTable": { + "notOnboarded": "This dataset hasn’t been onboarded to the network yet", + "cidCard": { + "tooltipText": "You can access a preview of the files within this CID, however at this time it must be downloaded and unpacked from the zst format. Learn more", + "tooltipBtnText": "Inspect files", + "cid": "CID", + "size": "Size", + "type": "Type", + "replicas": "No. Replicas", + "status": "Status", + "storageProviders": "Storage Providers", + "storageProvidersSubHeading": "Select a storage provider to view retrieval commands", + "dealID": "dealID", + "availUntil": "Available Until", + "retrievalRate": "Retrieval Rate", + "retrievalCommands": "Retrieval Commands" + } + } + } + } diff --git a/packages/fe/pages/dataset/_id.vue b/packages/fe/pages/dataset/_id.vue index 099a75fe..00995192 100644 --- a/packages/fe/pages/dataset/_id.vue +++ b/packages/fe/pages/dataset/_id.vue @@ -186,7 +186,7 @@ data-push-left="off-1_xlg-0_md-1_sm-0" data-push-right="off-1_xlg-0_md-1_sm-0"> - + @@ -199,6 +199,7 @@ // ====================================================================== Import import { mapGetters } from 'vuex' +import DatasetPageData from '@/content/pages/dataset-single.json' import TextBlock from '@/components/blocks/text-block' import CardCutout from '@/components/card-cutout' import CIDTable from '@/components/cid-table' @@ -243,12 +244,17 @@ export default { data () { const id = this.$route.params.id return { + pageTag: 'datasetSingle', id, resize: false, mobile: false } }, + async fetch ({ app, store }) { + await store.dispatch('general/getBaseData', { key: 'datasetSingle', data: DatasetPageData }) + }, + // head () { // return this.$compileSeo(this.$getSeo(this.tag)) // }, @@ -258,6 +264,9 @@ export default { siteContent: 'general/siteContent', dataset: 'dataset/dataset' }), + pageContent () { + return this.siteContent[this.pageTag].page_content + }, slug () { return this.dataset.slug }, @@ -290,7 +299,6 @@ export default { return this.dataset.createdAt ? this.$moment(this.dataset.createdAt).format('YYYY') : '-' }, datasetSize () { - console.log(this.dataset.data_size, this.dataset.data_size ? this.$formatBytes(this.dataset.data_size) : '-') return this.dataset.data_size ? this.$formatBytes(this.dataset.data_size) : '-' }, totalDataOnNetwork () { diff --git a/packages/fe/store/dataset.js b/packages/fe/store/dataset.js index 56c2cb84..3cc47e42 100644 --- a/packages/fe/store/dataset.js +++ b/packages/fe/store/dataset.js @@ -3,7 +3,7 @@ import CloneDeep from 'lodash/cloneDeep' // toggle this to use mock dataset -const useMock = false +const useMock = true // /////////////////////////////////////////////////////////////////// Functions // ----------------------------------------------------------------------------- From f6cfe69c00ffb7d6f190f58563c01dc2e44a485a Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Thu, 9 Mar 2023 13:34:35 -0500 Subject: [PATCH 13/25] fix: abstract tooltip --- packages/fe/components/cid-card.vue | 44 +++++++++++++++++++++-------- packages/fe/components/tooltip.vue | 37 +++++++++--------------- 2 files changed, 45 insertions(+), 36 deletions(-) diff --git a/packages/fe/components/cid-card.vue b/packages/fe/components/cid-card.vue index 35d4cdb5..39d3edf6 100644 --- a/packages/fe/components/cid-card.vue +++ b/packages/fe/components/cid-card.vue @@ -94,7 +94,16 @@ {{ open ? 'Less' : 'More' }} - + + + +
@@ -140,7 +149,7 @@
- {{ copy.dealID}} + {{ copy.dealID }}
{{ sp.dealId }} @@ -191,8 +200,16 @@
-
- +
+ + + +
@@ -210,6 +227,7 @@ import AccordionSection from '@/components/accordion/accordion-section' import AccordionHeader from '@/components/accordion/accordion-header' import AccordionContent from '@/components/accordion/accordion-content' import Tooltip from '@/components/tooltip' +import TerminalIcon from '@/components/icons/terminal' // ====================================================================== Export export default { @@ -224,7 +242,8 @@ export default { Accordion, AccordionSection, AccordionHeader, - AccordionContent + AccordionContent, + TerminalIcon }, props: { @@ -259,6 +278,9 @@ export default { hash () { return this.cidData.hash }, + zstLink () { + return `https://${this.cidData.hash}.ipfs.w3s.link` + }, fileExtensions () { return this.cidData.fileExtensions.split(',').map(ext => ext.replaceAll(' ', '')) }, @@ -273,12 +295,6 @@ export default { }, storageProviders () { return this.cidData.storage_providers - }, - tooltipText () { - return `You can access a preview of the files within this CID, however at this time it must be downloaded and unpacked from the zst format. Learn more` - }, - tooltipBtn () { - return 'Inspect files' } }, @@ -379,9 +395,13 @@ export default { } } +:deep(.tooltip-c .tooltip-box-wrapper) { + transform: translateX(-60%); +} + .inspect-file-mobile { padding-bottom: toRem(10); - .tooltip-c { + :deep(.tooltip-c) { display: flex; justify-content: right; padding-right: 1.875rem; diff --git a/packages/fe/components/tooltip.vue b/packages/fe/components/tooltip.vue index e8bdd7f0..80879404 100644 --- a/packages/fe/components/tooltip.vue +++ b/packages/fe/components/tooltip.vue @@ -1,34 +1,23 @@ + + diff --git a/packages/fe/components/tooltip.vue b/packages/fe/components/tooltip.vue deleted file mode 100644 index 80879404..00000000 --- a/packages/fe/components/tooltip.vue +++ /dev/null @@ -1,89 +0,0 @@ - - - - - diff --git a/packages/fe/modules/tooltip/components/tooltip.vue b/packages/fe/modules/tooltip/components/tooltip.vue index 381b36e4..b8565330 100644 --- a/packages/fe/modules/tooltip/components/tooltip.vue +++ b/packages/fe/modules/tooltip/components/tooltip.vue @@ -34,7 +34,11 @@ export default { z-index: 1000; &:hover { .tooltip-box-wrapper { - @include fadeIn; + // fade in + opacity: 1; + visibility: visible; + transition: all 200ms ease-in; + pointer-events: auto; } } &.align-right { @@ -58,6 +62,10 @@ export default { left: 50%; transform: translateX(-50%); top: 100%; - @include fadeOut; + // fade out + opacity: 0; + visibility: hidden; + transition: all 200ms ease-in; + pointer-events: none; } diff --git a/packages/fe/modules/tooltip/store/index.js b/packages/fe/modules/tooltip/store/index.js index fb38faac..e69de29b 100644 --- a/packages/fe/modules/tooltip/store/index.js +++ b/packages/fe/modules/tooltip/store/index.js @@ -1,75 +0,0 @@ -import CloneDeep from 'lodash/cloneDeep' - -// /////////////////////////////////////////////////////////////////////// State -// ---------------------- https://vuex.vuejs.org/guide/modules.html#module-reuse -const state = () => ({ - baseAlert: { - isOpen: false, // boolean - action: false, // string: 'store' or 'emit' - storeAction: false, // string: required if (action === 'store') - data: false // object - }, - tooltips: [] -}) - -// ///////////////////////////////////////////////////////////////////// Getters -// ----------------------------------------------------------------------------- -const getters = { - baseAlert: state => state.baseAlert, - tooltips: state => state.tooltips -} - -// ///////////////////////////////////////////////////////////////////// Actions -// ----------------------------------------------------------------------------- -const actions = { - // ///////////////////////////////////////////////////////////// registerAlert - registerTooltip ({ commit, getters }, incoming) { - const tooltip = Object.assign(CloneDeep(getters.baseAlert), CloneDeep(incoming)) - const index = getters.alerts.findIndex(obj => obj.id.includes(alert.id)) - commit('REGISTER_TOOLTIP', { tooltip, index }) - }, - // /////////////////////////////////////////////////////////// deregisterAlert - deregisterTooltip ({ commit, getters, dispatch }, alertId) { - const index = getters.tooltips.findIndex(obj => obj.id.includes(alertId)) - commit('DEREGISTER_TOOLTIP', index) - }, - // /////////////////////////////////////////////////////////////// updateAlert - updateTooltip ({ commit, getters }, incoming) { - const alertId = incoming.alertId - const alert = CloneDeep(getters.tooltips.find(obj => obj.id.includes(alertId))) - Object.assign(alert, incoming) - commit('UPDATE_TOOLTIP', { - alert, - index: getters.tooltips.findIndex(obj => obj.id.includes(alertId)) - }) - } -} - -// /////////////////////////////////////////////////////////////////// Mutations -// ----------------------------------------------------------------------------- -const mutations = { - REGISTER_TOOLTIP (state, payload) { - const index = payload.index - const alert = payload.alert - if (index === -1) { - state.tooltips.push(alert) - } else { - state.alerts.splice(index, 1, alert) - } - }, - DEREGISTER_TOOLTIP (state, index) { - state.alerts.splice(index, 1) - }, - UPDATE_TOOLTIP (state, payload) { - state.alerts.splice(payload.index, 1, payload.tooltip) - } -} - -// ////////////////////////////////////////////////////////////////////// Export -// ----------------------------------------------------------------------------- -export default { - state, - getters, - actions, - mutations -} diff --git a/packages/fe/nuxt.config.js b/packages/fe/nuxt.config.js index 5e8b0639..079c54d4 100644 --- a/packages/fe/nuxt.config.js +++ b/packages/fe/nuxt.config.js @@ -103,7 +103,8 @@ export default { '~/modules/auth', '~/modules/search', '~/modules/form', - '~/modules/button' + '~/modules/button', + '~/modules/tooltip' ], // ///////////////////////////////////////////////////// [Module] Nuxt-content // --------------------------------------------------------------------------- From ef95b8e1a0a3fbc668ae5365a18e597780c6d0b6 Mon Sep 17 00:00:00 2001 From: Joanna Ong Date: Tue, 14 Mar 2023 16:29:53 -0400 Subject: [PATCH 19/25] feat: add focus ring on category and see all / less toggle --- packages/fe/components/blocks/category-slider-block.vue | 4 ++-- packages/fe/components/buttons/button-toggle.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/fe/components/blocks/category-slider-block.vue b/packages/fe/components/blocks/category-slider-block.vue index 491c7031..c96f0c04 100644 --- a/packages/fe/components/blocks/category-slider-block.vue +++ b/packages/fe/components/blocks/category-slider-block.vue @@ -45,9 +45,9 @@ :style="{ 'background-image': `url('/images/categories/${slide.label.replaceAll(' ', '-')}.jpg')` }">
-
+
+
diff --git a/packages/fe/components/buttons/button-toggle.vue b/packages/fe/components/buttons/button-toggle.vue index 7def40e3..b188a5c2 100644 --- a/packages/fe/components/buttons/button-toggle.vue +++ b/packages/fe/components/buttons/button-toggle.vue @@ -1,5 +1,5 @@