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

23
sass/_messages.scss
View File

@ -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;

19
src/templates/chat_message.js
View File

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