11393597569

Committed 17 Oct 2024 09:50PM UTC coverage: 31.642% (-0.002%) from 31.644%

Build # 11393597569

Build Type

push

github

Committed by

darkruby501

Commit Message

finish changing agreement icons

Run Details

5063 of 41848 branches covered (12.1%)

Branch coverage included in aggregate %.

4 of 6 new or added lines in 3 files covered. (66.67%)

1 existing line in 1 file now uncovered.

29618 of 67755 relevant lines covered (43.71%)

180.67 hits per line

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

17.86

/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 UpArrowIcon from '@material-ui/icons/KeyboardArrowUp';
import CheckIcon from '@material-ui/icons/Check';
import IconButton from '@material-ui/core/IconButton';
import Transition from 'react-transition-group/Transition';
import { useVoteColors } from './useVoteColors';
import type { VoteColor } from './voteColors';

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: {
    // fontSize: '90%',
    // top: '-75%',
    // left: 0
  },
  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',
  },
})

export interface VoteArrowIconProps {
  solidArrow?: boolean,
  strongVoteDelay: number,
  orientation: "up"|"down"|"left"|"right",
  enabled?: boolean,
  color: VoteColor,
  voted: boolean,
  eventHandlers: {
    handleMouseDown?: () => void,
    handleMouseUp?: () => void,
    handleClick?: () => void,
    clearState?: () => void,
  },
  bigVotingTransition: boolean,
  bigVoted: boolean,
  bigVoteCompleted: boolean,
  alwaysColored: boolean,
}

const VoteAgreementIcon = ({
  solidArrow,
  orientation,
  enabled = true,
  color,
  voted,
  eventHandlers,
  bigVotingTransition,
  bigVoted,
  bigVoteCompleted,
  alwaysColored,
  classes,
}: VoteArrowIconProps & {
  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);

  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}>
        <Components.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) => (
            <>
              <Components.ForumIcon
                icon={bigVoteAccentIcon}
                className={classNames(bigVoteAccentStyling, classes.noClickCatch, {[classes.hideIcon]: !bigVoted})}
                style={bigVoteCompleted || bigVoted ? {color: lightColor} : undefined}
                // viewBox='6 6 12 12'
              />
              <Components.ForumIcon
                icon={primaryIcon}
                style={bigVoteCompleted || bigVoted ? {color: lightColor} : undefined}
                className={classNames(bigVoteStyling, classes.noClickCatch, {
                  [bigVoteCompletedStyling]: bigVoteCompleted,
                  // [classes.bigCheckCompleted]: bigVoteCompleted,
                  [classes.bigCheckSolid]: solidArrow
                }, classes[state])}
                // viewBox='6 6 12 12'
              />
            </>)}
        </Transition>
      </span>
    </IconButton>
  )
}

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

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





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

ForumMagnum / ForumMagnum / 11393597569

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