11411167248

Committed 18 Oct 2024 09:18PM UTC coverage: 31.482% (+0.006%) from 31.476%

Build # 11411167248

Build Type

Pull #9884

github

Committed by

web-flow

Commit Message

Merge d12d69626 into a16bdcec6

Pull Request Pull Request #9884: Switch lw to gill sans nova

Run Details

5021 of 41835 branches covered (12.0%)

Branch coverage included in aggregate %.

41 of 65 new or added lines in 10 files covered. (63.08%)

2 existing lines in 2 files now uncovered.

29454 of 67672 relevant lines covered (43.52%)

174.24 hits per line

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

17.54

/packages/lesswrong/components/votes/VoteAgreementIcon.tsx

import React from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useTheme } from '../themes/useTheme';
import classNames from 'classnames';
import IconButton from '@material-ui/core/IconButton';
import Transition from 'react-transition-group/Transition';
import { useVoteColors } from './useVoteColors';
import { BaseVoteArrowIconProps } from './VoteArrowIcon';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    color: theme.palette.grey[400],
    fontSize: 'inherit',
    width: 'initial',
    height: 'initial',
    padding: 0,
    bottom: 2,
    '&:hover': {
      backgroundColor: 'transparent',
    }
  },
  up: {},
  right: {
    transform: 'rotate(-270deg)',
  },
  down: {
    transform: 'rotate(-180deg)',
  },
  left: {
    transform: 'rotate(-90deg)',
  },
  bigCheck: {
    position: 'absolute',
    top: -3,
    left: 2,
    fontSize: '82%',
    opacity: 0,
    transition: `opacity ${theme.voting.strongVoteDelay}ms cubic-bezier(0.74, -0.01, 1, 1) 0ms`,
    height: 23
  },
  bigCheckSolid: {
    fontSize: '65%',
    top: "-45%"
  },
  bigCheckCompleted: {
  },
  bigClear: {
    position: 'absolute',
    top: 1,
    left: 5,
    fontSize: '70%',
    opacity: 0,
    transition: `opacity ${theme.voting.strongVoteDelay}ms cubic-bezier(0.74, -0.01, 1, 1) 0ms`,
  },
  bigClearSolid: {
    fontSize: '65%',
    position: 'relative',
    top: "-45%"
  },
  bigClearCompleted: {
    fontSize: '80%',
    position: 'absolute',
    left: 4,
    top: 0,
  },
  hideIcon: {
    display: 'none'
  },
  check: {
    fontSize: '50%',
    opacity: 0.6,
    height: 15,
    position: 'absolute',
    top: 3,
    left: 2,
  },
  clear: {
    fontSize: '45%',
    opacity: 0.6,
    position: 'absolute',
    top: 5,
    left: 11
  },
  smallCheckBigVoted: {
    fontSize: '50%',
    opacity: 0.6,
    position: 'absolute',
    height: 14,
    transform: 'translate(-8px, -2px)'
  },
  smallArrowBigVoted: {
    opacity: 0.6,
    position: 'absolute',
    height: 14,
    scale: 1.2,
    transform: 'translate(-3.5px, 2.3px)'
  },
  // Classes for the animation transitions of the bigArrow. See Transition component
  entering: {
    opacity: 1
  },
  entered: {
    opacity: 1
  },
  exiting: {
    transition: 'opacity 150ms cubic-bezier(0.74, -0.01, 1, 1) 0ms',
  },
  iconsContainer: {
    position: 'relative',
    width: 25,
    height: 18
  },
  noClickCatch: {
    /* pointerEvents: none prevents elements under the IconButton from interfering with mouse
       events during a bigVote transition. */
    pointerEvents: 'none'
  },
  disabled: {
    cursor: 'not-allowed',
  },
})

