Merge pull request #1875 from tamaina/master

Improve Messaging

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

@@ -3,7 +3,6 @@
 	<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>
@@ -23,6 +22,7 @@
 		<div></div>
 		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 		<footer>
+			<span class="read" v-if="isMe && message.isRead">%i18n:@is-read%</p>
 			<mk-time :time="message.createdAt"/>
 			<template v-if="message.is_edited">%fa:pencil-alt%</template>
 		</footer>
@@ -120,17 +120,6 @@ root(isDark)
 					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
@@ -186,11 +175,14 @@ root(isDark)
 			margin 8px 0
 
 		> footer
-			display block
+			display flex
 			margin 2px 0 0 0
-			font-size 10px
+			font-size 11px
 			color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
 
+			> .read
+				margin 0 8px 0 0
+
 			> [data-fa]
 				margin-left 4px
 
@@ -222,7 +214,7 @@ root(isDark)
 							color #fff
 
 			> footer
-				text-align left
+				justify-content left
 
 	&[data-is-me]
 		> .avatar
@@ -256,7 +248,7 @@ root(isDark)
 							color #fff !important
 
 			> footer
-				text-align right
+				justify-content right
 
 	&[data-is-deleted]
 		> .baloon

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

@@ -255,7 +255,8 @@ root(isDark)
 		width 100%
 		max-width 600px
 		margin 0 auto
-		flex 1
+		flex 1 1 0
+		overflow-y auto
 
 		> .init
 			width 100%
@@ -341,10 +342,6 @@ root(isDark)
 				background isDark ? #191b22 : #fff
 
 	> footer
-		position -webkit-sticky
-		position sticky
-		z-index 2
-		bottom 0
 		width 100%
 		max-width 600px
 		margin 0 auto