From 7c29ae4a8ae69e1c7ff60b0bf15dcb29fa686ead Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Thu, 18 Jun 2020 16:54:12 +0200
Subject: [PATCH] Improve stying for /me messages

Show the actions dropdown on the right, like with other messages, and
don't wrap them.
---
 sass/_messages.scss           | 23 +++++++++++------------
 src/templates/chat_message.js | 19 ++++++++++---------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/sass/_messages.scss b/sass/_messages.scss
index b139929a3..1641e9a42 100644
--- a/sass/_messages.scss
+++ b/sass/_messages.scss
@@ -281,21 +281,22 @@
                 min-width: var(--message-avatar-width);
             }
 
+            .chat-msg__author {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-family: var(--heading-font);
+                font-size: 115%;
+                font-weight: bold;
+                padding-bottom: 1px; // Hack to avoid cutting of text on the button
+            }
+
             .chat-msg__heading {
                 width: 100%;
                 margin-top: 0.5em;
                 padding-right: 0.25rem;
                 padding-bottom: 0.25rem;
 
-                .chat-msg__author {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    font-family: var(--heading-font);
-                    font-size: 115%;
-                    font-weight: bold;
-                    padding-bottom: 1px; // Hack to avoid cutting of text on the button
-                }
                 .badge {
                     margin-left: 0.5em;
                     font-family: var(--normal_font);
@@ -307,10 +308,8 @@
                 }
             }
             &.chat-msg--action {
-                .chat-msg__content {
-                    flex-wrap: wrap;
+                .chat-msg__message {
                     flex-direction: row;
-                    justify-content: flex-start;
                 }
                 .chat-msg__text {
                     width: auto;
diff --git a/src/templates/chat_message.js b/src/templates/chat_message.js
index 9cc79d960..e14d2a588 100644
--- a/src/templates/chat_message.js
+++ b/src/templates/chat_message.js
@@ -17,17 +17,18 @@ export default (o) => {
 
             ${ o.shouldShowAvatar() ? renderAvatar(o.getAvatarData()) : '' }
             <div class="chat-msg__content chat-msg__content--${o.sender} ${o.is_me_message ? 'chat-msg__content--action' : ''}">
-                <span class="chat-msg__heading">
-                    ${ (o.is_me_message) ? html`
-                        <time timestamp="${o.time}" class="chat-msg__time">${o.pretty_time}</time>
-                        ${o.hats.map(hat => html`<span class="badge badge-secondary">${hat}</span>`)}
-                    ` : '' }
-                    <span class="chat-msg__author">${ o.is_me_message ? '**' : ''}${o.username}</span>
-                    ${ !o.is_me_message ? o.renderAvatarByline() : '' }
-                    ${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
-                </span>
+
+                ${ !o.is_me_message ? html`
+                    <span class="chat-msg__heading">
+                        <span class="chat-msg__author">${o.username}</span>
+                        ${ o.renderAvatarByline() }
+                        ${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
+                    </span>` : '' }
                 <div class="chat-msg__body chat-msg__body--${o.message_type} ${o.received ? 'chat-msg__body--received' : '' } ${o.is_delayed ? 'chat-msg__body--delayed' : '' }">
                     <div class="chat-msg__message">
+                        ${ (o.is_me_message) ? html`
+                            <time timestamp="${o.time}" class="chat-msg__time">${o.pretty_time}</time>&nbsp;
+                            <span class="chat-msg__author">${ o.is_me_message ? '**' : ''}${o.username}</span>&nbsp;` : '' }
                         ${ o.is_retracted ? o.renderRetraction() : o.renderMessageText() }
                     </div>
                     <converse-message-actions