diff --git a/locales/index.d.ts b/locales/index.d.ts index a3cb8e1799..172ef94b9b 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -10678,6 +10678,10 @@ export interface Locale extends ILocale { * 全体を埋め尽くす */ "repeat": string; + /** + * 余白 + */ + "padding": string; }; } declare const locales: { diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 7f098e0e0d..dcd7190b63 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -2847,3 +2847,4 @@ _watermarkEditor: driveFileTypeWarnDescription: "画像ファイルを選択してください" repeatSetting: "描画モード" repeat: "全体を埋め尽くす" + padding: "余白" diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue index 08817fd6a8..9afe4758c6 100644 --- a/packages/frontend/src/components/MkInput.vue +++ b/packages/frontend/src/components/MkInput.vue @@ -27,8 +27,8 @@ SPDX-License-Identifier: AGPL-3.0-only :list="id" :min="min" :max="max" - @focus="focused = true" - @blur="focused = false" + @focus="onFocus" + @blur="onBlur" @keydown="onKeydown($event)" @input="onInput" > @@ -80,6 +80,8 @@ const emit = defineEmits<{ (ev: 'change', _ev: KeyboardEvent): void; (ev: 'keydown', _ev: KeyboardEvent): void; (ev: 'enter', _ev: KeyboardEvent): void; + (ev: 'focus', _ev: FocusEvent): void; + (ev: 'blur', _ev: FocusEvent): void; (ev: 'update:modelValue', value: string | number): void; }>(); @@ -114,6 +116,14 @@ const onKeydown = (ev: KeyboardEvent) => { emit('enter', ev); } }; +const onFocus = (ev: FocusEvent) => { + focused.value = true; + emit('focus', ev); +}; +const onBlur = (ev: FocusEvent) => { + focused.value = false; + emit('blur', ev); +}; const updated = () => { changed.value = false; diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.padding.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.padding.vue new file mode 100644 index 0000000000..7451d09b5f --- /dev/null +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.padding.vue @@ -0,0 +1,66 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue index 6fcbb46946..936d7a4fe5 100644 --- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue +++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue @@ -62,6 +62,31 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.position }}
+ +
+
{{ i18n.ts._watermarkEditor.padding }}
+
+ +
+ + + + + + + + + + + + + + + + +
+
+
@@ -78,6 +103,7 @@ import MkSwitch from '@/components/MkSwitch.vue'; import MkInput from '@/components/MkInput.vue'; import MkRange from '@/components/MkRange.vue'; import XAnchorSelector from '@/components/MkWatermarkEditorDialog.anchor.vue'; +import XPaddingView from '@/components/MkWatermarkEditorDialog.padding.vue'; import * as os from '@/os.js'; import { defaultStore } from '@/store.js'; @@ -140,6 +166,33 @@ const rotate = computed({ get: () => watermarkConfig.value?.rotate ?? 15, set: (v) => watermarkConfig.value = { ...watermarkConfig.value, rotate: v }, }); +function setPadding(pos: 'top' | 'left' | 'right' | 'bottom', val: number) { + const padding = { + top: 0, + left: 0, + right: 0, + bottom: 0, + ...watermarkConfig.value?.padding, + [pos]: val, + }; + watermarkConfig.value = { ...watermarkConfig.value, padding }; +} +const paddingTop = computed({ + get: () => watermarkConfig.value?.padding?.top ?? 0, + set: (v) => setPadding('top', v), +}); +const paddingLeft = computed({ + get: () => watermarkConfig.value?.padding?.left ?? 0, + set: (v) => setPadding('left', v), +}); +const paddingRight = computed({ + get: () => watermarkConfig.value?.padding?.right ?? 0, + set: (v) => setPadding('right', v), +}); +const paddingBottom = computed({ + get: () => watermarkConfig.value?.padding?.bottom ?? 0, + set: (v) => setPadding('bottom', v), +}); //#endregion //#region ファイル選択 @@ -210,6 +263,10 @@ onMounted(() => { } }, { immediate: true, deep: true }); }); +//#endregion + +//#region paddingViewの制御 +const focusedForm = ref<'top' | 'left' | 'right' | 'bottom' | null>(null); //#endregion