10293471602

Committed 07 Aug 2024 11:59PM UTC coverage: 32.043% (+0.02%) from 32.026%

Build # 10293471602

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

improve styles

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4937 of 40207 branches covered (12.28%)

Branch coverage included in aggregate %.

50 of 109 new or added lines in 19 files covered. (45.87%)

2 existing lines in 2 files now uncovered.

28806 of 65098 relevant lines covered (44.25%)

180.29 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

17.79

/packages/lesswrong/components/posts/PostsPage/PostsPagePostHeader.tsx

import React, { FC, MouseEvent, useEffect, useMemo } from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import { getResponseCounts, postGetAnswerCountStr, postGetCommentCountStr } from '../../../lib/collections/posts/helpers';
import { AnalyticsContext } from "../../../lib/analyticsEvents";
import { extractVersionsFromSemver } from '../../../lib/editor/utils';
import { getUrlClass } from '../../../lib/routeUtil';
import classNames from 'classnames';
import { isServer } from '../../../lib/executionEnvironment';
import moment from 'moment';
import { isLWorAF } from '../../../lib/instanceSettings';
import { useCookiesWithConsent } from '../../hooks/useCookiesWithConsent';
import { PODCAST_TOOLTIP_SEEN_COOKIE } from '../../../lib/cookies/cookies';
import { isBookUI, isFriendlyUI } from '../../../themes/forumTheme';
import type { AnnualReviewMarketInfo } from '../../../lib/annualReviewMarkets';

const SECONDARY_SPACING = 20;

const styles = (theme: ThemeType): JssStyles => ({
  header: {
    position: 'relative',
    display:"flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: isFriendlyUI ? 20 : theme.spacing.unit*2,
  },
  headerLeft: {
    width: "100%"
  },
  headerVote: {
    textAlign: 'center',
    fontSize: 42,
    position: isFriendlyUI ? 'absolute' : "relative",
    top: isFriendlyUI ? 0 : undefined,
    left: isFriendlyUI ? -93 : undefined,
    [theme.breakpoints.down("sm")]: {
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }
  },
  eventHeader: {
    marginBottom: 0,
  },
  authorAndSecondaryInfo: {
    display: 'flex',
    alignItems: 'baseline',
    columnGap: SECONDARY_SPACING,
    flexWrap: 'wrap',
    fontSize: isFriendlyUI ? theme.typography.body1.fontSize : '1.4rem',
    fontWeight: isFriendlyUI ? 450 : undefined,
    fontFamily: theme.typography.uiSecondary.fontFamily,
    color: theme.palette.text.dim3,
    paddingBottom: isFriendlyUI ? 12 : undefined,
    borderBottom: isFriendlyUI ? theme.palette.border.grey300 : undefined
  },
  secondaryInfo: {
    flexGrow: 1,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline',
    columnGap: SECONDARY_SPACING,
    rowGap: '10px',
    flexWrap: 'wrap',
    [theme.breakpoints.down("sm")]: {
      justifyContent: 'flex-start'
    }
  },
  secondaryInfoLeft: {
    display: 'flex',
    alignItems: 'baseline',
    columnGap: SECONDARY_SPACING,
    flexWrap: 'wrap'
  },
  secondaryInfoRight: {
    flex: 'none',
    display: 'flex',
    columnGap: SECONDARY_SPACING
  },
  secondaryInfoLink: {
    fontWeight: isFriendlyUI ? 450 : undefined,
    fontSize: isFriendlyUI ? undefined : theme.typography.body2.fontSize,
    "@media print": { display: "none" },
  },
  wordCount: {
    fontWeight: isFriendlyUI ? 450 : undefined,
    fontSize: isFriendlyUI ? undefined : theme.typography.body2.fontSize,
    cursor: 'default',
    "@media print": { display: "none" },
  },
  actions: {
    color: isFriendlyUI ? undefined : theme.palette.grey[500],
    "&:hover": {
      opacity: 0.5,
    },
    '& svg': {
      color: 'inherit' // this is needed for the EAF version of the icon
    },
    "@media print": { display: "none" },
  },
  authorInfo: {
    display: 'flex',
    alignItems: 'baseline',
    columnGap: SECONDARY_SPACING,
  },
  authors: {
    fontSize: theme.typography.body1.fontSize,
  },
  feedName: {
    fontSize: theme.typography.body2.fontSize,
    [theme.breakpoints.down('sm')]: {
      display: "none"
    }
  },
  divider: {
    marginTop: theme.spacing.unit*2,
    marginLeft:0,
    borderTop: theme.palette.border.faint,
    borderLeft: 'transparent'
  },
  commentIcon: {
    fontSize: "1.4em",
    marginRight: 1,
    transform: "translateY(5px)",
  },
  bookmarkButton: {
    marginBottom: -5,
    height: 22,
    color: theme.palette.grey[600],
    "&:hover": {
      opacity: 0.5,
    },
  },
  headerFooter: { 
    display: 'flex',
    justifyContent: 'space-between',
    [theme.breakpoints.down('sm')]: {
      flexDirection: 'column',
    },
    marginTop: 8,
    marginBottom: 16,
  },
  tagSection: {
    flex: 1,
    display: "flex",
    flexDirection: isFriendlyUI ? "column" : "row",
    height: "100%",
  }
});

