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 18:21:00 +09:00
parent 9693b2166a
commit 6c62c0681c
4 changed files with 46 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/pages/settings/accounts.vue
View File

@ -1,10 +1,9 @@
<template> <template>
<FormBase> <div class="_formRoot">
<FormSuspense :p="init"> <FormSuspense :p="init">
<FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton> <FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton>
<div v-for="account in accounts" :key="account.id" class="_debobigegoItem _button" @click="menu(account, $event)"> <div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
<div class="_debobigegoPanel lcjjdxlm">
<div class="avatar"> <div class="avatar">
<MkAvatar :user="account" class="avatar"/> <MkAvatar :user="account" class="avatar"/>
</div> </div>
@ -17,25 +16,20 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</FormSuspense> </FormSuspense>
</FormBase> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormSuspense from '@/components/debobigego/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormLink from '@/components/debobigego/link.vue'; import FormButton from '@/components/ui/button.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormButton from '@/components/debobigego/button.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { getAccounts, addAccount, login } from '@/account'; import { getAccounts, addAccount, login } from '@/account';
export default defineComponent({ export default defineComponent({
components: { components: {
FormBase,
FormSuspense, FormSuspense,
FormButton, FormButton,
}, },

19
packages/client/src/pages/settings/api.vue
View File

@ -1,25 +1,20 @@
<template> <template>
<FormBase> <div class="_formRoot">
<FormButton primary @click="generateToken">{{ $ts.generateAccessToken }}</FormButton> <FormButton primary class="_formBlock" @click="generateToken">{{ $ts.generateAccessToken }}</FormButton>
<FormLink to="/settings/apps">{{ $ts.manageAccessTokens }}</FormLink> <FormLink to="/settings/apps" class="_formBlock">{{ $ts.manageAccessTokens }}</FormLink>
<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink> <FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink>
</FormBase> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormSwitch from '@/components/form/switch.vue'; import FormLink from '@/components/form/link.vue';
import FormSelect from '@/components/form/select.vue'; import FormButton from '@/components/ui/button.vue';
import FormLink from '@/components/debobigego/link.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormButton from '@/components/debobigego/button.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
FormBase,
FormButton, FormButton,
FormLink, FormLink,
}, },

14
packages/client/src/pages/settings/apps.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<FormBase> <div class="_formRoot">
<FormPagination ref="list" :pagination="pagination"> <FormPagination ref="list" :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
@ -8,7 +8,7 @@
</div> </div>
</template> </template>
<template v-slot="{items}"> <template v-slot="{items}">
<div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm"> <div v-for="token in items" :key="token.id" class="_panel bfomjevm">
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/> <img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
<div class="body"> <div class="body">
<div class="name">{{ token.name }}</div> <div class="name">{{ token.name }}</div>
@ -34,23 +34,17 @@
</div> </div>
</template> </template>
</FormPagination> </FormPagination>
</FormBase> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormPagination from '@/components/debobigego/pagination.vue'; import FormPagination from '@/components/ui/pagination.vue';
import FormSelect from '@/components/form/select.vue';
import FormLink from '@/components/debobigego/link.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormButton from '@/components/debobigego/button.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
FormBase,
FormPagination, FormPagination,
}, },

30
packages/client/src/pages/settings/integration.vue
View File

@ -1,45 +1,39 @@
<template> <template>
<FormBase> <div class="_formRoot">
<div v-if="enableTwitterIntegration" class="_debobigegoItem"> <FormSection v-if="enableTwitterIntegration">
<div class="_debobigegoLabel"><i class="fab fa-twitter"></i> Twitter</div> <template #label><i class="fab fa-twitter"></i> Twitter</template>
<div class="_debobigegoPanel" style="padding: 16px;">
<p v-if="integrations.twitter">{{ $ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p> <p v-if="integrations.twitter">{{ $ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
<MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ $ts.disconnectService }}</MkButton> <MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ $ts.disconnectService }}</MkButton>
<MkButton v-else primary @click="connectTwitter">{{ $ts.connectService }}</MkButton> <MkButton v-else primary @click="connectTwitter">{{ $ts.connectService }}</MkButton>
</div> </FormSection>
</div>
<div v-if="enableDiscordIntegration" class="_debobigegoItem"> <FormSection v-if="enableDiscordIntegration">
<div class="_debobigegoLabel"><i class="fab fa-discord"></i> Discord</div> <template #label><i class="fab fa-discord"></i> Discord</template>
<div class="_debobigegoPanel" style="padding: 16px;">
<p v-if="integrations.discord">{{ $ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p> <p v-if="integrations.discord">{{ $ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ $ts.disconnectService }}</MkButton> <MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ $ts.disconnectService }}</MkButton>
<MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton> <MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton>
</div> </FormSection>
</div>
<div v-if="enableGithubIntegration" class="_debobigegoItem"> <FormSection v-if="enableGithubIntegration">
<div class="_debobigegoLabel"><i class="fab fa-github"></i> GitHub</div> <template #label><i class="fab fa-github"></i> GitHub</template>
<div class="_debobigegoPanel" style="padding: 16px;">
<p v-if="integrations.github">{{ $ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p> <p v-if="integrations.github">{{ $ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
<MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ $ts.disconnectService }}</MkButton> <MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ $ts.disconnectService }}</MkButton>
<MkButton v-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton> <MkButton v-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton>
</FormSection>
</div> </div>
</div>
</FormBase>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { apiUrl } from '@/config'; import { apiUrl } from '@/config';
import FormBase from '@/components/debobigego/base.vue'; import FormSection from '@/components/form/section.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
FormBase, FormSection,
MkButton MkButton
}, },