Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Improve stying for /me messages

Browse Source 
Show the actions dropdown on the right, like with other messages, and
don't wrap them.
This commit is contained in:
JC Brand 2020-06-18 16:54:12 +02:00
parent 0cc088a523
commit 7c29ae4a8a
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
sass/_messages.scss
View File

@ -281,12 +281,6 @@
min-width: var(--message-avatar-width); min-width: var(--message-avatar-width);
} }
.chat-msg__heading {
width: 100%;
margin-top: 0.5em;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
.chat-msg__author { .chat-msg__author {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -296,6 +290,13 @@
font-weight: bold; font-weight: bold;
padding-bottom: 1px; // Hack to avoid cutting of text on the button 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;
.badge { .badge {
margin-left: 0.5em; margin-left: 0.5em;
font-family: var(--normal_font); font-family: var(--normal_font);
@ -307,10 +308,8 @@
} }
} }
&.chat-msg--action { &.chat-msg--action {
.chat-msg__content { .chat-msg__message {
flex-wrap: wrap;
flex-direction: row; flex-direction: row;
justify-content: flex-start;
} }
.chat-msg__text { .chat-msg__text {
width: auto; width: auto;

15
src/templates/chat_message.js
View File

@ -17,17 +17,18 @@ export default (o) => {
${ o.shouldShowAvatar() ? renderAvatar(o.getAvatarData()) : '' } ${ o.shouldShowAvatar() ? renderAvatar(o.getAvatarData()) : '' }
<div class="chat-msg__content chat-msg__content--${o.sender} ${o.is_me_message ? 'chat-msg__content--action' : ''}"> <div class="chat-msg__content chat-msg__content--${o.sender} ${o.is_me_message ? 'chat-msg__content--action' : ''}">
${ !o.is_me_message ? html`
<span class="chat-msg__heading"> <span class="chat-msg__heading">
${ (o.is_me_message) ? html` <span class="chat-msg__author">${o.username}</span>
<time timestamp="${o.time}" class="chat-msg__time">${o.pretty_time}</time> ${ o.renderAvatarByline() }
${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>` : '' } ${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
</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__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"> <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() } ${ o.is_retracted ? o.renderRetraction() : o.renderMessageText() }
</div> </div>
<converse-message-actions <converse-message-actions