// On the server, use the 'url' library for parsing hostname out of feed URLs.
// On the client, we instead create an <a> tag, set its href, and extract
// properties from that. (There is a URL class which theoretically would work,
// but it doesn't have the hostname field on IE11 and it's missing entirely on
// Opera Mini.)
const URLClass = getUrlClass()

function getProtocol(url: string): string {
  if (isServer)
    return new URLClass(url).protocol;

  // From https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript
  var parser = document.createElement('a');
  parser.href = url;
  return parser.protocol;
}

function getHostname(url: string): string {
  if (isServer)
    return new URLClass(url).hostname;

  // From https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript
  var parser = document.createElement('a');
  parser.href = url;
  return parser.hostname;
}

const CommentsLink: FC<{
  anchor: string,
  children: React.ReactNode,
  className?: string,
}> = ({anchor, children, className}) => {
  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    const elem = document.querySelector(anchor);
    if (elem) {
      // Match the scroll behaviour from TableOfContentsList
      window.scrollTo({
        top: elem.getBoundingClientRect().y - (window.innerHeight / 3) + 1,
        behavior: "smooth",
      });
    }
  }
  return (
    <a className={className} {...(isFriendlyUI ? {onClick} : {href: anchor})}>
      {children}
    </a>
  );
}

/// PostsPagePostHeader: The metadata block at the top of a post page, with
/// title, author, voting, an actions menu, etc.
const PostsPagePostHeader = ({post, answers = [], dialogueResponses = [], showEmbeddedPlayer, toggleEmbeddedPlayer, hideMenu, hideTags, annualReviewMarketInfo, classes}: {
  post: PostsWithNavigation|PostsWithNavigationAndRevision|PostsListWithVotes,
  answers?: CommentsList[],
  dialogueResponses?: CommentsList[],
  showEmbeddedPlayer?: boolean,
  toggleEmbeddedPlayer?: () => void,
  hideMenu?: boolean,
  hideTags?: boolean,
  annualReviewMarketInfo?: AnnualReviewMarketInfo,
  classes: ClassesType,
}) => {
  const {PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon,
    PostActionsButton, PostsVote, PostsGroupDetails, PostsTopSequencesNav,
    PostsPageEventData, FooterTagList, AddToCalendarButton, BookmarkButton,
    NewFeaturePulse, ForumIcon, GroupLinks, SharePostButton, AudioToggle} = Components;

  const rssFeedSource = ('feed' in post) ? post.feed : null;
  const feedLinkDescription = rssFeedSource?.url && getHostname(rssFeedSource.url)
  const feedLink = rssFeedSource?.url && `${getProtocol(rssFeedSource.url)}//${getHostname(rssFeedSource.url)}`;
  const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1

  const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&
    <CrosspostHeaderIcon post={post} />

  const wordCount = useMemo(() => {
    if (!post.debate || dialogueResponses.length === 0) {
      return post.contents?.wordCount || 0;
    }

    return dialogueResponses.reduce((wordCount, response) => {
      wordCount += response.contents?.wordCount ?? 0;
      return wordCount;
    }, 0);
  }, [post, dialogueResponses]);

  /**
   * It doesn't make a ton of sense to fetch all the debate response comments in the resolver field, since we:
   * 1. already have them here
   * 2. need them to compute the word count in the debate case as well
   */
  const readTime = useMemo(() => {
    if (!post.debate || dialogueResponses.length === 0) {
      return post.readTimeMinutes ?? 1;
    }

    return Math.max(1, Math.round(wordCount / 250));
  }, [post, dialogueResponses, wordCount]);

  const {
    answerCount,
    commentCount,
  } = useMemo(() => getResponseCounts({ post, answers }), [post, answers]);

  const minimalSecondaryInfo = post.isEvent || (isFriendlyUI && post.shortform);

  const readingTimeNode = minimalSecondaryInfo
    ? null
    : (
      <LWTooltip title={`${wordCount} words`}>
        <span className={classes.wordCount}>{readTime} min read</span>
      </LWTooltip>
    );

  const answersNode = !post.question || minimalSecondaryInfo
    ? null
    : (
      <CommentsLink anchor="#answers" className={classes.secondaryInfoLink}>
        {postGetAnswerCountStr(answerCount)}
      </CommentsLink>
    );




  const addToCalendarNode = post.startTime && <div className={classes.secondaryInfoLink}>
    <AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
  </div>

  const tripleDotMenuNode = !hideMenu &&
    <span className={classes.actions}>
      <AnalyticsContext pageElementContext="tripleDotMenu">
        <PostActionsButton post={post} includeBookmark={isBookUI} flip={true}/>
      </AnalyticsContext>
    </span>

    // EA Forum splits the info into two sections, plus has the info in a different order
  const secondaryInfoNode = <div className={classes.secondaryInfo}>
      <div className={classes.secondaryInfoLeft}>
        {!minimalSecondaryInfo && <PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />}
        {readingTimeNode}
        <AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
        {post.isEvent && <GroupLinks document={post} noMargin />}
        {answersNode}
        {!post.shortform &&
          <LWTooltip title={postGetCommentCountStr(post, commentCount)}>
            <CommentsLink anchor="#comments" className={classes.secondaryInfoLink}>
              <ForumIcon icon="Comment" className={classes.commentIcon} /> {commentCount}
            </CommentsLink>
          </LWTooltip>
        }
        {addToCalendarNode}
        {crosspostNode}
      </div>
      <div className={classes.secondaryInfoRight}>
        <BookmarkButton post={post} className={classes.bookmarkButton} placement='bottom-start' />
        <SharePostButton post={post} />
        {tripleDotMenuNode}
      </div>
    </div>

  // TODO: If we are not the primary author of this post, but it was shared with
  // us as a draft, display a notice and a link to the collaborative editor.

  const postActionsButton = <PostActionsButton post={post} className={classes.postActionsButton} flip />;

  return <>
    {post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}
    <AnalyticsContext pageSectionContext="topSequenceNavigation">
      {('sequence' in post) && <PostsTopSequencesNav post={post} />}
    </AnalyticsContext>
    {!post.shortform && !post.isEvent && !hideTags && <div className={classes.tagSection}>
      <AnalyticsContext pageSectionContext="tagHeader">
        <FooterTagList post={post} hideScore useAltAddTagButton hideAddTag={false} appendElement={postActionsButton} align="right" />
      </AnalyticsContext>
    </div>}
    <div className={classNames(classes.header, {[classes.eventHeader]: post.isEvent})}>
      <div className={classes.headerLeft}>
        <PostsPageTitle post={post} />
        <div className={classes.authorAndSecondaryInfo}>
          <div className={classes.authorInfo}>
            <div className={classes.authors}>
              <PostsAuthors post={post} pageSectionContext="post_header" />
            </div>
            {rssFeedSource && rssFeedSource.user &&
              <LWTooltip title={`Crossposted from ${feedLinkDescription}`} className={classes.feedName}>
                <a href={feedLink}>{rssFeedSource.nickname}</a>
              </LWTooltip>
            }
          </div>
          {secondaryInfoNode}
        </div>
      </div>
      {!post.shortform && <div className={classes.headerVote}>
        <PostsVote post={post} />
      </div>}
    </div>
    {post.isEvent && <PostsPageEventData post={post}/>}
  </>
}

