adding a -drag-source and -drag-target class

SlateFoundation · Nov 29, 2022 · 11b8064 · 11b8064
1 parent 176440a
commit 11b8064
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/static-webapps/slate-portfolio-manager/src/assets/app.scss b/static-webapps/slate-portfolio-manager/src/assets/app.scss
@@ -39,7 +39,11 @@ body {
 }
 
 .level-panel.-drop-zone {
-  .btn-danger, .skill-demos {
+  .level-panel__delete, .skill-demos {
     display: none;
   }
+  &.-drag-source {
+    filter: grayscale(0.75);
+    opacity: 0.5;
+  }
 }
diff --git a/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue b/static-webapps/slate-portfolio-manager/src/components/sidebar/LevelPanel.vue
@@ -64,7 +64,7 @@
       />
       <div
         v-if="canDelete"
-        class="p-3 bg-cbl-level-10"
+        class="p-3 bg-cbl-level-10 level-panel__delete"
       >
         <button
           class="btn btn-danger"
@@ -121,9 +121,15 @@ export default {
     ...mapStores(useStudentCompetency, useUi),
 
     wrapperClass() {
+      const { Level } = this.portfolio;
+      const { dragging } = this.uiStore;
+      const isDroppable = dragging && dragging.type === 'move-skill-demo';
       return [
-        `level-panel mb-2 cbl-level-${this.portfolio.Level}`,
-        this.isDroppable && '-drop-zone',
+        `level-panel mb-2 cbl-level-${Level}`,
+        isDroppable && [
+          '-drop-zone',
+          dragging.Level === Level ? '-drag-source' : '-drag-target',
+        ],
       ];
     },
 
@@ -180,11 +186,6 @@ export default {
       const nextLevel = this.visibleLevels.find((level) => level > this.portfolio.Level);
       return this.preppedSkillDemos.length === 0 && !nextLevel;
     },
-
-    isDroppable() {
-      const { dragging } = this.uiStore;
-      return dragging && dragging.type === 'move-skill-demo';
-    },
   },
 
   methods: {