260 lines
5 KiB
Vue
260 lines
5 KiB
Vue
<template>
|
|
<div class="message" :data-is-me="isMe">
|
|
<mk-avatar class="avatar" :user="message.user" target="_blank"/>
|
|
<div class="content">
|
|
<div class="balloon" :data-no-text="message.text == null">
|
|
<!-- <button class="delete-button" v-if="isMe" :title="$t('@.delete')">
|
|
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
|
|
</button> -->
|
|
<div class="content" v-if="!message.isDeleted">
|
|
<misskey-flavored-markdown class="text" v-if="message.text" ref="text" :text="message.text" :i="$store.state.i"/>
|
|
<div class="file" v-if="message.file">
|
|
<a :href="message.file.url" target="_blank" :title="message.file.name">
|
|
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
|
|
<p v-else>{{ message.file.name }}</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-if="message.isDeleted">
|
|
<p class="is-deleted">{{ $t('deleted') }}</p>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
|
<footer>
|
|
<span class="read" v-if="isMe && message.isRead">{{ $t('is-read') }}</span>
|
|
<mk-time :time="message.createdAt"/>
|
|
<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import i18n from '../../../i18n';
|
|
import parse from '../../../../../mfm/parse';
|
|
|
|
export default Vue.extend({
|
|
i18n: i18n('common/views/components/messaging-room.message.vue'),
|
|
props: {
|
|
message: {
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
isMe(): boolean {
|
|
return this.message.userId == this.$store.state.i.id;
|
|
},
|
|
urls(): string[] {
|
|
if (this.message.text) {
|
|
const ast = parse(this.message.text);
|
|
return ast
|
|
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
|
.map(t => t.url);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.message
|
|
$me-balloon-color = var(--primary)
|
|
|
|
padding 10px 12px 10px 12px
|
|
background-color transparent
|
|
|
|
> .avatar
|
|
display block
|
|
position absolute
|
|
top 10px
|
|
width 54px
|
|
height 54px
|
|
border-radius 8px
|
|
transition all 0.1s ease
|
|
|
|
> .content
|
|
|
|
> .balloon
|
|
display flex
|
|
align-items center
|
|
padding 0
|
|
max-width calc(100% - 16px)
|
|
min-height 38px
|
|
border-radius 16px
|
|
|
|
&:before
|
|
content ""
|
|
pointer-events none
|
|
display block
|
|
position absolute
|
|
top 12px
|
|
|
|
& + *
|
|
clear both
|
|
|
|
&:hover
|
|
> .delete-button
|
|
display block
|
|
|
|
> .delete-button
|
|
display none
|
|
position absolute
|
|
z-index 1
|
|
top -4px
|
|
right -4px
|
|
margin 0
|
|
padding 0
|
|
cursor pointer
|
|
outline none
|
|
border none
|
|
border-radius 0
|
|
box-shadow none
|
|
background transparent
|
|
|
|
> img
|
|
vertical-align bottom
|
|
width 16px
|
|
height 16px
|
|
cursor pointer
|
|
|
|
> .content
|
|
|
|
> .is-deleted
|
|
display block
|
|
margin 0
|
|
padding 0
|
|
overflow hidden
|
|
overflow-wrap break-word
|
|
font-size 1em
|
|
color rgba(#000, 0.5)
|
|
|
|
> .text
|
|
display block
|
|
margin 0
|
|
padding 8px 16px
|
|
overflow hidden
|
|
overflow-wrap break-word
|
|
font-size 1em
|
|
color rgba(#000, 0.8)
|
|
|
|
& + .file
|
|
> a
|
|
border-radius 0 0 16px 16px
|
|
|
|
> .file
|
|
> a
|
|
display block
|
|
max-width 100%
|
|
max-height 512px
|
|
border-radius 16px
|
|
overflow hidden
|
|
text-decoration none
|
|
|
|
&:hover
|
|
text-decoration none
|
|
|
|
> p
|
|
background #ccc
|
|
|
|
> *
|
|
display block
|
|
margin 0
|
|
width 100%
|
|
height 100%
|
|
|
|
> p
|
|
padding 30px
|
|
text-align center
|
|
color #555
|
|
background #ddd
|
|
|
|
> .mk-url-preview
|
|
margin 8px 0
|
|
|
|
> footer
|
|
display block
|
|
margin 2px 0 0 0
|
|
font-size 10px
|
|
color var(--messagingRoomMessageInfo)
|
|
|
|
> .read
|
|
margin 0 8px
|
|
|
|
> [data-icon]
|
|
margin-left 4px
|
|
|
|
&:not([data-is-me])
|
|
> .avatar
|
|
left 12px
|
|
|
|
> .content
|
|
padding-left 66px
|
|
|
|
> .balloon
|
|
$color = var(--messagingRoomMessageBg)
|
|
float left
|
|
background $color
|
|
|
|
&[data-no-text]
|
|
background transparent
|
|
|
|
&:not([data-no-text]):before
|
|
left -14px
|
|
border-top solid 8px transparent
|
|
border-right solid 8px $color
|
|
border-bottom solid 8px transparent
|
|
border-left solid 8px transparent
|
|
|
|
> .content
|
|
> .text
|
|
color var(--messagingRoomMessageFg)
|
|
|
|
> footer
|
|
text-align left
|
|
|
|
&[data-is-me]
|
|
> .avatar
|
|
right 12px
|
|
|
|
> .content
|
|
padding-right 66px
|
|
|
|
> .balloon
|
|
float right
|
|
background $me-balloon-color
|
|
|
|
&[data-no-text]
|
|
background transparent
|
|
|
|
&:not([data-no-text]):before
|
|
right -14px
|
|
left auto
|
|
border-top solid 8px transparent
|
|
border-right solid 8px transparent
|
|
border-bottom solid 8px transparent
|
|
border-left solid 8px $me-balloon-color
|
|
|
|
> .content
|
|
|
|
> p.is-deleted
|
|
color rgba(#fff, 0.5)
|
|
|
|
> .text >>>
|
|
&, *
|
|
color #fff !important
|
|
|
|
> footer
|
|
text-align right
|
|
|
|
> .read
|
|
user-select none
|
|
|
|
&[data-is-deleted]
|
|
> .balloon
|
|
opacity 0.5
|
|
|
|
</style>
|