Revert "chore: reformat messaging/index.vue"

This reverts commit 0edc80b10a.
This commit is contained in:
ThatOneCalculator 2023-01-19 16:30:21 -08:00
parent 76dab02a9d
commit 72b40fe5ef
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
1 changed files with 47 additions and 51 deletions

View File

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