hotomoe/src/client/app/common/views/components/messaging-room.message.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">
			<p class="read" v-if="isMe && message.isRead">%i18n:@is-read%</p>
			<button class="delete-button" v-if="isMe" title="%i18n:common.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">%i18n:@deleted%</p>
			</div>
		</div>
		<div></div>
		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
		<footer>
			<mk-time :time="message.createdAt"/>
			<template v-if="message.is_edited">%fa:pencil-alt%</template>
		</footer>
	</div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import parse from '../../../../../mfm/parse';

export default Vue.extend({
	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>
@import '~const.styl'

root(isDark)
	$me-balloon-color = $theme-color

	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 block
			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

			> .read
				user-select none
				display block
				position absolute
				z-index 1
				bottom -4px
				left -12px
				margin 0
				color isDark ? rgba(#fff, 0.5) : rgba(#000, 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(#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 isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)

			> [data-fa]
				margin-left 4px

	&:not([data-is-me])
		> .avatar
			left 12px

		> .content
			padding-left 66px

			> .balloon
				$color = isDark ? #2d3338 : #eee
				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
						if isDark
							color #fff

			> 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

	&[data-is-deleted]
		> .baloon
			opacity 0.5

.message[data-darkmode]
	root(true)

.message:not([data-darkmode])
	root(false)

</style>