60 lines
2.2 KiB
Vue
60 lines
2.2 KiB
Vue
<template>
|
|
<header class="flex items-center justify-between bg-gray-800 p-3 shadow-md sticky top-0 z-40">
|
|
<!-- Breadcrumb navigation -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-gray-200">Spritesheet editor</span>
|
|
</div>
|
|
|
|
<!-- Right side actions -->
|
|
<div class="flex gap-3 items-center">
|
|
<!-- Zoom display -->
|
|
<div class="text-sm text-gray-400 mr-2">
|
|
<span>Zoom: {{ Math.round(zoomLevel * 100) }}%</span>
|
|
</div>
|
|
|
|
<!-- Quick zoom controls -->
|
|
<button @click="zoomIn" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Zoom In">
|
|
<i class="fas fa-search-plus"></i>
|
|
</button>
|
|
<button @click="zoomOut" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Zoom Out">
|
|
<i class="fas fa-search-minus"></i>
|
|
</button>
|
|
|
|
<!-- Download button -->
|
|
<tooltip text="Download Spritesheet" position="bottom">
|
|
<button @click="downloadSpritesheet" :disabled="sprites.length === 0" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
</tooltip>
|
|
|
|
<!-- Help button -->
|
|
<tooltip text="Keyboard Shortcuts" position="bottom">
|
|
<button @click="openHelpModal" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors">
|
|
<i class="fas fa-keyboard"></i>
|
|
</button>
|
|
</tooltip>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
|
import Tooltip from './Tooltip.vue';
|
|
|
|
const store = useSpritesheetStore();
|
|
const zoomLevel = computed(() => store.zoomLevel.value);
|
|
const sprites = computed(() => store.sprites.value);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'toggleHelp'): void;
|
|
}>();
|
|
|
|
const openHelpModal = () => {
|
|
store.isHelpModalOpen.value = true;
|
|
};
|
|
|
|
// Expose store methods directly
|
|
const { zoomIn, zoomOut, downloadSpritesheet } = store;
|
|
</script>
|