Page MenuHomePhabricator
Files F2834078

D7310.id24960.diff
No OneTemporary
Actions

D7310.id24960.diff
View Options

diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -37,3 +37,28 @@
cursor: pointer;
color: var(--thread-top-bar-menu-color);
}
+
+.pinnedCountBanner {
+ background-color: var(--pinned-count-banner-color);
+ height: 40px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+span.pinnedCountText {
+ color: var(--pinned-count-text-color);
+ font-size: 12px;
+ display: inline-flex;
+ align-items: center;
+}
+
+span.pinnedCountText:hover {
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+.chevronRight {
+ vertical-align: middle;
+}
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -1,6 +1,7 @@
// @flow
import * as React from 'react';
+import { ChevronRight } from 'react-feather';
import { threadIsPending } from 'lib/shared/thread-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
@@ -28,6 +29,24 @@
threadMenu = <ThreadMenu threadInfo={threadInfo} />;
}
+ const pinnedCountBanner = React.useMemo(() => {
+ if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
+ return null;
+ }
+
+ const singleOrPlural =
+ threadInfo.pinnedCount === 1 ? 'message' : 'messages';
+
+ return (
+ <div className={css.pinnedCountBanner}>
+ <span className={css.pinnedCountText}>
+ {threadInfo.pinnedCount} pinned {singleOrPlural}
+ <ChevronRight size={14} className={css.chevronRight} />
+ </span>
+ </div>
+ );
+ }, [threadInfo.pinnedCount]);
+
const { uiName } = useResolvedThreadInfo(threadInfo);
const avatar = React.useMemo(() => {
@@ -43,13 +62,16 @@
}, [threadBackgroundColorStyle, threadInfo]);
return (
- <div className={css.topBarContainer}>
- <div className={css.topBarThreadInfo}>
- {avatar}
- <div className={css.threadTitle}>{uiName}</div>
+ <>
+ <div className={css.topBarContainer}>
+ <div className={css.topBarThreadInfo}>
+ {avatar}
+ <div className={css.threadTitle}>{uiName}</div>
+ </div>
+ {threadMenu}
</div>
- {threadMenu}
- </div>
+ {pinnedCountBanner}
+ </>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -214,4 +214,6 @@
--topbar-lines: rgba(255, 255, 255, 0.08);
--pin-message-information-text-color: var(--shades-white-60);
--pin-message-modal-border-color: var(--shades-black-80);
+ --pinned-count-banner-color: var(--shades-black-90);
+ --pinned-count-text-color: var(--shades-white-90);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Sep 29, 9:54 AM (16 h, 31 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2200009
Default Alt Text
D7310.id24960.diff (2 KB)

Event Timeline