amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweak ui

Browse Source
This commit is contained in:
syuilo 2022-01-04 21:16:41 +09:00
parent 813f63663c
commit 89053d5747
12 changed files with 244 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
packages/client/src/components/form/folder.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<div class="dwzlatin" :class="{ opened }">
<div class="header _button" @click="toggle">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot name="label"></slot></span>
<span class="right">
<span class="text"><slot name="suffix"></slot></span>
<i v-if="opened" class="fas fa-angle-up icon"></i>
<i v-else class="fas fa-angle-down icon"></i>
</span>
</div>
<keep-alive>
<div v-if="openedAtLeastOnce" v-show="opened" class="body">
<MkSpacer :margin-min="14" :margin-max="22">
<slot></slot>
</MkSpacer>
</div>
</keep-alive>
</div>
</template>
<script lang="ts" setup>
let opened = $ref(false);
let openedAtLeastOnce = $ref(false);
const toggle = () => {
opened = !opened;
if (opened) {
openedAtLeastOnce = true;
}
};
</script>
<style lang="scss" scoped>
.dwzlatin {
display: block;
> .header {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 12px 14px 12px 14px;
background: var(--buttonBg);
border-radius: 6px;
&:hover {
text-decoration: none;
background: var(--buttonHoverBg);
}
&.active {
color: var(--accent);
background: var(--buttonHoverBg);
}
> .icon {
margin-right: 0.75em;
flex-shrink: 0;
text-align: center;
opacity: 0.8;
&:empty {
display: none;
& + .text {
padding-left: 4px;
}
}
}
> .text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 12px;
}
> .right {
margin-left: auto;
opacity: 0.7;
white-space: nowrap;
> .text:not(:empty) {
margin-right: 0.75em;
}
}
}
> .body {
background: var(--panel);
border-radius: 0 0 6px 6px;
}
&.opened {
> .header {
border-radius: 6px 6px 0 0;
}
}
}
</style>

101
packages/client/src/pages/admin/bot-protection.vue
View File

@ -1,70 +1,55 @@
<template> <template>
<FormBase> <div>
<FormSuspense :p="init"> <FormSuspense :p="init">
<FormRadios v-model="provider"> <div class="_formRoot">
<template #desc><i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}</template> <FormRadios v-model="provider" class="_formBlock">
<option :value="null">{{ $ts.none }} ({{ $ts.notRecommended }})</option> <option :value="null">{{ $ts.none }} ({{ $ts.notRecommended }})</option>
<option value="hcaptcha">hCaptcha</option> <option value="hcaptcha">hCaptcha</option>
<option value="recaptcha">reCAPTCHA</option> <option value="recaptcha">reCAPTCHA</option>
</FormRadios> </FormRadios>
<template v-if="provider === 'hcaptcha'"> <template v-if="provider === 'hcaptcha'">
<div v-sticky-container class="_debobigegoItem _debobigegoNoConcat"> <FormInput v-model="hcaptchaSiteKey" class="_formBlock">
<div class="_debobigegoLabel">hCaptcha</div> <template #prefix><i class="fas fa-key"></i></template>
<div class="main"> <template #label>{{ $ts.hcaptchaSiteKey }}</template>
<FormInput v-model="hcaptchaSiteKey"> </FormInput>
<template #prefix><i class="fas fa-key"></i></template> <FormInput v-model="hcaptchaSecretKey" class="_formBlock">
<span>{{ $ts.hcaptchaSiteKey }}</span> <template #prefix><i class="fas fa-key"></i></template>
</FormInput> <template #label>{{ $ts.hcaptchaSecretKey }}</template>
<FormInput v-model="hcaptchaSecretKey"> </FormInput>
<template #prefix><i class="fas fa-key"></i></template> <FormSlot class="_formBlock">
<span>{{ $ts.hcaptchaSecretKey }}</span> <template #label>{{ $ts.preview }}</template>
</FormInput>
</div>
</div>
<div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel">{{ $ts.preview }}</div>
<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/> <MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
</div> </FormSlot>
</div> </template>
</template> <template v-else-if="provider === 'recaptcha'">
<template v-else-if="provider === 'recaptcha'"> <FormInput v-model="recaptchaSiteKey" class="_formBlock">
<div v-sticky-container class="_debobigegoItem _debobigegoNoConcat"> <template #prefix><i class="fas fa-key"></i></template>
<div class="_debobigegoLabel">reCAPTCHA</div> <template #label>{{ $ts.recaptchaSiteKey }}</template>
<div class="main"> </FormInput>
<FormInput v-model="recaptchaSiteKey"> <FormInput v-model="recaptchaSecretKey" class="_formBlock">
<template #prefix><i class="fas fa-key"></i></template> <template #prefix><i class="fas fa-key"></i></template>
<span>{{ $ts.recaptchaSiteKey }}</span> <template #label>{{ $ts.recaptchaSecretKey }}</template>
</FormInput> </FormInput>
<FormInput v-model="recaptchaSecretKey"> <FormSlot v-if="recaptchaSiteKey" class="_formBlock">
<template #prefix><i class="fas fa-key"></i></template> <template #label>{{ $ts.preview }}</template>
<span>{{ $ts.recaptchaSecretKey }}</span>
</FormInput>
</div>
</div>
<div v-if="recaptchaSiteKey" v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel">{{ $ts.preview }}</div>
<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/> <MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
</div> </FormSlot>
</div> </template>
</template>
<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> <FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</div>
</FormSuspense> </FormSuspense>
</FormBase> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue'; import { defineAsyncComponent, defineComponent } from 'vue';
import FormRadios from '@/components/debobigego/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormInput from '@/components/debobigego/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/debobigego/button.vue'; import FormButton from '@/components/ui/button.vue';
import FormBase from '@/components/debobigego/base.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormGroup from '@/components/debobigego/group.vue'; import FormSlot from '@/components/form/slot.vue';
import FormInfo from '@/components/debobigego/info.vue';
import FormSuspense from '@/components/debobigego/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance'; import { fetchInstance } from '@/instance';
@ -73,11 +58,9 @@ export default defineComponent({
components: { components: {
FormRadios, FormRadios,
FormInput, FormInput,
FormBase,
FormGroup,
FormButton, FormButton,
FormInfo,
FormSuspense, FormSuspense,
FormSlot,
MkCaptcha: defineAsyncComponent(() => import('@/components/captcha.vue')), MkCaptcha: defineAsyncComponent(() => import('@/components/captcha.vue')),
}, },

6
packages/client/src/pages/admin/index.vue
View File

@ -10,7 +10,7 @@
</div> </div>
<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo> <MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo> <MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu> <MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div> </div>
@ -228,13 +228,9 @@ export default defineComponent({
case 'email-settings': return defineAsyncComponent(() => import('./email-settings.vue')); case 'email-settings': return defineAsyncComponent(() => import('./email-settings.vue'));
case 'object-storage': return defineAsyncComponent(() => import('./object-storage.vue')); case 'object-storage': return defineAsyncComponent(() => import('./object-storage.vue'));
case 'security': return defineAsyncComponent(() => import('./security.vue')); case 'security': return defineAsyncComponent(() => import('./security.vue'));
case 'bot-protection': return defineAsyncComponent(() => import('./bot-protection.vue'));
case 'service-worker': return defineAsyncComponent(() => import('./service-worker.vue')); case 'service-worker': return defineAsyncComponent(() => import('./service-worker.vue'));
case 'relays': return defineAsyncComponent(() => import('./relays.vue')); case 'relays': return defineAsyncComponent(() => import('./relays.vue'));
case 'integrations': return defineAsyncComponent(() => import('./integrations.vue')); case 'integrations': return defineAsyncComponent(() => import('./integrations.vue'));
case 'integrations/twitter': return defineAsyncComponent(() => import('./integrations-twitter.vue'));
case 'integrations/github': return defineAsyncComponent(() => import('./integrations-github.vue'));
case 'integrations/discord': return defineAsyncComponent(() => import('./integrations-discord.vue'));
case 'instance-block': return defineAsyncComponent(() => import('./instance-block.vue')); case 'instance-block': return defineAsyncComponent(() => import('./instance-block.vue'));
case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue')); case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue'));
case 'other-settings': return defineAsyncComponent(() => import('./other-settings.vue')); case 'other-settings': return defineAsyncComponent(() => import('./other-settings.vue'));

8
packages/client/src/pages/admin/integrations-discord.vue → packages/client/src/pages/admin/integrations.discord.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <FormSuspense :p="init">
<FormSuspense :p="init"> <div class="_formRoot">
<FormSwitch v-model="enableDiscordIntegration" class="_formBlock"> <FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
<template #label>{{ $ts.enable }}</template> <template #label>{{ $ts.enable }}</template>
</FormSwitch> </FormSwitch>
@ -20,8 +20,8 @@
</template> </template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> <FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense> </div>
</MkSpacer> </FormSuspense>
</template> </template>
<script lang="ts"> <script lang="ts">

8
packages/client/src/pages/admin/integrations-github.vue → packages/client/src/pages/admin/integrations.github.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <FormSuspense :p="init">
<FormSuspense :p="init"> <div class="_formRoot">
<FormSwitch v-model="enableGithubIntegration" class="_formBlock"> <FormSwitch v-model="enableGithubIntegration" class="_formBlock">
<template #label>{{ $ts.enable }}</template> <template #label>{{ $ts.enable }}</template>
</FormSwitch> </FormSwitch>
@ -20,8 +20,8 @@
</template> </template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> <FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense> </div>
</MkSpacer> </FormSuspense>
</template> </template>
<script lang="ts"> <script lang="ts">

8
packages/client/src/pages/admin/integrations-twitter.vue → packages/client/src/pages/admin/integrations.twitter.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <FormSuspense :p="init">
<FormSuspense :p="init"> <div class="_formRoot">
<FormSwitch v-model="enableTwitterIntegration" class="_formBlock"> <FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
<template #label>{{ $ts.enable }}</template> <template #label>{{ $ts.enable }}</template>
</FormSwitch> </FormSwitch>
@ -20,8 +20,8 @@
</template> </template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> <FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense> </div>
</MkSpacer> </FormSuspense>
</template> </template>
<script lang="ts"> <script lang="ts">

34
packages/client/src/pages/admin/integrations.vue
View File

@ -1,36 +1,48 @@
<template> <template>
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init"> <FormSuspense :p="init">
<FormLink to="/admin/integrations/twitter" class="_formBlock"> <FormFolder class="_formBlock">
<i class="fab fa-twitter"></i> Twitter <template #icon><i class="fab fa-twitter"></i></template>
<template #label>Twitter</template>
<template #suffix>{{ enableTwitterIntegration ? $ts.enabled : $ts.disabled }}</template> <template #suffix>{{ enableTwitterIntegration ? $ts.enabled : $ts.disabled }}</template>
</FormLink> <XTwitter/>
<FormLink to="/admin/integrations/github" class="_formBlock"> </FormFolder>
<i class="fab fa-github"></i> GitHub <FormFolder to="/admin/integrations/github" class="_formBlock">
<template #icon><i class="fab fa-github"></i></template>
<template #label>GitHub</template>
<template #suffix>{{ enableGithubIntegration ? $ts.enabled : $ts.disabled }}</template> <template #suffix>{{ enableGithubIntegration ? $ts.enabled : $ts.disabled }}</template>
</FormLink> <XGithub/>
<FormLink to="/admin/integrations/discord" class="_formBlock"> </FormFolder>
<i class="fab fa-discord"></i> Discord <FormFolder to="/admin/integrations/discord" class="_formBlock">
<template #icon><i class="fab fa-discord"></i></template>
<template #label>Discord</template>
<template #suffix>{{ enableDiscordIntegration ? $ts.enabled : $ts.disabled }}</template> <template #suffix>{{ enableDiscordIntegration ? $ts.enabled : $ts.disabled }}</template>
</FormLink> <XDiscord/>
</FormFolder>
</FormSuspense> </FormSuspense>
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormLink from '@/components/form/link.vue'; import FormFolder from '@/components/form/folder.vue';
import FormSecion from '@/components/form/section.vue'; import FormSecion from '@/components/form/section.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import XTwitter from './integrations.twitter.vue';
import XGithub from './integrations.github.vue';
import XDiscord from './integrations.discord.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance'; import { fetchInstance } from '@/instance';
export default defineComponent({ export default defineComponent({
components: { components: {
FormLink, FormFolder,
FormSecion, FormSecion,
FormSuspense, FormSuspense,
XTwitter,
XGithub,
XDiscord,
}, },
emits: ['info'], emits: ['info'],

45
packages/client/src/pages/admin/other-settings.vue
View File

@ -1,34 +1,31 @@
<template> <template>
<FormBase> <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init"> <FormSuspense :p="init">
<FormGroup> <FormSection>
<FormInput v-model="summalyProxy"> <FormInput v-model="summalyProxy" class="_formBlock">
<template #prefix><i class="fas fa-link"></i></template> <template #prefix><i class="fas fa-link"></i></template>
Summaly Proxy URL <template #label>Summaly Proxy URL</template>
</FormInput> </FormInput>
</FormGroup> </FormSection>
<FormGroup> <FormSection>
<FormInput v-model="deeplAuthKey"> <FormInput v-model="deeplAuthKey" class="_formBlock">
<template #prefix><i class="fas fa-key"></i></template> <template #prefix><i class="fas fa-key"></i></template>
DeepL Auth Key <template #label>DeepL Auth Key</template>
</FormInput> </FormInput>
<FormSwitch v-model="deeplIsPro"> <FormSwitch v-model="deeplIsPro" class="_formBlock">
Pro account <template #label>Pro account</template>
</FormSwitch> </FormSwitch>
</FormGroup> </FormSection>
<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense> </FormSuspense>
</FormBase> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormSwitch from '@/components/debobigego/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormInput from '@/components/debobigego/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/debobigego/button.vue'; import FormSection from '@/components/form/section.vue';
import FormBase from '@/components/debobigego/base.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormSuspense from '@/components/debobigego/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance'; import { fetchInstance } from '@/instance';
@ -37,9 +34,7 @@ export default defineComponent({
components: { components: {
FormSwitch, FormSwitch,
FormInput, FormInput,
FormBase, FormSection,
FormGroup,
FormButton,
FormSuspense, FormSuspense,
}, },
@ -51,6 +46,12 @@ export default defineComponent({
title: this.$ts.other, title: this.$ts.other,
icon: 'fas fa-cogs', icon: 'fas fa-cogs',
bg: 'var(--bg)', bg: 'var(--bg)',
actions: [{
asFullButton: true,
icon: 'fas fa-check',
text: this.$ts.save,
handler: this.save,
}],
}, },
summalyProxy: '', summalyProxy: '',
deeplAuthKey: '', deeplAuthKey: '',

38
packages/client/src/pages/admin/proxy-account.vue
View File

@ -1,42 +1,32 @@
<template> <template>
<FormBase> <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init"> <FormSuspense :p="init">
<FormGroup> <MkInfo class="_formBlock">{{ $ts.proxyAccountDescription }}</MkInfo>
<FormKeyValueView> <MkKeyValue class="_formBlock">
<template #key>{{ $ts.proxyAccount }}</template> <template #key>{{ $ts.proxyAccount }}</template>
<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : $ts.none }}</template> <template #value>{{ proxyAccount ? `@${proxyAccount.username}` : $ts.none }}</template>
</FormKeyValueView> </MkKeyValue>
<template #caption>{{ $ts.proxyAccountDescription }}</template>
</FormGroup>
<FormButton primary @click="chooseProxyAccount">{{ $ts.selectAccount }}</FormButton> <FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ $ts.selectAccount }}</FormButton>
</FormSuspense> </FormSuspense>
</FormBase> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormKeyValueView from '@/components/debobigego/key-value-view.vue'; import MkKeyValue from '@/components/key-value.vue';
import FormInput from '@/components/debobigego/input.vue'; import FormButton from '@/components/ui/button.vue';
import FormButton from '@/components/debobigego/button.vue'; import MkInfo from '@/components/ui/info.vue';
import FormBase from '@/components/debobigego/base.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormTextarea from '@/components/debobigego/textarea.vue';
import FormInfo from '@/components/debobigego/info.vue';
import FormSuspense from '@/components/debobigego/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance'; import { fetchInstance } from '@/instance';
export default defineComponent({ export default defineComponent({
components: { components: {
FormKeyValueView, MkKeyValue,
FormInput,
FormBase,
FormGroup,
FormButton, FormButton,
FormTextarea, MkInfo,
FormInfo,
FormSuspense, FormSuspense,
}, },

10
packages/client/src/pages/admin/queue.vue
View File

@ -1,29 +1,25 @@
<template> <template>
<FormBase> <MkSpacer :content-max="800">
<XQueue :connection="connection" domain="inbox"> <XQueue :connection="connection" domain="inbox">
<template #title>In</template> <template #title>In</template>
</XQueue> </XQueue>
<XQueue :connection="connection" domain="deliver"> <XQueue :connection="connection" domain="deliver">
<template #title>Out</template> <template #title>Out</template>
</XQueue> </XQueue>
<FormButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</FormButton> <MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</MkButton>
</FormBase> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import XQueue from './queue.chart.vue'; import XQueue from './queue.chart.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormButton from '@/components/debobigego/button.vue';
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream'; import { stream } from '@/stream';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
FormBase,
FormButton,
MkButton, MkButton,
XQueue, XQueue,
}, },

15
packages/client/src/pages/admin/security.vue
View File

@ -2,12 +2,15 @@
<MkSpacer :content-max="700" :margin-min="16" :margin-max="32"> <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
<FormSuspense :p="init"> <FormSuspense :p="init">
<div class="_formRoot"> <div class="_formRoot">
<FormLink to="/admin/bot-protection" class="_formBlock"> <FormFolder class="_formBlock">
<i class="fas fa-shield-alt"></i> {{ $ts.botProtection }} <template #icon><i class="fas fa-shield-alt"></i></template>
<template #label>{{ $ts.botProtection }}</template>
<template v-if="enableHcaptcha" #suffix>hCaptcha</template> <template v-if="enableHcaptcha" #suffix>hCaptcha</template>
<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template> <template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
<template v-else #suffix>{{ $ts.none }} ({{ $ts.notRecommended }})</template> <template v-else #suffix>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
</FormLink>
<XBotProtection/>
</FormFolder>
</div> </div>
</FormSuspense> </FormSuspense>
</MkSpacer> </MkSpacer>
@ -15,22 +18,24 @@
<script lang="ts"> <script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue'; import { defineAsyncComponent, defineComponent } from 'vue';
import FormLink from '@/components/form/link.vue'; import FormFolder from '@/components/form/folder.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormInfo from '@/components/ui/info.vue'; import FormInfo from '@/components/ui/info.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import XBotProtection from './bot-protection.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance'; import { fetchInstance } from '@/instance';
export default defineComponent({ export default defineComponent({
components: { components: {
FormLink, FormFolder,
FormSwitch, FormSwitch,
FormInfo, FormInfo,
FormSection, FormSection,
FormSuspense, FormSuspense,
XBotProtection,
}, },
emits: ['info'], emits: ['info'],

32
packages/client/src/pages/settings/deck.vue
View File

@ -1,42 +1,41 @@
<template> <template>
<FormBase> <div class="_formRoot">
<FormGroup> <FormGroup>
<template #label>{{ $ts.defaultNavigationBehaviour }}</template> <template #label>{{ $ts.defaultNavigationBehaviour }}</template>
<FormSwitch v-model="navWindow">{{ $ts.openInWindow }}</FormSwitch> <FormSwitch v-model="navWindow">{{ $ts.openInWindow }}</FormSwitch>
</FormGroup> </FormGroup>
<FormSwitch v-model="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch> <FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
<FormRadios v-model="columnAlign"> <FormRadios v-model="columnAlign" class="_formBlock">
<template #desc>{{ $ts._deck.columnAlign }}</template> <template #label>{{ $ts._deck.columnAlign }}</template>
<option value="left">{{ $ts.left }}</option> <option value="left">{{ $ts.left }}</option>
<option value="center">{{ $ts.center }}</option> <option value="center">{{ $ts.center }}</option>
</FormRadios> </FormRadios>
<FormRadios v-model="columnHeaderHeight"> <FormRadios v-model="columnHeaderHeight" class="_formBlock">
<template #desc>{{ $ts._deck.columnHeaderHeight }}</template> <template #label>{{ $ts._deck.columnHeaderHeight }}</template>
<option :value="42">{{ $ts.narrow }}</option> <option :value="42">{{ $ts.narrow }}</option>
<option :value="45">{{ $ts.medium }}</option> <option :value="45">{{ $ts.medium }}</option>
<option :value="48">{{ $ts.wide }}</option> <option :value="48">{{ $ts.wide }}</option>
</FormRadios> </FormRadios>
<FormInput v-model="columnMargin" type="number"> <FormInput v-model="columnMargin" type="number" class="_formBlock">
<span>{{ $ts._deck.columnMargin }}</span> <template #label>{{ $ts._deck.columnMargin }}</template>
<template #suffix>px</template> <template #suffix>px</template>
</FormInput> </FormInput>
<FormLink @click="setProfile">{{ $ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink> <FormLink class="_formBlock" @click="setProfile">{{ $ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
</FormBase> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormSwitch from '@/components/debobigego/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormLink from '@/components/debobigego/link.vue'; import FormLink from '@/components/form/link.vue';
import FormRadios from '@/components/debobigego/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormInput from '@/components/debobigego/input.vue'; import FormInput from '@/components/form/input.vue';
import FormBase from '@/components/debobigego/base.vue'; import FormGroup from '@/components/form/group.vue';
import FormGroup from '@/components/debobigego/group.vue';
import { deckStore } from '@/ui/deck/deck-store'; import { deckStore } from '@/ui/deck/deck-store';
import * as os from '@/os'; import * as os from '@/os';
import { unisonReload } from '@/scripts/unison-reload'; import { unisonReload } from '@/scripts/unison-reload';
@ -48,7 +47,6 @@ export default defineComponent({
FormLink, FormLink,
FormInput, FormInput,
FormRadios, FormRadios,
FormBase,
FormGroup, FormGroup,
}, },