Skip to content
This repository has been archived by the owner on Dec 2, 2024. It is now read-only.

feat: grid tabs improvements #504

Merged
merged 10 commits into from
Oct 22, 2024
Merged

feat: grid tabs improvements #504

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d4b34e0
Grid columns config
dzbo Oct 18, 2024
cc640cc
Refactor grid
dzbo Oct 18, 2024
ffcd631
Hide tabs
dzbo Oct 18, 2024
05296f1
Merge branch 'feat/the-grid' of github.com:lukso-network/universalpro…
dzbo Oct 19, 2024
5f55769
Allow to change tabs positions
dzbo Oct 19, 2024
631d42e
Improve tooltips
dzbo Oct 19, 2024
2b7a09a
Fix test
dzbo Oct 19, 2024
2453b69
Fix toggle
dzbo Oct 19, 2024
6c3ed9a
Fix count
dzbo Oct 19, 2024
8d0c1b4
PR remarks
dzbo Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions components/ProfileTabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const handleToggleGridEditMode = async () => {

<template>
<div
class="mb-4 flex min-h-11 items-center justify-between border-b border-b-neutral-90 pb-4"
class="mb-4 flex min-h-11 select-none items-center justify-between border-b border-b-neutral-90 pb-4"
>
<ul class="flex justify-center gap-6 sm:justify-start">
<ProfileTabsItem
Expand All @@ -40,11 +40,18 @@ const handleToggleGridEditMode = async () => {
/>
</ul>
<template v-if="activeTab === 'grid' && isConnectedUserViewingOwnProfile">
<lukso-icon
:name="isEditingGrid && isConnected ? 'close-lg' : 'edit'"
@click="handleToggleGridEditMode"
class="cursor-pointer opacity-50 transition hover:opacity-100"
></lukso-icon>
<lukso-tooltip
variant="white"
:text="isEditingGrid ? '' : formatMessage('grid_enable_edit_mode')"
:show-delay="1500"
placement="left"
>
<lukso-icon
:name="isEditingGrid && isConnected ? 'close-lg' : 'edit'"
@click="handleToggleGridEditMode"
class="cursor-pointer opacity-50 transition hover:opacity-100"
></lukso-icon>
</lukso-tooltip>
</template>
</div>
</template>
5 changes: 3 additions & 2 deletions components/ProfileView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const assets = computed(() => assetsData.value || [])
const isLoadingAssets = computed(() =>
assets.value.some(asset => asset.isLoading)
)
const { gridCount } = useGrid()
const { gridsForDisplay } = useGrid()

const filteredAssets = computed(() => {
return (
Expand Down Expand Up @@ -87,7 +87,8 @@ const tabs = computed<ProfileViewTab[]>(() => {
return [
{
id: 'grid',
count: gridCount.value > 1 ? gridCount.value : 0,
count:
gridsForDisplay.value.length > 1 ? gridsForDisplay.value.length : 0,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I can see this is the same as before but then if you only have 1 grid for display you count as 0? 🤔 just curiosity

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, for single grid we don't show counter.

},
{
id: 'collectibles',
Expand Down
4 changes: 2 additions & 2 deletions components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`ProfileTabs > renders active state 1`] = `
"<div id="test-wrapper">
<div class="mb-4 flex min-h-11 items-center justify-between border-b border-b-neutral-90 pb-4">
<div class="mb-4 flex min-h-11 select-none items-center justify-between border-b border-b-neutral-90 pb-4">
<ul class="flex justify-center gap-6 sm:justify-start">
<li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
<!--v-if-->
Expand All @@ -16,7 +16,7 @@ exports[`ProfileTabs > renders active state 1`] = `

exports[`ProfileTabs > renders default state 1`] = `
"<div id="test-wrapper">
<div class="mb-4 flex min-h-11 items-center justify-between border-b border-b-neutral-90 pb-4">
<div class="mb-4 flex min-h-11 select-none items-center justify-between border-b border-b-neutral-90 pb-4">
<ul class="flex justify-center gap-6 sm:justify-start">
<li class="heading-inter-17-semi-bold flex items-center cursor-pointer opacity-50 transition hover:opacity-100">Tokens
<!--v-if-->
Expand Down
26 changes: 23 additions & 3 deletions domains/grid/components/AddWidgetSelection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
const { formatMessage } = useIntl()
const { closeModal, showModal } = useModal()

const SHOW_TOOLTIP_DELAY = 1500

type Props = {
type?: GridWidgetType
properties?: GridWidgetProperties
Expand Down Expand Up @@ -50,6 +52,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
<!-- Iframe -->
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_iframe')"
>
<div
Expand All @@ -65,7 +68,11 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
</lukso-tooltip>

<!-- Image -->
<lukso-tooltip variant="light" :text="formatMessage('widget_type_image')">
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_image')"
>
<div
class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
@click="handleSelectWidget('IMAGE')"
Expand All @@ -79,7 +86,11 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
</lukso-tooltip>

<!-- Text -->
<lukso-tooltip variant="light" :text="formatMessage('widget_type_text')">
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_text')"
>
<div
class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
@click="handleSelectWidget('TEXT')"
Expand All @@ -105,6 +116,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
<!-- Youtube -->
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_youtube')"
>
<img
Expand All @@ -128,6 +140,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
<!-- Spotify -->
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_spotify')"
>
<img
Expand All @@ -141,6 +154,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
<!-- Sound Cloud -->
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_soundcloud')"
>
<img
Expand All @@ -162,7 +176,11 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
</div>
<div class="flex gap-5">
<!-- X -->
<lukso-tooltip variant="light" :text="formatMessage('widget_type_x')">
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_x')"
>
<img
src="/images/social-media-x.svg"
alt="X"
Expand All @@ -174,6 +192,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
<!-- Warpcast -->
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_warpcast')"
>
<img
Expand All @@ -187,6 +206,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
<!-- Instagram -->
<lukso-tooltip
variant="light"
:show-delay="SHOW_TOOLTIP_DELAY"
:text="formatMessage('widget_type_instagram')"
>
<img
Expand Down
61 changes: 44 additions & 17 deletions domains/grid/components/GridTabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,18 @@
<script setup lang="ts">
import draggable from 'vuedraggable'

type GridTab = {
grid: Grid<GridWidget>
}

type Props = {
grid: Grid<GridWidget>[]
}

const props = defineProps<Props>()
const { selectedGridId } = storeToRefs(useGridStore())
const { selectedGridId, tempGrid, viewedGrid } = storeToRefs(useGridStore())
const { formatMessage } = useIntl()
const { showModal } = useModal()
const { canEditGrid } = useGrid()
const { canEditGrid, gridsForDisplay } = useGrid()
const tabs = ref<GridTab[]>([])

const tabs = computed<GridTab[]>(() => {
return props.grid.map(grid => {
return {
grid,
}
})
})
// we only show tabs when user has more then one
const hasTabs = computed(() => tabs.value.length > 1)

const handleAddGrid = () => {
showModal({
Expand All @@ -31,20 +24,54 @@ const handleAddGrid = () => {
},
})
}

const checkMove = (event: any) => {
console.log(event)
dzbo marked this conversation as resolved.
Show resolved Hide resolved
console.log(tabs.value)
tempGrid.value = cloneObject(tabs.value.map(tab => tab.grid))
}

watch(
[canEditGrid, tempGrid, viewedGrid],
() => {
tabs.value = gridsForDisplay.value
},
{ immediate: true, deep: true }
)
</script>

<template>
<div class="pb-4">
<ul class="flex flex-wrap justify-start gap-x-6 gap-y-3">
<div v-if="hasTabs" class="flex select-none gap-x-6 gap-y-3 pb-4">
<draggable
v-if="canEditGrid"
v-model="tabs"
tag="ul"
:animation="300"
item-key="grid.id"
class="flex flex-wrap justify-start gap-x-6 gap-y-3"
@end="checkMove"
>
<template #item="{ element: tab }">
<GridTabsItem
:grid="tab.grid"
:is-active="tab.grid.id === selectedGridId"
/>
</template>
</draggable>

<ul v-else class="flex flex-wrap justify-start gap-x-6 gap-y-3">
<GridTabsItem
v-for="tab in tabs"
:key="tab.grid.id"
:grid="tab.grid"
:is-active="tab.grid.id === selectedGridId"
/>
</ul>

<ul class="flex flex-wrap justify-start gap-x-6 gap-y-3">
<li
v-if="canEditGrid"
class="heading-inter-17-semi-bold flex cursor-pointer items-center opacity-50 transition hover:opacity-100"
class="heading-inter-17-semi-bold flex cursor-pointer select-none items-center opacity-50 transition hover:opacity-100"
@click="handleAddGrid"
>
{{ formatMessage('grid_tabs_add_widget') }}
Expand Down
4 changes: 2 additions & 2 deletions domains/grid/components/GridView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,8 @@ onUnmounted(() => {

<template>
<div class="w-full">
<div class="mx-auto min-h-[200px] max-w-content" ref="gridContainer">
<GridTabs :grid="currentGrid" />
<div class="mx-auto max-w-content" ref="gridContainer">
<GridTabs />
<GridLayout
v-model:layout="gridWidgets"
:col-num="gridColumnNumber"
Expand Down
18 changes: 11 additions & 7 deletions domains/grid/composables/useGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,16 @@ export const useGrid = () => {
}
}

const gridCount = computed(() => {
if (canEditGrid.value) {
return tempGrid.value.length
}

return viewedGrid.value.length
const gridsForDisplay = computed(() => {
const grids = canEditGrid.value
? tempGrid.value
: viewedGrid.value.filter(grid => grid.grid.length > 0)

return grids.map(grid => {
return {
grid,
}
})
})

return {
Expand Down Expand Up @@ -288,6 +292,6 @@ export const useGrid = () => {
canEditGrid,
initSelectedGridId,
getGridById,
gridCount,
gridsForDisplay,
}
}
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@
"vitest": "^1.6.0",
"vue": "^3.4.21",
"vue-router": "^4.3.0",
"vuedraggable": "^4.1.0",
"web3": "~1.10.4",
"web3-bzz": "1.10.4",
"web3-utils": "~1.10.4",
Expand Down
1 change: 1 addition & 0 deletions translations/en_US.json
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22298,6 +22298,13 @@ __metadata:
languageName: node
linkType: hard

"sortablejs@npm:1.14.0":
version: 1.14.0
resolution: "sortablejs@npm:1.14.0"
checksum: 434e0caaabfac2b4f48e102cc40e12fd0af7dc99f14838005e6429e92cc190f0ccfb48b0cb8deed8a9b808543f926e2aad26aa89277ee036e5b4ee959ae47f9e
languageName: node
linkType: hard

"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
version: 1.0.2
resolution: "source-map-js@npm:1.0.2"
Expand Down Expand Up @@ -24332,6 +24339,7 @@ __metadata:
vitest: "npm:^1.6.0"
vue: "npm:^3.4.21"
vue-router: "npm:^4.3.0"
vuedraggable: "npm:^4.1.0"
web3: "npm:~1.10.4"
web3-bzz: "npm:1.10.4"
web3-utils: "npm:~1.10.4"
Expand Down Expand Up @@ -25385,6 +25393,17 @@ __metadata:
languageName: node
linkType: hard

"vuedraggable@npm:^4.1.0":
version: 4.1.0
resolution: "vuedraggable@npm:4.1.0"
dependencies:
sortablejs: "npm:1.14.0"
peerDependencies:
vue: ^3.0.1
checksum: 87d4faba83ea27c0c262fcdbe7bc9791560079096a5a9d1dc191ebfe0a00f8324d33ebc15272c4067ddc32b1681534d17acafbe73d18c4cb2a8d99f19d86e74b
languageName: node
linkType: hard

"wcwidth@npm:^1.0.1":
version: 1.0.1
resolution: "wcwidth@npm:1.0.1"
Expand Down
Loading