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

[FEAT] More menu and UI enhancements

Browse Source
This commit is contained in:
root
2026-01-01 18:56:03 +01:00
parent 65bdc2974f
commit a314721a60
8 changed files with 65 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/layout/Navbar.vue
View File

@@ -44,7 +44,14 @@
</div> </div>
<!-- Mobile Menu --> <!-- Mobile Menu -->
<NavbarMobileMenu :is-open="isMobileMenuOpen" @close="isMobileMenuOpen = false" @open-help="$emit('open-help')" /> <NavbarMobileMenu
:is-open="isMobileMenuOpen"
@close="isMobileMenuOpen = false"
@open-help="$emit('open-help')"
@open-save-modal="openSaveModal"
@open-new-project-modal="isNewProjectModalOpen = true"
@open-project-list="isProjectListOpen = true"
/>
</nav> </nav>
<AuthModal :is-open="isAuthModalOpen" @close="isAuthModalOpen = false" /> <AuthModal :is-open="isAuthModalOpen" @close="isAuthModalOpen = false" />
<ProjectList :is-open="isProjectListOpen" @close="isProjectListOpen = false" @open-project="handleOpenProject" /> <ProjectList :is-open="isProjectListOpen" @close="isProjectListOpen = false" @open-project="handleOpenProject" />

2
src/components/layout/navbar/NavbarLogo.vue
View File

@@ -4,7 +4,7 @@
<div class="w-8 h-8 rounded-lg bg-gray-900 dark:bg-white flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform duration-200"> <div class="w-8 h-8 rounded-lg bg-gray-900 dark:bg-white flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform duration-200">
<i class="fas fa-layer-group text-white dark:text-gray-900 text-sm"></i> <i class="fas fa-layer-group text-white dark:text-gray-900 text-sm"></i>
</div> </div>
<span class="font-bold text-xl tracking-tight text-gray-900 dark:text-white group-hover:opacity-80 transition-opacity"> Spritesheet generator </span> <!-- <span class="font-bold text-xl tracking-tight text-gray-900 dark:text-white group-hover:opacity-80 transition-opacity"> Spritesheet generator </span>-->
</router-link> </router-link>
</div> </div>
</template> </template>

24
src/components/layout/navbar/NavbarMobileMenu.vue
View File

@@ -13,6 +13,25 @@
<router-link to="/blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">Blog</router-link> <router-link to="/blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">Blog</router-link>
<router-link to="/about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">About</router-link> <router-link to="/about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">About</router-link>
<router-link to="/faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">FAQ</router-link> <router-link to="/faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">FAQ</router-link>
<router-link to="/faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">FAQ</router-link>
<!-- Project Actions -->
<div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 px-3">
<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Project</p>
<button v-if="isEditorActive" @click="$emit('open-save-modal'); $emit('close')" class="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
<i class="fas fa-save w-5"></i> Save project
</button>
<button @click="$emit('open-new-project-modal'); $emit('close')" class="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
<i class="fas fa-plus w-5"></i> New poject
</button>
<button @click="$emit('open-project-list'); $emit('close')" class="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
<i class="fas fa-folder-open w-5"></i> My projects
</button>
</div>
<div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 flex gap-4 px-3"> <div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 flex gap-4 px-3">
<a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"> <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<i class="fab fa-github text-xl"></i> <i class="fab fa-github text-xl"></i>
@@ -37,10 +56,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterLink } from 'vue-router'; import { RouterLink } from 'vue-router';
import { useProjectManager } from '@/composables/useProjectManager';
const { isEditorActive } = useProjectManager();
defineProps<{ defineProps<{
isOpen: boolean; isOpen: boolean;
}>(); }>();
defineEmits(['close', 'open-help']); defineEmits(['close', 'open-help', 'open-save-modal', 'open-new-project-modal', 'open-project-list']);
</script> </script>

44
src/components/layout/navbar/NavbarProjectActions.vue
View File

