Page MenuHomePhorge
Files F32197823

D10391.1765104179.diff
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

D10391.1765104179.diff
View Options

diff --git a/web/navigation-sidebar/navigation-sidebar-home-button.css b/web/navigation-sidebar/navigation-sidebar-home-button.css
--- a/web/navigation-sidebar/navigation-sidebar-home-button.css
+++ b/web/navigation-sidebar/navigation-sidebar-home-button.css
@@ -1,6 +1,7 @@
.container {
padding-top: 24px;
border-bottom: 1px solid var(--separator-background-primary-default);
+ position: relative;
}
.buttonContainer {
@@ -11,3 +12,13 @@
.buttonContainer:hover {
cursor: pointer;
}
+
+.unreadBadgeContainer {
+ position: absolute;
+ right: -10px;
+ top: 16px;
+ border-radius: 50%;
+ /* We want the border color of the unread badge to always
+ match the panel background color */
+ border: 1px solid var(--panel-background-secondary-default);
+}
diff --git a/web/navigation-sidebar/navigation-sidebar-home-button.react.js b/web/navigation-sidebar/navigation-sidebar-home-button.react.js
--- a/web/navigation-sidebar/navigation-sidebar-home-button.react.js
+++ b/web/navigation-sidebar/navigation-sidebar-home-button.react.js
@@ -3,11 +3,16 @@
import * as React from 'react';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { unreadCount } from 'lib/selectors/thread-selectors.js';
import css from './navigation-sidebar-home-button.css';
+import UnreadBadge from '../components/unread-badge.react.js';
+import { useSelector } from '../redux/redux-utils.js';
import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
function NavigationSidebarHomeButton(): React.Node {
+ const unreadCountValue = useSelector(unreadCount);
+
const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
tooltipLabel: 'Home',
});
@@ -19,6 +24,9 @@
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
+ <div className={css.unreadBadgeContainer}>
+ <UnreadBadge unreadCount={unreadCountValue} />
+ </div>
<SWMansionIcon icon="home-1" size={24} />
</div>
</div>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 10:42 AM (20 h, 27 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5843849
Default Alt Text
D10391.1765104179.diff (1 KB)

Event Timeline