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; display: flex;
z-index: 2; z-index: 2;
position: sticky; position: sticky;
display: flex;
overflow: hidden; overflow: hidden;
} }

View file

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

View file

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

View file

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

View file

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

View file

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