9356871443

Committed 03 Jun 2024 08:32PM UTC coverage: 32.206% (+0.3%) from 31.94%

Build # 9356871443

Build Type

Pull #9360

github

Committed by

b0b3rt

Commit Message

fix positioning of tooltip

Pull Request Pull Request #9360: Lw user tooltip clickable setting

Run Details

3188 of 25696 branches covered (12.41%)

Branch coverage included in aggregate %.

3 of 6 new or added lines in 2 files covered. (50.0%)

1 existing line in 1 file now uncovered.

18196 of 40702 relevant lines covered (44.71%)

281.23 hits per line

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

32.14

/packages/lesswrong/components/users/LWUserTooltipContent.tsx

import React from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import { truncate } from '../../lib/editor/ellipsize';
import { useMulti } from '@/lib/crud/withMulti';
import { userHasSubscribeTabFeed } from '@/lib/betas';
import { useCurrentUser } from '../common/withUser';

const styles = (theme: ThemeType) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    width: 350,
    // maxWidth: "unset",
    fontSize: 14,
    fontWeight: 450,
    lineHeight: "19.5px",
    padding: 16,
    color: theme.palette.text.primary,
    background: theme.palette.panelBackground.default,
    boxShadow: theme.palette.boxShadow.lwTagHoverOver,
    ...theme.typography.postStyle
  },
  header: {
    display: "flex",
    flexDirection: "column",
    maxWidth: 400,
  },
  name: {
    marginTop: 4,
    fontSize: "1.7rem",
    fontWeight: 400,
    color: theme.palette.grey["A400"],
  },
  metaRow: {
    marginTop: 8,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    color: theme.palette.grey["600"],
    fontSize: "1.1rem",
  },
  bio: {
    marginTop: 8,
    lineHeight: "1.3rem",
  },
  bioText: {
    fontSize: "1.1rem",
  },
  posts: {
    marginTop: 8,
    paddingTop: 8,
    borderTop: theme.palette.border.extraFaint,
    overflow: "hidden",
  },
});

export const LWUserTooltipContent = ({hideFollowButton=false, classes, user}: {
  hideFollowButton?: boolean,
  classes: ClassesType<typeof styles>,
  user: UsersMinimumInfo,
}) => {
  const { ContentStyles, TagSmallPostLink, FollowUserButton, UserMetaInfo, Loading } = Components;
  
  const { htmlBio, displayName } = user;
  const truncatedBio = truncate(htmlBio, 500);

  const currentUser = useCurrentUser();

  const { loading, results } = useMulti({
    terms: {
      userId: user._id,
      view: "userPosts",
      sortedBy: "new"
    },
    collectionName: "Posts",
    fragmentName: 'PostsList',
    enableTotal: false,
    limit: 3,
  });

  return (
    <div className={classes.root}>
      <div className={classes.header}>
        <div className={classes.name}>{displayName}</div>
        <div className={classes.metaRow}>
          <UserMetaInfo user={user} />
          {!hideFollowButton && userHasSubscribeTabFeed(currentUser) && <FollowUserButton user={user} />}
        </div>
      </div>

      {truncatedBio && <ContentStyles className={classes.bio} contentType='postHighlight'>
        <div className={classes.bioText } dangerouslySetInnerHTML={{__html: truncatedBio}}/>
      </ContentStyles>}
      {results && <div className={classes.posts}>
        {results.map((post) => post &&
          <TagSmallPostLink
            key={post._id}
            post={post}
            hideAuthor
          />
        )}
      </div>}
      {loading && <Loading />}
    </div>
);
}

const LWUserTooltipContentComponent = registerComponent(
  'LWUserTooltipContent',
  LWUserTooltipContent,
  {styles},
);

declare global {
  interface ComponentTypes {
    LWUserTooltipContent: typeof LWUserTooltipContentComponent
  }
}

// import React from 'react';
// import { userGetCommentCount, userGetPostCount } from '../../lib/collections/users/helpers';
// import { registerComponent, Components } from '../../lib/vulcan-lib';
// import { truncate } from '../../lib/editor/ellipsize';
// import DescriptionIcon from '@material-ui/icons/Description';
// import MessageIcon from '@material-ui/icons/Message';
// import TagIcon from '@material-ui/icons/LocalOffer';
// import { BookIcon } from '../icons/bookIcon'
// import classNames from 'classnames';
// import { taggingNameIsSet, taggingNameSetting } from '../../lib/instanceSettings';

