@@ -98,6 +98,10 @@ const dragItem: Ref<Activity | null> = ref(null);
98
98
// drag state
99
99
const isDragging = ref (false );
100
100
101
+ // computed values
102
+ const canDrag = computed (() => isActiveSideBar (" settings" ));
103
+ const isSideBarOpen = computed (() => activityStore .toggledSideBar !== " " );
104
+
101
105
/**
102
106
* Checks if the route of an activity is currently being visited and panels are collapsed
103
107
*/
@@ -112,8 +116,6 @@ function isActiveSideBar(menuKey: string) {
112
116
return activityStore .toggledSideBar === menuKey ;
113
117
}
114
118
115
- const isSideBarOpen = computed (() => activityStore .toggledSideBar !== " " );
116
-
117
119
/**
118
120
* Checks if an activity that has a panel should have the `is-active` prop
119
121
*/
@@ -209,14 +211,18 @@ defineExpose({
209
211
<draggable
210
212
:list =" activities"
211
213
:class =" { 'activity-popper-disabled': isDragging }"
214
+ :disabled =" !canDrag"
212
215
:force-fallback =" true"
213
216
chosen-class =" activity-chosen-class"
214
217
:delay =" DRAG_DELAY"
215
218
drag-class =" activity-drag-class"
216
219
ghost-class =" activity-chosen-class"
217
220
@start =" isDragging = true"
218
221
@end =" isDragging = false" >
219
- <div v-for =" (activity, activityIndex) in activities" :key =" activityIndex" >
222
+ <div
223
+ v-for =" (activity, activityIndex) in activities"
224
+ :key =" activityIndex"
225
+ :class =" { 'activity-can-drag': canDrag }" >
220
226
<div v-if =" activity.visible && (activity.anonymous || !isAnonymous)" >
221
227
<UploadItem
222
228
v-if =" activity.id === 'upload'"
@@ -346,6 +352,12 @@ defineExpose({
346
352
display : none ;
347
353
}
348
354
355
+ .activity-can-drag .activity-item {
356
+ border-radius : $border-radius-extralarge ;
357
+ outline : 2px dashed $border-color ;
358
+ outline-offset : -3px ;
359
+ }
360
+
349
361
.activity-chosen-class {
350
362
background : $brand-secondary ;
351
363
border-radius : $border-radius-extralarge ;
0 commit comments