const VoteAgreementIcon = ({
  orientation,
  enabled = true,
  color,
  voted,
  eventHandlers,
  bigVotingTransition,
  bigVoted,
  bigVoteCompleted,
  alwaysColored,
  classes,
}: BaseVoteArrowIconProps & {
  classes: ClassesType
}) => {
  const theme = useTheme();
  const upOrDown = orientation === "left" ? "Downvote" : "Upvote"
  
  const primaryIcon =  (upOrDown === "Downvote") ? "CrossReaction" : "TickReaction"
  const primaryIconStyling = (upOrDown === "Downvote") ? classes.clear : classes.check
  
  const bigVoteAccentIcon = (upOrDown === "Downvote") ? "CrossReactionCap" : "TickReaction"
  const bigVoteAccentStyling = (upOrDown === "Downvote") ? classes.smallArrowBigVoted : classes.smallCheckBigVoted
  const bigVoteCompletedStyling = (upOrDown === "Downvote") ? classes.bigClearCompleted : classes.bigCheckCompleted
  const bigVoteStyling = (upOrDown === "Downvote") ? classes.bigClear : classes.bigCheck

  if (!enabled) {
    eventHandlers = {};
  }

  const {mainColor, lightColor} = useVoteColors(color);

  const { ForumIcon } = Components;

  return (
    <IconButton
      className={classNames(classes.root, {[classes.disabled]: !enabled})}
      onMouseDown={eventHandlers.handleMouseDown}
      onMouseUp={eventHandlers.handleMouseUp}
      onMouseOut={eventHandlers.clearState}
      onClick={eventHandlers.handleClick}
      disableRipple
    >
      <span className={classes.iconsContainer}>
        <ForumIcon
          icon={primaryIcon}  
          className={classNames(primaryIconStyling, classes.noClickCatch, {[classes.hideIcon]: bigVotingTransition || bigVoted})}
          style={{color: voted || alwaysColored ? mainColor : "inherit"}}
        />
        <Transition in={(bigVotingTransition || bigVoted)} timeout={theme.voting.strongVoteDelay}>
          {(state) => (
            <>
              <ForumIcon
                icon={bigVoteAccentIcon}
                className={classNames(bigVoteAccentStyling, classes.noClickCatch, {[classes.hideIcon]: !bigVoted})}
                style={bigVoteCompleted || bigVoted ? {color: lightColor} : undefined}
              />
              <ForumIcon
                icon={primaryIcon}
                style={bigVoteCompleted || bigVoted ? {color: lightColor} : undefined}
                className={classNames(bigVoteStyling, classes.noClickCatch, {
                  [bigVoteCompletedStyling]: bigVoteCompleted,
                  // [classes.bigCheckCompleted]: bigVoteCompleted,
                }, classes[state])}
              />
            </>)}
        </Transition>
      </span>
    </IconButton>
  )
}

const VoteAgreementIconComponent = registerComponent('VoteAgreementIcon', VoteAgreementIcon, {styles});

declare global {
  interface ComponentTypes {
    VoteAgreementIcon: typeof VoteAgreementIconComponent
  }
}





