julian/watermark-wizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

seperate size

Browse Source
This commit is contained in:
Julian Freeman
2026-01-19 00:48:16 -04:00
parent 3e5d5aa848
commit fd90ac1df3
5 changed files with 103 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/SettingsPanel.vue
View File

@@ -1,15 +1,54 @@
<script setup lang="ts">
import { useGalleryStore } from "../stores/gallery";
import { Settings, CheckSquare, Type, Palette } from 'lucide-vue-next';
import { Settings, CheckSquare, Type, Palette, Copy } from 'lucide-vue-next';
import { computed } from "vue";
const store = useGalleryStore();
// Computed properties to handle "Get from Image OR Global" and "Set to Image" logic
const currentScale = computed({
get: () => store.selectedImage?.scale ?? store.watermarkSettings.scale,
set: (val) => {
if (store.selectedIndex >= 0) {
store.setImageSetting(store.selectedIndex, 'scale', val);
} else {
store.updateWatermarkSettings({ scale: val });
}
}
});
const currentOpacity = computed({
get: () => store.selectedImage?.opacity ?? store.watermarkSettings.opacity,
set: (val) => {
if (store.selectedIndex >= 0) {
store.setImageSetting(store.selectedIndex, 'opacity', val);
} else {
store.updateWatermarkSettings({ opacity: val });
}
}
});
const applyAll = () => {
if (confirm("Apply current size and opacity settings to ALL images? This will reset individual adjustments.")) {
store.applySettingsToAll();
}
};
</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 class="text-lg font-bold flex items-center justify-between">
<div class="flex items-center gap-2">
<Settings class="w-5 h-5" />
Settings
</div>
<button
@click="applyAll"
title="Apply Size & Opacity to All Images"
class="bg-gray-700 hover:bg-gray-600 p-1.5 rounded text-xs text-blue-300 transition-colors flex items-center gap-1"
>
<Copy class="w-3 h-3" /> All
</button>
</h2>
<!-- Text Input -->
@@ -45,15 +84,14 @@ const store = useGalleryStore();
<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>
<span class="text-xs text-gray-300">{{ (currentScale * 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) })"
v-model.number="currentScale"
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>
@@ -62,15 +100,14 @@ const store = useGalleryStore();
<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>
<span class="text-xs text-gray-300">{{ (currentOpacity * 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) })"
v-model.number="currentOpacity"
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
/>
</div>