From becb8aa89dfcdd4e1acf7d6f23d5a4f216aece70 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 21 Dec 2022 08:48:11 +0800
Subject: [PATCH] Emphasize mentions on notifications
---
src/pages/notifications.css | 9 +++++-
src/pages/notifications.jsx | 63 ++++++++++++++++++++-----------------
2 files changed, 42 insertions(+), 30 deletions(-)
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 199f272e..2dda0eec 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -30,7 +30,7 @@
.notification .status-link {
border-radius: 8px 8px 0 0;
- border: 1px solid var(--divider-color);
+ border: 1px solid var(--outline-color);
max-height: 160px;
overflow: hidden;
/* fade out mask gradient bottom */
@@ -41,9 +41,16 @@
);
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 {
background-color: var(--bg-blur-color);
filter: saturate(1);
+ border-color: var(--outline-hover-color);
}
.notification .status-link > * {
pointer-events: none;
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index e58f332f..fc40265a 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -82,34 +82,36 @@ function Notification({ notification }) {
/>
</div>
<div class="notification-content">
- <p>
- {!/poll|update/i.test(type) && (
- <>
- {_accounts?.length > 1 ? (
- <>
- <b>{_accounts.length} people</b>{' '}
- </>
- ) : (
- <>
- <NameText account={account} showAvatar />{' '}
- </>
- )}
- </>
- )}
- {text}
- {type === 'mention' && (
- <span class="insignificant">
- {' '}
- •{' '}
- <relative-time
- datetime={notification.createdAt}
- format="micro"
- threshold="P1D"
- prefix=""
- />
- </span>
- )}
- </p>
+ {type !== 'mention' && (
+ <p>
+ {!/poll|update/i.test(type) && (
+ <>
+ {_accounts?.length > 1 ? (
+ <>
+ <b>{_accounts.length} people</b>{' '}
+ </>
+ ) : (
+ <>
+ <NameText account={account} showAvatar />{' '}
+ </>
+ )}
+ </>
+ )}
+ {text}
+ {type === 'mention' && (
+ <span class="insignificant">
+ {' '}
+ •{' '}
+ <relative-time
+ datetime={notification.createdAt}
+ format="micro"
+ threshold="P1D"
+ prefix=""
+ />
+ </span>
+ )}
+ </p>
+ )}
{_accounts?.length > 1 && (
<p>
{_accounts.map((account, i) => (
@@ -142,7 +144,10 @@ function Notification({ notification }) {
</p>
)}
{status && (
- <Link class="status-link" href={`#/s/${actualStatusID}`}>
+ <Link
+ class={`status-link status-type-${type}`}
+ href={`#/s/${actualStatusID}`}
+ >
<Status status={status} size="s" />
</Link>
)}