1	import React from 'react';	1✔
2	import { Components, registerComponent } from '../../lib/vulcan-lib';	1✔
3	import { useTheme } from '../themes/useTheme';	1✔
4	import classNames from 'classnames';	1✔
5	import IconButton from '@material-ui/core/IconButton';	1✔
6	import Transition from 'react-transition-group/Transition';	1✔
7	import { useVoteColors } from './useVoteColors';	1✔
8	import { BaseVoteArrowIconProps } from './VoteArrowIcon';
9
10	const styles = (theme: ThemeType): JssStyles => ({	1✔
11	root: {
12	color: theme.palette.grey[400],
13	fontSize: 'inherit',
14	width: 'initial',
15	height: 'initial',
16	padding: 0,
17	bottom: 2,
18	'&:hover': {
19	backgroundColor: 'transparent',
20	}
21	},
22	up: {},
23	right: {
24	transform: 'rotate(-270deg)',
25	},
26	down: {
27	transform: 'rotate(-180deg)',
28	},
29	left: {
30	transform: 'rotate(-90deg)',
31	},
32	bigCheck: {
33	position: 'absolute',
34	top: -3,
35	left: 2,
36	fontSize: '82%',
37	opacity: 0,
38	transition: `opacity ${theme.voting.strongVoteDelay}ms cubic-bezier(0.74, -0.01, 1, 1) 0ms`,
39	height: 23
40	},
41	bigCheckSolid: {
42	fontSize: '65%',
43	top: "-45%"
44	},
45	bigCheckCompleted: {
46	},
47	bigClear: {
48	position: 'absolute',
49	top: 1,
50	left: 5,
51	fontSize: '70%',
52	opacity: 0,
53	transition: `opacity ${theme.voting.strongVoteDelay}ms cubic-bezier(0.74, -0.01, 1, 1) 0ms`,
54	},
55	bigClearSolid: {
56	fontSize: '65%',
57	position: 'relative',
58	top: "-45%"
59	},
60	bigClearCompleted: {
61	fontSize: '80%',
62	position: 'absolute',
63	left: 4,
64	top: 0,
65	},
66	hideIcon: {
67	display: 'none'
68	},
69	check: {
70	fontSize: '50%',
71	opacity: 0.6,
72	height: 15,
73	position: 'absolute',
74	top: 3,
75	left: 2,
76	},
77	clear: {
78	fontSize: '45%',
79	opacity: 0.6,
80	position: 'absolute',
81	top: 5,
82	left: 11
83	},
84	smallCheckBigVoted: {
85	fontSize: '50%',
86	opacity: 0.6,
87	position: 'absolute',
88	height: 14,
89	transform: 'translate(-8px, -2px)'
90	},
91	smallArrowBigVoted: {
92	opacity: 0.6,
93	position: 'absolute',
94	height: 14,
95	scale: 1.2,
96	transform: 'translate(-3.5px, 2.3px)'
97	},
98	// Classes for the animation transitions of the bigArrow. See Transition component
99	entering: {
100	opacity: 1
101	},
102	entered: {
103	opacity: 1
104	},
105	exiting: {
106	transition: 'opacity 150ms cubic-bezier(0.74, -0.01, 1, 1) 0ms',
107	},
108	iconsContainer: {
109	position: 'relative',
110	width: 25,
111	height: 18
112	},
113	noClickCatch: {
114	/* pointerEvents: none prevents elements under the IconButton from interfering with mouse
115	events during a bigVote transition. */
116	pointerEvents: 'none'
117	},
118	disabled: {
119	cursor: 'not-allowed',
120	},
121	})
122
123	const VoteAgreementIcon = ({	1✔
124	orientation,
125	enabled = true,	×
126	color,
127	voted,
128	eventHandlers,
129	bigVotingTransition,
130	bigVoted,
131	bigVoteCompleted,
132	alwaysColored,
133	classes,
134	}: BaseVoteArrowIconProps & {
135	classes: ClassesType
136	}) => {
137	const theme = useTheme();	×
138	const upOrDown = orientation === "left" ? "Downvote" : "Upvote"	×
139
NEW 140	const primaryIcon = (upOrDown === "Downvote") ? "CrossReaction" : "TickReaction"	×
141	const primaryIconStyling = (upOrDown === "Downvote") ? classes.clear : classes.check	×
142
NEW 143	const bigVoteAccentIcon = (upOrDown === "Downvote") ? "CrossReactionCap" : "TickReaction"	×
144	const bigVoteAccentStyling = (upOrDown === "Downvote") ? classes.smallArrowBigVoted : classes.smallCheckBigVoted	×
145	const bigVoteCompletedStyling = (upOrDown === "Downvote") ? classes.bigClearCompleted : classes.bigCheckCompleted	×
146	const bigVoteStyling = (upOrDown === "Downvote") ? classes.bigClear : classes.bigCheck	×
147
148	if (!enabled) {	×
149	eventHandlers = {};	×
150	}
151
152	const {mainColor, lightColor} = useVoteColors(color);	×
153
NEW 154	const { ForumIcon } = Components;	×
155
UNCOV 156	return (	×
157	<IconButton
158	className={classNames(classes.root, {[classes.disabled]: !enabled})}
159	onMouseDown={eventHandlers.handleMouseDown}
160	onMouseUp={eventHandlers.handleMouseUp}
161	onMouseOut={eventHandlers.clearState}
162	onClick={eventHandlers.handleClick}
163	disableRipple
164	>
165	<span className={classes.iconsContainer}>
166	<ForumIcon
167	icon={primaryIcon}
168	className={classNames(primaryIconStyling, classes.noClickCatch, {[classes.hideIcon]: bigVotingTransition \|\| bigVoted})}	×
169	style={{color: voted \|\| alwaysColored ? mainColor : "inherit"}}	×
170	/>
171	<Transition in={(bigVotingTransition \|\| bigVoted)} timeout={theme.voting.strongVoteDelay}>	×
172	{(state) => (
173	<>	×
174	<ForumIcon
175	icon={bigVoteAccentIcon}
176	className={classNames(bigVoteAccentStyling, classes.noClickCatch, {[classes.hideIcon]: !bigVoted})}
177	style={bigVoteCompleted \|\| bigVoted ? {color: lightColor} : undefined}	×
178	/>
179	<ForumIcon
180	icon={primaryIcon}
181	style={bigVoteCompleted \|\| bigVoted ? {color: lightColor} : undefined}	×
182	className={classNames(bigVoteStyling, classes.noClickCatch, {
183	[bigVoteCompletedStyling]: bigVoteCompleted,
184	// [classes.bigCheckCompleted]: bigVoteCompleted,
185	}, classes[state])}
186	/>
187	</>)}
188	</Transition>
189	</span>
190	</IconButton>
191	)
192	}
193
194	const VoteAgreementIconComponent = registerComponent('VoteAgreementIcon', VoteAgreementIcon, {styles});	1✔
195
196	declare global {
197	interface ComponentTypes {
198	VoteAgreementIcon: typeof VoteAgreementIconComponent
199	}
200	}
201
202
203
204

ForumMagnum / ForumMagnum / 11411167248

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