From 73096b4e73b3348918c8d3685a066d4fa81dbd47 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 3 Dec 2024 11:56:40 -0500
Subject: [PATCH] Only allow moving activity bar icons when editing the bar.

Add small visual indicator that they can be moved.
---
 .../src/components/ActivityBar/ActivityBar.vue  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 5371d14f84fe..aee942c40ee9 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -189,6 +189,10 @@ function setActiveSideBar(key: string) {
     activityStore.toggledSideBar = key;
 }
 
+const canDrag = computed(() => {
+    return isActiveSideBar("settings");
+});
+
 defineExpose({
     isActiveSideBar,
     setActiveSideBar,
@@ -209,6 +213,7 @@ defineExpose({
                 <draggable
                     :list="activities"
                     :class="{ 'activity-popper-disabled': isDragging }"
+                    :disabled="!canDrag"
                     :force-fallback="true"
                     chosen-class="activity-chosen-class"
                     :delay="DRAG_DELAY"
@@ -216,7 +221,10 @@ defineExpose({
                     ghost-class="activity-chosen-class"
                     @start="isDragging = true"
                     @end="isDragging = false">
-                    <div v-for="(activity, activityIndex) in activities" :key="activityIndex">
+                    <div
+                        v-for="(activity, activityIndex) in activities"
+                        :key="activityIndex"
+                        :class="{ 'can-drag': canDrag }">
                         <div v-if="activity.visible && (activity.anonymous || !isAnonymous)">
                             <UploadItem
                                 v-if="activity.id === 'upload'"
@@ -380,4 +388,11 @@ defineExpose({
     overflow-y: auto;
     overflow-x: hidden;
 }
+
+.can-drag {
+    border-radius: 12px;
+    border: 1px;
+    outline: dashed darkgray;
+    outline-offset: -3px;
+}
 </style>