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

UI and application enhancements

Browse Source
This commit is contained in:
root
2025-08-09 15:46:41 +02:00
parent 6953a41ca4
commit f8d9d2ae83
7 changed files with 371 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/utilities/Modal.vue
View File

@@ -11,16 +11,16 @@
height: isFullScreen ? '100%' : `${size.height}px`,
}"
class="bg-white dark:bg-gray-800 rounded-2xl border-2 border-gray-300 dark:border-gray-700 shadow-xl flex flex-col fixed z-50 transition-colors duration-300"
:class="{ 'rounded-none border-0': isFullScreen }"
:class="{ 'rounded-none border-0': isFullScreen, 'select-none': isDragging }"
>
<!-- Header with drag handle -->
<div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700" :class="{ 'cursor-move': !isFullScreen && !isMobile }">
<h3 class="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-gray-100 truncate pr-2" @mousedown="startDrag" @touchstart="handleTouchStart">{{ title }}</h3>
<div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700" :class="{ 'cursor-move': !isFullScreen && !isMobile }" @mousedown="startDrag" @touchstart="handleTouchStart">
<h3 class="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-gray-100 truncate pr-2">{{ title }}</h3>
<div class="flex items-center space-x-2">
<button @click="toggleFullScreen" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" data-rybbit-event="modal-fullscreen">
<button @click="toggleFullScreen" @mousedown.stop @touchstart.stop class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" data-rybbit-event="modal-fullscreen">
<img src="@/assets/images/fullscreen-icon.svg" class="w-4 h-4 dark:invert" alt="Fullscreen" :class="{ 'rotate-180': isFullScreen }" />
</button>
<button @click="close" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" data-rybbit-event="modal-close">
<button @click="close" @mousedown.stop @touchstart.stop class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" data-rybbit-event="modal-close">
<img src="@/assets/images/close-icon.svg" class="w-5 h-5 dark:invert" alt="Close" />
</button>
</div>
@@ -161,7 +161,7 @@
isDragging.value = false;
isResizing.value = false;
document.removeEventListener('mousemove', handleMove);
document.removeEventListener('touchmove', handleTouchMove); // Fix: was handleMove
document.removeEventListener('touchmove', handleTouchMove, false); // Fix: ensure matching capture option
document.removeEventListener('mouseup', stopAction);
document.removeEventListener('touchend', stopAction);
};