diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue index e39becaca4..f33173da6f 100644 --- a/src/client/app/common/views/components/messaging-room.message.vue +++ b/src/client/app/common/views/components/messaging-room.message.vue @@ -3,6 +3,7 @@ <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> @@ -22,7 +23,6 @@ <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%</span> <mk-time :time="message.createdAt"/> <template v-if="message.is_edited">%fa:pencil-alt%</template> </footer> @@ -120,6 +120,17 @@ 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 @@ -175,14 +186,11 @@ root(isDark) margin 8px 0 > footer - display flex + display block margin 2px 0 0 0 - font-size 11px + font-size 10px color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4) - > .read - margin 0 8px 0 0 - > [data-fa] margin-left 4px @@ -214,7 +222,7 @@ root(isDark) color #fff > footer - justify-content left + text-align left &[data-is-me] > .avatar @@ -248,7 +256,7 @@ root(isDark) color #fff !important > footer - justify-content right + text-align right &[data-is-deleted] > .baloon