remove drag and drop code: prep for next release

Author: cwilvx

src/assets/scss/Global/basic.scss

@@ -82,6 +82,7 @@ button {
   background-color: $gray4;
   border: solid 1px $gray3;
   font-weight: 700;
+  cursor: pointer;
 
   svg {
     transition: all 0.2s;

src/assets/scss/Global/index.scss

@@ -13,7 +13,7 @@
 html {
   cursor: default !important;
   overflow: hidden;
-  
+
   & > * {
     overflow: visible !important;
   }
@@ -41,8 +41,4 @@ body {
     width: 100%;
     height: 100%;
   }
-
-  a {
-    cursor: default !important;
-  }
 }

src/components/ArtistView/Header.vue

@@ -102,11 +102,11 @@ function handleFav() {
 
 .artist-page-header {
   display: grid;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 1fr minmax(min-content, 50%);
   position: relative;
 
   .artist-img {
-    width: 100%;
+    // width: 100%;
 
     img {
       height: 100%;
@@ -119,12 +119,7 @@ function handleFav() {
 
   .gradient {
     position: absolute;
-    background-image: linear-gradient(
-      to left,
-      transparent 10%,
-      $gray 50%,
-      $gray 100%
-    );
+    background-image: linear-gradient(to left, transparent 10%, $gray 50%, $gray 100%);
     height: 100%;
     width: 100%;
   }

src/components/FolderView/BreadCrumbNav.vue

@@ -43,6 +43,7 @@ onUpdated(() => {
   .path {
     white-space: nowrap;
     margin: auto 0;
+    cursor: pointer;
 
     .text {
       padding: $smaller;

src/components/FolderView/FolderItem.vue

@@ -73,7 +73,6 @@ function handleClick(e: MouseEvent) {
   grid-template-columns: max-content 1fr;
   align-items: center;
   background-color: $gray;
-  transition: all 0.2s ease;
   border-radius: $medium;
   position: relative;
 

src/components/FolderView/FolderList.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="f-container rounded">
-    <div
-      id="f-items"
-      class="rounded"
-      :class="{ 'list-mode': settings.folder_list_mode }"
-    >
+  <div
+    class="f-container rounded-sm"
+    :class="{ 'list-mode': settings.folder_list_mode }"
+  >
+    <div id="f-items" class="rounded">
       <FolderItem
         v-for="folder in folders"
         :key="folder.path"
@@ -28,18 +27,29 @@ const settings = useSettingsStore();
 </script>
 
 <style lang="scss">
+.f-container {
+  padding-bottom: 1.25rem;
+}
+
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   gap: 1.5rem;
-  padding-bottom: 1.25rem;
 }
 
-#f-items.list-mode {
+.f-item:hover {
+  // cursor: pointer;
+  background-color: $gray5;
+}
+
+.f-container.list-mode > #f-items {
   grid-template-columns: 1fr;
   gap: 0;
+  // border: solid 1px $gray;
+  // padding: 1rem;
 
   .f-item {
+    transition: none;
     height: 3.25rem;
     border-radius: $small;
     background-color: transparent;
@@ -50,10 +60,10 @@ const settings = useSettingsStore();
       bottom: 50%;
       translate: 0 50%;
     }
-  }
 
-  .f-item:hover {
-    background-color: $gray !important;
+    &:hover {
+      background-color: $gray !important;
+    }
   }
 }
 </style>

src/components/shared/SongItem.vue

@@ -6,34 +6,7 @@
     :class="[{ current: isCurrent() }, { contexton: context_menu_showing }]"
     @dblclick.prevent="emitUpdate"
     @contextmenu.prevent="showMenu"
-    @dragstart="(e) => showDragStart(e, track, (index  as number) - 1 , source)"
-    @dragend.prevent="showDragEnd"
-    draggable="true"
   >
-    <div
-      v-if="droppable"
-      class="top-drop"
-      :class="{ active: dropTop }"
-      @dragenter="
-        dropTop = true;
-        dropBottom = false;
-      "
-      @dragleave="dropTop = false"
-      @dragover.prevent
-      @drop="(e) => dropHere(e, true)"
-    ></div>
-    <div
-      v-if="droppable && is_last"
-      class="bottom-drop"
-      :class="{ active: dropBottom }"
-      @dragenter="
-        dropBottom = true;
-        dropTop = false;
-      "
-      @dragleave="dropBottom = false"
-      @dragover.prevent
-      @drop="(e) => dropHere(e, false)"
-    ></div>
     <div
       class="index t-center ellip"
       @click.prevent="addToFav(track.trackhash)"
@@ -107,17 +80,13 @@ import { paths } from "@/config";
 import { Track } from "@/interfaces";
 import useQueueStore from "@/stores/queue";
 import { formatSeconds } from "@/utils";
-import { showDragStart, handleDrop } from "@/utils/songItemMethods";
 
 import OptionSvg from "@/assets/icons/more.svg";
 import ArtistName from "./ArtistName.vue";
 import HeartSvg from "./HeartSvg.vue";
 import MasterFlag from "./MasterFlag.vue";
 import { dropSources } from "@/composables/enums";
 
-const dropTop = ref(false);
-const dropBottom = ref(false);
-
 const imguri = paths.images.thumb.small;
 const context_menu_showing = ref(false);
 const queue = useQueueStore();
@@ -132,8 +101,6 @@ const props = defineProps<{
   source: dropSources;
 }>();
 
-// -------------
-
 const is_fav = ref(props.track.is_favorite);
 
 const emit = defineEmits<{
@@ -151,29 +118,6 @@ function emitUpdate() {
   emit("playThis");
 }
 
-// ==== DRAG AND DROP ==== //
-function resetFlags() {
-  dropTop.value = false;
-  dropBottom.value = false;
-}
-
-function showDragEnd(e: DragEvent) {
-  resetFlags();
-}
-
-function dropHere(e: DragEvent, top: boolean) {
-  e.preventDefault();
-  resetFlags();
-
-  const dropData = handleDrop(e, props.index as number, top);
-  if (!dropData) return;
-
-  const { track, newIndex, oldIndex } = dropData;
-  emit("trackDropped", props.source, track, newIndex, oldIndex);
-}
-
-// ==== DRAG AND DROP END ==== //
-
 function showMenu(e: MouseEvent) {
   showContext(e, props.track, context_menu_showing);
 }

src/components/shared/SongList.vue

@@ -19,7 +19,7 @@
         :is_queue_track="is_queue"
         @playThis="handlePlay(index)"
         :is_last="index == tracks.length - 1"
-        :droppable="true"
+        :droppable="false"
         @trackDropped="dropHandler"
         :source="source"
       />