HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

MkSpacer for chat room

Browse source
This commit is contained in:
ThatOneCalculator 2022-11-09 13:21:13 -08:00
parent f50a22625f
commit 4c2e67b2dd
2 changed files with 38 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.10.1", "version": "12.119.0-calc.10.2",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

73
packages/client/src/pages/messaging/messaging-room.vue
View file

@ -6,45 +6,46 @@
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
> >
<div class="_content mk-messaging-room"> <div class="_content mk-messaging-room">
<div class="body"> <MkSpacer :content-max="800">
<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination"> <div class="body">
<template #empty> <MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
<div class="_fullinfo"> <template #empty>
<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/> <div class="_fullinfo">
<div>{{ i18n.ts.noMessagesYet }}</div> <img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
</div> <div>{{ i18n.ts.noMessagesYet }}</div>
</template> </div>
<template #default="{ items: messages, fetching: pFetching }">
<XList
v-if="messages.length > 0"
v-slot="{ item: message }"
:class="{ messages: true, 'deny-move-transition': pFetching }"
:items="messages"
direction="up"
reversed
>
<XMessage :key="message.id" :message="message" :is-group="group != null"/>
</XList>
</template>
</MkPagination>
</div>
<footer>
<div v-if="typers.length > 0" class="typers">
<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
<template #users>
<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
</template> </template>
</I18n> <template #default="{ items: messages, fetching: pFetching }">
<MkEllipsis/> <XList
v-if="messages.length > 0"
v-slot="{ item: message }"
:class="{ messages: true, 'deny-move-transition': pFetching }"
:items="messages"
direction="up"
reversed
>
<XMessage :key="message.id" :message="message" :is-group="group != null"/>
</XList>
</template>
</MkPagination>
</div> </div>
<transition :name="animation ? 'fade' : ''"> <footer>
<div v-show="showIndicator" class="new-message"> <div v-if="typers.length > 0" class="typers">
<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ph-fw ph-lg ph-arrow-circle-down-bold ph-lg"></i>{{ i18n.ts.newMessageExists }}</button> <I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
<template #users>
<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
</template>
</I18n>
<MkEllipsis/>
</div> </div>
</transition> <transition :name="animation ? 'fade' : ''">
<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/> <div v-show="showIndicator" class="new-message">
</footer> <button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ph-fw ph-lg ph-arrow-circle-down-bold ph-lg"></i>{{ i18n.ts.newMessageExists }}</button>
</div>
</transition>
<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
</footer>
</MkSpacer>
</div> </div>
</div> </div>
</template> </template>