@@ -1,11 +1,13 @@
<template> <template>
<div class="flex items-center gap-3 mr-2"> <div class="flex items-center gap-3">
<div class="flex items-center gap-2 group"> <div v-if="isEditorActive" class="flex items-center gap-2 group">
<div class="text-right hidden lg:block"> <div class="text-right hidden lg:block">
<p class="text-[10px] uppercase tracking-wider font-bold text-gray-400 dark:text-gray-500 mb-[-2px]">Current Project</p> <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400 dark:text-gray-500 mb-[-2px]">Current Project</p>
<button @click="$emit('open-save-modal')" class="text-sm font-bold text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors truncate max-w-[160px]" title="Rename Project"> <Tooltip text="Rename project">
{{ projectStore.currentProject?.name || 'Untitled Project' }} <button @click="$emit('open-save-modal')" class="text-sm font-bold text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors truncate max-w-[160px]">
</button> {{ projectStore.currentProject?.name || 'Untitled project' }}
</button>
</Tooltip>
</div> </div>
<!-- Mobile/Tablet simplified view --> <!-- Mobile/Tablet simplified view -->
@@ -14,26 +16,38 @@
</button> </button>
</div> </div>
<div class="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-1"></div> <div v-if="isEditorActive" class="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-1"></div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<button @click="$emit('open-save-modal')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all" title="Save Project"> <Tooltip v-if="isEditorActive" text="Save project">
<i class="fas fa-save"></i> <button @click="$emit('open-save-modal')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all">
</button> <i class="fas fa-save"></i>
<button @click="$emit('open-new-project-modal')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all" title="New Project"> </button>
<i class="fas fa-plus"></i> </Tooltip>
</button>
<button @click="$emit('open-project-list')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all" title="My Projects"> <Tooltip text="New project">
<i class="fas fa-folder-open"></i> <button @click="$emit('open-new-project-modal')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all">
</button> <i class="fas fa-plus"></i>
</button>
</Tooltip>
<Tooltip text="My projects">
<button @click="$emit('open-project-list')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all">
<i class="fas fa-folder-open"></i>
</button>
</Tooltip>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useProjectStore } from '@/stores/useProjectStore'; import { useProjectStore } from '@/stores/useProjectStore';
import { useProjectManager } from '@/composables/useProjectManager';
import Tooltip from '@/components/utilities/Tooltip.vue';
defineEmits(['open-save-modal', 'open-project-list', 'open-new-project-modal']); defineEmits(['open-save-modal', 'open-project-list', 'open-new-project-modal']);
const projectStore = useProjectStore(); const projectStore = useProjectStore();
const { isEditorActive } = useProjectManager();
</script> </script>

2
src/components/project/NewProjectModal.vue
View File

@@ -2,7 +2,7 @@
<Teleport to="body"> <Teleport to="body">
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close"> <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-sm border border-gray-200 dark:border-gray-700"> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-sm border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">New Project</h2> <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">New project</h2>
<form @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div class="grid grid-cols-2 gap-4 mb-4"> <div class="grid grid-cols-2 gap-4 mb-4">
<div> <div>

2
src/components/project/ProjectList.vue
View File

@@ -3,7 +3,7 @@
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close"> <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-2xl p-6 relative border border-gray-200 dark:border-gray-700 max-h-[80vh] flex flex-col"> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-2xl p-6 relative border border-gray-200 dark:border-gray-700 max-h-[80vh] flex flex-col">
<div class="flex items-center justify-between mb-6 shrink-0"> <div class="flex items-center justify-between mb-6 shrink-0">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">My Projects</h2> <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">My projects</h2>
<button @click="close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"> <button @click="close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>
</button> </button>

2
src/components/project/SaveProjectModal.vue
View File

@@ -2,7 +2,7 @@
<Teleport to="body"> <Teleport to="body">
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close"> <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-sm border border-gray-200 dark:border-gray-700"> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-sm border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Save Project</h2> <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Save project</h2>
<form @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Project Name</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Project Name</label>

2
src/views/HomeView.vue
View File

@@ -2,7 +2,7 @@
<main class="flex flex-col flex-1 h-full min-h-0 relative"> <main class="flex flex-col flex-1 h-full min-h-0 relative">
<!-- Welcome / Empty State --> <!-- Welcome / Empty State -->
<div v-if="!isEditorActive" class="flex-1 flex flex-col items-center justify-center pb-12"> <div v-if="!isEditorActive" class="flex-1 flex flex-col items-center justify-center pb-12">
<div class="w-full max-w-[90rem] px-4 sm:px-6 lg:px-8 flex flex-col gap-8 lg:gap-12 items-start"> <div class="w-full flex flex-col gap-8 lg:gap-12 items-start">
<!-- Top Row: Upload Field & Video Side by Side --> <!-- Top Row: Upload Field & Video Side by Side -->
<div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8"> <div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
<!-- File Uploader Component --> <!-- File Uploader Component -->