feat(servers content): file upload + extra mod info + misc (#3055)

* feat: only scroll up if scrolled down * feat: no query results message * feat: content files support, mobile fixes * fix(drag & drop): type of file prop * chore: show number of mods in searchbar Signed-off-by: Evan Song <theevansong@gmail.com> * chore: adjust btn styles Signed-off-by: Evan Song <theevansong@gmail.com> * feat: prepare for mod author in backend response Signed-off-by: Evan Song <theevansong@gmail.com> * fix: external mods & mobile * chore: adjust edit mod version modal copy Signed-off-by: Evan Song <theevansong@gmail.com> * chore: add tooltips for version/filename Signed-off-by: Evan Song <theevansong@gmail.com> * chore: swap delete/change version btn Signed-off-by: Evan Song <theevansong@gmail.com> * fix: dont allow mod link to be dragged Signed-off-by: Evan Song <theevansong@gmail.com> * fix: oops Signed-off-by: Evan Song <theevansong@gmail.com> * chore: remove author field Signed-off-by: Evan Song <theevansong@gmail.com> * chore: drill down tooltip Signed-off-by: Evan Song <theevansong@gmail.com> * fix: fighting types Signed-off-by: Evan Song <theevansong@gmail.com> * prepare for owner field Signed-off-by: Evan Song <theevansong@gmail.com> --------- Signed-off-by: Evan Song <theevansong@gmail.com> Co-authored-by: Evan Song <theevansong@gmail.com> Co-authored-by: Evan Song <52982404+ferothefox@users.noreply.github.com>
2024-12-29 00:31:52 +00:00
parent 2fea772ffb
commit 0437503b75
7 changed files with 696 additions and 457 deletions
--- a/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
@@ -0,0 +1,75 @@
+<template>
+  <div
+    @dragenter.prevent="handleDragEnter"
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <slot />
+    <div
+      v-if="isDragging"
+      :class="[
+        'absolute inset-0 flex items-center justify-center rounded-2xl bg-black bg-opacity-50 text-white',
+        overlayClass,
+      ]"
+    >
+      <div class="text-center">
+        <UploadIcon class="mx-auto h-16 w-16" />
+        <p class="mt-2 text-xl">
+          Drop {{ type ? type.toLocaleLowerCase() : "file" }}s here to upload
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UploadIcon } from "@modrinth/assets";
+import { ref } from "vue";
+
+const emit = defineEmits<{
+  (event: "filesDropped", files: File[]): void;
+}>();
+
+defineProps<{
+  overlayClass?: string;
+  type?: string;
+}>();
+
+const isDragging = ref(false);
+const dragCounter = ref(0);
+
+const handleDragEnter = (event: DragEvent) => {
+  event.preventDefault();
+  if (!event.dataTransfer?.types.includes("application/pyro-file-move")) {
+    dragCounter.value++;
+    isDragging.value = true;
+  }
+};
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault();
+  dragCounter.value--;
+  if (dragCounter.value === 0) {
+    isDragging.value = false;
+  }
+};
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault();
+  isDragging.value = false;
+  dragCounter.value = 0;
+
+  const isInternalMove = event.dataTransfer?.types.includes("application/pyro-file-move");
+  if (isInternalMove) return;
+
+  const files = event.dataTransfer?.files;
+  if (files) {
+    emit("filesDropped", Array.from(files));
+  }
+};
+</script>