1
0
mirror of https://github.com/MisskeyIO/misskey synced 2024-12-17 08:09:09 +09:00
MisskeyIO/src/web/app/common/views/components/messaging-room.message.vue

260 lines
5.0 KiB
Vue
Raw Normal View History

2018-02-13 15:38:53 +09:00
<template>
2018-02-21 01:39:51 +09:00
<div class="message" :data-is-me="isMe">
2018-03-27 12:53:56 +09:00
<router-link class="avatar-anchor" :to="`/@${message.user.username}`" :title="message.user.username" target="_blank">
2018-02-19 00:18:01 +09:00
<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
2018-02-23 21:45:59 +09:00
</router-link>
2018-02-27 02:10:52 +09:00
<div class="content">
<div class="balloon" :data-no-text="message.text == null">
2018-02-22 18:06:32 +09:00
<p class="read" v-if="isMe && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
<button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
2018-02-19 00:18:01 +09:00
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
</button>
2018-02-13 15:38:53 +09:00
<div class="content" v-if="!message.is_deleted">
2018-02-19 00:18:01 +09:00
<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
2018-02-27 02:10:52 +09:00
<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>
2018-02-19 00:18:01 +09:00
</div>
2018-02-13 15:38:53 +09:00
</div>
<div class="content" v-if="message.is_deleted">
<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
</div>
</div>
2018-02-27 02:10:52 +09:00
<div></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
2018-02-13 15:38:53 +09:00
<footer>
2018-02-19 00:18:01 +09:00
<mk-time :time="message.created_at"/>
<template v-if="message.is_edited">%fa:pencil-alt%</template>
2018-02-13 15:38:53 +09:00
</footer>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['message'],
computed: {
isMe(): boolean {
2018-02-18 12:35:18 +09:00
return this.message.user_id == (this as any).os.i.id;
2018-02-13 15:38:53 +09:00
},
urls(): string[] {
if (this.message.ast) {
return this.message.ast
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
.map(t => t.url);
} else {
return null;
}
}
}
});
</script>
<style lang="stylus" scoped>
2018-02-21 01:39:51 +09:00
.message
2018-02-13 15:38:53 +09:00
$me-balloon-color = #23A7B6
padding 10px 12px 10px 12px
background-color transparent
> .avatar-anchor
display block
2018-02-27 02:10:52 +09:00
position absolute
top 10px
2018-02-13 15:38:53 +09:00
> .avatar
display block
min-width 54px
min-height 54px
max-width 54px
max-height 54px
margin 0
border-radius 8px
transition all 0.1s ease
2018-02-27 02:10:52 +09:00
> .content
2018-02-13 15:38:53 +09:00
> .balloon
display block
padding 0
2018-02-27 02:10:52 +09:00
max-width calc(100% - 16px)
2018-02-13 15:38:53 +09:00
min-height 38px
border-radius 16px
&:before
content ""
pointer-events none
display block
position absolute
top 12px
2018-02-27 02:10:52 +09:00
& + *
clear both
2018-02-13 15:38:53 +09: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
> .read
user-select none
display block
position absolute
z-index 1
bottom -4px
left -12px
margin 0
color rgba(0, 0, 0, 0.5)
font-size 11px
> .content
> .is-deleted
display block
margin 0
padding 0
overflow hidden
overflow-wrap break-word
font-size 1em
color rgba(0, 0, 0, 0.5)
2018-02-19 00:18:01 +09:00
> .text
2018-02-13 15:38:53 +09:00
display block
margin 0
padding 8px 16px
overflow hidden
overflow-wrap break-word
font-size 1em
color rgba(0, 0, 0, 0.8)
& + .file
2018-02-27 02:10:52 +09:00
> a
border-radius 0 0 16px 16px
2018-02-13 15:38:53 +09:00
> .file
2018-02-27 02:10:52 +09:00
> a
display block
max-width 100%
max-height 512px
border-radius 16px
overflow hidden
text-decoration none
&:hover
text-decoration none
> p
background #ccc
> *
2018-02-13 15:38:53 +09:00
display block
2018-02-27 02:10:52 +09:00
margin 0
width 100%
height 100%
> p
padding 30px
text-align center
color #555
background #ddd
> .mk-url-preview
margin 8px 0
2018-02-13 15:38:53 +09:00
> footer
display block
2018-02-27 02:10:52 +09:00
margin 2px 0 0 0
2018-02-13 15:38:53 +09:00
font-size 10px
color rgba(0, 0, 0, 0.4)
> [data-fa]
margin-left 4px
2018-02-21 01:39:51 +09:00
&:not([data-is-me])
2018-02-13 15:38:53 +09:00
> .avatar-anchor
2018-02-27 02:10:52 +09:00
left 12px
2018-02-13 15:38:53 +09:00
2018-02-27 02:10:52 +09:00
> .content
padding-left 66px
2018-02-13 15:38:53 +09:00
> .balloon
2018-02-27 02:10:52 +09:00
float left
2018-02-13 15:38:53 +09:00
background #eee
2018-02-27 02:10:52 +09:00
&[data-no-text]
background transparent
&:not([data-no-text]):before
2018-02-13 15:38:53 +09:00
left -14px
border-top solid 8px transparent
border-right solid 8px #eee
border-bottom solid 8px transparent
border-left solid 8px transparent
> footer
text-align left
2018-02-21 01:39:51 +09:00
&[data-is-me]
2018-02-13 15:38:53 +09:00
> .avatar-anchor
2018-02-27 02:10:52 +09:00
right 12px
2018-02-13 15:38:53 +09:00
2018-02-27 02:10:52 +09:00
> .content
padding-right 66px
2018-02-13 15:38:53 +09:00
> .balloon
2018-02-27 02:10:52 +09:00
float right
2018-02-13 15:38:53 +09:00
background $me-balloon-color
2018-02-27 02:10:52 +09:00
&[data-no-text]
background transparent
&:not([data-no-text]):before
2018-02-13 15:38:53 +09: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
color rgba(255, 255, 255, 0.5)
2018-02-23 05:43:19 +09:00
> .text >>>
2018-02-13 15:38:53 +09:00
&, *
color #fff !important
> footer
text-align right
2018-02-21 01:39:51 +09:00
&[data-is-deleted]
2018-02-27 02:10:52 +09:00
> .baloon
opacity 0.5
2018-02-13 15:38:53 +09:00
</style>