Add the single-line prop to StatusContent and use it for chat list items

This commit is contained in:
eugenijm 2020-07-07 23:33:08 +03:00
parent fc865d3a12
commit 3b2dfcaf5c
6 changed files with 26 additions and 6 deletions

View File

@ -53,7 +53,6 @@
display: flex;
z-index: 2;
position: sticky;
display: flex;
overflow: hidden;
}

View File

@ -43,6 +43,7 @@
white-space: nowrap;
overflow: hidden;
flex-shrink: 1;
line-height: 1.4em;
}
.chat-preview {
@ -51,10 +52,9 @@
white-space: nowrap;
text-overflow: ellipsis;
margin: 0.35em 0;
height: 1.2em;
line-height: 1.2em;
color: $fallback--text;
color: var(--faint, $fallback--text);
width: 100%;
}
a {
@ -83,4 +83,12 @@
height: 1.4em;
}
}
.time-wrapper {
line-height: 1.4em;
}
.single-line {
padding-right: 1em;
}
}

View File

@ -23,7 +23,10 @@
<span class="heading-right" />
</div>
<div class="chat-preview">
<StatusContent :status="messageForStatusContent" />
<StatusContent
:status="messageForStatusContent"
:single-line="true"
/>
<div
v-if="chat.unread > 0"
class="badge badge-notification unread-chat-count"
@ -32,7 +35,7 @@
</div>
</div>
</div>
<div>
<div class="time-wrapper">
<Timeago
:time="chat.updated_at"
:auto-update="60"

View File

@ -40,6 +40,8 @@
white-space: nowrap;
display: inline;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
.emoji {
width: 14px;

View File

@ -14,7 +14,8 @@ const StatusContent = {
'status',
'focused',
'noHeading',
'fullContent'
'fullContent',
'singleLine'
],
data () {
return {

View File

@ -43,6 +43,7 @@
</a>
<div
v-if="!hideSubjectStatus"
:class="{ 'single-line': singleLine }"
class="status-content media-body"
@click.prevent="linkClicked"
v-html="postBodyHtml"
@ -269,6 +270,12 @@ $status-margin: 0.75em;
h4 {
margin: 1.1em 0;
}
&.single-line {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}