🎨

tai-cha · Jul 30, 2024 · 1a79f0d · 1a79f0d
1 parent c3437b1
commit 1a79f0d
Showing 1 changed file with 48 additions and 43 deletions.
diff --git a/packages/frontend/src/components/MkSystemWebhookEditor.vue b/packages/frontend/src/components/MkSystemWebhookEditor.vue
@@ -18,47 +18,49 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header>
 		{{ mode === 'create' ? i18n.ts._webhookSettings.createWebhook : i18n.ts._webhookSettings.modifyWebhook }}
 	</template>
-	<MkSpacer :marginMin="20" :marginMax="28">
-		<MkLoading v-if="loading !== 0"/>
-		<div v-else :class="$style.root" class="_gaps_m">
-			<MkInput v-model="title">
-				<template #label>{{ i18n.ts._webhookSettings.name }}</template>
-			</MkInput>
-			<MkInput v-model="url">
-				<template #label>URL</template>
-			</MkInput>
-			<MkInput v-model="secret">
-				<template #label>{{ i18n.ts._webhookSettings.secret }}</template>
-			</MkInput>
-			<MkFolder :defaultOpen="true">
-				<template #label>{{ i18n.ts._webhookSettings.events }}</template>
-
-				<div class="_gaps_s">
-					<MkSwitch v-model="events.abuseReport" :disabled="disabledEvents.abuseReport">
-						<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReport }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="events.abuseReportResolved" :disabled="disabledEvents.abuseReportResolved">
-						<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReportResolved }}</template>
-					</MkSwitch>
-					<MkSwitch v-model="events.userCreated" :disabled="disabledEvents.userCreated">
-						<template #label>{{ i18n.ts._webhookSettings._systemEvents.userCreated }}</template>
-					</MkSwitch>
-				</div>
-			</MkFolder>
-
-			<MkSwitch v-model="isActive">
-				<template #label>{{ i18n.ts.enable }}</template>
-			</MkSwitch>
-
-			<div :class="$style.footer" class="_buttonsCenter">
-				<MkButton primary :disabled="disableSubmitButton" @click="onSubmitClicked">
-					<i class="ti ti-check"></i>
-					{{ i18n.ts.ok }}
-				</MkButton>
-				<MkButton @click="onCancelClicked"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
+
+	<div>
+		<MkSpacer :marginMin="20" :marginMax="28">
+			<MkLoading v-if="loading !== 0"/>
+			<div v-else :class="$style.root" class="_gaps_m">
+				<MkInput v-model="title">
+					<template #label>{{ i18n.ts._webhookSettings.name }}</template>
+				</MkInput>
+				<MkInput v-model="url">
+					<template #label>URL</template>
+				</MkInput>
+				<MkInput v-model="secret">
+					<template #label>{{ i18n.ts._webhookSettings.secret }}</template>
+				</MkInput>
+				<MkFolder :defaultOpen="true">
+					<template #label>{{ i18n.ts._webhookSettings.events }}</template>
+
+					<div class="_gaps_s">
+						<MkSwitch v-model="events.abuseReport" :disabled="disabledEvents.abuseReport">
+							<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReport }}</template>
+						</MkSwitch>
+						<MkSwitch v-model="events.abuseReportResolved" :disabled="disabledEvents.abuseReportResolved">
+							<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReportResolved }}</template>
+						</MkSwitch>
+						<MkSwitch v-model="events.userCreated" :disabled="disabledEvents.userCreated">
+							<template #label>{{ i18n.ts._webhookSettings._systemEvents.userCreated }}</template>
+						</MkSwitch>
+					</div>
+				</MkFolder>
+
+				<MkSwitch v-model="isActive">
+					<template #label>{{ i18n.ts.enable }}</template>
+				</MkSwitch>
 			</div>
+		</MkSpacer>
+		<div :class="$style.footer" class="_buttonsCenter">
+			<MkButton primary rounded :disabled="disableSubmitButton" @click="onSubmitClicked">
+				<i class="ti ti-check"></i>
+				{{ i18n.ts.ok }}
+			</MkButton>
+			<MkButton rounded @click="onCancelClicked"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
 		</div>
-	</MkSpacer>
+	</div>
 </MkModalWindow>
 </template>
 
@@ -223,9 +225,12 @@ onMounted(async () => {
 }
 
 .footer {
-	display: flex;
-	justify-content: center;
-	align-items: flex-end;
-	margin-top: 20px;
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	padding: 12px;
+	border-top: solid 0.5px var(--divider);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 }
 </style>