[FEAT] UI enhancements
This commit is contained in:
@@ -178,8 +178,33 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Canvas Grid Settings -->
|
||||
<!-- Alignment Tools (Always visible) -->
|
||||
<section>
|
||||
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">Alignment</h3>
|
||||
<div class="card p-2 bg-gray-50/50 dark:bg-gray-800/40 grid grid-cols-3 gap-2">
|
||||
<Tooltip text="Align sprites to the left edge">
|
||||
<button @click="alignSprites('left')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-left"></i>Left</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Center sprites horizontally">
|
||||
<button @click="alignSprites('center')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrows-left-right"></i>Center</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Align sprites to the right edge">
|
||||
<button @click="alignSprites('right')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-right"></i>Right</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Align sprites to the top edge">
|
||||
<button @click="alignSprites('top')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-up"></i>Top</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Center sprites vertically">
|
||||
<button @click="alignSprites('middle')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrows-up-down"></i>Middle</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Align sprites to the bottom edge">
|
||||
<button @click="alignSprites('bottom')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-down"></i>Bottom</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Canvas Grid Settings (Editor only) -->
|
||||
<section v-if="activeTab === 'canvas'">
|
||||
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">Grid Layout</h3>
|
||||
<div class="card p-3 bg-gray-50/50 dark:bg-gray-800/40 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
@@ -201,8 +226,8 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- View Options -->
|
||||
<section>
|
||||
<!-- View Options (Editor only) -->
|
||||
<section v-if="activeTab === 'canvas'">
|
||||
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">View Options</h3>
|
||||
<div class="card p-2 bg-gray-50/50 dark:bg-gray-800/40 grid grid-cols-2 gap-2">
|
||||
<Tooltip text="Disable anti-aliasing for crisp pixel art rendering">
|
||||
@@ -253,8 +278,8 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tools -->
|
||||
<section>
|
||||
<!-- Tools (Editor only) -->
|
||||
<section v-if="activeTab === 'canvas'">
|
||||
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">Tools</h3>
|
||||
<div class="card p-2 bg-gray-50/50 dark:bg-gray-800/40 space-y-2">
|
||||
<div class="flex gap-2">
|
||||
@@ -289,31 +314,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Alignment Tools -->
|
||||
<section>
|
||||
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">Alignment</h3>
|
||||
<div class="card p-2 bg-gray-50/50 dark:bg-gray-800/40 grid grid-cols-3 gap-2">
|
||||
<Tooltip text="Align sprites to the left edge">
|
||||
<button @click="alignSprites('left')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-left"></i>Left</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Center sprites horizontally">
|
||||
<button @click="alignSprites('center')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrows-left-right"></i>Center</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Align sprites to the right edge">
|
||||
<button @click="alignSprites('right')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-right"></i>Right</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Align sprites to the top edge">
|
||||
<button @click="alignSprites('top')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-up"></i>Top</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Center sprites vertically">
|
||||
<button @click="alignSprites('middle')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrows-up-down"></i>Middle</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Align sprites to the bottom edge">
|
||||
<button @click="alignSprites('bottom')" class="w-full flex items-center justify-start gap-2 p-2 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><i class="fas fa-arrow-down"></i>Bottom</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Footer (Export) -->
|
||||
@@ -370,7 +370,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div v-if="activeTab === 'canvas'" class="flex items-center gap-2">
|
||||
<div class="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
|
||||
<button @click="zoomOut" class="p-1.5 hover:bg-white dark:hover:bg-gray-700 rounded text-gray-500 transition-colors"><i class="fas fa-minus text-xs"></i></button>
|
||||
<span class="text-xs font-mono w-12 text-center text-gray-600 dark:text-gray-300">{{ Math.round(zoom * 100) }}%</span>
|
||||
|
||||
Reference in New Issue
Block a user