10741562826

Committed 06 Sep 2024 04:05PM UTC coverage: 31.87% (-0.03%) from 31.897%

Build # 10741562826

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9723 from ForumMagnum/master

[EA] Deploy LW changes: Uninverting control flow, Curation page, Spotlight admin page changes

Run Details

5070 of 41293 branches covered (12.28%)

Branch coverage included in aggregate %.

200 of 391 new or added lines in 52 files covered. (51.15%)

17 existing lines in 9 files now uncovered.

29397 of 66857 relevant lines covered (43.97%)

185.14 hits per line

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

38.46

/packages/lesswrong/components/posts/TableOfContents/TableOfContentsRow.tsx

import React from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import classNames from 'classnames';
import { isBookUI, isFriendlyUI } from '../../../themes/forumTheme';
import { fullHeightToCEnabled } from '../../../lib/betas';

const sectionOffsetStyling = (fullHeightToCEnabled ? {
  display: 'flex',
  flexDirection: 'column-reverse',
} : {});

const styles = (theme: ThemeType) => ({
  root: {
    position: "relative",
    ...theme.typography.body2,
    ...theme.typography.commentStyle,
  },

  // For the highlighted section only, disable the half-opacity-on-hover effect
  // that's otherwise globally applied to <a> tags.
  highlighted: {
    '& $link': {
      color: theme.palette.link.tocLinkHighlighted,
    },
    '& $highlightDot:after': {
      content: isBookUI ? null : `"•"`,
      marginLeft: 3,
      position: 'relative',
      top: 1
    },
    "& a:focus, & a:hover": {
      opacity: "initial",
    }
  },
  dense: {
    paddingTop: "0 !important",
    paddingBottom: "4px !important",
    fontSize: 12,
  },
  link: {
    display: "block",
    paddingTop: 6,
    paddingBottom: 6,
    color: theme.palette.link.tocLink,
    lineHeight: fullHeightToCEnabled ? "1em" : "1.2em",
    '&:hover':{
      color: theme.palette.link.tocLinkHighlighted,
      opacity: isFriendlyUI ? 1 : undefined
    },
    ...(isFriendlyUI && {
      lineHeight: "1.1rem",
      fontSize: "1rem",
    }),
  },
  highlightDot: {},
  // Makes sure that the start of the ToC is in line with the start of the text
  title: {
    paddingTop: 3,
    paddingBottom: theme.spacing.unit*1.5,
    borderBottom: theme.palette.border.faint,
    fontSize: isFriendlyUI ? "1em" : undefined,
    '&:hover': {
      opacity: "unset"
    }
  },
  level0: {
    display:"block",
    maxWidth: '100%',
    marginBottom: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    '& $link': {
      whiteSpace: "normal",
    },
    // Don't show location dot for level0
    '& $link:after': {
      display: "none",
    },
    ...sectionOffsetStyling,
  },
  level1: {
    paddingLeft: 0,
    ...sectionOffsetStyling,
  },
  level2: {
    fontSize:"1.1rem",
    paddingLeft: isFriendlyUI ? 16 : 12,
    ...sectionOffsetStyling,
  },
  level3: {
    fontSize:"1.1rem",
    color: theme.palette.text.dim700,
    paddingLeft: isFriendlyUI ? 32 : 24,
    ...sectionOffsetStyling,
  },
  level4: {
    fontSize:"1.1rem",
    color: theme.palette.text.dim700,
    paddingLeft: isFriendlyUI ? 48 : 36,
    ...sectionOffsetStyling,
  },
  titleContainer: {
    height: '100%',
    maxHeight: 200,
    display: 'flex',
    flexDirection: 'column-reverse',
    transition: 'opacity 0.4s ease-in-out, height 0.4s ease-in-out, max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out',
  }
});

const levelToClassName = (level: number, classes: ClassesType<typeof styles>) => {
  switch(level) {
    case 0: return classes.level0;
    case 1: return classes.level1;
    case 2: return classes.level2;
    case 3: return classes.level3;
    default: return classes.level4;
  }
}

const TableOfContentsRow = ({
  indentLevel=0, highlighted=false, href, onClick, children, classes, title, divider, answer, dense, scale, fullHeight, commentToC
}: {
  indentLevel?: number,
  highlighted?: boolean,
  href: string,
  onClick?: (ev: any) => void,
  children?: React.ReactNode,
  classes: ClassesType<typeof styles>,
  title?: boolean,
  divider?: boolean,
  answer?: boolean,
  dense?: boolean,
  /** Used to dynamically set `flex` ratios for the full-height ToC */
  scale?: number,
  fullHeight?: boolean,
  commentToC?: boolean
}) => {
  const fullHeightTitle = !!(title && fullHeight);

  const scaleStyling = scale !== undefined ? { flex: scale } : undefined;

  if (divider) {
    return <Components.TableOfContentsDivider scaleStyling={scaleStyling} />
  }
  
  return <div
    className={classNames(
      classes.root,
      levelToClassName(indentLevel, classes),
      { [classes.titleContainer]: fullHeightTitle },
      { [classes.highlighted]: highlighted },
    )}
    style={scaleStyling}
  >
    <a href={href} onClick={onClick} className={classNames(classes.link, {
      [classes.title]: title,
      [classes.highlightDot]: !answer,
      [classes.dense]: dense
    })}>
      {children}
    </a>
  </div>
}

const TableOfContentsRowComponent = registerComponent("TableOfContentsRow", TableOfContentsRow, {styles});

declare global {
  interface ComponentTypes {
    TableOfContentsRow: typeof TableOfContentsRowComponent
  }
}

1	import React from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import classNames from 'classnames';	1✔
4	import { isBookUI, isFriendlyUI } from '../../../themes/forumTheme';	1✔
5	import { fullHeightToCEnabled } from '../../../lib/betas';	1✔
6
7	const sectionOffsetStyling = (fullHeightToCEnabled ? {	1!
8	display: 'flex',
9	flexDirection: 'column-reverse',
10	} : {});
11
12	const styles = (theme: ThemeType) => ({	1✔
13	root: {
14	position: "relative",
15	...theme.typography.body2,
16	...theme.typography.commentStyle,
17	},
18
19	// For the highlighted section only, disable the half-opacity-on-hover effect
20	// that's otherwise globally applied to <a> tags.
21	highlighted: {
22	'& $link': {
23	color: theme.palette.link.tocLinkHighlighted,
24	},
25	'& $highlightDot:after': {
26	content: isBookUI ? null : `"•"`,	1!
27	marginLeft: 3,
28	position: 'relative',
29	top: 1
30	},
31	"& a:focus, & a:hover": {
32	opacity: "initial",
33	}
34	},
35	dense: {
36	paddingTop: "0 !important",
37	paddingBottom: "4px !important",
38	fontSize: 12,
39	},
40	link: {
41	display: "block",
42	paddingTop: 6,
43	paddingBottom: 6,
44	color: theme.palette.link.tocLink,
45	lineHeight: fullHeightToCEnabled ? "1em" : "1.2em",	1!
46	'&:hover':{
47	color: theme.palette.link.tocLinkHighlighted,
48	opacity: isFriendlyUI ? 1 : undefined	1!
49	},
50	...(isFriendlyUI && {	2✔
51	lineHeight: "1.1rem",
52	fontSize: "1rem",
53	}),
54	},
55	highlightDot: {},
56	// Makes sure that the start of the ToC is in line with the start of the text
57	title: {
58	paddingTop: 3,
59	paddingBottom: theme.spacing.unit*1.5,
60	borderBottom: theme.palette.border.faint,
61	fontSize: isFriendlyUI ? "1em" : undefined,	1!
62	'&:hover': {
63	opacity: "unset"
64	}
65	},
66	level0: {
67	display:"block",
68	maxWidth: '100%',
69	marginBottom: theme.spacing.unit,
70	marginRight: theme.spacing.unit,
71	'& $link': {
72	whiteSpace: "normal",
73	},
74	// Don't show location dot for level0
75	'& $link:after': {
76	display: "none",
77	},
78	...sectionOffsetStyling,
79	},
80	level1: {
81	paddingLeft: 0,
82	...sectionOffsetStyling,
83	},
84	level2: {
85	fontSize:"1.1rem",
86	paddingLeft: isFriendlyUI ? 16 : 12,	1!
87	...sectionOffsetStyling,
88	},
89	level3: {
90	fontSize:"1.1rem",
91	color: theme.palette.text.dim700,
92	paddingLeft: isFriendlyUI ? 32 : 24,	1!
93	...sectionOffsetStyling,
94	},
95	level4: {
96	fontSize:"1.1rem",
97	color: theme.palette.text.dim700,
98	paddingLeft: isFriendlyUI ? 48 : 36,	1!
99	...sectionOffsetStyling,
100	},
101	titleContainer: {
102	height: '100%',
103	maxHeight: 200,
104	display: 'flex',
105	flexDirection: 'column-reverse',
106	transition: 'opacity 0.4s ease-in-out, height 0.4s ease-in-out, max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out',
107	}
108	});
109
110	const levelToClassName = (level: number, classes: ClassesType<typeof styles>) => {	1✔
111	switch(level) {	×
112	case 0: return classes.level0;	×
113	case 1: return classes.level1;	×
114	case 2: return classes.level2;	×
115	case 3: return classes.level3;	×
116	default: return classes.level4;	×
117	}
118	}
119
120	const TableOfContentsRow = ({	1✔
121	indentLevel=0, highlighted=false, href, onClick, children, classes, title, divider, answer, dense, scale, fullHeight, commentToC	×
122	}: {
123	indentLevel?: number,
124	highlighted?: boolean,
125	href: string,
126	onClick?: (ev: any) => void,
127	children?: React.ReactNode,
128	classes: ClassesType<typeof styles>,
129	title?: boolean,
130	divider?: boolean,
131	answer?: boolean,
132	dense?: boolean,
133	/** Used to dynamically set `flex` ratios for the full-height ToC */
134	scale?: number,
135	fullHeight?: boolean,
136	commentToC?: boolean
137	}) => {
138	const fullHeightTitle = !!(title && fullHeight);	×
139
NEW 140	const scaleStyling = scale !== undefined ? { flex: scale } : undefined;	×
141
142	if (divider) {	×
NEW 143	return <Components.TableOfContentsDivider scaleStyling={scaleStyling} />	×
144	}
145
146	return <div	×
147	className={classNames(
148	classes.root,
149	levelToClassName(indentLevel, classes),
150	{ [classes.titleContainer]: fullHeightTitle },
151	{ [classes.highlighted]: highlighted },
152	)}
153	style={scaleStyling}
154	>
155	<a href={href} onClick={onClick} className={classNames(classes.link, {
156	[classes.title]: title,
157	[classes.highlightDot]: !answer,
158	[classes.dense]: dense
159	})}>
160	{children}
161	</a>
162	</div>
163	}
164
165	const TableOfContentsRowComponent = registerComponent("TableOfContentsRow", TableOfContentsRow, {styles});	1✔
166
167	declare global {
168	interface ComponentTypes {
169	TableOfContentsRow: typeof TableOfContentsRowComponent
170	}
171	}

ForumMagnum / ForumMagnum / 10741562826

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