From: Julius Härtl Date: Wed, 22 Jul 2020 09:29:35 +0000 (+0200) Subject: Replace vue-smoothdnd with vuedraggable X-Git-Tag: v20.0.0beta1~122^2~22 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=90f56dd2b09479a61db085ea2c8f93887e1e6dad;p=nextcloud-server.git Replace vue-smoothdnd with vuedraggable Signed-off-by: Julius Härtl --- diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue index 51296c3029f..3841e35c60b 100644 --- a/apps/dashboard/src/App.vue +++ b/apps/dashboard/src/App.vue @@ -2,23 +2,18 @@

{{ greeting.icon }} {{ greeting.text }}

- - + +
- -

- {{ panels[panelId].title }} -

- +

+ {{ panels[panelId].title }} +

- - +
+ {{ t('dashboard', 'Edit panels') }}
@@ -30,12 +25,12 @@ class="checkbox" :checked="isActive(panel)" @input="updateCheckbox(panel, $event.target.checked)"> -
@@ -48,35 +43,16 @@ import Vue from 'vue' import { loadState } from '@nextcloud/initial-state' import { getCurrentUser } from '@nextcloud/auth' import { Modal } from '@nextcloud/vue' -import { Container, Draggable } from 'vue-smooth-dnd' +import Draggable from 'vuedraggable' import axios from '@nextcloud/axios' import { generateUrl } from '@nextcloud/router' const panels = loadState('dashboard', 'panels') -const applyDrag = (arr, dragResult) => { - const { removedIndex, addedIndex, payload } = dragResult - if (removedIndex === null && addedIndex === null) return arr - - const result = [...arr] - let itemToAdd = payload - - if (removedIndex !== null) { - itemToAdd = result.splice(removedIndex, 1)[0] - } - - if (addedIndex !== null) { - result.splice(addedIndex, 0, itemToAdd) - } - - return result -} - export default { name: 'App', components: { Modal, - Container, Draggable, }, data() { @@ -87,6 +63,7 @@ export default { name: getCurrentUser()?.displayName, layout: loadState('dashboard', 'layout').filter((panelId) => panels[panelId]), modal: false, + appStoreUrl: generateUrl('/settings/apps'), } }, computed: { @@ -161,10 +138,6 @@ export default { layout: this.layout.join(','), }) }, - onDrop(dropResult) { - this.layout = applyDrag(this.layout, dropResult) - this.saveLayout() - }, showModal() { this.modal = true }, @@ -200,7 +173,9 @@ export default { } .panels { - width: 100%; + width: auto; + margin: auto; + max-width: 1500px; display: flex; justify-content: center; flex-direction: row; @@ -216,6 +191,10 @@ export default { border-radius: var(--border-radius-large); border: 2px solid var(--color-border); + &.sortable-ghost { + opacity: 0.1; + } + & > .panel--header { position: sticky; display: flex; @@ -229,6 +208,15 @@ export default { backdrop-filter: blur(4px); cursor: grab; + &, ::v-deep * { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + &:active { cursor: grabbing; } @@ -252,6 +240,8 @@ export default { & > .panel--content { margin: 0 16px 16px 16px; + height: 420px; + overflow: auto; } } @@ -282,6 +272,9 @@ export default { padding: 10px; display: block; list-style-type: none; + background-size: 16px; + background-position: left center; + padding-left: 26px; } } diff --git a/package-lock.json b/package-lock.json index a4715c500eb..70cc0d8d0fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8798,11 +8798,6 @@ "is-fullwidth-code-point": "^2.0.0" } }, - "smooth-dnd": { - "version": "0.12.1", - "resolved": "https://registry.npmjs.org/smooth-dnd/-/smooth-dnd-0.12.1.tgz", - "integrity": "sha512-Dndj/MOG7VP83mvzfGCLGzV2HuK1lWachMtWl/Iuk6zV7noDycIBnflwaPuDzoaapEl3Pc4+ybJArkkx9sxPZg==" - }, "snap.js": { "version": "2.0.9", "resolved": "https://registry.npmjs.org/snap.js/-/snap.js-2.0.9.tgz", @@ -8905,6 +8900,11 @@ } } }, + "sortablejs": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz", + "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==" + }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -9918,14 +9918,6 @@ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz", "integrity": "sha512-SdKRBeoXUjaZ9R/8AyxsdTqkOfMcI5tWxPZOUX5Ie1BTL5rPSZ0O++pbiZCeYeythiZIdLEfkDiQPKIaWk5hDg==" }, - "vue-smooth-dnd": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/vue-smooth-dnd/-/vue-smooth-dnd-0.8.1.tgz", - "integrity": "sha512-eZVVPTwz4A1cs0+CjXx/ihV+gAl3QBoWQnU6+23Gp59t0WBU99z7ducBQ4FvjBamqOlg8SDOE5eFHQedxwB4Wg==", - "requires": { - "smooth-dnd": "0.12.1" - } - }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", @@ -9976,6 +9968,14 @@ "date-format-parse": "^0.2.5" } }, + "vuedraggable": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.0.tgz", + "integrity": "sha512-IlslPpc+iZ2zPNSJbydFZIDrE+don5u+Nc/bjT2YaF+Azidc+wxxJKfKT0NwE68AKk0syb0YbZneAcnynqREZQ==", + "requires": { + "sortablejs": "^1.10.1" + } + }, "vuex": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz", diff --git a/package.json b/package.json index db2528e21f0..37588737a2c 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "vue-material-design-icons": "^4.8.0", "vue-multiselect": "^2.1.6", "vue-router": "^3.3.4", - "vue-smooth-dnd": "^0.8.1", + "vuedraggable": "^2.24.0", "vuex": "^3.5.1", "vuex-router-sync": "^5.0.0" },