// const styles = (theme: ThemeType): JssStyles => ({
//   tooltip: {
//     maxWidth: 250,
//   },
//   joined: {
//     ...theme.typography.italic,
//     marginBottom: theme.spacing.unit,
//   },
//   bookIcon: {
//     filter: "invert(100%)",
//   },
//   bio: {
//     marginTop: theme.spacing.unit,
//     lineHeight: "1.3rem",
//   },
//   icon: {
//     height: "1rem",
//     width: "1rem",
//     position: "relative",
//     top: 2,
//     color: theme.palette.icon.tooltipUserMetric,
//   },
// });

// export const LWUserTooltipContent = ({classes, user}: {
//   classes: ClassesType,
//   user: UsersMinimumInfo,
// }) => {

//   const { FormatDate } = Components

//   const { htmlBio } = user

//   const truncatedBio = truncate(htmlBio, 500)
//   const postCount = userGetPostCount(user)
//   const commentCount = userGetCommentCount(user)
//   const wikiContributionCount = user.tagRevisionCount
//   const sequenceCount = user.sequenceCount; // TODO: Counts LW sequences on Alignment Forum

//   return <span>
//     <div className={classes.joined}>Joined on <FormatDate date={user.createdAt} format="MMM Do YYYY" /></div>
//     { !!sequenceCount && <div>
//         <BookIcon className={classNames(classes.icon, classes.bookIcon)}/> { sequenceCount } sequence{sequenceCount !== 1 && 's'}
//       </div>}
//     { !!postCount && <div><DescriptionIcon className={classes.icon} /> { postCount } post{postCount !== 1 && 's'}</div>}
//     { !!commentCount && <div><MessageIcon className={classes.icon}  /> { commentCount } comment{commentCount !== 1 && 's'}</div>}
//     { !!wikiContributionCount && <div><TagIcon className={classes.icon}  /> { wikiContributionCount } {taggingNameIsSet.get() ? taggingNameSetting.get() : 'wiki'} contribution{wikiContributionCount !== 1 && 's'}</div>}
//     { truncatedBio && <div className={classes.bio } dangerouslySetInnerHTML={{__html: truncatedBio}}/>}
//   </span>
// }

// const LWUserTooltipContentComponent = registerComponent(
//   'LWUserTooltipContent',
//   LWUserTooltipContent,
//   {styles},
// );

// declare global {
//   interface ComponentTypes {
//     LWUserTooltipContent: typeof LWUserTooltipContentComponent
//   }
// }

