Page MenuHomePhabricator
Files F3393641

D7310.diff
No OneTemporary
Actions

D7310.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;
+}
+
+a.pinnedCountText {
+ color: var(--pinned-count-text-color);
+ font-size: var(--xs-font-12);
+ display: inline-flex;
+ align-items: center;
+}
+
+a.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,34 @@
threadMenu = <ThreadMenu threadInfo={threadInfo} />;
}
+ // To allow the pinned messages modal to be re-used by the message search
+ // modal, it will be useful to make the modal accept a prop that defines it's
+ // name, instead of setting it directly in the modal.
+ const bannerText = React.useMemo(() => {
+ if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
+ return '';
+ }
+
+ const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
+
+ return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
+ }, [threadInfo.pinnedCount]);
+
+ const pinnedCountBanner = React.useMemo(() => {
+ if (!bannerText) {
+ return null;
+ }
+
+ return (
+ <div className={css.pinnedCountBanner}>
+ <a className={css.pinnedCountText}>
+ {bannerText}
+ <ChevronRight size={14} className={css.chevronRight} />
+ </a>
+ </div>
+ );
+ }, [bannerText]);
+
const { uiName } = useResolvedThreadInfo(threadInfo);
const avatar = React.useMemo(() => {
@@ -43,13 +72,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, Dec 1, 3:17 PM (21 h, 39 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2605332
Default Alt Text
D7310.diff (3 KB)

Event Timeline