const PostsPagePostHeaderComponent = registerComponent(
  'PostsPagePostHeader', PostsPagePostHeader, {styles}
);

declare global {
  interface ComponentTypes {
    PostsPagePostHeader: typeof PostsPagePostHeaderComponent,
  }
}

1	import React, { FC, MouseEvent, useEffect, useMemo } from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import { getResponseCounts, postGetAnswerCountStr, postGetCommentCountStr } from '../../../lib/collections/posts/helpers';	1✔
4	import { AnalyticsContext } from "../../../lib/analyticsEvents";	1✔
5	import { extractVersionsFromSemver } from '../../../lib/editor/utils';	1✔
6	import { getUrlClass } from '../../../lib/routeUtil';	1✔
7	import classNames from 'classnames';	1✔
8	import { isServer } from '../../../lib/executionEnvironment';	1✔
9	import moment from 'moment';
10	import { isLWorAF } from '../../../lib/instanceSettings';
11	import { useCookiesWithConsent } from '../../hooks/useCookiesWithConsent';
12	import { PODCAST_TOOLTIP_SEEN_COOKIE } from '../../../lib/cookies/cookies';
13	import { isBookUI, isFriendlyUI } from '../../../themes/forumTheme';	1✔
14	import type { AnnualReviewMarketInfo } from '../../../lib/annualReviewMarkets';
15
16	const SECONDARY_SPACING = 20;	1✔
17
18	const styles = (theme: ThemeType): JssStyles => ({	1✔
19	header: {
20	position: 'relative',
21	display:"flex",
22	justifyContent: "space-between",
23	alignItems: "center",
24	marginBottom: isFriendlyUI ? 20 : theme.spacing.unit*2,	1!
25	},
26	headerLeft: {
27	width: "100%"
28	},
29	headerVote: {
30	textAlign: 'center',
31	fontSize: 42,
32	position: isFriendlyUI ? 'absolute' : "relative",	1!
33	top: isFriendlyUI ? 0 : undefined,	1!
34	left: isFriendlyUI ? -93 : undefined,	1!
35	[theme.breakpoints.down("sm")]: {
36	position: 'relative',
37	top: 'auto',
38	left: 'auto'
39	}
40	},
41	eventHeader: {
42	marginBottom: 0,
43	},
44	authorAndSecondaryInfo: {
45	display: 'flex',
46	alignItems: 'baseline',
47	columnGap: SECONDARY_SPACING,
48	flexWrap: 'wrap',
49	fontSize: isFriendlyUI ? theme.typography.body1.fontSize : '1.4rem',	1!
50	fontWeight: isFriendlyUI ? 450 : undefined,	1!
51	fontFamily: theme.typography.uiSecondary.fontFamily,
52	color: theme.palette.text.dim3,
53	paddingBottom: isFriendlyUI ? 12 : undefined,	1!
54	borderBottom: isFriendlyUI ? theme.palette.border.grey300 : undefined	1!
55	},
56	secondaryInfo: {
57	flexGrow: 1,
58	display: 'flex',
59	justifyContent: 'space-between',
60	alignItems: 'baseline',
61	columnGap: SECONDARY_SPACING,
62	rowGap: '10px',
63	flexWrap: 'wrap',
64	[theme.breakpoints.down("sm")]: {
65	justifyContent: 'flex-start'
66	}
67	},
68	secondaryInfoLeft: {
69	display: 'flex',
70	alignItems: 'baseline',
71	columnGap: SECONDARY_SPACING,
72	flexWrap: 'wrap'
73	},
74	secondaryInfoRight: {
75	flex: 'none',
76	display: 'flex',
77	columnGap: SECONDARY_SPACING
78	},
79	secondaryInfoLink: {
80	fontWeight: isFriendlyUI ? 450 : undefined,	1!
81	fontSize: isFriendlyUI ? undefined : theme.typography.body2.fontSize,	1!
82	"@media print": { display: "none" },
83	},
84	wordCount: {
85	fontWeight: isFriendlyUI ? 450 : undefined,	1!
86	fontSize: isFriendlyUI ? undefined : theme.typography.body2.fontSize,	1!
87	cursor: 'default',
88	"@media print": { display: "none" },
89	},
90	actions: {
91	color: isFriendlyUI ? undefined : theme.palette.grey[500],	1!
92	"&:hover": {
93	opacity: 0.5,
94	},
95	'& svg': {
96	color: 'inherit' // this is needed for the EAF version of the icon
97	},
98	"@media print": { display: "none" },
99	},
100	authorInfo: {
101	display: 'flex',
102	alignItems: 'baseline',
103	columnGap: SECONDARY_SPACING,
104	},
105	authors: {
106	fontSize: theme.typography.body1.fontSize,
107	},
108	feedName: {
109	fontSize: theme.typography.body2.fontSize,
110	[theme.breakpoints.down('sm')]: {
111	display: "none"
112	}
113	},
114	divider: {
115	marginTop: theme.spacing.unit*2,
116	marginLeft:0,
117	borderTop: theme.palette.border.faint,
118	borderLeft: 'transparent'
119	},
120	commentIcon: {
121	fontSize: "1.4em",
122	marginRight: 1,
123	transform: "translateY(5px)",
124	},
125	bookmarkButton: {
126	marginBottom: -5,
127	height: 22,
128	color: theme.palette.grey[600],
129	"&:hover": {
130	opacity: 0.5,
131	},
132	},
133	headerFooter: {
134	display: 'flex',
135	justifyContent: 'space-between',
136	[theme.breakpoints.down('sm')]: {
137	flexDirection: 'column',
138	},
139	marginTop: 8,
140	marginBottom: 16,
141	},
142	tagSection: {
143	flex: 1,
144	display: "flex",
145	flexDirection: isFriendlyUI ? "column" : "row",	1!
146	height: "100%",
147	}
148	});
149
150	// On the server, use the 'url' library for parsing hostname out of feed URLs.
151	// On the client, we instead create an <a> tag, set its href, and extract
152	// properties from that. (There is a URL class which theoretically would work,
153	// but it doesn't have the hostname field on IE11 and it's missing entirely on
154	// Opera Mini.)
155	const URLClass = getUrlClass()	1✔
156
157	function getProtocol(url: string): string {
158	if (isServer)	×
159	return new URLClass(url).protocol;	×
160
161	// From https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript
162	var parser = document.createElement('a');	×
163	parser.href = url;	×
164	return parser.protocol;	×
165	}
166
167	function getHostname(url: string): string {
168	if (isServer)	×
169	return new URLClass(url).hostname;	×
170
171	// From https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript
172	var parser = document.createElement('a');	×
173	parser.href = url;	×
174	return parser.hostname;	×
175	}
176
177	const CommentsLink: FC<{
178	anchor: string,
179	children: React.ReactNode,
180	className?: string,
181	}> = ({anchor, children, className}) => {	1✔
182	const onClick = (e: MouseEvent<HTMLAnchorElement>) => {	×
183	e.preventDefault();	×
184	const elem = document.querySelector(anchor);	×
185	if (elem) {	×
186	// Match the scroll behaviour from TableOfContentsList
187	window.scrollTo({	×
188	top: elem.getBoundingClientRect().y - (window.innerHeight / 3) + 1,
189	behavior: "smooth",
190	});
191	}
192	}
193	return (	×
194	<a className={className} {...(isFriendlyUI ? {onClick} : {href: anchor})}>	×
195	{children}
196	</a>
197	);
198	}
199
200	/// PostsPagePostHeader: The metadata block at the top of a post page, with
201	/// title, author, voting, an actions menu, etc.
202	const PostsPagePostHeader = ({post, answers = [], dialogueResponses = [], showEmbeddedPlayer, toggleEmbeddedPlayer, hideMenu, hideTags, annualReviewMarketInfo, classes}: {	1!
203	post: PostsWithNavigation\|PostsWithNavigationAndRevision\|PostsListWithVotes,
204	answers?: CommentsList[],
205	dialogueResponses?: CommentsList[],
206	showEmbeddedPlayer?: boolean,
207	toggleEmbeddedPlayer?: () => void,
208	hideMenu?: boolean,
209	hideTags?: boolean,
210	annualReviewMarketInfo?: AnnualReviewMarketInfo,
211	classes: ClassesType,
212	}) => {
213	const {PostsPageTitle, PostsAuthors, LWTooltip, PostsPageDate, CrosspostHeaderIcon,
214	PostActionsButton, PostsVote, PostsGroupDetails, PostsTopSequencesNav,
215	PostsPageEventData, FooterTagList, AddToCalendarButton, BookmarkButton,
NEW 216	NewFeaturePulse, ForumIcon, GroupLinks, SharePostButton, AudioToggle} = Components;	×
217
218	const rssFeedSource = ('feed' in post) ? post.feed : null;	×
219	const feedLinkDescription = rssFeedSource?.url && getHostname(rssFeedSource.url)	×
220	const feedLink = rssFeedSource?.url && `${getProtocol(rssFeedSource.url)}//${getHostname(rssFeedSource.url)}`;	×
221	const hasMajorRevision = ('version' in post) && extractVersionsFromSemver(post.version).major > 1	×
222
223	const crosspostNode = post.fmCrosspost?.isCrosspost && !post.fmCrosspost.hostedHere &&	×
224	<CrosspostHeaderIcon post={post} />
225
226	const wordCount = useMemo(() => {	×
227	if (!post.debate \|\| dialogueResponses.length === 0) {	×
228	return post.contents?.wordCount \|\| 0;	×
229	}
230
231	return dialogueResponses.reduce((wordCount, response) => {	×
232	wordCount += response.contents?.wordCount ?? 0;	×
233	return wordCount;	×
234	}, 0);
235	}, [post, dialogueResponses]);
236
237	/**
238	* It doesn't make a ton of sense to fetch all the debate response comments in the resolver field, since we:
239	* 1. already have them here
240	* 2. need them to compute the word count in the debate case as well
241	*/
242	const readTime = useMemo(() => {	×
243	if (!post.debate \|\| dialogueResponses.length === 0) {	×
244	return post.readTimeMinutes ?? 1;	×
245	}
246
247	return Math.max(1, Math.round(wordCount / 250));	×
248	}, [post, dialogueResponses, wordCount]);
249
250	const {
251	answerCount,
252	commentCount,
253	} = useMemo(() => getResponseCounts({ post, answers }), [post, answers]);	×
254
255	const minimalSecondaryInfo = post.isEvent \|\| (isFriendlyUI && post.shortform);	×
256
257	const readingTimeNode = minimalSecondaryInfo	×
258	? null	×
259	: (
260	<LWTooltip title={`${wordCount} words`}>
261	<span className={classes.wordCount}>{readTime} min read</span>
262	</LWTooltip>
263	);
264
265	const answersNode = !post.question \|\| minimalSecondaryInfo	×
266	? null	×
267	: (
268	<CommentsLink anchor="#answers" className={classes.secondaryInfoLink}>
269	{postGetAnswerCountStr(answerCount)}
270	</CommentsLink>
271	);
272
273
274
275
276	const addToCalendarNode = post.startTime && <div className={classes.secondaryInfoLink}>	×
277	<AddToCalendarButton post={post} label="Add to calendar" hideTooltip />
278	</div>
279
280	const tripleDotMenuNode = !hideMenu &&	×
281	<span className={classes.actions}>
282	<AnalyticsContext pageElementContext="tripleDotMenu">
283	<PostActionsButton post={post} includeBookmark={isBookUI} flip={true}/>
284	</AnalyticsContext>
285	</span>
286
287	// EA Forum splits the info into two sections, plus has the info in a different order
NEW 288	const secondaryInfoNode = <div className={classes.secondaryInfo}>	×
289	<div className={classes.secondaryInfoLeft}>
290	{!minimalSecondaryInfo && <PostsPageDate post={post} hasMajorRevision={hasMajorRevision} />}	×
291	{readingTimeNode}
292	<AudioToggle post={post} toggleEmbeddedPlayer={toggleEmbeddedPlayer} showEmbeddedPlayer={showEmbeddedPlayer} />
293	{post.isEvent && <GroupLinks document={post} noMargin />}	×
294	{answersNode}
295	{!post.shortform &&	×
296	<LWTooltip title={postGetCommentCountStr(post, commentCount)}>
297	<CommentsLink anchor="#comments" className={classes.secondaryInfoLink}>
298	<ForumIcon icon="Comment" className={classes.commentIcon} /> {commentCount}
299	</CommentsLink>
300	</LWTooltip>
301	}
302	{addToCalendarNode}
303	{crosspostNode}
304	</div>
305	<div className={classes.secondaryInfoRight}>
306	<BookmarkButton post={post} className={classes.bookmarkButton} placement='bottom-start' />
307	<SharePostButton post={post} />
308	{tripleDotMenuNode}
309	</div>
310	</div>
311
312	// TODO: If we are not the primary author of this post, but it was shared with
313	// us as a draft, display a notice and a link to the collaborative editor.
314
NEW 315	const postActionsButton = <PostActionsButton post={post} className={classes.postActionsButton} flip />;	×
316
UNCOV 317	return <>	×
318	{post.group && <PostsGroupDetails post={post} documentId={post.group._id} />}	×
319	<AnalyticsContext pageSectionContext="topSequenceNavigation">
320	{('sequence' in post) && <PostsTopSequencesNav post={post} />}	×
321	</AnalyticsContext>
322	{!post.shortform && !post.isEvent && !hideTags && <div className={classes.tagSection}>	×
323	<AnalyticsContext pageSectionContext="tagHeader">
324	<FooterTagList post={post} hideScore useAltAddTagButton hideAddTag={false} appendElement={postActionsButton} align="right" />
325	</AnalyticsContext>
326	</div>}
327	<div className={classNames(classes.header, {[classes.eventHeader]: post.isEvent})}>
328	<div className={classes.headerLeft}>
329	<PostsPageTitle post={post} />
330	<div className={classes.authorAndSecondaryInfo}>
331	<div className={classes.authorInfo}>
332	<div className={classes.authors}>
333	<PostsAuthors post={post} pageSectionContext="post_header" />
334	</div>
335	{rssFeedSource && rssFeedSource.user &&	×
336	<LWTooltip title={`Crossposted from ${feedLinkDescription}`} className={classes.feedName}>
337	<a href={feedLink}>{rssFeedSource.nickname}</a>
338	</LWTooltip>
339	}
340	</div>
341	{secondaryInfoNode}
342	</div>
343	</div>
344	{!post.shortform && <div className={classes.headerVote}>	×
345	<PostsVote post={post} />
346	</div>}
347	</div>
348	{post.isEvent && <PostsPageEventData post={post}/>}	×
349	</>
350	}
351
352	const PostsPagePostHeaderComponent = registerComponent(	1✔
353	'PostsPagePostHeader', PostsPagePostHeader, {styles}
354	);
355
356	declare global {
357	interface ComponentTypes {
358	PostsPagePostHeader: typeof PostsPagePostHeaderComponent,
359	}
360	}

ForumMagnum / ForumMagnum / 10293471602

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous