natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

tweak ui

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

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

@ -10,7 +10,7 @@
</div>
<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>
</div>
@ -228,13 +228,9 @@ export default defineComponent({
case 'email-settings': return defineAsyncComponent(() => import('./email-settings.vue'));
case 'object-storage': return defineAsyncComponent(() => import('./object-storage.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 'relays': return defineAsyncComponent(() => import('./relays.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 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.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>
<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">
<template #label>{{ $ts.enable }}</template>
</FormSwitch>
@ -20,8 +20,8 @@
</template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</MkSpacer>
</div>
</FormSuspense>
</template>
<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>
<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">
<template #label>{{ $ts.enable }}</template>
</FormSwitch>
@ -20,8 +20,8 @@
</template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</MkSpacer>
</div>
</FormSuspense>
</template>
<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>
<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">
<template #label>{{ $ts.enable }}</template>
</FormSwitch>
@ -20,8 +20,8 @@
</template>
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormSuspense>
</MkSpacer>
</div>
</FormSuspense>
</template>
<script lang="ts">

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

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

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

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

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

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

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

@ -1,29 +1,25 @@
<template>
<FormBase>
<MkSpacer :content-max="800">
<XQueue :connection="connection" domain="inbox">
<template #title>In</template>
</XQueue>
<XQueue :connection="connection" domain="deliver">
<template #title>Out</template>
</XQueue>
<FormButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</FormButton>
</FormBase>
<MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</MkButton>
</MkSpacer>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import MkButton from '@/components/ui/button.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 { stream } from '@/stream';
import * as symbols from '@/symbols';
export default defineComponent({
components: {
FormBase,
FormButton,
MkButton,
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">
<FormSuspense :p="init">
<div class="_formRoot">
<FormLink to="/admin/bot-protection" class="_formBlock">
<i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}
<FormFolder class="_formBlock">
<template #icon><i class="fas fa-shield-alt"></i></template>
<template #label>{{ $ts.botProtection }}</template>
<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
<template v-else #suffix>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
</FormLink>
<XBotProtection/>
</FormFolder>
</div>
</FormSuspense>
</MkSpacer>
@ -15,22 +18,24 @@
<script lang="ts">
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 FormInfo from '@/components/ui/info.vue';
import FormSuspense from '@/components/form/suspense.vue';
import FormSection from '@/components/form/section.vue';
import XBotProtection from './bot-protection.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { fetchInstance } from '@/instance';
export default defineComponent({
components: {
FormLink,
FormFolder,
FormSwitch,
FormInfo,
FormSection,
FormSuspense,
XBotProtection,
},
emits: ['info'],

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

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