Page MenuHomePhabricator
Files F3376460

D10548.id35261.diff
No OneTemporary
Actions

D10548.id35261.diff
View Options

diff --git a/web/chat/pinned-messages-banner.css b/web/chat/pinned-messages-banner.css
new file mode 100644
--- /dev/null
+++ b/web/chat/pinned-messages-banner.css
@@ -0,0 +1,24 @@
+.container {
+ background-color: var(--frame-background-secondary-default);
+ height: 40px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+a.pinnedCountText {
+ color: var(--text-background-secondary-default);
+ 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/pinned-messages-banner.react.js b/web/chat/pinned-messages-banner.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/pinned-messages-banner.react.js
@@ -0,0 +1,55 @@
+// @flow
+
+import * as React from 'react';
+import { ChevronRight } from 'react-feather';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js';
+
+import css from './pinned-messages-banner.css';
+import { InputStateContext } from '../input/input-state.js';
+import PinnedMessagesModal from '../modals/chat/pinned-messages-modal.react.js';
+
+type Props = {
+ +threadInfo: ThreadInfo,
+};
+
+function PinnedMessagesBanner(props: Props): React.Node {
+ const { threadInfo } = props;
+
+ const { pushModal } = useModalContext();
+
+ const inputState = React.useContext(InputStateContext);
+
+ const pushThreadPinsModal = React.useCallback(() => {
+ pushModal(
+ <InputStateContext.Provider value={inputState}>
+ <PinnedMessagesModal threadInfo={threadInfo} />
+ </InputStateContext.Provider>,
+ );
+ }, [pushModal, inputState, threadInfo]);
+
+ const pinnedMessagesBanner = React.useMemo(() => {
+ const bannerText =
+ !!threadInfo.pinnedCount &&
+ pinnedMessageCountText(threadInfo.pinnedCount);
+
+ if (!bannerText) {
+ return null;
+ }
+
+ return (
+ <div className={css.container}>
+ <a className={css.pinnedCountText} onClick={pushThreadPinsModal}>
+ {bannerText}
+ <ChevronRight size={14} className={css.chevronRight} />
+ </a>
+ </div>
+ );
+ }, [pushThreadPinsModal, threadInfo.pinnedCount]);
+
+ return pinnedMessagesBanner;
+}
+
+export default PinnedMessagesBanner;
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
@@ -24,31 +24,6 @@
text-overflow: ellipsis;
}
-.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;
-}
-
.searchButtonIcon {
color: var(--thread-top-bar-search-button-color);
}
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,21 +1,19 @@
// @flow
import * as React from 'react';
-import { ChevronRight } from 'react-feather';
import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { threadIsPending } from 'lib/shared/thread-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
-import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js';
+import PinnedMessagesBanner from './pinned-messages-banner.react.js';
import ThreadMenu from './thread-menu.react.js';
import css from './thread-top-bar.css';
import ThreadAvatar from '../avatars/thread-avatar.react.js';
import Button from '../components/button.react.js';
import { InputStateContext } from '../input/input-state.js';
-import PinnedMessagesModal from '../modals/chat/pinned-messages-modal.react.js';
import MessageSearchModal from '../modals/search/message-search-modal.react.js';
type ThreadTopBarProps = {
@@ -30,32 +28,7 @@
threadMenu = <ThreadMenu threadInfo={threadInfo} />;
}
- const bannerText =
- !!threadInfo.pinnedCount && pinnedMessageCountText(threadInfo.pinnedCount);
-
const inputState = React.useContext(InputStateContext);
- const pushThreadPinsModal = React.useCallback(() => {
- pushModal(
- <InputStateContext.Provider value={inputState}>
- <PinnedMessagesModal threadInfo={threadInfo} />
- </InputStateContext.Provider>,
- );
- }, [pushModal, inputState, threadInfo]);
-
- const pinnedCountBanner = React.useMemo(() => {
- if (!bannerText) {
- return null;
- }
-
- return (
- <div className={css.pinnedCountBanner}>
- <a className={css.pinnedCountText} onClick={pushThreadPinsModal}>
- {bannerText}
- <ChevronRight size={14} className={css.chevronRight} />
- </a>
- </div>
- );
- }, [bannerText, pushThreadPinsModal]);
const onClickSearch = React.useCallback(
() =>
@@ -87,7 +60,7 @@
{threadMenu}
</div>
</div>
- {pinnedCountBanner}
+ <PinnedMessagesBanner threadInfo={threadInfo} />
</>
);
}

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 12:25 AM (20 h, 29 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2592168
Default Alt Text
D10548.id35261.diff (5 KB)

Event Timeline