Skip to content
Snippets Groups Projects
Commit 6c62c068 authored by syuilo's avatar syuilo
Browse files

tweak ui

parent 9693b216
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/client/src/pages/settings/accounts.vue
+ 13
− 19
View file @ 6c62c068
<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 class="body">
<div class="name">
<MkUserName :user="account"/>
</div> </div>
<div class="body"> <div class="acct">
<div class="name"> <MkAcct :user="account"/>
<MkUserName :user="account"/>
</div>
<div class="acct">
<MkAcct :user="account"/>
</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,
}, },
......
packages/client/src/pages/settings/api.vue
+ 7
− 12
View file @ 6c62c068
<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,
}, },
......
packages/client/src/pages/settings/apps.vue
+ 4
− 10
View file @ 6c62c068
<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 @@ ...@@ -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 @@ ...@@ -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,
}, },
......
packages/client/src/pages/settings/integration.vue
+ 24
− 30
View file @ 6c62c068
<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> </FormSection>
</div>
</div> <FormSection v-if="enableDiscordIntegration">
<template #label><i class="fab fa-discord"></i> Discord</template>
<div v-if="enableDiscordIntegration" class="_debobigegoItem"> <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>
<div class="_debobigegoLabel"><i class="fab fa-discord"></i> Discord</div> <MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ $ts.disconnectService }}</MkButton>
<div class="_debobigegoPanel" style="padding: 16px;"> <MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton>
<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> </FormSection>
<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ $ts.disconnectService }}</MkButton>
<MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton> <FormSection v-if="enableGithubIntegration">
</div> <template #label><i class="fab fa-github"></i> GitHub</template>
</div> <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>
<div v-if="enableGithubIntegration" class="_debobigegoItem"> <MkButton v-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton>
<div class="_debobigegoLabel"><i class="fab fa-github"></i> GitHub</div> </FormSection>
<div class="_debobigegoPanel" style="padding: 16px;"> </div>
<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-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton>
</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
}, },
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment