Page MenuHomePhabricator
Files F3361091

D6841.id23316.diff
No OneTemporary
Actions

D6841.id23316.diff
View Options

diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -3,9 +3,9 @@
background-color: var(--bg);
align-items: center;
justify-content: space-between;
- padding: 16px;
+ padding: 0 16px;
color: var(--thread-top-bar-color);
- border-bottom: 1px solid var(--border);
+ height: 56px;
}
div.topBarThreadInfo {
@@ -25,3 +25,15 @@
font-size: var(--m-font-16);
font-weight: var(--bold);
}
+
+div.hide {
+ height: 0px;
+ opacity: 0;
+ transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
+}
+
+div.show {
+ height: 56px;
+ opacity: 1;
+ transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
+}
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -1,5 +1,6 @@
// @flow
+import classnames from 'classnames';
import * as React from 'react';
import type { ThreadInfo } from 'lib/types/thread-types.js';
@@ -13,6 +14,7 @@
};
function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
const { threadInfo } = props;
+
const threadBackgroundColorStyle = React.useMemo(
() => ({
background: `#${threadInfo.color}`,
@@ -22,7 +24,7 @@
const { uiName } = useResolvedThreadInfo(threadInfo);
return (
- <div className={css.topBarContainer}>
+ <>
<div className={css.topBarThreadInfo}>
<div
className={css.threadColorSquare}
@@ -31,8 +33,46 @@
<p className={css.threadTitle}>{uiName}</p>
<ThreadAncestors threadInfo={threadInfo} />
</div>
- </div>
+ </>
);
}
-export default NavStateInfoBar;
+type PossiblyEmptyNavStateInfoBarProps = {
+ +threadInfoInput: ?ThreadInfo,
+};
+function PossiblyEmptyNavStateInfoBar(
+ props: PossiblyEmptyNavStateInfoBarProps,
+): React.Node {
+ const { threadInfoInput } = props;
+
+ const [threadInfo, setThreadInfo] = React.useState(threadInfoInput);
+
+ React.useEffect(() => {
+ if (threadInfoInput !== threadInfo) {
+ if (threadInfoInput) {
+ setThreadInfo(threadInfoInput);
+ } else {
+ const timeout = setTimeout(() => {
+ setThreadInfo(null);
+ }, 200);
+ return () => clearTimeout(timeout);
+ }
+ }
+ }, [threadInfoInput, threadInfo]);
+
+ const content = React.useMemo(() => {
+ if (threadInfo) {
+ return <NavStateInfoBar threadInfo={threadInfo} />;
+ } else {
+ return null;
+ }
+ }, [threadInfo]);
+
+ const classes = classnames(css.topBarContainer, {
+ [css.hide]: !threadInfoInput,
+ [css.show]: threadInfoInput,
+ });
+ return <div className={classes}>{content}</div>;
+}
+
+export default PossiblyEmptyNavStateInfoBar;

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 3:17 PM (20 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2579971
Default Alt Text
D6841.id23316.diff (2 KB)

Event Timeline