1
1
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-14 22:59:35 +09:00

fix(client): Update components of groups and translations

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

View File

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

View File

@ -24,9 +24,9 @@
<MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/>
</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">
<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>
@ -134,7 +134,7 @@ const headerTabs = $computed(() => []);
definePageMetadata(computed(() => group ? {
title: group.name,
icon: 'fas fa-users',
icon: 'ti ti-briefcase',
} : null));
</script>

View File

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