mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-28 04:12:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

Emphasize mentions on notifications

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-21 08:48:11 +08:00
parent 3589438556
commit becb8aa89d
2 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/pages/notifications.css
View file

@ -30,7 +30,7 @@
.notification .status-link { .notification .status-link {
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
border: 1px solid var(--divider-color); border: 1px solid var(--outline-color);
max-height: 160px; max-height: 160px;
overflow: hidden; overflow: hidden;
/* fade out mask gradient bottom */ /* fade out mask gradient bottom */
@ -41,9 +41,16 @@
); );
filter: saturate(0.25); filter: saturate(0.25);
} }
.notification .status-link.status-type-mention {
max-height: 320px;
filter: none;
background-color: var(--bg-color);
margin-top: calc(-16px - 1px);
}
.notification .status-link:hover { .notification .status-link:hover {
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
filter: saturate(1); filter: saturate(1);
border-color: var(--outline-hover-color);
} }
.notification .status-link > * { .notification .status-link > * {
pointer-events: none; pointer-events: none;

63
src/pages/notifications.jsx
View file

@ -82,34 +82,36 @@ function Notification({ notification }) {
/> />
</div> </div>
<div class="notification-content"> <div class="notification-content">
<p> {type !== 'mention' && (
{!/poll|update/i.test(type) && ( <p>
<> {!/poll|update/i.test(type) && (
{_accounts?.length > 1 ? ( <>
<> {_accounts?.length > 1 ? (
<b>{_accounts.length} people</b>{' '} <>
</> <b>{_accounts.length} people</b>{' '}
) : ( </>
<> ) : (
<NameText account={account} showAvatar />{' '} <>
</> <NameText account={account} showAvatar />{' '}
)} </>
</> )}
)} </>
{text} )}
{type === 'mention' && ( {text}
<span class="insignificant"> {type === 'mention' && (
{' '} <span class="insignificant">
•{' '} {' '}
<relative-time •{' '}
datetime={notification.createdAt} <relative-time
format="micro" datetime={notification.createdAt}
threshold="P1D" format="micro"
prefix="" threshold="P1D"
/> prefix=""
</span> />
)} </span>
</p> )}
</p>
)}
{_accounts?.length > 1 && ( {_accounts?.length > 1 && (
<p> <p>
{_accounts.map((account, i) => ( {_accounts.map((account, i) => (
@ -142,7 +144,10 @@ function Notification({ notification }) {
</p> </p>
)} )}
{status && ( {status && (
<Link class="status-link" href={`#/s/${actualStatusID}`}> <Link
class={`status-link status-type-${type}`}
href={`#/s/${actualStatusID}`}
>
<Status status={status} size="s" /> <Status status={status} size="s" />
</Link> </Link>
)} )}