Merge 0527331f50 into f123be38b9

locales/index.d.ts

@@ -4549,7 +4549,7 @@ export interface Locale extends ILocale {
     /**
      * 透明度
      */
-    "transparency": string;
+    "opacity": string;
     /**
      * サーバールール
      */

locales/ja-JP.yml

@@ -1132,7 +1132,7 @@ vertical: "縦"
 horizontal: "横"
 position: "位置"
 rotate: "回転"
-transparency: "透明度"
+opacity: "透明度"
 serverRules: "サーバールール"
 pleaseConfirmBelowBeforeSignup: "このサーバーに登録するには、以下の内容を確認し同意する必要があります。"
 pleaseAgreeAllToContinue: "続けるには、全ての「同意する」にチェックが入っている必要があります。"

packages/frontend/src/components/MkDrive.vue

@@ -106,6 +106,7 @@ import XFile from '@/components/MkDrive.file.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
+import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { uploadFile, uploads } from '@/scripts/upload.js';

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -41,8 +41,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #label>{{ i18n.ts.size }}</template>
 					</MkRange>
 
-					<MkRange v-model="transparency" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`">
-						<template #label>{{ i18n.ts.transparency }}</template>
+					<MkRange v-model="opacity" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`">
+						<template #label>{{ i18n.ts.opacity }}</template>
 					</MkRange>
 
 					<MkRange v-model="rotate" :min="-45" :max="45" :textConverter="(v) => `${Math.floor(v)}°`">
@@ -158,16 +158,16 @@ const repeat = computed({
 	get: () => watermarkConfig.value?.repeat ?? true,
 	set: (v) => watermarkConfig.value = { ...watermarkConfig.value, repeat: v },
 });
-const transparency = computed({
-	get: () => 1 - (watermarkConfig.value?.opacity ?? 0.2),
-	set: (v) => watermarkConfig.value = { ...watermarkConfig.value, opacity: (1 - v) },
+const opacity = computed({
+	get: () => watermarkConfig.value?.opacity ?? 0.2,
+	set: (v) => watermarkConfig.value = { ...watermarkConfig.value, opacity: v },
 });
 const rotate = computed({
 	get: () => watermarkConfig.value?.rotate ?? 15,
 	set: (v) => watermarkConfig.value = { ...watermarkConfig.value, rotate: v },
 });
 const preserveBoundingRect = computed({
-	get: () => !(watermarkConfig.value?.noBoundingBoxExpansion ?? false),
+	get: () => watermarkConfig.value?.noBoundingBoxExpansion ?? false,
 	set: (v) => watermarkConfig.value = { ...watermarkConfig.value, noBoundingBoxExpansion: !v },
 });
 
@@ -294,6 +294,19 @@ const focusedForm = ref<'top' | 'left' | 'right' | 'bottom' | null>(null);
 </script>
 
 <style module>
+.transition_x_enterActive,
+.transition_x_leaveActive {
+	transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
+}
+.transition_x_enterFrom {
+	opacity: 0;
+	transform: translateX(50px);
+}
+.transition_x_leaveTo {
+	opacity: 0;
+	transform: translateX(-50px);
+}
+
 .watermarkEditorRoot {
 	container-type: inline-size;
 	height: 100%;

packages/frontend/src/scripts/select-file.ts

@@ -11,8 +11,8 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
 import { uploadFile } from '@/scripts/upload.js';
-import { canApplyWatermark } from '@/scripts/watermark.js';
 import type { MenuItem } from '@/types/menu.js';
+import { canApplyWatermark } from './watermark.js';
 
 export function chooseFileFromPc(opts?: {
 	multiple?: boolean;

packages/frontend/src/scripts/upload.ts

@@ -14,7 +14,7 @@ import { $i } from '@/account.js';
 import { alert } from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
-import { canApplyWatermark, getWatermarkAppliedImage } from '@/scripts/watermark.js';
+import { canApplyWatermark, getWatermarkAppliedImage } from './watermark.js';
 
 type Uploading = {
 	id: string;

packages/frontend/src/scripts/watermark.ts

@@ -2,10 +2,9 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-import { getProxiedImageUrl } from '@/scripts/media-proxy.js';
-import { misskeyApi } from '@/scripts/misskey-api.js';
-import { defaultStore } from '@/store.js';
+import { getProxiedImageUrl } from "@/scripts/media-proxy.js";
+import { misskeyApi } from "@/scripts/misskey-api.js";
+import { defaultStore } from "@/store.js";
 
 export const watermarkAnchor = [
 	'top-left',
@@ -34,7 +33,7 @@ export type WatermarkUserConfig = {
 	fileUrl?: string;
 	/** 親画像に対するウォーターマークの幅比率。ない場合は1。親画像が縦長の場合は幅の比率として、横長の場合は高さ比率として使用される */
 	sizeRatio?: number;
-	/** 不透明度 */
+	/** 透明度 */
 	opacity?: number;
 	/** 回転角度（度数） */
 	rotate?: number;
@@ -70,7 +69,7 @@ export type WatermarkConfig = {
 	fileUrl?: string;
 	/** 親画像に対するウォーターマークの幅比率。ない場合は1。親画像が縦長の場合は幅の比率として、横長の場合は高さ比率として使用される */
 	sizeRatio?: number;
-	/** 不透明度 */
+	/** 透明度 */
 	opacity?: number;
 	/** 回転角度（度数） */
 	rotate?: number;