chore: group

This commit is contained in:
NoriDev 2023-06-04 15:37:50 +09:00
parent a83ae95a9f
commit 0a238ac468
2 changed files with 36 additions and 34 deletions

View file

@ -1,6 +1,7 @@
<template><MkStickyContainer> <template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :contentMax="700">
<div class="mk-group-page"> <div class="mk-group-page">
<transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in"> <transition :name="defaultStore.state.animation ? 'zoom' : ''" mode="out-in">
<div v-if="group && $i.id === group.ownerId" class="_section actions"> <div v-if="group && $i.id === group.ownerId" class="_section actions">
@ -19,7 +20,7 @@
<div class="_content"> <div class="_content">
<div class="users"> <div class="users">
<div v-for="user in users" :key="user.id" class="user _panel"> <div v-for="user in users" :key="user.id" class="user _panel">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/> <MkAvatar :user="user" class="avatar" :showIndicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>
@ -34,7 +35,8 @@
</div> </div>
</transition> </transition>
</div> </div>
</MkSpacer></MkStickyContainer> </MkSpacer>
</MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View file

@ -1,12 +1,12 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<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 :contentMax="700">
<div v-if="tab === 'owned'" class="_content"> <div v-if="tab === 'owned'" class="_content">
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination" class="groups"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination" class="groups">
<MkA v-for="group in items" :key="group.id" class="group _panel" :to="`/my/groups/${ group.id }`"> <MkA v-for="group in items" :key="group.id" class="group _panel" :to="`/my/groups/${ group.id }`">
<div class="name">{{ group.name }}</div> <div class="name">{{ group.name }}</div>
<MkAvatars :user-ids="group.userIds"/> <MkAvatars :userIds="group.userIds"/>
</MkA> </MkA>
</MkPagination> </MkPagination>
</div> </div>
@ -15,7 +15,7 @@
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="joinedPagination" class="groups"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="joinedPagination" class="groups">
<MkA v-for="group in items" :key="group.id" class="group _panel" :to="`/my/groups/${ group.id }`"> <MkA v-for="group in items" :key="group.id" class="group _panel" :to="`/my/groups/${ group.id }`">
<div class="name">{{ group.name }}</div> <div class="name">{{ group.name }}</div>
<MkAvatars :user-ids="group.userIds"/> <MkAvatars :userIds="group.userIds"/>
<div class="actions"> <div class="actions">
<MkButton danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton> <MkButton danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton>
</div> </div>
@ -27,7 +27,7 @@
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="invitationPagination"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="invitationPagination">
<MkA v-for="invitation in items" :key="invitation.id" class="group _panel"> <MkA v-for="invitation in items" :key="invitation.id" class="group _panel">
<div class="name">{{ invitation.group.name }}</div> <div class="name">{{ invitation.group.name }}</div>
<MkAvatars :user-ids="invitation.group.userIds"/> <MkAvatars :userIds="invitation.group.userIds"/>
<div class="actions"> <div class="actions">
<MkButton primary inline @click="acceptInvite(invitation)"><i class="ti ti-check"></i> {{ i18n.ts.accept }}</MkButton> <MkButton primary inline @click="acceptInvite(invitation)"><i class="ti ti-check"></i> {{ i18n.ts.accept }}</MkButton>
<MkButton primary inline @click="rejectInvite(invitation)"><i class="ti ti-x"></i> {{ i18n.ts.reject }}</MkButton> <MkButton primary inline @click="rejectInvite(invitation)"><i class="ti ti-x"></i> {{ i18n.ts.reject }}</MkButton>