Merge branch 'develop' into notification-read-api
This commit is contained in:
tamaina
commit
b65506d32e
20 changed files with 204 additions and 116 deletions
|
|
@ -1,2 +1,47 @@
|
|||
export const USER_ONLINE_THRESHOLD = 1000 * 60 * 10; // 10min
|
||||
export const USER_ACTIVE_THRESHOLD = 1000 * 60 * 60 * 24 * 3; // 3days
|
||||
|
||||
// ブラウザで直接表示することを許可するファイルの種類のリスト
|
||||
// ここに含まれないものは application/octet-stream としてレスポンスされる
|
||||
// SVGはXSSを生むので許可しない
|
||||
export const FILE_TYPE_BROWSERSAFE = [
|
||||
// Images
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/jpeg',
|
||||
'image/webp',
|
||||
'image/apng',
|
||||
'image/bmp',
|
||||
'image/tiff',
|
||||
'image/x-icon',
|
||||
|
||||
// OggS
|
||||
'audio/opus',
|
||||
'video/ogg',
|
||||
'audio/ogg',
|
||||
'application/ogg',
|
||||
|
||||
// ISO/IEC base media file format
|
||||
'video/quicktime',
|
||||
'video/mp4',
|
||||
'audio/mp4',
|
||||
'video/x-m4v',
|
||||
'audio/x-m4a',
|
||||
'video/3gpp',
|
||||
'video/3gpp2',
|
||||
|
||||
'video/mpeg',
|
||||
'audio/mpeg',
|
||||
|
||||
'video/webm',
|
||||
'audio/webm',
|
||||
|
||||
'audio/aac',
|
||||
'audio/x-flac',
|
||||
'audio/vnd.wave',
|
||||
];
|
||||
/*
|
||||
https://github.com/sindresorhus/file-type/blob/main/supported.js
|
||||
https://github.com/sindresorhus/file-type/blob/main/core.js
|
||||
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -99,7 +99,10 @@ export async function getFileInfo(path: string): Promise<FileInfo> {
|
|||
/**
|
||||
* Detect MIME Type and extension
|
||||
*/
|
||||
export async function detectType(path: string) {
|
||||
export async function detectType(path: string): Promise<{
|
||||
mime: string;
|
||||
ext: string | null;
|
||||
}> {
|
||||
// Check 0 byte
|
||||
const fileSize = await getFileSize(path);
|
||||
if (fileSize === 0) {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { detectType } from '@/misc/get-file-info';
|
|||
import { convertToJpeg, convertToPngOrJpeg } from '@/services/drive/image-processor';
|
||||
import { GenerateVideoThumbnail } from '@/services/drive/generate-video-thumbnail';
|
||||
import { StatusError } from '@/misc/fetch';
|
||||
import { FILE_TYPE_BROWSERSAFE } from '@/const';
|
||||
|
||||
//const _filename = fileURLToPath(import.meta.url);
|
||||
const _filename = __filename;
|
||||
|
|
@ -27,6 +28,7 @@ const commonReadableHandlerGenerator = (ctx: Koa.Context) => (e: Error): void =>
|
|||
ctx.set('Cache-Control', 'max-age=300');
|
||||
};
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default async function(ctx: Koa.Context) {
|
||||
const key = ctx.params.key;
|
||||
|
||||
|
|
@ -81,7 +83,7 @@ export default async function(ctx: Koa.Context) {
|
|||
|
||||
const image = await convertFile();
|
||||
ctx.body = image.data;
|
||||
ctx.set('Content-Type', image.type);
|
||||
ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
|
||||
ctx.set('Cache-Control', 'max-age=31536000, immutable');
|
||||
} catch (e) {
|
||||
serverLogger.error(`${e}`);
|
||||
|
|
@ -112,14 +114,14 @@ export default async function(ctx: Koa.Context) {
|
|||
}).toString();
|
||||
|
||||
ctx.body = InternalStorage.read(key);
|
||||
ctx.set('Content-Type', mime);
|
||||
ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(mime) ? mime : 'application/octet-stream');
|
||||
ctx.set('Cache-Control', 'max-age=31536000, immutable');
|
||||
ctx.set('Content-Disposition', contentDisposition('inline', filename));
|
||||
} else {
|
||||
const readable = InternalStorage.read(file.accessKey!);
|
||||
readable.on('error', commonReadableHandlerGenerator(ctx));
|
||||
ctx.body = readable;
|
||||
ctx.set('Content-Type', file.type);
|
||||
ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.type) ? file.type : 'application/octet-stream');
|
||||
ctx.set('Cache-Control', 'max-age=31536000, immutable');
|
||||
ctx.set('Content-Disposition', contentDisposition('inline', file.name));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { createTemp } from '@/misc/create-temp';
|
|||
import { downloadUrl } from '@/misc/download-url';
|
||||
import { detectType } from '@/misc/get-file-info';
|
||||
import { StatusError } from '@/misc/fetch';
|
||||
import { FILE_TYPE_BROWSERSAFE } from '@/const';
|
||||
|
||||
export async function proxyMedia(ctx: Koa.Context) {
|
||||
const url = 'url' in ctx.query ? ctx.query.url : 'https://' + ctx.params.url;
|
||||
|
|
@ -18,7 +19,7 @@ export async function proxyMedia(ctx: Koa.Context) {
|
|||
|
||||
const { mime, ext } = await detectType(path);
|
||||
|
||||
if (!mime.startsWith('image/')) throw 403;
|
||||
if (!FILE_TYPE_BROWSERSAFE.includes(mime)) throw 403;
|
||||
|
||||
let image: IImage;
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error';
|
|||
import * as S3 from 'aws-sdk/clients/s3';
|
||||
import { getS3 } from './s3';
|
||||
import * as sharp from 'sharp';
|
||||
import { FILE_TYPE_BROWSERSAFE } from '@/const';
|
||||
|
||||
const logger = driveLogger.createSubLogger('register', 'yellow');
|
||||
|
||||
|
|
@ -241,6 +242,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
|
|||
*/
|
||||
async function upload(key: string, stream: fs.ReadStream | Buffer, type: string, filename?: string) {
|
||||
if (type === 'image/apng') type = 'image/png';
|
||||
if (!FILE_TYPE_BROWSERSAFE.includes(type)) type = 'application/octet-stream';
|
||||
|
||||
const meta = await fetchMeta();
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
import { defineComponent, markRaw } from 'vue';
|
||||
import { emojilist } from '@/scripts/emojilist';
|
||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||
import Particle from '@/components/particle.vue';
|
||||
import Ripple from '@/components/ripple.vue';
|
||||
import * as os from '@/os';
|
||||
import { isTouchUsing } from '@/scripts/touch';
|
||||
import { isMobile } from '@/scripts/is-mobile';
|
||||
|
|
@ -296,9 +296,9 @@ export default defineComponent({
|
|||
if (ev) {
|
||||
const el = ev.currentTarget || ev.target;
|
||||
const rect = el.getBoundingClientRect();
|
||||
const x = rect.left + (el.clientWidth / 2);
|
||||
const y = rect.top + (el.clientHeight / 2);
|
||||
os.popup(Particle, { x, y }, {}, 'end');
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
os.popup(Ripple, { x, y }, {}, 'end');
|
||||
}
|
||||
|
||||
const key = this.getKey(emoji);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
|
||||
<input ref="inputEl"
|
||||
v-model="v"
|
||||
v-panel
|
||||
v-adaptive-border
|
||||
:type="type"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
|
|
@ -243,7 +243,8 @@ export default defineComponent({
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
border: solid 0.5px var(--panel);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -251,7 +252,7 @@ export default defineComponent({
|
|||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -298,7 +299,7 @@ export default defineComponent({
|
|||
|
||||
&.focused {
|
||||
> input {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--accent) !important;
|
||||
//box-shadow: 0 0 0 4px var(--focus);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
<div class="label" @click="focus"><slot name="label"></slot></div>
|
||||
<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
|
||||
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
|
||||
<select ref="inputEl" v-model="v" v-panel
|
||||
<select ref="inputEl"
|
||||
v-model="v"
|
||||
v-adaptive-border
|
||||
class="select"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
|
|
@ -226,7 +228,7 @@ export default defineComponent({
|
|||
|
||||
&:hover {
|
||||
> .select {
|
||||
border-color: var(--inputBorderHover);
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -242,6 +244,7 @@ export default defineComponent({
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
|
|
@ -295,7 +298,7 @@ export default defineComponent({
|
|||
|
||||
&.focused {
|
||||
> select {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--accent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
<div
|
||||
class="ziffeoms"
|
||||
:class="{ disabled, checked }"
|
||||
role="switch"
|
||||
:aria-checked="checked"
|
||||
:aria-disabled="disabled"
|
||||
@click.prevent="toggle"
|
||||
>
|
||||
<input
|
||||
ref="input"
|
||||
|
|
@ -13,18 +9,20 @@
|
|||
:disabled="disabled"
|
||||
@keydown.enter="toggle"
|
||||
>
|
||||
<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
|
||||
<span class="handle"></span>
|
||||
<span ref="button" v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
|
||||
<i class="check fas fa-check"></i>
|
||||
</span>
|
||||
<span class="label">
|
||||
<span><slot></slot></span>
|
||||
<span @click="toggle"><slot></slot></span>
|
||||
<p class="caption"><slot name="caption"></slot></p>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, ref, toRefs } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import Ripple from '@/components/ripple.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
@ -37,17 +35,28 @@ export default defineComponent({
|
|||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
checked(): boolean {
|
||||
return this.modelValue;
|
||||
}
|
||||
|
||||
setup(props, context) {
|
||||
const button = ref<HTMLElement>();
|
||||
const checked = toRefs(props).modelValue;
|
||||
const toggle = () => {
|
||||
if (props.disabled) return;
|
||||
context.emit('update:modelValue', !checked.value);
|
||||
|
||||
if (!checked.value) {
|
||||
const rect = button.value.getBoundingClientRect();
|
||||
const x = rect.left + (button.value.offsetWidth / 2);
|
||||
const y = rect.top + (button.value.offsetHeight / 2);
|
||||
os.popup(Ripple, { x, y, particle: false }, {}, 'end');
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
button,
|
||||
checked,
|
||||
toggle,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
if (this.disabled) return;
|
||||
this.$emit('update:modelValue', !this.checked);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -55,16 +64,7 @@ export default defineComponent({
|
|||
.ziffeoms {
|
||||
position: relative;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
transition: all 0.2s ease;
|
||||
|
||||
> * {
|
||||
user-select: none;
|
||||
|
|
@ -80,27 +80,32 @@ export default defineComponent({
|
|||
|
||||
> .button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
background: var(--switchBg);
|
||||
box-sizing: border-box;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
outline: none;
|
||||
border-radius: 999px;
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: inherit;
|
||||
|
||||
> .handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 5px;
|
||||
margin: auto 0;
|
||||
border-radius: 100%;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
> .check {
|
||||
margin: auto;
|
||||
opacity: 0;
|
||||
color: var(--fgOnAccent);
|
||||
font-size: 13px;
|
||||
transform: scale(0.5);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .button {
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,13 +113,13 @@ export default defineComponent({
|
|||
margin-left: 16px;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
transition: inherit;
|
||||
color: var(--fg);
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -129,12 +134,6 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .button {
|
||||
background-color: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
|
|
@ -142,11 +141,12 @@ export default defineComponent({
|
|||
|
||||
&.checked {
|
||||
> .button {
|
||||
background-color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background-color: var(--accent) !important;
|
||||
border-color: var(--accent) !important;
|
||||
|
||||
> .handle {
|
||||
transform: translateX(10px);
|
||||
> .check {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="input" :class="{ disabled, focused, tall, pre }">
|
||||
<textarea ref="inputEl"
|
||||
v-model="v"
|
||||
v-panel
|
||||
v-adaptive-border
|
||||
:class="{ code, _monospace: code }"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
|
|
@ -210,7 +210,8 @@ export default defineComponent({
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
border: solid 0.5px var(--panel);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -218,13 +219,13 @@ export default defineComponent({
|
|||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
> textarea {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--accent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
|
||||
|
||||
<div class="title">
|
||||
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
|
||||
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="true" class="title"/>
|
||||
<div v-else-if="info.title" class="title">{{ info.title }}</div>
|
||||
<div v-if="!narrow && info.subtitle" class="subtitle">
|
||||
{{ info.subtitle }}
|
||||
|
|
@ -268,6 +268,7 @@ export default defineComponent({
|
|||
> .titleContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 400px;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<button
|
||||
v-if="count > 0"
|
||||
ref="buttonRef"
|
||||
v-particle="canToggle"
|
||||
v-ripple="canToggle"
|
||||
class="hkzvhatu _button"
|
||||
:class="{ reacted: note.myReaction == reaction, canToggle }"
|
||||
@click="toggleReaction()"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="vswabwbm" :style="{ top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
|
||||
<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
|
||||
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle fill="none" cx="64" cy="64">
|
||||
<animate attributeName="r"
|
||||
|
|
@ -52,7 +52,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import * as os from '@/os';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
@ -63,37 +64,46 @@ export default defineComponent({
|
|||
y: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
particle: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
emits: ['end'],
|
||||
data() {
|
||||
setup(props, context) {
|
||||
const particles = [];
|
||||
const origin = 64;
|
||||
const colors = ['#FF1493', '#00FFFF', '#FFE202'];
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const angle = Math.random() * (Math.PI * 2);
|
||||
const pos = Math.random() * 16;
|
||||
const velocity = 16 + (Math.random() * 48);
|
||||
particles.push({
|
||||
size: 4 + (Math.random() * 8),
|
||||
xA: origin + (Math.sin(angle) * pos),
|
||||
yA: origin + (Math.cos(angle) * pos),
|
||||
xB: origin + (Math.sin(angle) * (pos + velocity)),
|
||||
yB: origin + (Math.cos(angle) * (pos + velocity)),
|
||||
color: colors[Math.floor(Math.random() * colors.length)]
|
||||
});
|
||||
if (props.particle) {
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const angle = Math.random() * (Math.PI * 2);
|
||||
const pos = Math.random() * 16;
|
||||
const velocity = 16 + (Math.random() * 48);
|
||||
particles.push({
|
||||
size: 4 + (Math.random() * 8),
|
||||
xA: origin + (Math.sin(angle) * pos),
|
||||
yA: origin + (Math.cos(angle) * pos),
|
||||
xB: origin + (Math.sin(angle) * (pos + velocity)),
|
||||
yB: origin + (Math.cos(angle) * (pos + velocity)),
|
||||
color: colors[Math.floor(Math.random() * colors.length)]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
context.emit('end');
|
||||
}, 1100);
|
||||
});
|
||||
|
||||
return {
|
||||
particles
|
||||
particles,
|
||||
zIndex: os.claimZIndex('high'),
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.$emit('end');
|
||||
}, 1100);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -101,7 +111,6 @@ export default defineComponent({
|
|||
.vswabwbm {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
z-index: 1000000;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
||||
|
|
@ -51,14 +51,13 @@
|
|||
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<label v-if="meta.tosUrl" class="_formBlock tou">
|
||||
<input v-model="ToSAgreement" type="checkbox">
|
||||
<MkSwitch v-if="meta.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
|
||||
<I18n :src="$ts.agreeTo">
|
||||
<template #0>
|
||||
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
|
||||
</template>
|
||||
</I18n>
|
||||
</label>
|
||||
</MkSwitch>
|
||||
<captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
|
||||
<captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
|
||||
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
|
||||
|
|
@ -258,11 +257,5 @@ export default defineComponent({
|
|||
.captcha {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
> .tou {
|
||||
display: block;
|
||||
margin: 16px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
24
packages/client/src/directives/adaptive-border.ts
Normal file
24
packages/client/src/directives/adaptive-border.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Directive } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted(src, binding, vn) {
|
||||
const getBgColor = (el: HTMLElement) => {
|
||||
const style = window.getComputedStyle(el);
|
||||
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
|
||||
return style.backgroundColor;
|
||||
} else {
|
||||
return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
|
||||
}
|
||||
}
|
||||
|
||||
const parentBg = getBgColor(src.parentElement);
|
||||
|
||||
const myBg = window.getComputedStyle(src).backgroundColor;
|
||||
|
||||
if (parentBg === myBg) {
|
||||
src.style.borderColor = 'var(--divider)';
|
||||
} else {
|
||||
src.style.borderColor = myBg;
|
||||
}
|
||||
},
|
||||
} as Directive;
|
||||
|
|
@ -3,7 +3,7 @@ import { App } from 'vue';
|
|||
import userPreview from './user-preview';
|
||||
import size from './size';
|
||||
import getSize from './get-size';
|
||||
import particle from './particle';
|
||||
import ripple from './ripple';
|
||||
import tooltip from './tooltip';
|
||||
import hotkey from './hotkey';
|
||||
import appear from './appear';
|
||||
|
|
@ -11,13 +11,14 @@ import anim from './anim';
|
|||
import stickyContainer from './sticky-container';
|
||||
import clickAnime from './click-anime';
|
||||
import panel from './panel';
|
||||
import adaptiveBorder from './adaptive-border';
|
||||
|
||||
export default function(app: App) {
|
||||
app.directive('userPreview', userPreview);
|
||||
app.directive('user-preview', userPreview);
|
||||
app.directive('size', size);
|
||||
app.directive('get-size', getSize);
|
||||
app.directive('particle', particle);
|
||||
app.directive('ripple', ripple);
|
||||
app.directive('tooltip', tooltip);
|
||||
app.directive('hotkey', hotkey);
|
||||
app.directive('appear', appear);
|
||||
|
|
@ -25,4 +26,5 @@ export default function(app: App) {
|
|||
app.directive('click-anime', clickAnime);
|
||||
app.directive('sticky-container', stickyContainer);
|
||||
app.directive('panel', panel);
|
||||
app.directive('adaptive-border', adaptiveBorder);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
|
||||
return style.backgroundColor;
|
||||
} else {
|
||||
return getBgColor(el.parentElement);
|
||||
return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Particle from '@/components/particle.vue';
|
||||
import Ripple from '@/components/ripple.vue';
|
||||
import { popup } from '@/os';
|
||||
|
||||
export default {
|
||||
|
|
@ -9,10 +9,10 @@ export default {
|
|||
el.addEventListener('click', () => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
|
||||
const x = rect.left + (el.clientWidth / 2);
|
||||
const y = rect.top + (el.clientHeight / 2);
|
||||
const x = rect.left + (el.offsetWidth / 2);
|
||||
const y = rect.top + (el.offsetHeight / 2);
|
||||
|
||||
popup(Particle, { x, y }, {}, 'end');
|
||||
popup(Ripple, { x, y }, {}, 'end');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="_formRoot">
|
||||
<div v-panel class="rfqxtzch _formBlock">
|
||||
<div v-adaptive-border class="rfqxtzch _panel _formBlock">
|
||||
<div class="toggle">
|
||||
<div class="toggleWrapper">
|
||||
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ module.exports = {
|
|||
'object-curly-spacing': ['error', 'always'],
|
||||
'space-infix-ops': ['error'],
|
||||
'space-before-blocks': ['error', 'always'],
|
||||
'@typescript-eslint/no-unnecessary-condition': ['error'],
|
||||
'@typescript-eslint/no-var-requires': ['warn'],
|
||||
'@typescript-eslint/no-inferrable-types': ['warn'],
|
||||
'@typescript-eslint/no-empty-function': ['off'],
|
||||
|
|
|
|||
Loading…
Reference in a new issue