mirror of
https://github.com/misskey-dev/misskey.git
synced 2025-01-26 03:20:54 +09:00
paddingのUIを追加
This commit is contained in:
kakkokari-gtyih
parent
ff9af2c34c
commit
76f6219249
4
locales/index.d.ts
vendored
4
locales/index.d.ts
vendored
@ -10678,6 +10678,10 @@ export interface Locale extends ILocale {
|
||||
* 全体を埋め尽くす
|
||||
*/
|
||||
"repeat": string;
|
||||
/**
|
||||
* 余白
|
||||
*/
|
||||
"padding": string;
|
||||
};
|
||||
}
|
||||
declare const locales: {
|
||||
|
||||
@ -2847,3 +2847,4 @@ _watermarkEditor:
|
||||
driveFileTypeWarnDescription: "画像ファイルを選択してください"
|
||||
repeatSetting: "描画モード"
|
||||
repeat: "全体を埋め尽くす"
|
||||
padding: "余白"
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<svg version="1.1" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :class="$style.graphic">
|
||||
<defs>
|
||||
<marker id="Arrow3" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
|
||||
<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
|
||||
</marker>
|
||||
<pattern id="pattern5942" patternTransform="matrix(1.452 1.452 -3.1368 3.8697 -1.7474 -2.9488)" xlink:href="#Strips1_1white" />
|
||||
<pattern id="Strips1_1white" width="2" height="1" patternTransform="translate(0) scale(10)" patternUnits="userSpaceOnUse">
|
||||
<rect y="-.5" width="1" height="2" fill="var(--MI_THEME-panel)" />
|
||||
</pattern>
|
||||
<marker id="Arrow3-6" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
|
||||
<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
|
||||
</marker>
|
||||
<marker id="Arrow3-6-9" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
|
||||
<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
|
||||
</marker>
|
||||
<marker id="Arrow3-6-9-1" overflow="visible" markerHeight="6" markerWidth="4.2069998" orient="auto-start-reverse" preserveAspectRatio="none" viewBox="0 0 4.2071068 7">
|
||||
<path transform="rotate(180 .125 0)" d="m3-3-3 3 3 3" fill="none" stroke="context-stroke" stroke-linecap="round" />
|
||||
</marker>
|
||||
</defs>
|
||||
<g transform="translate(-21.709 -14.787)" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g fill-rule="evenodd">
|
||||
<rect x="21.709" y="14.787" width="120" height="80" fill="var(--MI_THEME-bg)" stop-color="#000000" stroke-dasharray="1.1384, 3.4152" stroke-width="1.1384" style="mix-blend-mode:normal" />
|
||||
<rect x="21.709" y="14.787" width="120" height="80" fill="url(#pattern5942)" stop-color="#000000" stroke-dasharray="1.1384, 3.4152" stroke-width="1.1384" style="mix-blend-mode:normal" />
|
||||
<rect x="47.101" y="40.105" width="69.216" height="29.364" ry="5.3019" fill="var(--MI_THEME-accentDarken)" stop-color="#000000" stroke-dasharray="1.13855, 3.41565" stroke-width="1.1386" />
|
||||
</g>
|
||||
<g fill="none" stroke="var(--MI_THEME-error)">
|
||||
<path v-if="props.arrow === 'top'" d="m81.709 16.167 2e-6 22.601" marker-end="url(#Arrow3)" marker-start="url(#Arrow3)" stop-color="#000000" stroke-width="1.3038" />
|
||||
<path v-else-if="props.arrow === 'left'" d="m23.011 54.787 22.751-4e-6" marker-end="url(#Arrow3-6)" marker-start="url(#Arrow3-6)" stop-color="#000000" stroke-width="1.322" />
|
||||
<path v-else-if="props.arrow === 'bottom'" d="m81.709 70.772-1e-6 22.647" marker-end="url(#Arrow3-6-9)" marker-start="url(#Arrow3-6-9)" stop-color="#000000" stroke-width="1.2715" />
|
||||
<path v-else-if="props.arrow === 'right'" d="m117.58 54.787 22.828 5e-6" marker-end="url(#Arrow3-6-9-1)" marker-start="url(#Arrow3-6-9-1)" stop-color="#000000" stroke-width="1.285" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
arrow: 'top' | 'bottom' | 'left' | 'right' | null;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
.root {
|
||||
border-radius: var(--MI-radius);
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
border: thin solid var(--MI_THEME-divider);
|
||||
max-width: 242px; /* 240px + 左右ボーダー2px */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.graphic {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
@ -62,6 +62,31 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<div :class="$style.formLabel">{{ i18n.ts.position }}</div>
|
||||
<XAnchorSelector v-model="anchor"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div :class="$style.formLabel">{{ i18n.ts._watermarkEditor.padding }}</div>
|
||||
<div class="_gaps">
|
||||
<XPaddingView :arrow="focusedForm"/>
|
||||
<div class="_gaps_s">
|
||||
<MkInput v-model="paddingTop" debounce @focus="focusedForm = 'top'" @blur="focusedForm = null">
|
||||
<template #prefix><i class="ti ti-border-top"></i></template>
|
||||
<template #suffix>px</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="paddingLeft" debounce @focus="focusedForm = 'left'" @blur="focusedForm = null">
|
||||
<template #prefix><i class="ti ti-border-left"></i></template>
|
||||
<template #suffix>px</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="paddingRight" debounce @focus="focusedForm = 'right'" @blur="focusedForm = null">
|
||||
<template #prefix><i class="ti ti-border-right"></i></template>
|
||||
<template #suffix>px</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="paddingBottom" debounce @focus="focusedForm = 'bottom'" @blur="focusedForm = null">
|
||||
<template #prefix><i class="ti ti-border-bottom"></i></template>
|
||||
<template #suffix>px</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@ -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
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user