Add the single-line prop to StatusContent and use it for chat list items
This commit is contained in:
parent
fc865d3a12
commit
3b2dfcaf5c
6 changed files with 26 additions and 6 deletions
|
@ -53,7 +53,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -14,7 +14,8 @@ const StatusContent = {
|
||||||
'status',
|
'status',
|
||||||
'focused',
|
'focused',
|
||||||
'noHeading',
|
'noHeading',
|
||||||
'fullContent'
|
'fullContent',
|
||||||
|
'singleLine'
|
||||||
],
|
],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue