fix: Avoid Drag Effect In App Center Drawer when Mobile - MEED-8348 - …

…Meeds-io/MIPs#175 Prior to this change, the Draggable component is enabled on mobile. This change will delete this effect to enhance UX.
Meeds-io · Feb 6, 2025 · 1b0e5ab · 1b0e5ab
1 parent b716aa2
commit 1b0e5ab
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/app-center-webapps/src/main/webapp/vue-apps/appLauncher/components/AppLauncherDrawer.vue b/app-center-webapps/src/main/webapp/vue-apps/appLauncher/components/AppLauncherDrawer.vue
@@ -43,7 +43,8 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
         slot="content"
         class="content">
         <v-layout v-if="favoriteApplicationsList.length > 0" class="favorite appsContainer">
-          <draggable
+          <component
+            :is="$root.isMobile && 'div' || 'draggable'"
             v-model="favoriteApplicationsList"
             class="appLauncherList"
             @start="drag=true"
@@ -83,7 +84,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 </a>
               </div>
             </div>
-          </draggable>
+          </component>
         </v-layout>
       </div>
       <div

diff --git a/app-center-webapps/src/main/webapp/vue-apps/appLauncher/main.js b/app-center-webapps/src/main/webapp/vue-apps/appLauncher/main.js
@@ -30,6 +30,11 @@ export function init(isAdmin) {
       i18nPromise: i18nPromise,
       isAdmin,
     },
+    computed: {
+      isMobile() {
+        return this.$vuetify.breakpoint.smAndDown;
+      },
+    },
     template: `<app-center-launcher-drawer id="${appId}" :i18n-promise="i18nPromise" />`,
     vuetify: Vue.prototype.vuetifyOptions,
     i18n: exoi18n.i18n,