From 0b1b98f93ea1c3c6c5694df73558db6de7f1eb06 Mon Sep 17 00:00:00 2001
From: gitmotion <43588713+gitmotion@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:42:12 -0700
Subject: [PATCH] feat(favorites) drag-and-drop favorites section (#1360)
---
locales/de.yml | 1 +
locales/en.yml | 1 +
locales/es.yml | 1 +
locales/fr.yml | 1 +
locales/no.yml | 1 +
locales/pt.yml | 1 +
locales/uk.yml | 1 +
locales/vi.yml | 1 +
locales/zh.yml | 1 +
package.json | 1 +
pnpm-lock.yaml | 14 ++++++++++++
src/pages/Home.page.vue | 48 ++++++++++++++++++++++++++++++++++++----
src/tools/tools.store.ts | 4 ++++
13 files changed, 72 insertions(+), 4 deletions(-)
diff --git a/locales/de.yml b/locales/de.yml
index 1186332f..e4f5da64 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -10,6 +10,7 @@ home:
newestTools: Neueste Tools
favoriteTools: Deine Lieblingstools
allTools: Alle Tools
+ favoritesDndToolTip: 'Ziehen und Ablegen, um Favoriten neu zu ordnen'
subtitle: Praktische Tools für Entwickler
toggleMenu: Menü umschalten
home: Startseite
diff --git a/locales/en.yml b/locales/en.yml
index 9f54a259..b195dbd8 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -3,6 +3,7 @@ home:
newestTools: Newest tools
favoriteTools: 'Your favorite tools'
allTools: 'All the tools'
+ favoritesDndToolTip: 'Drag and drop to reorder favorites'
subtitle: 'Handy tools for developers'
toggleMenu: 'Toggle menu'
home: Home
diff --git a/locales/es.yml b/locales/es.yml
index bf631232..58e3444f 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -3,6 +3,7 @@ home:
newestTools: Nuevas herramientas
favoriteTools: 'Tus herramientas favoritas'
allTools: 'Todas las herramientas'
+ favoritesDndToolTip: 'Arrastra y suelta para reordenar favoritos'
subtitle: 'Herramientas practicas para desarrolladores'
toggleMenu: 'Toggle menu'
home: Home
diff --git a/locales/fr.yml b/locales/fr.yml
index 3af9f36f..2e9bbace 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -3,6 +3,7 @@ home:
newestTools: 'Les nouveaux outils'
favoriteTools: 'Vos outils favoris'
allTools: 'Tous les outils'
+ favoritesDndToolTip: 'Faites glisser et déposez pour réordonner vos favoris'
subtitle: 'Outils pour les développeurs'
toggleMenu: 'Menu'
home: Accueil
diff --git a/locales/no.yml b/locales/no.yml
index 4aa06379..28f96bf2 100644
--- a/locales/no.yml
+++ b/locales/no.yml
@@ -3,6 +3,7 @@ home:
newestTools: Nyeste verktøy
favoriteTools: 'Dine favoritt verktøy'
allTools: 'Alle verktøyene'
+ favoritesDndToolTip: 'Dra og slipp for å omordne favoritter'
subtitle: 'Nyttige verktøy for utviklere'
toggleMenu: 'Vekslemenmy'
home: Hjem
diff --git a/locales/pt.yml b/locales/pt.yml
index a97cbe01..7e0ef024 100644
--- a/locales/pt.yml
+++ b/locales/pt.yml
@@ -3,6 +3,7 @@ home:
newestTools: 'Novas ferramentas'
favoriteTools: 'Suas ferramentas favoritas'
allTools: 'Todas as ferramentas'
+ favoritesDndToolTip: 'Arraste e solte para reordenar favoritos'
subtitle: 'Ferraentas úteis para desenvolvedores'
toggleMenu: 'Menu'
home: 'Início'
diff --git a/locales/uk.yml b/locales/uk.yml
index 744f5f99..3b66d2c4 100644
--- a/locales/uk.yml
+++ b/locales/uk.yml
@@ -3,6 +3,7 @@ home:
newestTools: Найновіші інструменти
favoriteTools: 'Ваші улюблені інструменти'
allTools: 'Усі інструменти'
+ favoritesDndToolTip: 'Перетягніть і відпустіть, щоб змінити порядок улюблених'
subtitle: 'Зручні інструменти для розробників'
toggleMenu: 'Перемикання меню'
home: Головна
diff --git a/locales/vi.yml b/locales/vi.yml
index 87bfbb7a..a68017ca 100644
--- a/locales/vi.yml
+++ b/locales/vi.yml
@@ -3,6 +3,7 @@ home:
newestTools: Công cụ mới nhất
favoriteTools: 'Công cụ yêu thích của bạn'
allTools: 'Tất cả công cụ'
+ favoritesDndToolTip: 'Kéo thả để sắp xếp lại yêu thích'
subtitle: 'Công cụ cho nhà phát triển.'
toggleMenu: 'Chuyển đổi menu'
home: Trang chủ
diff --git a/locales/zh.yml b/locales/zh.yml
index aa0afda9..50dd626f 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -3,6 +3,7 @@ home:
newestTools: '最新工具'
favoriteTools: '我的收藏'
allTools: '全部工具'
+ favoritesDndToolTip: '拖放重新排列收藏夹'
subtitle: '助力开发人员和 IT 工作者'
toggleMenu: '切换菜单'
home: '主页'
diff --git a/package.json b/package.json
index 65f23816..5c991cff 100644
--- a/package.json
+++ b/package.json
@@ -99,6 +99,7 @@
"vue-router": "^4.1.6",
"vue-shadow-dom": "^4.2.0",
"vue-tsc": "^1.8.1",
+ "vuedraggable": "^4.1.0",
"xml-formatter": "^3.3.2",
"xml-js": "^1.6.11",
"yaml": "^2.2.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a18a7c0..3798ae17 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -194,6 +194,9 @@ dependencies:
vue-tsc:
specifier: ^1.8.1
version: 1.8.1(typescript@5.2.2)
+ vuedraggable:
+ specifier: ^4.1.0
+ version: 4.1.0(vue@3.3.4)
xml-formatter:
specifier: ^3.3.2
version: 3.3.2
@@ -8231,6 +8234,9 @@ packages:
tslib: 2.5.0
dev: false
+ /sortablejs@1.14.0:
+ resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
@@ -9356,6 +9362,14 @@ packages:
'@vue/server-renderer': 3.3.4(vue@3.3.4)
'@vue/shared': 3.3.4
+ /vuedraggable@4.1.0(vue@3.3.4):
+ resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+ peerDependencies:
+ vue: ^3.0.1
+ dependencies:
+ sortablejs: 1.14.0
+ vue: 3.3.4
+
/vueuc@0.4.51(vue@3.3.4):
resolution: {integrity: sha512-pLiMChM4f+W8czlIClGvGBYo656lc2Y0/mXFSCydcSmnCR1izlKPGMgiYBGjbY9FDkFG8a2HEVz7t0DNzBWbDw==}
peerDependencies:
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index f4fe0d1d..fdbccf7e 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,6 +1,8 @@
@@ -66,10 +75,21 @@ const { t } = useI18n();
{{ $t('home.categories.favoriteTools') }}
+
+
+
-
-
-
+
+
+
+
+
@@ -107,4 +127,24 @@ const { t } = useI18n();
opacity: 0;
margin-bottom: 0;
}
+
+.ghost-favorites-draggable {
+ opacity: 0.4;
+ background-color: #ccc;
+ border: 2px dashed #666;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ transform: scale(1.1);
+ animation: ghost-favorites-draggable-animation 0.2s ease-out;
+}
+
+@keyframes ghost-favorites-draggable-animation {
+ 0% {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+ 100% {
+ opacity: 0.4;
+ transform: scale(1.0);
+ }
+}
diff --git a/src/tools/tools.store.ts b/src/tools/tools.store.ts
index 631390fe..fb12450d 100644
--- a/src/tools/tools.store.ts
+++ b/src/tools/tools.store.ts
@@ -59,5 +59,9 @@ export const useToolStore = defineStore('tools', () => {
return favoriteToolsName.value.includes(get(tool).name)
|| favoriteToolsName.value.includes(get(tool).path);
},
+
+ updateFavoriteTools(newOrder: ToolWithCategory[]) {
+ favoriteToolsName.value = newOrder.map(tool => tool.path);
+ },
};
});