monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

fix(client): messaging-room周り (#9643)

Browse source 
* wip

* ✌️

* clean up
This commit is contained in:
tamaina 2023-01-18 20:26:38 +09:00 committed by GitHub
parent eea47ca2e8
commit 85f3df4c0e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 103 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
packages/frontend/src/pages/messaging/messaging-room.vue
View file

@ -1,11 +1,15 @@
<template> <template>
<MkStickyContainer>
<template #header>
<MkPageHeader />
</template>
<div <div
ref="rootEl" ref="rootEl"
class="root" :class="$style['root']"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
> >
<div class="body"> <div :class="$style['body']">
<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination"> <MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
@ -17,7 +21,7 @@
<MkDateSeparatedList <MkDateSeparatedList
v-if="messages.length > 0" v-if="messages.length > 0"
v-slot="{ item: message }" v-slot="{ item: message }"
:class="{ messages: true, 'deny-move-transition': pFetching }" :class="{ [$style['messages']]: true, 'deny-move-transition': pFetching }"
:items="messages" :items="messages"
direction="up" direction="up"
reversed reversed
@ -27,23 +31,26 @@
</template> </template>
</MkPagination> </MkPagination>
</div> </div>
<footer> <footer :class="$style['footer']">
<div v-if="typers.length > 0" class="typers"> <div v-if="typers.length > 0" :class="$style['typers']">
<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users"> <I18n :src="i18n.ts.typingUsers" text-tag="span">
<template #users> <template #users>
<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b> <b v-for="typer in typers" :key="typer.id" :class="$style['user']">{{ typer.username }}</b>
</template> </template>
</I18n> </I18n>
<MkEllipsis/> <MkEllipsis/>
</div> </div>
<Transition :name="animation ? 'fade' : ''"> <Transition :name="animation ? 'fade' : ''">
<div v-show="showIndicator" class="new-message"> <div v-show="showIndicator" :class="$style['new-message']">
<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ti-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button> <button class="_buttonPrimary" @click="onIndicatorClick" :class="$style['new-message-button']">
<i class="fas ti-fw fa-arrow-circle-down" :class="$style['new-message-icon']"></i>{{ i18n.ts.newMessageExists }}
</button>
</div> </div>
</Transition> </Transition>
<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/> <XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style['form']"/>
</footer> </footer>
</div> </div>
</MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -303,103 +310,98 @@ definePageMetadata(computed(() => !fetching ? user ? {
} : null)); } : null));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.root { .root {
display: content; display: content;
}
> .body { .body {
min-height: 80%; min-height: 80%;
}
.more { .more {
display: block; display: block;
margin: 16px auto; margin: 16px auto;
padding: 0 12px; padding: 0 12px;
line-height: 24px; line-height: 24px;
color: #fff; color: #fff;
background: rgba(#000, 0.3); background: rgba(#000, 0.3);
border-radius: 12px; border-radius: 12px;
&:hover {
&:hover { background: rgba(#000, 0.4);
background: rgba(#000, 0.4);
}
&:active {
background: rgba(#000, 0.5);
}
&.fetching {
cursor: wait;
}
> i {
margin-right: 4px;
}
}
.messages {
padding: 8px 0;
> ::v-deep(*) {
margin-bottom: 16px;
}
}
} }
&:active {
> footer { background: rgba(#000, 0.5);
width: 100%;
position: sticky;
z-index: 2;
padding-top: 8px;
bottom: 0;
bottom: env(safe-area-inset-bottom, 0px);
> .new-message {
width: 100%;
padding-bottom: 8px;
text-align: center;
> button {
display: inline-block;
margin: 0;
padding: 0 12px;
line-height: 32px;
font-size: 12px;
border-radius: 16px;
> i {
display: inline-block;
margin-right: 8px;
}
}
}
> .typers {
position: absolute;
bottom: 100%;
padding: 0 8px 0 8px;
font-size: 0.9em;
color: var(--fgTransparentWeak);
> .users {
> .user + .user:before {
content: ", ";
font-weight: normal;
}
> .user:last-of-type:after {
content: " ";
}
}
}
> .form {
max-height: 12em;
overflow-y: scroll;
border-top: solid 0.5px var(--divider);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
} }
> i {
margin-right: 4px;
}
}
.fetching {
cursor: wait;
}
.messages {
padding: 16px 0 0;
> * {
margin-bottom: 16px;
}
}
.footer {
width: 100%;
position: sticky;
z-index: 2;
padding-top: 8px;
bottom: var(--minBottomSpacing);
}
.new-message {
width: 100%;
padding-bottom: 8px;
text-align: center;
}
.new-message-button {
display: inline-block;
margin: 0;
padding: 0 12px;
line-height: 32px;
font-size: 12px;
border-radius: 16px;
}
.new-message-icon {
display: inline-block;
margin-right: 8px;
}
.typers {
position: absolute;
bottom: 100%;
padding: 0 8px 0 8px;
font-size: 0.9em;
color: var(--fgTransparentWeak);
}
.user + .user:before {
content: ", ";
font-weight: normal;
}
.user:last-of-type:after {
content: " ";
}
.form {
max-height: 12em;
overflow-y: scroll;
border-top: solid 0.5px var(--divider);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {