wip

packages/frontend/src/components/MkWatermarkEditorDialog.vue

@@ -0,0 +1,205 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialogEl"
+	:width="1000"
+	:height="600"
+	:scroll="false"
+	:withOkButton="false"
+	@close="cancel()"
+	@closed="emit('closed')"
+>
+	<template #header><i class="ti ti-ripple"></i> {{ i18n.ts.watermark }}</template>
+
+	<div :class="$style.watermarkEditorRoot">
+		<div :class="$style.watermarkEditorInputRoot">
+			<div :class="$style.watermarkEditorPreviewRoot">
+				<MkLoading v-if="canvasLoading" :class="$style.watermarkEditorPreviewSpinner"/>
+				<div :class="$style.watermarkEditorPreviewWrapper">
+					<div class="_acrylic" :class="$style.watermarkEditorPreviewTitle">{{ i18n.ts.preview }}</div>
+				</div>
+			</div>
+			<div :class="$style.watermarkEditorSettings" class="_gaps">
+				<MkSwitch v-model="useWatermark">
+					<template #label>{{ i18n.ts.useWatermark }}</template>
+					<template #caption>{{ i18n.ts.useWatermarkDescription }}</template>
+				</MkSwitch>
+			</div>
+		</div>
+	</div>
+</MkModalWindow>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, ref, computed } from 'vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+
+const emit = defineEmits<{
+	(ev: 'ok'): void;
+	(ev: 'cancel'): void;
+	(ev: 'closed'): void;
+}>();
+
+//#region Modalの制御
+const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
+
+function cancel() {
+	emit('cancel');
+	dialogEl.value?.close();
+}
+
+function close() {
+	dialogEl.value?.close();
+}
+//#endregion
+
+//#region 設定
+const useWatermark = computed(defaultStore.makeGetterSetter('useWatermark'));
+//#endregion
+
+//#region Canvasの制御
+const canvasLoading = ref(true);
+//#endregion
+</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%;
+}
+
+.watermarkEditorInputRoot {
+	height: 100%;
+	display: grid;
+	grid-template-columns: 1fr 400px;
+}
+
+.watermarkEditorPreviewRoot {
+	position: relative;
+	background-color: var(--MI_THEME-bg);
+	background-size: auto auto;
+	background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
+	cursor: not-allowed;
+}
+
+.watermarkEditorPreviewWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	pointer-events: none;
+	user-select: none;
+	-webkit-user-drag: none;
+}
+
+.watermarkEditorPreviewTitle {
+	position: absolute;
+	z-index: 100;
+	top: 8px;
+	left: 8px;
+	padding: 6px 10px;
+	border-radius: 6px;
+	font-size: 85%;
+}
+
+.watermarkEditorPreviewSpinner {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	pointer-events: none;
+	user-select: none;
+	-webkit-user-drag: none;
+}
+
+.watermarkEditorPreviewResizerRoot {
+	position: relative;
+	flex: 1 0;
+}
+
+.watermarkEditorPreviewResizer {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+}
+
+.watermarkEditorPreviewIframe {
+	display: block;
+	border: none;
+	width: 500px;
+	color-scheme: light dark;
+}
+
+.watermarkEditorSettings {
+	padding: 24px;
+	overflow-y: scroll;
+}
+
+.watermarkEditorResultRoot {
+	box-sizing: border-box;
+	padding: 24px;
+	height: 100%;
+	max-width: 700px;
+	margin: 0 auto;
+	display: flex;
+	align-items: center;
+}
+
+.watermarkEditorResultHeading {
+	text-align: center;
+	font-size: 1.2em;
+}
+
+.watermarkEditorResultHeadingIcon {
+	margin: 0 auto;
+	background-color: var(--MI_THEME-accentedBg);
+	color: var(--MI_THEME-accent);
+	text-align: center;
+	height: 64px;
+	width: 64px;
+	font-size: 24px;
+	line-height: 64px;
+	border-radius: 50%;
+}
+
+.watermarkEditorResultDescription {
+	text-align: center;
+	white-space: pre-wrap;
+}
+
+.watermarkEditorResultWrapper,
+.watermarkEditorResultCode {
+	width: 100%;
+}
+
+.watermarkEditorResultButtons {
+	margin: 0 auto;
+}
+
+@container (max-width: 800px) {
+	.watermarkEditorInputRoot {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr 1fr;
+	}
+}
+</style>

packages/frontend/src/components/form/link.vue

@@ -5,30 +5,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="[$style.root, { [$style.inline]: inline }]">
-	<a v-if="external" :class="$style.main" class="_button" :href="to" target="_blank">
+	<component
+		:is="external ? 'a' : to ? MkA : 'button'"
+		:class="[$style.main, { [$style.active]: active }]"
+		class="_button"
+		:v-bind="external ? { href: to, target: '_blank', rel: 'noopener' } : to ? { to, behavior } : {}"
+	>
 		<span :class="$style.icon"><slot name="icon"></slot></span>
 		<span :class="$style.text"><slot></slot></span>
 		<span :class="$style.suffix">
 			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-external-link"></i>
