mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-15 07:08:56 +09:00
Code

fix(client): Update components of groups and translations

Browse Source
This commit is contained in:
ltlapy 2023-02-07 14:23:48 +09:00
parent 420fedb278
commit 940cdc7ce9
3 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/src/pages/admin/settings.vue
View File

@ -120,15 +120,15 @@
<FormSection> <FormSection>
<template #label>Translation</template> <template #label>Translation</template>
<FormRadios v-model="translatorType" class="_formBlock"> <MkRadios v-model="translatorType">
<template #label>Translator type</template> <template #label>Translator type</template>
<option :value="null">{{ i18n.ts.none }}</option> <option :value="null">{{ i18n.ts.none }}</option>
<option value="DeepL">DeepL</option> <option value="DeepL">DeepL</option>
<option value="GoogleNoAPI">Google Translate(without API)</option> <option value="GoogleNoAPI">Google Translate(without API)</option>
</FormRadios> </MkRadios>
<template v-if="translatorType === 'DeepL'"> <template v-if="translatorType === 'DeepL'">
<FormInput v-model="deeplAuthKey" class="_formBlock"> <FormInput v-model="deeplAuthKey">
<template #prefix><i class="fas fa-key"></i></template> <template #prefix><i class="fas fa-key"></i></template>
<template #label>DeepL Auth Key</template> <template #label>DeepL Auth Key</template>
</FormInput> </FormInput>
@ -150,6 +150,7 @@ import XHeader from './_header_.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue'; import MkTextarea from '@/components/MkTextarea.vue';
import MkRadios from '@/components/MkRadios.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.vue';

6
packages/frontend/src/pages/my-groups/group.vue
View File

@ -24,9 +24,9 @@
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>
</div> </div>
<div v-if="user.id === group.ownerId" :title="$ts.leader" style="color: var(--badge);"><i class="fas fa-crown"></i></div> <div v-if="user.id === group.ownerId" :title="$ts.leader" style="color: var(--badge);"><i class="ti ti-crown"></i></div>
<div v-else-if="group && $i.id === group.ownerId" class="action"> <div v-else-if="group && $i.id === group.ownerId" class="action">
<button class="_button" :title="$ts.banish" @click="removeUser(user)"><i class="fas fa-times"></i></button> <button class="_button" :title="$ts.banish" @click="removeUser(user)"><i class="ti ti-close"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -134,7 +134,7 @@ const headerTabs = $computed(() => []);
definePageMetadata(computed(() => group ? { definePageMetadata(computed(() => group ? {
title: group.name, title: group.name,
icon: 'fas fa-users', icon: 'ti ti-briefcase',
} : null)); } : null));
</script> </script>

46
packages/frontend/src/pages/my-groups/index.vue
View File

@ -3,38 +3,38 @@
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<div v-if="tab === 'owned'" class="_content"> <div v-if="tab === 'owned'" class="_content">
<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton> <MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="ti ti-plus"></i> {{ $ts.createGroup }}</MkButton>
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination">
<div v-for="group in items" :key="group.id" class="_card"> <MkA v-for="group in items" :key="group.id" class="list _panel" :to="`/my/grops/${ group.id }`">
<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div> <div class="name">{{ group.name }}</div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div> <MkAvatars :user-ids="group.userIds"/>
</div> </MkA>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'joined'" class="_content"> <div v-else-if="tab === 'joined'" class="_content">
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="joinedPagination"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="joinedPagination">
<div v-for="group in items" :key="group.id" class="_card"> <MkA v-for="group in items" :key="group.id" class="list _panel" :to="`/my/grops/${ group.id }`">
<div class="_title">{{ group.name }}</div> <div class="name">{{ group.name }}</div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div> <MkAvatars :user-ids="group.userIds"/>
<div class="_footer"> <div class="actions">
<MkButton danger @click="leave(group)">{{ $ts.leaveGroup }}</MkButton> <MkButton danger @click="leave(group)">{{ $ts.leaveGroup }}</MkButton>
</div> </div>
</div> </MkA>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'invites'" class="_content"> <div v-else-if="tab === 'invites'" class="_content">
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="invitationPagination"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="invitationPagination">
<div v-for="invitation in items" :key="invitation.id" class="_card"> <MkA v-for="invitation in items" :key="invitation.id" class="list _panel">
<div class="_title">{{ invitation.group.name }}</div> <div class="name">{{ invitation.group.name }}</div>
<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div> <MkAvatars :user-ids="invitation.group.userIds"/>
<div class="_footer"> <div class="actions">
<MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton> <MkButton primary inline @click="acceptInvite(invitation)"><i class="ti ti-check"></i> {{ $ts.accept }}</MkButton>
<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton> <MkButton primary inline @click="rejectInvite(invitation)"><i class="ti ti-na"></i> {{ $ts.reject }}</MkButton>
</div>
</div> </div>
</MkA>
</MkPagination> </MkPagination>
</div> </div>
</MkSpacer> </MkSpacer>
@ -115,22 +115,22 @@ const headerActions = $computed(() => []);
const headerTabs = $computed(() => [{ const headerTabs = $computed(() => [{
key: 'owned', key: 'owned',
title: i18n.ts.ownedGroups, title: i18n.ts.ownedGroups,
icon: 'fas fa-user-tie', icon: 'ti ti-flag-alt',
}, { }, {
key: 'joined', key: 'joined',
title: i18n.ts.joinedGroups, title: i18n.ts.joinedGroups,
icon: 'fas fa-id-badge', icon: 'ti ti-id-badge',
}, { }, {
key: 'invites', key: 'invites',
title: i18n.ts.invites, title: i18n.ts.invites,
icon: 'fas fa-envelope-open-text', icon: 'ti ti-envelope-open-text',
}]); }]);
`
definePageMetadata({ definePageMetadata({
title: i18n.ts.groups, title: i18n.ts.groups,
icon: 'fas fa-users', icon: 'ti ti-briefcase',
actions: [{ actions: [{
icon: 'fas fa-plus', icon: 'ti ti-plus',
text: i18n.ts.createGroup, text: i18n.ts.createGroup,
handler: create, handler: create,
}], }],