ash/iceshrimp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: reformat messaging/index.vue

Browse source
This commit is contained in:
cutestnekoaqua 2023-01-19 00:08:26 +01:00
parent b360a47310
commit bb5e3450a5
1 changed files with 52 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
packages/client/src/pages/messaging/index.vue
View file

@ -1,39 +1,43 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<div>
<MkSpacer :content-max="800">
<swiper
:modules="[Virtual]"
:space-between="20"
:virtual="true"
:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
@swiper="setSwiperRef"
@slide-change="onSlideChange"
>
<swiper-slide>
<div class="_content yweeujhr dms">
<MkButton primary class="start" @click="startUser"><i class="ph-plus-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
<MkPagination v-slot="{items}" :externalItemArray="messages" :pagination="dmsPagination">
<MkChatPreview v-for="message in messages" :key="message.id" class="yweeujhr message _block" :message="message"/>
</MkPagination>
</div>
</swiper-slide>
<swiper-slide>
<div class="_content yweeujhr groups">
<div class="groupsbuttons">
<MkButton primary class="start" :link="true" to="/my/groups"><i class="ph-user-circle-gear-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
<MkButton primary class="start" @click="startGroup"><i class="ph-plus-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
<MkStickyContainer>
<template #header>
<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" />
</template>
<div>
<MkSpacer :content-max="800">
<swiper :modules="[Virtual]" :space-between="20" :virtual="true"
:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)" @swiper="setSwiperRef"
@slide-change="onSlideChange">
<swiper-slide>
<div class="_content yweeujhr dms">
<MkButton primary class="start" @click="startUser"><i class="ph-plus-bold ph-lg"></i> {{
i18n.ts.startMessaging
}}</MkButton>
<MkPagination v-slot="{ items }" :externalItemArray="messages" :pagination="dmsPagination">
<MkChatPreview v-for="message in messages" :key="message.id" class="yweeujhr message _block"
:message="message" />
</MkPagination>
</div>
<MkPagination v-slot="{items}" :externalItemArray="groupMessages" :pagination="groupsPagination">
<MkChatPreview v-for="message in groupMessages" :key="message.id" class="yweeujhr message _block" :message="message"/>
</MkPagination>
</div>
</swiper-slide>
</swiper>
</MkSpacer>
</div>
</MkStickyContainer>
</swiper-slide>
<swiper-slide>
<div class="_content yweeujhr groups">
<div class="groupsbuttons">
<MkButton primary class="start" :link="true" to="/my/groups"><i
class="ph-user-circle-gear-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
<MkButton primary class="start" @click="startGroup"><i class="ph-plus-bold ph-lg"></i> {{
i18n.ts.startMessaging
}}</MkButton>
</div>
<MkPagination v-slot="{ items }" :externalItemArray="groupMessages" :pagination="groupsPagination">
<MkChatPreview v-for="message in groupMessages" :key="message.id" class="yweeujhr message _block"
:message="message" />
</MkPagination>
</div>
</swiper-slide>
</swiper>
</MkSpacer>
</div>
</MkStickyContainer>
</template>
<script lang="ts" setup>
@ -106,7 +110,7 @@ function onMessage(message): void {
if (message.recipientId) {
messages = messages.filter(m => !(
(m.recipientId === message.recipientId && m.userId === message.userId) ||
(m.recipientId === message.userId && m.userId === message.recipientId)));
(m.recipientId === message.userId && m.userId === message.recipientId)));
messages.unshift(message);
} else if (message.groupId) {
@ -206,17 +210,17 @@ onUnmounted(() => {
});
</script>
<style lang="scss" scoped>
.yweeujhr {
> .start {
margin: 0 auto var(--margin) auto;
}
> .groupsbuttons {
max-width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
<style lang="scss" scoped>
.yweeujhr {
>.start {
margin: 0 auto var(--margin) auto;
}
</style>
>.groupsbuttons {
max-width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
}
</style>