apply custom text

This commit is contained in:
Julian Freeman
2026-01-19 08:41:45 -04:00
parent 16bb3e5135
commit e1f2c8efc8
3 changed files with 178 additions and 57 deletions

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { useGalleryStore } from "../stores/gallery";
import { Settings, CheckSquare, Type, Palette, Copy, Eraser, PlusSquare, Brush, Sparkles, Trash2 } from 'lucide-vue-next';
import { Settings, CheckSquare, Type, Palette, Copy, Eraser, PlusSquare, Brush, Sparkles, Trash2, RotateCw } from 'lucide-vue-next';
import { computed } from "vue";
const store = useGalleryStore();
@@ -89,14 +89,23 @@ const applyAll = () => {
<!-- Text Input -->
<div class="flex flex-col gap-2">
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Content</label>
<div class="relative">
<Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
<input
type="text"
v-model="store.watermarkSettings.text"
class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
placeholder="Enter text..."
/>
<div class="flex gap-2">
<div class="relative flex-1">
<Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
<input
type="text"
v-model="store.watermarkSettings.text"
class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
placeholder="Enter text..."
/>
</div>
<button
@click="store.recalcCurrentWatermark()"
class="bg-blue-600 hover:bg-blue-500 text-white p-2 rounded flex items-center justify-center transition-colors"
title="Apply & Recalculate Layout"
>
<RotateCw class="w-4 h-4" />
</button>
</div>
</div>