98 lines
4.2 KiB
Vue
98 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import { useGalleryStore } from "../stores/gallery";
|
|
import { Settings, CheckSquare, Type, Palette } from 'lucide-vue-next';
|
|
|
|
const store = useGalleryStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full bg-gray-800 text-white p-4 flex flex-col gap-6 overflow-y-auto border-l border-gray-700 w-80">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<Settings class="w-5 h-5" />
|
|
Watermark Settings
|
|
</h2>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<!-- Color Picker -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Color</label>
|
|
<div class="flex items-center gap-2 bg-gray-700 p-2 rounded border border-gray-600">
|
|
<Palette class="w-4 h-4 text-gray-400" />
|
|
<input
|
|
type="color"
|
|
v-model="store.watermarkSettings.color"
|
|
class="w-8 h-8 rounded cursor-pointer bg-transparent border-none p-0"
|
|
/>
|
|
<span class="text-xs text-gray-300 font-mono">{{ store.watermarkSettings.color }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<label class="text-xs text-gray-400">Size (Scale)</label>
|
|
<span class="text-xs text-gray-300">{{ (store.watermarkSettings.scale * 100).toFixed(1) }}%</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0.01"
|
|
max="0.20"
|
|
step="0.001"
|
|
:value="store.watermarkSettings.scale"
|
|
@input="e => store.updateWatermarkSettings({ scale: parseFloat((e.target as HTMLInputElement).value) })"
|
|
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
|
/>
|
|
<p class="text-[10px] text-gray-500 mt-1">Relative to image height</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<label class="text-xs text-gray-400">Opacity</label>
|
|
<span class="text-xs text-gray-300">{{ (store.watermarkSettings.opacity * 100).toFixed(0) }}%</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0.1"
|
|
max="1.0"
|
|
step="0.01"
|
|
:value="store.watermarkSettings.opacity"
|
|
@input="e => store.updateWatermarkSettings({ opacity: parseFloat((e.target as HTMLInputElement).value) })"
|
|
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Placement Mode -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Placement</label>
|
|
<div class="flex items-center gap-2 p-2 rounded bg-gray-700/50 border border-gray-600">
|
|
<div class="p-1 rounded bg-green-500/20 text-green-400">
|
|
<CheckSquare class="w-4 h-4" v-if="!store.watermarkSettings.manual_override" />
|
|
<div class="w-4 h-4" v-else></div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-gray-200">Smart Auto-Placement</p>
|
|
<p class="text-xs text-gray-500">Uses ZCA algorithm for each image</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1 italic">
|
|
* Dragging the watermark in the preview will enable Manual Override for all images.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|