HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2024-07-30 09:47:31 +09:00
parent c3437b1908
commit 1a79f0dc2a
1 changed files with 45 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
packages/frontend/src/components/MkSystemWebhookEditor.vue
View file

@ -18,47 +18,49 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header> <template #header>
{{ mode === 'create' ? i18n.ts._webhookSettings.createWebhook : i18n.ts._webhookSettings.modifyWebhook }} {{ mode === 'create' ? i18n.ts._webhookSettings.createWebhook : i18n.ts._webhookSettings.modifyWebhook }}
</template> </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"> <div>
<MkSwitch v-model="events.abuseReport" :disabled="disabledEvents.abuseReport"> <MkSpacer :marginMin="20" :marginMax="28">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReport }}</template> <MkLoading v-if="loading !== 0"/>
</MkSwitch> <div v-else :class="$style.root" class="_gaps_m">
<MkSwitch v-model="events.abuseReportResolved" :disabled="disabledEvents.abuseReportResolved"> <MkInput v-model="title">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReportResolved }}</template> <template #label>{{ i18n.ts._webhookSettings.name }}</template>
</MkSwitch> </MkInput>
<MkSwitch v-model="events.userCreated" :disabled="disabledEvents.userCreated"> <MkInput v-model="url">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.userCreated }}</template> <template #label>URL</template>
</MkSwitch> </MkInput>
</div> <MkInput v-model="secret">
</MkFolder> <template #label>{{ i18n.ts._webhookSettings.secret }}</template>
</MkInput>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._webhookSettings.events }}</template>
<MkSwitch v-model="isActive"> <div class="_gaps_s">
<template #label>{{ i18n.ts.enable }}</template> <MkSwitch v-model="events.abuseReport" :disabled="disabledEvents.abuseReport">
</MkSwitch> <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>
<div :class="$style.footer" class="_buttonsCenter"> <MkSwitch v-model="isActive">
<MkButton primary :disabled="disableSubmitButton" @click="onSubmitClicked"> <template #label>{{ i18n.ts.enable }}</template>
<i class="ti ti-check"></i> </MkSwitch>
{{ i18n.ts.ok }}
</MkButton>
<MkButton @click="onCancelClicked"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
</div> </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> </div>
</MkSpacer> </div>
</MkModalWindow> </MkModalWindow>
</template> </template>
@ -223,9 +225,12 @@ onMounted(async () => {
} }
.footer { .footer {
display: flex; position: sticky;
justify-content: center; bottom: 0;
align-items: flex-end; left: 0;
margin-top: 20px; padding: 12px;
border-top: solid 0.5px var(--divider);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
} }
</style> </style>