Use useTruncated for notification items

pull/228/head
Lim Chee Aun 2023-09-19 21:53:59 +08:00
rodzic f9b2ab3b94
commit 4acfb2a1cf
2 zmienionych plików z 38 dodań i 6 usunięć

Wyświetl plik

@ -1,6 +1,7 @@
import shortenNumber from '../utils/shorten-number';
import states from '../utils/states';
import store from '../utils/store';
import useTruncated from '../utils/useTruncated';
import Avatar from './avatar';
import FollowRequestButtons from './follow-request-buttons';
@ -266,20 +267,20 @@ function Notification({ notification, instance, reload, isStatic }) {
<ul class="notification-group-statuses">
{_statuses.map((status) => (
<li key={status.id}>
<Link
<TruncatedLink
class={`status-link status-type-${type}`}
to={
instance ? `/${instance}/s/${status.id}` : `/s/${status.id}`
}
>
<Status status={status} size="s" />
</Link>
</TruncatedLink>
</li>
))}
</ul>
)}
{status && (!_statuses?.length || _statuses?.length <= 1) && (
<Link
<TruncatedLink
class={`status-link status-type-${type}`}
to={
instance
@ -306,11 +307,16 @@ function Notification({ notification, instance, reload, isStatic }) {
) : (
<Status statusID={actualStatusID} size="s" />
)}
</Link>
</TruncatedLink>
)}
</div>
</div>
);
}
function TruncatedLink(props) {
const ref = useTruncated();
return <Link {...props} data-read-more="Read more →" ref={ref} />;
}
export default Notification;

Wyświetl plik

@ -98,8 +98,8 @@
}
.notification .status-link:not(.status-type-mention) > .status {
font-size: calc(var(--text-size) * 0.9);
max-height: 160px;
overflow: hidden;
}
.notification .status-link.truncated:not(.status-type-mention) > .status {
/* fade out mask gradient bottom */
mask-image: linear-gradient(
rgba(0, 0, 0, 1) 130px,
@ -107,6 +107,32 @@
transparent 159px
);
}
.notification .status-link.truncated {
position: relative;
}
.notification .status-link.truncated:after {
content: attr(data-read-more);
line-height: 1;
display: inline-block;
position: absolute;
--inset-offset: 16px;
inset-block-end: var(--inset-offset);
inset-inline-end: var(--inset-offset);
color: var(--link-color);
background-color: var(--bg-faded-blur-color);
backdrop-filter: blur(8px);
border: 1px solid var(--outline-color);
padding: 0.5em 0.75em;
border-radius: 10em;
font-size: 90%;
white-space: nowrap;
transition: all 0.2s ease-out;
}
.notification .status-link:is(:hover, :focus).truncated:after {
border-color: var(--link-color);
background-color: var(--bg-color);
transform: translate(2px, 0);
}
.notification .status-link.status-type-mention {
max-height: 320px;
filter: none;