mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-27 10:20:27 +01:00
wip
This commit is contained in:
kakkokari-gtyih
parent
a0fc59bd4b
commit
ba147c08fc
3 changed files with 230 additions and 45 deletions
205
packages/frontend/src/components/MkWatermarkEditorDialog.vue
Normal file
205
packages/frontend/src/components/MkWatermarkEditorDialog.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<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>
|
||||
</component>
|
||||
</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';
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue