10888109041

Committed 16 Sep 2024 04:33PM UTC coverage: 31.865% (-0.005%) from 31.87%

Build # 10888109041

Build Type

Pull #9726

github

Committed by

jimrandomh

Commit Message

Forum-gate activate-on-press behavior

Pull Request Pull Request #9726: Convert various buttons, links and pseudolinks from activate-on-release to activate-on-press

Run Details

5070 of 41314 branches covered (12.27%)

Branch coverage included in aggregate %.

13 of 51 new or added lines in 16 files covered. (25.49%)

5 existing lines in 5 files now uncovered.

29411 of 66894 relevant lines covered (43.97%)

185.0 hits per line

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

32.73

/packages/lesswrong/components/common/TabNavigationMenu/TabNavigationFooterItem.tsx

import { registerComponent, Components } from '../../../lib/vulcan-lib';
import React from 'react';
import { Link } from '../../../lib/reactRouterWrapper';
import { useLocation } from '../../../lib/routeUtil';
import classNames from 'classnames';
import Tooltip from '@material-ui/core/Tooltip';
import { MenuTabRegular } from './menuTabs';
import { isFriendlyUI } from '../../../themes/forumTheme';

const smallIconSize = 23

const styles = (theme: ThemeType): JssStyles => ({
  selected: {
    '& $icon': {
      opacity: 1,
      color: isFriendlyUI ? theme.palette.text.alwaysWhite : undefined,
    },
    '& $navText': {
      color: isFriendlyUI ? theme.palette.text.alwaysWhite : theme.palette.grey[900],
      fontWeight: 600,
    },
    backgroundColor: theme.palette.grey[400]
  },
  navButton: {
    paddingTop: theme.spacing.unit,
    paddingBottom: 2,
    paddingLeft: theme.spacing.unit,
    paddingRight: theme.spacing.unit,
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-around",
    flexDirection: "column",
    ...(isFriendlyUI
      ? {
        color: theme.palette.grey[600],
        "&:hover": {
          opacity: 1,
          color: theme.palette.grey[800],
        },
      }
      : {}),
  },
  icon: {
    display: "block",
    opacity: isFriendlyUI ? 1 : 0.45,
    width: smallIconSize,
    height: smallIconSize,
    '& svg': {
      width: smallIconSize,
      height: smallIconSize,
      fill: isFriendlyUI ? undefined : "currentColor",
      color: isFriendlyUI ? "inherit" : undefined,
    }
  },
  navText: {
    ...theme.typography.body2,
    color: isFriendlyUI ? "inherit" : theme.palette.grey[700],
    fontSize: '.8rem',
  },
  homeIcon: {
    '& svg': {
      position: "relative",
      top: -1,
    }
  },
})

type TabNavigationFooterItemProps = {
  tab: MenuTabRegular,
  classes: ClassesType,
}

const TabNavigationFooterItem = ({tab, classes}: TabNavigationFooterItemProps) => {
  const { TabNavigationSubItem } = Components
  const { pathname } = useLocation()
  const externalLink = /https?:\/\//.test(tab.link);

  const isSelected = pathname === tab.link;
  const hasIcon = tab.icon || tab.iconComponent || tab.selectedIconComponent;
  const IconComponent = isSelected
    ? tab.selectedIconComponent ?? tab.iconComponent
    : tab.iconComponent;

  return <Tooltip placement='top' title={tab.tooltip || ''}>
    <Link
      to={tab.link}
      className={classNames(classes.navButton, {
        [classes.selected]: isSelected,
      })}
      doOnDown
      {...(externalLink && {
        target: "_blank",
        rel: "noopener noreferrer"
      })}
    >
      {hasIcon && <span
        className={classNames(classes.icon, {[classes.homeIcon]: tab.id === 'home'})}
      >
        {IconComponent && <IconComponent />}
        {tab.icon && tab.icon}
      </span>}
      {tab.subItem ?
        <TabNavigationSubItem>
          { tab.mobileTitle || tab.title }
        </TabNavigationSubItem> :
        <span className={classes.navText}>
          { tab.mobileTitle || tab.title }
        </span>
      }
    </Link>
  </Tooltip>
}

const TabNavigationFooterItemComponent = registerComponent(
  'TabNavigationFooterItem', TabNavigationFooterItem, {styles}
);

declare global {
  interface ComponentTypes {
    TabNavigationFooterItem: typeof TabNavigationFooterItemComponent
  }
}

1	import { registerComponent, Components } from '../../../lib/vulcan-lib';	1✔
2	import React from 'react';	1✔
3	import { Link } from '../../../lib/reactRouterWrapper';	1✔
4	import { useLocation } from '../../../lib/routeUtil';	1✔
5	import classNames from 'classnames';	1✔
6	import Tooltip from '@material-ui/core/Tooltip';	1✔
7	import { MenuTabRegular } from './menuTabs';
8	import { isFriendlyUI } from '../../../themes/forumTheme';	1✔
9
10	const smallIconSize = 23	1✔
11
12	const styles = (theme: ThemeType): JssStyles => ({	1✔
13	selected: {
14	'& $icon': {
15	opacity: 1,
16	color: isFriendlyUI ? theme.palette.text.alwaysWhite : undefined,	1!
17	},
18	'& $navText': {
19	color: isFriendlyUI ? theme.palette.text.alwaysWhite : theme.palette.grey[900],	1!
20	fontWeight: 600,
21	},
22	backgroundColor: theme.palette.grey[400]
23	},
24	navButton: {
25	paddingTop: theme.spacing.unit,
26	paddingBottom: 2,
27	paddingLeft: theme.spacing.unit,
28	paddingRight: theme.spacing.unit,
29	width: "100%",
30	display: "flex",
31	alignItems: "center",
32	justifyContent: "space-around",
33	flexDirection: "column",
34	...(isFriendlyUI
35	? {	1!
36	color: theme.palette.grey[600],
37	"&:hover": {
38	opacity: 1,
39	color: theme.palette.grey[800],
40	},
41	}
42	: {}),
43	},
44	icon: {
45	display: "block",
46	opacity: isFriendlyUI ? 1 : 0.45,	1!
47	width: smallIconSize,
48	height: smallIconSize,
49	'& svg': {
50	width: smallIconSize,
51	height: smallIconSize,
52	fill: isFriendlyUI ? undefined : "currentColor",	1!
53	color: isFriendlyUI ? "inherit" : undefined,	1!
54	}
55	},
56	navText: {
57	...theme.typography.body2,
58	color: isFriendlyUI ? "inherit" : theme.palette.grey[700],	1!
59	fontSize: '.8rem',
60	},
61	homeIcon: {
62	'& svg': {
63	position: "relative",
64	top: -1,
65	}
66	},
67	})
68
69	type TabNavigationFooterItemProps = {
70	tab: MenuTabRegular,
71	classes: ClassesType,
72	}
73
74	const TabNavigationFooterItem = ({tab, classes}: TabNavigationFooterItemProps) => {	1✔
75	const { TabNavigationSubItem } = Components	×
76	const { pathname } = useLocation()	×
UNCOV 77	const externalLink = /https?:\/\//.test(tab.link);	×
78
79	const isSelected = pathname === tab.link;	×
80	const hasIcon = tab.icon \|\| tab.iconComponent \|\| tab.selectedIconComponent;	×
81	const IconComponent = isSelected	×
82	? tab.selectedIconComponent ?? tab.iconComponent	×
83	: tab.iconComponent;
84
85	return <Tooltip placement='top' title={tab.tooltip \|\| ''}>	×
86	<Link
87	to={tab.link}
88	className={classNames(classes.navButton, {
89	[classes.selected]: isSelected,
90	})}
91	doOnDown
92	{...(externalLink && {	×
93	target: "_blank",
94	rel: "noopener noreferrer"
95	})}
96	>
97	{hasIcon && <span	×
98	className={classNames(classes.icon, {[classes.homeIcon]: tab.id === 'home'})}
99	>
100	{IconComponent && <IconComponent />}	×
101	{tab.icon && tab.icon}	×
102	</span>}
103	{tab.subItem ?
104	<TabNavigationSubItem>	×
105	{ tab.mobileTitle \|\| tab.title }	×
106	</TabNavigationSubItem> :
107	<span className={classes.navText}>
108	{ tab.mobileTitle \|\| tab.title }	×
109	</span>
110	}
111	</Link>
112	</Tooltip>
113	}
114
115	const TabNavigationFooterItemComponent = registerComponent(	1✔
116	'TabNavigationFooterItem', TabNavigationFooterItem, {styles}
117	);
118
119	declare global {
120	interface ComponentTypes {
121	TabNavigationFooterItem: typeof TabNavigationFooterItemComponent
122	}
123	}

ForumMagnum / ForumMagnum / 10888109041

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