+			<i v-if="external" class="ti ti-external-link"></i>
+			<i v-else class="ti ti-chevron-right"></i>
 		</span>
-	</a>
+	</component>
-	<MkA v-else :class="[$style.main, { [$style.active]: active }]" class="_button" :to="to" :behavior="behavior">
-		<span :class="$style.icon"><slot name="icon"></slot></span>
-		<span :class="$style.text"><slot></slot></span>
-		<span :class="$style.suffix">
-			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-chevron-right"></i>
-		</span>
-	</MkA>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
+import MkA from '@/components/global/MkA.vue';
 
 const props = defineProps<{
-	to: string;
+	to?: string;
 	active?: boolean;
 	external?: boolean;
 	behavior?: null | 'window' | 'browser';

packages/frontend/src/pages/settings/drive.vue

@@ -33,38 +33,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<FormSection>
 		<div class="_gaps_m">
 			<FormLink @click="chooseUploadFolder()">
-				<template #icon><i class="ti ti-folder"/></template>
+				<template #icon><i class="ti ti-folder"></i></template>
 				{{ i18n.ts.uploadFolder }}
 				<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
 			</FormLink>
-			<MkFolder v-if="$i?.policies.canUseWatermark">
-				<template #icon><i class="ti ti-ripple"></i></template>
-				<template #label>{{ i18n.ts.watermark }}</template>
-				<div class="_gaps_s">
-					<MkSwitch v-model="useWatermark">
-						<template #label>{{ i18n.ts.useWatermark }}</template>
-						<template #caption>{{ i18n.ts.useWatermarkDescription }}</template>
-					</MkSwitch>
-					<FormSection>
-						<template #label>{{ i18n.ts.preview }}</template>
-						<div style="display: flex; justify-content: center; align-items: center;">
-							<div style="width: 80%; height: 400px; border: 1px solid #ccc; background-image: url('/client-assets/tutorial/natto_failed.webp'); background-size: cover;">
-								<img src="/client-assets/default-watermark.png" style="width: 100%; height: 100%; object-fit: contain; opacity: 0.5;"/>
-							</div>
-						</div>
-						<FormSplit>
-							<div class="_buttons">
-								<MkButton primary rounded><i class="ti ti-photo"/>{{ i18n.ts.selectFile }}</MkButton>
-								<MkButton danger rounded><i class="ti ti-trash"></i> {{ i18n.ts.defa }}</MkButton>
-							</div>
-						</FormSplit>
-					</FormSection>
-				</div>
-			</MkFolder>
 			<FormLink to="/settings/drive/cleaner">
-				<template #icon><i class="ti ti-file-shredder"/></template>
+				<template #icon><i class="ti ti-file-shredder"></i></template>
 				{{ i18n.ts.drivecleaner }}
 			</FormLink>
+			<FormLink @click="openWatermarkEditor">
+				<template #icon><i class="ti ti-ripple"></i></template>
+				{{ i18n.ts.watermark }}
+				<template #suffix>{{ defaultStore.reactiveState.useWatermark.value ? i18n.ts.enabled : i18n.ts.disabled }}</template>
+			</FormLink>
 			<MkSwitch v-model="keepOriginalUploading">
 				<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
 				<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
@@ -86,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
@@ -102,9 +83,6 @@ import MkChart from '@/components/MkChart.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { signinRequired } from '@/account.js';
-import MkInfo from "@/components/MkInfo.vue";
-import MkButton from "@/components/MkButton.vue";
-import MkFolder from "@/components/MkFolder.vue";
 
 const $i = signinRequired();
 
@@ -130,9 +108,6 @@ const meterStyle = computed(() => {
 const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
 const keepOriginalFilename = computed(defaultStore.makeGetterSetter('keepOriginalFilename'));
 
-const useWatermark = computed(defaultStore.makeGetterSetter('useWatermark'));
-const watermarkConfig = computed(defaultStore.makeGetterSetter('watermarkConfig'));
-
 misskeyApi('drive').then(info => {
 	capacity.value = info.capacity;
 	usage.value = info.usage;
@@ -161,6 +136,12 @@ function chooseUploadFolder() {
 	});
 }
 
+function openWatermarkEditor() {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkWatermarkEditorDialog.vue')), {}, {
+		closed: () => dispose(),
+	});
+}
+
 function saveProfile() {
 	misskeyApi('i/update', {
 		alwaysMarkNsfw: !!alwaysMarkNsfw.value,