diff options
| -rw-r--r-- | packages/frontend/src/components/MkSystemWebhookEditor.vue | 85 |
1 files changed, 45 insertions, 40 deletions
diff --git a/packages/frontend/src/components/MkSystemWebhookEditor.vue b/packages/frontend/src/components/MkSystemWebhookEditor.vue index 0beb0a8163..f6ce2ccc9f 100644 --- 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> + <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> - <MkSwitch v-model="isActive"> - <template #label>{{ i18n.ts.enable }}</template> - </MkSwitch> + <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> - <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> + <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> |