root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Add sharing function, UI enhancement

Browse Source
This commit is contained in:
root
2025-12-14 19:06:55 +01:00
parent 883c93b7ff
commit a381900356
9 changed files with 664 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/SpritePreview.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="spritesheet-preview w-full h-full">
<div class="flex flex-col lg:flex-row gap-4 h-full">
<div class="flex-1 min-w-0 flex flex-col">
<div class="flex flex-col lg:flex-row gap-4 h-full min-h-0">
<div class="flex-1 min-w-0 flex flex-col min-h-0">
<div
class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto flex-1 min-h-[300px] max-h-[calc(100vh-12rem)] shadow-sm hover:shadow-md transition-shadow duration-200"
class="relative bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-auto flex-1 min-h-[200px] sm:min-h-[300px] max-h-[50vh] lg:max-h-none shadow-sm hover:shadow-md transition-shadow duration-200"
@mousemove="drag"
@mouseup="stopDrag"
@mouseleave="stopDrag"
@@ -82,10 +82,10 @@
</div>
</div>
<div class="lg:w-80 xl:w-96 flex-shrink-0">
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
<div class="lg:w-80 xl:w-96 flex-shrink-0 lg:h-full lg:min-h-0 flex flex-col">
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden flex-1 flex flex-col lg:overflow-y-auto">
<!-- Playback Controls -->
<div class="p-4 border-b border-gray-100 dark:border-gray-700">
<div class="p-4 border-b border-gray-100 dark:border-gray-700 flex-shrink-0">
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">Playback</h3>
<div class="flex items-center gap-2">
<button @click="togglePlayback" class="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg transition-all cursor-pointer flex-1 shadow-sm active:scale-95">
@@ -108,7 +108,7 @@
</div>
<!-- Animation Settings -->
<div class="p-4 border-b border-gray-100 dark:border-gray-700 space-y-5">
<div class="p-4 border-b border-gray-100 dark:border-gray-700 space-y-5 flex-shrink-0">
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">Animation</h3>
<!-- Frame Navigation -->
@@ -131,7 +131,7 @@
</div>
<!-- View Options -->
<div class="p-4 space-y-5">
<div class="p-4 space-y-5 flex-1">
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1">View Options</h3>
<!-- Zoom Control -->
@@ -185,7 +185,7 @@
</div>
<!-- Current frame offset display -->
<div v-if="currentFrameSprite" class="px-4 pb-4">
<div v-if="currentFrameSprite" class="px-4 pb-4 flex-shrink-0">
<div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-100 dark:border-gray-700 flex items-center justify-between">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Offset</span>
<span class="text-xs font-mono font-bold text-gray-700 dark:text-gray-200">X: {{ currentFrameSprite.x }} <span class="text-gray-300 dark:text-gray-600 mx-1">|</span> Y: {{ currentFrameSprite.y }}</span>
@@ -193,7 +193,7 @@
</div>
<!-- Frame Selection (when Compare sprites is enabled) -->
<div v-if="showAllSprites" class="border-t border-gray-100 dark:border-gray-700 p-4">
<div v-if="showAllSprites" class="border-t border-gray-100 dark:border-gray-700 p-4 flex-shrink-0">
<div class="flex items-center justify-between mb-3">
<h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Visible Frames</h3>
<div class="flex gap-1">
@@ -513,4 +513,36 @@
cursor: pointer;
border: none;
}
/* Custom scrollbar for controls panel */
.custom-scrollbar::-webkit-scrollbar,
.lg\:overflow-y-auto::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track,
.lg\:overflow-y-auto::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb,
.lg\:overflow-y-auto::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.lg\:overflow-y-auto::-webkit-scrollbar-thumb:hover {
background-color: rgba(156, 163, 175, 0.8);
}
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb,
:global(.dark) .lg\:overflow-y-auto::-webkit-scrollbar-thumb {
background-color: rgba(75, 85, 99, 0.5);
}
:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover,
:global(.dark) .lg\:overflow-y-auto::-webkit-scrollbar-thumb:hover {
background-color: rgba(75, 85, 99, 0.8);
}
</style>