feat: grid tabs improvements (#504)

lukso-network · Oct 22, 2024 · 9ba3f16 · 9ba3f16
1 parent ca261fe
commit 9ba3f16
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 39 deletions.
diff --git a/components/ProfileTabs.vue b/components/ProfileTabs.vue
@@ -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
@@ -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>
diff --git a/components/ProfileView.vue b/components/ProfileView.vue
@@ -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 (
@@ -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,
     },
     {
       id: 'collectibles',

diff --git a/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap b/components/__tests__/__snapshots__/ProfileTabs.spec.ts.snap
@@ -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-->
@@ -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-->

diff --git a/domains/grid/components/AddWidgetSelection.vue b/domains/grid/components/AddWidgetSelection.vue
@@ -2,6 +2,8 @@
 const { formatMessage } = useIntl()
 const { closeModal, showModal } = useModal()
 
+const SHOW_TOOLTIP_DELAY = 1500
+
 type Props = {
   type?: GridWidgetType
   properties?: GridWidgetProperties
@@ -50,6 +52,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
       <!-- Iframe -->
       <lukso-tooltip
         variant="light"
+        :show-delay="SHOW_TOOLTIP_DELAY"
         :text="formatMessage('widget_type_iframe')"
       >
         <div
@@ -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')"
@@ -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')"
@@ -105,6 +116,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
       <!-- Youtube -->
       <lukso-tooltip
         variant="light"
+        :show-delay="SHOW_TOOLTIP_DELAY"
         :text="formatMessage('widget_type_youtube')"
       >
         <img
@@ -128,6 +140,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
       <!-- Spotify -->
       <lukso-tooltip
         variant="light"
+        :show-delay="SHOW_TOOLTIP_DELAY"
         :text="formatMessage('widget_type_spotify')"
       >
         <img
@@ -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
@@ -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"
@@ -174,6 +192,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
       <!-- Warpcast -->
       <lukso-tooltip
         variant="light"
+        :show-delay="SHOW_TOOLTIP_DELAY"
         :text="formatMessage('widget_type_warpcast')"
       >
         <img
@@ -187,6 +206,7 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
       <!-- Instagram -->
       <lukso-tooltip
         variant="light"
+        :show-delay="SHOW_TOOLTIP_DELAY"
         :text="formatMessage('widget_type_instagram')"
       >
         <img

diff --git a/domains/grid/components/GridTabs.vue b/domains/grid/components/GridTabs.vue
@@ -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({
@@ -31,20 +24,52 @@ const handleAddGrid = () => {
     },
   })
 }
+
+const handleDragEnd = () => {
+  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="handleDragEnd"
+    >
+      <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') }}

diff --git a/domains/grid/components/GridView.vue b/domains/grid/components/GridView.vue
@@ -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"

diff --git a/domains/grid/composables/useGrid.ts b/domains/grid/composables/useGrid.ts
@@ -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 {
@@ -288,6 +292,6 @@ export const useGrid = () => {
     canEditGrid,
     initSelectedGridId,
     getGridById,
-    gridCount,
+    gridsForDisplay,
   }
 }
diff --git a/package.json b/package.json
@@ -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",

diff --git a/translations/en_US.json b/translations/en_US.json
diff --git a/yarn.lock b/yarn.lock
@@ -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"
@@ -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"
@@ -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"