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

[FEAT] Improved UI

Browse Source
This commit is contained in:
root
2025-12-17 22:07:26 +01:00
parent b5e105b127
commit 784c95555f
3 changed files with 218 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/HomeView.vue
View File

@@ -90,7 +90,7 @@
Layers
</h3>
<div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
<button @click="addLayer()" class="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded text-gray-600 dark:text-gray-300 transition-colors" title="Add new layer">
<button @click="addLayer()" class="text-xs px-2 py-0.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded text-gray-600 dark:text-gray-300 transition-colors cursor-pointer" title="Add new layer">
<i class="fas fa-plus text-[9px]"></i>
</button>
</div>
@@ -101,7 +101,7 @@
class="flex items-center gap-1.5 px-2 py-1.5 bg-white dark:bg-gray-800 border rounded-md transition-all text-sm"
:class="[layer.id === activeLayerId ? 'border-gray-700 ring-1 ring-gray-700 dark:border-gray-400 dark:ring-gray-400' : 'border-gray-200 dark:border-gray-700', !layer.visible ? 'opacity-40' : '']"
>
<button @click.stop="layer.visible = !layer.visible" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" :title="layer.visible ? 'Hide' : 'Show'">
<button @click.stop="layer.visible = !layer.visible" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" :title="layer.visible ? 'Hide' : 'Show'">
<i :class="[layer.visible ? 'fas fa-eye text-gray-600 dark:text-gray-300' : 'fas fa-eye-slash text-gray-400', 'text-xs']"></i>
</button>
<input
@@ -119,16 +119,16 @@
{{ layer.name }}<span v-if="layer.sprites.length" class="ml-1 opacity-50">({{ layer.sprites.length }})</span>
</button>
<div class="flex items-center gap-0.5" v-if="editingLayerId !== layer.id">
<button @click="startEditingLayer(layer.id, layer.name)" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Rename">
<button @click="startEditingLayer(layer.id, layer.name)" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Rename">
<i class="fas fa-pen text-[9px] text-gray-400"></i>
</button>
<button @click="moveLayer(layer.id, 'up')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Move up">
<button @click="moveLayer(layer.id, 'up')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Move up">
<i class="fas fa-chevron-up text-[9px] text-gray-400"></i>
</button>
<button @click="moveLayer(layer.id, 'down')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Move down">
<button @click="moveLayer(layer.id, 'down')" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Move down">
<i class="fas fa-chevron-down text-[9px] text-gray-400"></i>
</button>
<button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="p-1 rounded hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors" title="Delete">
<button v-if="layers.length > 1" @click="removeLayer(layer.id)" class="p-1 rounded hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors cursor-pointer" title="Delete">
<i class="fas fa-trash text-[9px] text-red-400"></i>
</button>
</div>
@@ -177,22 +177,22 @@
<div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
</div>
<div class="grid grid-cols-6 gap-1">
<button @click="alignSprites('left')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Left">
<button @click="alignSprites('left')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Left">
<i class="fas fa-arrow-left text-xs text-gray-500"></i>
</button>
<button @click="alignSprites('center')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Center Horizontally">
<button @click="alignSprites('center')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Center Horizontally">
<i class="fas fa-arrows-left-right text-xs text-gray-500"></i>
</button>
<button @click="alignSprites('right')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Right">
<button @click="alignSprites('right')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Right">
<i class="fas fa-arrow-right text-xs text-gray-500"></i>
</button>
<button @click="alignSprites('top')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Top">
<button @click="alignSprites('top')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Top">
<i class="fas fa-arrow-up text-xs text-gray-500"></i>
</button>
<button @click="alignSprites('middle')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Center Vertically">
<button @click="alignSprites('middle')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Center Vertically">
<i class="fas fa-arrows-up-down text-xs text-gray-500"></i>
</button>
<button @click="alignSprites('bottom')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" title="Align Bottom">
<button @click="alignSprites('bottom')" class="p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer" title="Align Bottom">
<i class="fas fa-arrow-down text-xs text-gray-500"></i>
</button>
</div>
@@ -208,26 +208,36 @@
<div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
</div>
<div class="grid grid-cols-4 gap-1.5 mb-2">
<button @click="downloadSpritesheet" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="download-spritesheet" title="Download as PNG image">
<button
@click="downloadSpritesheet"
class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer"
data-rybbit-event="download-spritesheet"
title="Download as PNG image"
>
<i class="fas fa-image text-sm mb-0.5"></i>
<span class="text-[10px] font-medium">PNG</span>
</button>
<button @click="exportSpritesheetJSON" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="export-json" title="Export project data as JSON">
<button
@click="exportSpritesheetJSON"
class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer"
data-rybbit-event="export-json"
title="Export project data as JSON"
>
<i class="fas fa-file-code text-sm mb-0.5"></i>
<span class="text-[10px] font-medium">JSON</span>
</button>
<button @click="openGifFpsModal" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="download-gif" title="Export as animated GIF">
<button @click="openGifFpsModal" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer" data-rybbit-event="download-gif" title="Export as animated GIF">
<i class="fas fa-film text-sm mb-0.5"></i>
<span class="text-[10px] font-medium">GIF</span>
</button>
<button @click="downloadAsZip" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors" data-rybbit-event="download-zip" title="Download all sprites as ZIP">
<button @click="downloadAsZip" class="flex flex-col items-center justify-center p-2.5 bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 rounded-lg text-white transition-colors cursor-pointer" data-rybbit-event="download-zip" title="Download all sprites as ZIP">
<i class="fas fa-file-archive text-sm mb-0.5"></i>
<span class="text-[10px] font-medium">ZIP</span>
</button>
</div>
<button
@click="openShareModal"
class="w-full flex items-center justify-center gap-2 p-2.5 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-lg text-white text-sm font-medium transition-all shadow-sm hover:shadow-md"
class="w-full flex items-center justify-center gap-2 p-2.5 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-lg text-white text-sm font-medium transition-all shadow-sm hover:shadow-md cursor-pointer"
data-rybbit-event="share-spritesheet"
title="Generate shareable link"
>