From c1f0afe098fdadd2b186fa5ce0ea6241314b7815 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Mon, 22 Apr 2024 16:04:11 +0200 Subject: [PATCH 1/4] fix: drag and drop for firefox --- package-lock.json | 28 +++++++++---------- package.json | 4 +-- src/assets/main.css | 2 +- .../layer-item/layer-item.spec.ts | 6 ++-- .../layer-manager/layer-item/layer-item.vue | 4 +-- .../layer-manager/layer-manager.vue | 13 +++++---- src/services/utils.ts | 22 +++++++++++++++ 7 files changed, 51 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3b8a4f35..6a058db2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "mapbox-gl": "^1.7.0", "ol": "6.15.0", "pinia": "^2.0.26", - "sortablejs": "^1.15.0", + "sortablejs": "^1.15.2", "tailwindcss": "^3.2.4", "vue": "^3.2.45", "vue-dompurify-html": "^3.1.2" @@ -28,7 +28,7 @@ "@types/luxon": "^3.3.1", "@types/node": "^18.11.9", "@types/proj4": "^2.5.2", - "@types/sortablejs": "^1.15.0", + "@types/sortablejs": "^1.15.2", "@vitejs/plugin-vue": "^3.2.0", "@vitest/coverage-c8": "^0.26.2", "@vue/eslint-config-prettier": "^7.0.0", @@ -2877,9 +2877,9 @@ "dev": true }, "node_modules/@types/sortablejs": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.0.tgz", - "integrity": "sha512-qrhtM7M41EhH4tZQTNw2/RJkxllBx3reiJpTbgWCM2Dx0U1sZ6LwKp9lfNln9uqE26ZMKUaPEYaD4rzvOWYtZw==", + "version": "1.15.8", + "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz", + "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==", "dev": true }, "node_modules/@types/symlink-or-copy": { @@ -12018,9 +12018,9 @@ } }, "node_modules/sortablejs": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz", - "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==" + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz", + "integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==" }, "node_modules/source-map": { "version": "0.6.1", @@ -16164,9 +16164,9 @@ "dev": true }, "@types/sortablejs": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.0.tgz", - "integrity": "sha512-qrhtM7M41EhH4tZQTNw2/RJkxllBx3reiJpTbgWCM2Dx0U1sZ6LwKp9lfNln9uqE26ZMKUaPEYaD4rzvOWYtZw==", + "version": "1.15.8", + "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz", + "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==", "dev": true }, "@types/symlink-or-copy": { @@ -23015,9 +23015,9 @@ } }, "sortablejs": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz", - "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==" + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz", + "integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==" }, "source-map": { "version": "0.6.1", diff --git a/package.json b/package.json index 5bf087dd..ae4b9b04 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "mapbox-gl": "^1.7.0", "ol": "6.15.0", "pinia": "^2.0.26", - "sortablejs": "^1.15.0", + "sortablejs": "^1.15.2", "tailwindcss": "^3.2.4", "vue": "^3.2.45", "vue-dompurify-html": "^3.1.2" @@ -46,7 +46,7 @@ "@types/luxon": "^3.3.1", "@types/node": "^18.11.9", "@types/proj4": "^2.5.2", - "@types/sortablejs": "^1.15.0", + "@types/sortablejs": "^1.15.2", "@vitejs/plugin-vue": "^3.2.0", "@vitest/coverage-c8": "^0.26.2", "@vue/eslint-config-prettier": "^7.0.0", diff --git a/src/assets/main.css b/src/assets/main.css index a748443f..c83618a0 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -133,7 +133,7 @@ } .lux-sortable-ghost { - @apply before:absolute before:w-full before:h-full before:z-10 before:bg-primary before:content-['']; + @apply before:absolute before:w-full before:h-[32px] before:z-10 before:bg-primary before:content-['']; } .lux-sortable-drag { diff --git a/src/components/layer-manager/layer-item/layer-item.spec.ts b/src/components/layer-manager/layer-item/layer-item.spec.ts index 6fe42192..6a9ed46e 100644 --- a/src/components/layer-manager/layer-item/layer-item.spec.ts +++ b/src/components/layer-manager/layer-item/layer-item.spec.ts @@ -19,7 +19,7 @@ describe('LayerItem', () => { props: { is3d: false, layer: layerMock, - draggableClassName: 'classnamedragg', + dragHandlerClassName: 'classnamedragg', isOpen: false, isLayerComparatorOpen: false, displayLayerComparatorOpen: false, @@ -39,7 +39,7 @@ describe('LayerItem', () => { props: { is3d: false, layer: layerMock, - draggableClassName: 'classnamedragg', + dragHandlerClassName: 'classnamedragg', isOpen: true, isLayerComparatorOpen: false, displayLayerComparatorOpen: false, @@ -59,7 +59,7 @@ describe('LayerItem', () => { props: { is3d: false, layer: layerMock, - draggableClassName: 'classnamedragg', + dragHandlerClassName: 'classnamedragg', isOpen: true, isLayerComparatorOpen: false, displayLayerComparatorOpen: false, diff --git a/src/components/layer-manager/layer-item/layer-item.vue b/src/components/layer-manager/layer-item/layer-item.vue index 0b3c6370..025fb3c8 100644 --- a/src/components/layer-manager/layer-item/layer-item.vue +++ b/src/components/layer-manager/layer-item/layer-item.vue @@ -11,7 +11,7 @@ import LayerTime from '../layer-time/layer-time.vue' const props = defineProps<{ is3d: boolean layer: Layer - draggableClassName: string + dragHandlerClassName: string isOpen: boolean isLayerComparatorOpen: boolean displayLayerComparatorOpen: boolean @@ -59,7 +59,7 @@ function changeTime(dateStart?: string, dateEnd?: string) {