From 6c62c0681c31584c926eeb6c8929c6e5726a551f Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Tue, 4 Jan 2022 18:21:00 +0900 Subject: [PATCH] tweak ui --- .../client/src/pages/settings/accounts.vue | 32 +++++------- packages/client/src/pages/settings/api.vue | 19 +++---- packages/client/src/pages/settings/apps.vue | 14 ++---- .../client/src/pages/settings/integration.vue | 50 ++++++++----------- 4 files changed, 46 insertions(+), 69 deletions(-) diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue index 2d1e0eff4e..9ff11adda3 100644 --- a/packages/client/src/pages/settings/accounts.vue +++ b/packages/client/src/pages/settings/accounts.vue @@ -1,41 +1,35 @@ <template> -<FormBase> +<div class="_formRoot"> <FormSuspense :p="init"> <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 class="_debobigegoPanel lcjjdxlm"> - <div class="avatar"> - <MkAvatar :user="account" class="avatar"/> + <div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)"> + <div class="avatar"> + <MkAvatar :user="account" class="avatar"/> + </div> + <div class="body"> + <div class="name"> + <MkUserName :user="account"/> </div> - <div class="body"> - <div class="name"> - <MkUserName :user="account"/> - </div> - <div class="acct"> - <MkAcct :user="account"/> - </div> + <div class="acct"> + <MkAcct :user="account"/> </div> </div> </div> </FormSuspense> -</FormBase> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormSuspense from '@/components/debobigego/suspense.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 FormSuspense from '@/components/form/suspense.vue'; +import FormButton from '@/components/ui/button.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; import { getAccounts, addAccount, login } from '@/account'; export default defineComponent({ components: { - FormBase, FormSuspense, FormButton, }, diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue index 30a4902a15..1a51b526f2 100644 --- a/packages/client/src/pages/settings/api.vue +++ b/packages/client/src/pages/settings/api.vue @@ -1,25 +1,20 @@ <template> -<FormBase> - <FormButton primary @click="generateToken">{{ $ts.generateAccessToken }}</FormButton> - <FormLink to="/settings/apps">{{ $ts.manageAccessTokens }}</FormLink> - <FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink> -</FormBase> +<div class="_formRoot"> + <FormButton primary class="_formBlock" @click="generateToken">{{ $ts.generateAccessToken }}</FormButton> + <FormLink to="/settings/apps" class="_formBlock">{{ $ts.manageAccessTokens }}</FormLink> + <FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormSwitch from '@/components/form/switch.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 FormLink from '@/components/form/link.vue'; +import FormButton from '@/components/ui/button.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormBase, FormButton, FormLink, }, diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue index b5fe4e0aed..68952bbbdb 100644 --- a/packages/client/src/pages/settings/apps.vue +++ b/packages/client/src/pages/settings/apps.vue @@ -1,5 +1,5 @@ <template> -<FormBase> +<div class="_formRoot"> <FormPagination ref="list" :pagination="pagination"> <template #empty> <div class="_fullinfo"> @@ -8,7 +8,7 @@ </div> </template> <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=""/> <div class="body"> <div class="name">{{ token.name }}</div> @@ -34,23 +34,17 @@ </div> </template> </FormPagination> -</FormBase> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import FormPagination from '@/components/debobigego/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 FormPagination from '@/components/ui/pagination.vue'; import * as os from '@/os'; import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormBase, FormPagination, }, diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue index 3d8aaf8a6f..e3dbc6fde9 100644 --- a/packages/client/src/pages/settings/integration.vue +++ b/packages/client/src/pages/settings/integration.vue @@ -1,45 +1,39 @@ <template> -<FormBase> - <div v-if="enableTwitterIntegration" class="_debobigegoItem"> - <div class="_debobigegoLabel"><i class="fab fa-twitter"></i> Twitter</div> - <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> - <MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ $ts.disconnectService }}</MkButton> - <MkButton v-else primary @click="connectTwitter">{{ $ts.connectService }}</MkButton> - </div> - </div> +<div class="_formRoot"> + <FormSection v-if="enableTwitterIntegration"> + <template #label><i class="fab fa-twitter"></i> Twitter</template> + <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-else primary @click="connectTwitter">{{ $ts.connectService }}</MkButton> + </FormSection> - <div v-if="enableDiscordIntegration" class="_debobigegoItem"> - <div class="_debobigegoLabel"><i class="fab fa-discord"></i> Discord</div> - <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> - <MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ $ts.disconnectService }}</MkButton> - <MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton> - </div> - </div> + <FormSection v-if="enableDiscordIntegration"> + <template #label><i class="fab fa-discord"></i> Discord</template> + <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-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton> + </FormSection> - <div v-if="enableGithubIntegration" class="_debobigegoItem"> - <div class="_debobigegoLabel"><i class="fab fa-github"></i> GitHub</div> - <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> - <MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ $ts.disconnectService }}</MkButton> - <MkButton v-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton> - </div> - </div> -</FormBase> + <FormSection v-if="enableGithubIntegration"> + <template #label><i class="fab fa-github"></i> GitHub</template> + <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> + </FormSection> +</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; 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 * as os from '@/os'; import * as symbols from '@/symbols'; export default defineComponent({ components: { - FormBase, + FormSection, MkButton },