Apply filter context in compact status too

This commit is contained in:
Lim Chee Aun 2024-05-02 23:29:01 +08:00
parent 5c9a47c31e
commit 3e1b9ff53d
2 changed files with 38 additions and 11 deletions

View file

@ -569,8 +569,15 @@
font-weight: bold;
vertical-align: middle;
display: inline-block;
&.horizontal {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
}
}
.status-filtered-badge.badge-meta {
.status-filtered-badge:not(.horizontal).badge-meta {
display: inline-flex;
flex-direction: column;
position: relative;
@ -584,10 +591,10 @@
border-color: var(--text-color);
background: var(--bg-color);
}
.status-filtered-badge.badge-meta > span:first-child {
.status-filtered-badge:not(.horizontal).badge-meta > span:first-child {
white-space: nowrap;
}
.status-filtered-badge.badge-meta > span + span {
.status-filtered-badge:not(.horizontal).badge-meta > span + span {
display: block;
font-size: 9px;
font-weight: normal;
@ -601,6 +608,10 @@
left: 0;
text-align: center;
}
.status-filtered-badge.horizontal.badge-meta > span + span {
font-weight: normal;
text-transform: none;
}
.status.large > .container > .content-container {
margin-left: calc(-50px - 16px);

View file

@ -646,7 +646,11 @@ const TimelineItem = memo(
>
<Link class="status-link timeline-item" to={url}>
{showCompact ? (
<TimelineStatusCompact status={item} instance={instance} />
<TimelineStatusCompact
status={item}
instance={instance}
filterContext={filterContext}
/>
) : useItemID ? (
<Status
statusID={statusID}
@ -820,11 +824,12 @@ function StatusCarousel({ title, class: className, children }) {
);
}
function TimelineStatusCompact({ status, instance }) {
function TimelineStatusCompact({ status, instance, filterContext }) {
const snapStates = useSnapshot(states);
const { id, visibility, language } = status;
const statusPeekText = statusPeek(status);
const sKey = statusKey(id, instance);
const filterInfo = isFiltered(status.filtered, filterContext);
return (
<article
class={`status compact-thread ${
@ -850,13 +855,24 @@ function TimelineStatusCompact({ status, instance }) {
lang={language}
dir="auto"
>
{statusPeekText}
{status.sensitive && status.spoilerText && (
{!!filterInfo ? (
<b
class="status-filtered-badge badge-meta horizontal"
title={filterInfo?.titlesStr || ''}
>
<span>Filtered</span>: <span>{filterInfo?.titlesStr || ''}</span>
</b>
) : (
<>
{' '}
<span class="spoiler-badge">
<Icon icon="eye-close" size="s" />
</span>
{statusPeekText}
{status.sensitive && status.spoilerText && (
<>
{' '}
<span class="spoiler-badge">
<Icon icon="eye-close" size="s" />
</span>
</>
)}
</>
)}
</div>