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

82
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,12 +310,14 @@ 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;
@ -318,89 +327,82 @@ definePageMetadata(computed(() => !fetching ? user ? {
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 { &:active {
background: rgba(#000, 0.5); background: rgba(#000, 0.5);
} }
&.fetching {
cursor: wait;
}
> i { > i {
margin-right: 4px; margin-right: 4px;
} }
} }
.messages { .fetching {
padding: 8px 0; cursor: wait;
}
> ::v-deep(*) { .messages {
padding: 16px 0 0;
> * {
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
}
> footer { .footer {
width: 100%; width: 100%;
position: sticky; position: sticky;
z-index: 2; z-index: 2;
padding-top: 8px; padding-top: 8px;
bottom: 0; bottom: var(--minBottomSpacing);
bottom: env(safe-area-inset-bottom, 0px); }
> .new-message { .new-message {
width: 100%; width: 100%;
padding-bottom: 8px; padding-bottom: 8px;
text-align: center; text-align: center;
}
> button { .new-message-button {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0 12px; padding: 0 12px;
line-height: 32px; line-height: 32px;
font-size: 12px; font-size: 12px;
border-radius: 16px; border-radius: 16px;
}
> i { .new-message-icon {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
} }
}
}
> .typers { .typers {
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
padding: 0 8px 0 8px; padding: 0 8px 0 8px;
font-size: 0.9em; font-size: 0.9em;
color: var(--fgTransparentWeak); color: var(--fgTransparentWeak);
}
> .users {
> .user + .user:before { .user + .user:before {
content: ", "; content: ", ";
font-weight: normal; font-weight: normal;
} }
> .user:last-of-type:after { .user:last-of-type:after {
content: " "; content: " ";
} }
}
}
> .form { .form {
max-height: 12em; max-height: 12em;
overflow-y: scroll; overflow-y: scroll;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
}
}
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity 0.1s; transition: opacity 0.1s;