1	import React from 'react';	3✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import { truncate } from '../../lib/editor/ellipsize';	1✔
4	import { useMulti } from '@/lib/crud/withMulti';	1✔
5	import { userHasSubscribeTabFeed } from '@/lib/betas';	1✔
6	import { useCurrentUser } from '../common/withUser';	1✔
7
8	const styles = (theme: ThemeType) => ({	1✔
9	root: {
10	display: "flex",
11	flexDirection: "column",
12	width: 350,
13	// maxWidth: "unset",
14	fontSize: 14,
15	fontWeight: 450,
16	lineHeight: "19.5px",
17	padding: 16,
18	color: theme.palette.text.primary,
19	background: theme.palette.panelBackground.default,
20	boxShadow: theme.palette.boxShadow.lwTagHoverOver,
21	...theme.typography.postStyle
22	},
23	header: {
24	display: "flex",
25	flexDirection: "column",
26	maxWidth: 400,
27	},
28	name: {
29	marginTop: 4,
30	fontSize: "1.7rem",
31	fontWeight: 400,
32	color: theme.palette.grey["A400"],
33	},
34	metaRow: {
35	marginTop: 8,
36	display: "flex",
37	flexDirection: "row",
38	justifyContent: "space-between",
39	alignItems: "center",
40	color: theme.palette.grey["600"],
41	fontSize: "1.1rem",
42	},
43	bio: {
44	marginTop: 8,
45	lineHeight: "1.3rem",
46	},
47	bioText: {
48	fontSize: "1.1rem",
49	},
50	posts: {
51	marginTop: 8,
52	paddingTop: 8,
53	borderTop: theme.palette.border.extraFaint,
54	overflow: "hidden",
55	},
56	});
57
58	export const LWUserTooltipContent = ({hideFollowButton=false, classes, user}: {	1!
59	hideFollowButton?: boolean,
60	classes: ClassesType<typeof styles>,
61	user: UsersMinimumInfo,
62	}) => {
NEW 63	const { ContentStyles, TagSmallPostLink, FollowUserButton, UserMetaInfo, Loading } = Components;	×
64
UNCOV 65	const { htmlBio, displayName } = user;	×
NEW 66	const truncatedBio = truncate(htmlBio, 500);	×
67
NEW 68	const currentUser = useCurrentUser();	×
69
70	const { loading, results } = useMulti({	×
71	terms: {
72	userId: user._id,
73	view: "userPosts",
74	sortedBy: "new"
75	},
76	collectionName: "Posts",
77	fragmentName: 'PostsList',
78	enableTotal: false,
79	limit: 3,
80	});
81
82	return (	×
83	<div className={classes.root}>
84	<div className={classes.header}>
85	<div className={classes.name}>{displayName}</div>
86	<div className={classes.metaRow}>
87	<UserMetaInfo user={user} />
88	{!hideFollowButton && userHasSubscribeTabFeed(currentUser) && <FollowUserButton user={user} />}	×
89	</div>
90	</div>
91
92	{truncatedBio && <ContentStyles className={classes.bio} contentType='postHighlight'>	×
93	<div className={classes.bioText } dangerouslySetInnerHTML={{__html: truncatedBio}}/>
94	</ContentStyles>}
95	{results && <div className={classes.posts}>	×
96	{results.map((post) => post &&	×
97	<TagSmallPostLink
98	key={post._id}
99	post={post}
100	hideAuthor
101	/>
102	)}
103	</div>}
104	{loading && <Loading />}	×
105	</div>
106	);
107	}
108
109	const LWUserTooltipContentComponent = registerComponent(	1✔
110	'LWUserTooltipContent',
111	LWUserTooltipContent,
112	{styles},
113	);
114
115	declare global {
116	interface ComponentTypes {
117	LWUserTooltipContent: typeof LWUserTooltipContentComponent
118	}
119	}
120
121	// import React from 'react';
122	// import { userGetCommentCount, userGetPostCount } from '../../lib/collections/users/helpers';
123	// import { registerComponent, Components } from '../../lib/vulcan-lib';
124	// import { truncate } from '../../lib/editor/ellipsize';
125	// import DescriptionIcon from '@material-ui/icons/Description';
126	// import MessageIcon from '@material-ui/icons/Message';
127	// import TagIcon from '@material-ui/icons/LocalOffer';
128	// import { BookIcon } from '../icons/bookIcon'
129	// import classNames from 'classnames';
130	// import { taggingNameIsSet, taggingNameSetting } from '../../lib/instanceSettings';
131
132	// const styles = (theme: ThemeType): JssStyles => ({
133	// tooltip: {
134	// maxWidth: 250,
135	// },
136	// joined: {
137	// ...theme.typography.italic,
138	// marginBottom: theme.spacing.unit,
139	// },
140	// bookIcon: {
141	// filter: "invert(100%)",
142	// },
143	// bio: {
144	// marginTop: theme.spacing.unit,
145	// lineHeight: "1.3rem",
146	// },
147	// icon: {
148	// height: "1rem",
149	// width: "1rem",
150	// position: "relative",
151	// top: 2,
152	// color: theme.palette.icon.tooltipUserMetric,
153	// },
154	// });
155
156	// export const LWUserTooltipContent = ({classes, user}: {
157	// classes: ClassesType,
158	// user: UsersMinimumInfo,
159	// }) => {
160
161	// const { FormatDate } = Components
162
163	// const { htmlBio } = user
164
165	// const truncatedBio = truncate(htmlBio, 500)
166	// const postCount = userGetPostCount(user)
167	// const commentCount = userGetCommentCount(user)
168	// const wikiContributionCount = user.tagRevisionCount
169	// const sequenceCount = user.sequenceCount; // TODO: Counts LW sequences on Alignment Forum
170
171	// return <span>
172	// <div className={classes.joined}>Joined on <FormatDate date={user.createdAt} format="MMM Do YYYY" /></div>
173	// { !!sequenceCount && <div>
174	// <BookIcon className={classNames(classes.icon, classes.bookIcon)}/> { sequenceCount } sequence{sequenceCount !== 1 && 's'}
175	// </div>}
176	// { !!postCount && <div><DescriptionIcon className={classes.icon} /> { postCount } post{postCount !== 1 && 's'}</div>}
177	// { !!commentCount && <div><MessageIcon className={classes.icon} /> { commentCount } comment{commentCount !== 1 && 's'}</div>}
178	// { !!wikiContributionCount && <div><TagIcon className={classes.icon} /> { wikiContributionCount } {taggingNameIsSet.get() ? taggingNameSetting.get() : 'wiki'} contribution{wikiContributionCount !== 1 && 's'}</div>}
179	// { truncatedBio && <div className={classes.bio } dangerouslySetInnerHTML={{__html: truncatedBio}}/>}
180	// </span>
181	// }
182
183	// const LWUserTooltipContentComponent = registerComponent(
184	// 'LWUserTooltipContent',
185	// LWUserTooltipContent,
186	// {styles},
187	// );
188
189	// declare global {
190	// interface ComponentTypes {
191	// LWUserTooltipContent: typeof LWUserTooltipContentComponent
192	// }
193	// }

ForumMagnum / ForumMagnum / 9356871443

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