Sharkey/src/client/app/common/views/components/messaging-room.message.vue

280 lines
5.5 KiB
Vue
Raw Normal View History

2018-02-13 08:38:53 +02:00
<template>
2018-02-20 18:39:51 +02:00
<div class="message" :data-is-me="isMe">
2018-04-29 11:17:15 +03:00
<mk-avatar class="avatar" :user="message.user" target="_blank"/>
2018-02-26 19:10:52 +02:00
<div class="content">
<div class="balloon" :data-no-text="message.text == null">
<button class="delete-button" v-if="isMe" :title="$t('@.delete')" @click="del">
<img src="/assets/desktop/remove.png" alt="Delete"/>
</button>
2018-03-29 08:48:47 +03:00
<div class="content" v-if="!message.isDeleted">
<mfm class="text" v-if="message.text" ref="text" :text="message.text" :i="$store.state.i"/>
2018-02-26 19:10:52 +02:00
<div class="file" v-if="message.file">
2019-05-13 20:50:23 +03:00
<a :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
2018-12-09 06:25:46 +02:00
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
2019-04-08 13:56:42 +03:00
:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
2018-02-26 19:10:52 +02:00
<p v-else>{{ message.file.name }}</p>
</a>
2018-02-18 17:18:01 +02:00
</div>
2018-02-13 08:38:53 +02:00
</div>
<div class="content" v-else>
<p class="is-deleted">{{ $t('deleted') }}</p>
2018-02-13 08:38:53 +02:00
</div>
</div>
2018-02-26 19:10:52 +02:00
<div></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
2018-02-13 08:38:53 +02:00
<footer>
2019-05-18 14:36:33 +03:00
<template v-if="isGroup">
<span class="read" v-if="message.reads.length > 0">{{ $t('is-read') }} {{ message.reads.length }}</span>
</template>
<template v-else>
<span class="read" v-if="isMe && message.isRead">{{ $t('is-read') }}</span>
</template>
2018-03-29 08:48:47 +03:00
<mk-time :time="message.createdAt"/>
<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
2018-02-13 08:38:53 +02:00
</footer>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2019-01-30 09:56:27 +02:00
import { parse } from '../../../../../mfm/parse';
import { unique } from '../../../../../prelude/array';
2018-02-13 08:38:53 +02:00
export default Vue.extend({
i18n: i18n('common/views/components/messaging-room.message.vue'),
props: {
message: {
required: true
2019-05-18 14:36:33 +03:00
},
isGroup: {
required: false
}
2018-03-31 13:53:30 +03:00
},
2018-02-13 08:38:53 +02:00
computed: {
isMe(): boolean {
2018-05-27 07:49:09 +03:00
return this.message.userId == this.$store.state.i.id;
},
urls(): string[] {
if (this.message.text) {
const ast = parse(this.message.text);
return unique(ast
.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
.map(t => t.node.props.url));
} else {
return null;
}
2018-02-13 08:38:53 +02:00
}
},
methods: {
del() {
this.$root.api('messaging/messages/delete', {
messageId: this.message.id
});
}
2018-02-13 08:38:53 +02:00
}
});
</script>
<style lang="stylus" scoped>
2018-09-27 15:43:11 +03:00
.message
2018-09-26 14:19:35 +03:00
$me-balloon-color = var(--primary)
2018-02-13 08:38:53 +02:00
padding 10px 12px 10px 12px
background-color transparent
2018-04-29 11:17:15 +03:00
> .avatar
2018-02-13 08:38:53 +02:00
display block
2018-02-26 19:10:52 +02:00
position absolute
top 10px
2018-04-29 11:17:15 +03:00
width 54px
height 54px
border-radius 8px
transition all 0.1s ease
2018-02-13 08:38:53 +02:00
2018-02-26 19:10:52 +02:00
> .content
2018-02-13 08:38:53 +02:00
> .balloon
2018-08-02 03:24:08 +03:00
display flex
align-items center
2018-02-13 08:38:53 +02:00
padding 0
2018-02-26 19:10:52 +02:00
max-width calc(100% - 16px)
2018-02-13 08:38:53 +02:00
min-height 38px
border-radius 16px
&:before
content ""
pointer-events none
display block
position absolute
top 12px
2018-02-26 19:10:52 +02:00
& + *
clear both
2018-02-13 08:38:53 +02:00
&: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
2019-09-01 23:34:25 +03:00
max-width 100%
2018-02-13 08:38:53 +02:00
> .is-deleted
display block
margin 0
padding 0
overflow hidden
overflow-wrap break-word
font-size 1em
2018-04-29 02:51:17 +03:00
color rgba(#000, 0.5)
2018-02-13 08:38:53 +02:00
2018-02-18 17:18:01 +02:00
> .text
2018-02-13 08:38:53 +02:00
display block
margin 0
padding 8px 16px
overflow hidden
overflow-wrap break-word
2019-09-01 23:34:25 +03:00
word-break break-word
2018-02-13 08:38:53 +02:00
font-size 1em
2018-04-29 02:51:17 +03:00
color rgba(#000, 0.8)
2018-02-13 08:38:53 +02:00
& + .file
2018-02-26 19:10:52 +02:00
> a
border-radius 0 0 16px 16px
2018-02-13 08:38:53 +02:00
> .file
2018-02-26 19:10:52 +02:00
> a
display block
max-width 100%
border-radius 16px
overflow hidden
text-decoration none
&:hover
text-decoration none
> p
background #ccc
> *
2018-02-13 08:38:53 +02:00
display block
2018-02-26 19:10:52 +02:00
margin 0
width 100%
2018-12-09 06:25:46 +02:00
max-height 512px
object-fit contain
2018-02-26 19:10:52 +02:00
> p
padding 30px
text-align center
color #555
background #ddd
> .mk-url-preview
margin 8px 0
2018-02-13 08:38:53 +02:00
> footer
display block
2018-02-26 19:10:52 +02:00
margin 2px 0 0 0
font-size 10px
2018-09-27 15:43:11 +03:00
color var(--messagingRoomMessageInfo)
2018-02-13 08:38:53 +02:00
2018-11-07 05:17:57 +02:00
> .read
margin 0 8px
> [data-icon]
2018-02-13 08:38:53 +02:00
margin-left 4px
2018-02-20 18:39:51 +02:00
&:not([data-is-me])
2018-04-29 11:17:15 +03:00
> .avatar
2018-02-26 19:10:52 +02:00
left 12px
2018-02-13 08:38:53 +02:00
2018-02-26 19:10:52 +02:00
> .content
padding-left 66px
2018-02-13 08:38:53 +02:00
> .balloon
2018-09-27 15:43:11 +03:00
$color = var(--messagingRoomMessageBg)
2018-02-26 19:10:52 +02:00
float left
2018-05-23 23:46:09 +03:00
background $color
2018-02-13 08:38:53 +02:00
2018-02-26 19:10:52 +02:00
&[data-no-text]
background transparent
&:not([data-no-text]):before
2018-02-13 08:38:53 +02:00
left -14px
border-top solid 8px transparent
2018-05-23 23:46:09 +03:00
border-right solid 8px $color
2018-02-13 08:38:53 +02:00
border-bottom solid 8px transparent
border-left solid 8px transparent
2018-05-23 23:46:09 +03:00
> .content
> .text
2018-09-27 15:43:11 +03:00
color var(--messagingRoomMessageFg)
2018-05-23 23:46:09 +03:00
2018-02-13 08:38:53 +02:00
> footer
text-align left
2018-02-13 08:38:53 +02:00
2018-02-20 18:39:51 +02:00
&[data-is-me]
2018-04-29 11:17:15 +03:00
> .avatar
2018-02-26 19:10:52 +02:00
right 12px
2018-02-13 08:38:53 +02:00
2018-02-26 19:10:52 +02:00
> .content
padding-right 66px
2018-02-13 08:38:53 +02:00
> .balloon
2018-02-26 19:10:52 +02:00
float right
2018-02-13 08:38:53 +02:00
background $me-balloon-color
2018-02-26 19:10:52 +02:00
&[data-no-text]
background transparent
&:not([data-no-text]):before
2018-02-13 08:38:53 +02:00
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
2018-05-23 23:46:09 +03:00
color rgba(#fff, 0.5)
2018-02-13 08:38:53 +02:00
2018-02-22 22:43:19 +02:00
> .text >>>
2018-02-13 08:38:53 +02:00
&, *
color #fff !important
> footer
text-align right
2018-02-13 08:38:53 +02:00
2018-07-20 15:39:21 +03:00
> .read
user-select none
2018-02-20 18:39:51 +02:00
&[data-is-deleted]
2018-08-02 03:24:08 +03:00
> .balloon
2018-02-26 19:10:52 +02:00
opacity 0.5
2018-02-13 08:38:53 +02:00
</style>