Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Move analytics link to editor navigation #3481

Merged
merged 9 commits into from
Aug 1, 2024
Merged

feat: Move analytics link to editor navigation #3481

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
039e085
feat: Move analytics link to editor navigation
ianjon3s Jul 31, 2024
e4eb9e0
Update editor.planx.uk/src/components/EditorNavMenu.tsx
ianjon3s Jul 31, 2024
86eed75
fix: Failing test
ianjon3s Jul 31, 2024
7cdb184
feat: Remove analytics link from sidebar header icons
ianjon3s Jul 31, 2024
45fc4df
style: Stronger icon for analytics
ianjon3s Jul 31, 2024
1880f2b
fix: Remove unneeded imports
ianjon3s Jul 31, 2024
56af578
fix: Updates from PR feedback
ianjon3s Aug 1, 2024
70f10f4
fix: Updates from PR feedback
ianjon3s Aug 1, 2024
95a79c1
fix: Disabled prop
ianjon3s Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 39 additions & 32 deletions editor.planx.uk/src/components/EditorNavMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,32 +73,33 @@ const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
}));

const MenuButton = styled(IconButton, {
shouldForwardProp: (prop) =>
!["isActive", "disabled"].includes(prop as string),
})<{ isActive: boolean; disabled?: boolean }>(
({ theme, isActive, disabled }) => ({
shouldForwardProp: (prop) => prop !== "isActive",
})<{ isActive: boolean }>(({ theme, isActive }) => ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As disabled is an IconButton prop, you should still be able to access it here.

})<{ isActive: boolean }>(({ theme, isActive, disabled }) => ({

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, I've updated, allows a consistent use of the prop with the CSS

color: theme.palette.text.primary,
width: "100%",
border: "1px solid transparent",
justifyContent: "flex-start",
borderRadius: "3px",
"&:hover": {
background: theme.palette.common.white,
borderColor: theme.palette.border.light,
},
...(isActive && {
background: theme.palette.common.white,
color: theme.palette.text.primary,
width: "100%",
border: "1px solid transparent",
justifyContent: "flex-start",
borderRadius: "3px",
border: `1px solid ${theme.palette.border.main}`,
}),
"&[disabled]": {
color: theme.palette.text.disabled,
"&:hover": {
background: disabled ? "none" : theme.palette.common.white,
borderColor: disabled ? "transparent" : theme.palette.border.light,
background: "none",
borderColor: "transparent",
},
...(isActive && {
background: theme.palette.common.white,
color: theme.palette.text.primary,
border: `1px solid ${theme.palette.border.main}`,
}),
...(disabled && {
color: theme.palette.text.disabled,
}),
"& > svg": {
opacity: 0.8,
},
}),
);
},
"& > svg": {
opacity: 0.8,
},
}));

function EditorNavMenu() {
const { navigate } = useNavigation();
Expand All @@ -116,7 +117,9 @@ function EditorNavMenu() {

const handleClick = (route: string, disabled?: boolean) => {
if (isActive(route) || disabled) return;
if (route.startsWith("http://") || route.startsWith("https://")) {
const isExternalLink =
route.startsWith("http://") || route.startsWith("https://");
if (isExternalLink) {
window.open(route, "_blank");
} else {
navigate(route);
Expand Down Expand Up @@ -245,22 +248,26 @@ function EditorNavMenu() {
<Root compact={compact}>
<MenuWrap>
{visibleRoutes.map(({ title, Icon, route, disabled }) => (
<MenuItem onClick={() => handleClick(route, disabled)} key={title}>
<MenuItem key={title}>
{compact ? (
<TooltipWrap title={title}>
<MenuButton
isActive={isActive(route)}
disabled={disabled}
disableRipple
>
<Icon />
</MenuButton>
<Box component="span">
<MenuButton
isActive={isActive(route)}
disabled={disabled}
disableRipple
onClick={() => handleClick(route, disabled)}
>
<Icon />
</MenuButton>
</Box>
</TooltipWrap>
) : (
<MenuButton
isActive={isActive(route)}
disabled={disabled}
disableRipple
onClick={() => handleClick(route, disabled)}
>
<Icon fontSize="small" />
<MenuTitle variant="body3">{title}</MenuTitle>
Expand Down
1 change: 0 additions & 1 deletion editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
import RefreshIcon from "@mui/icons-material/Refresh";
import SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt";
import Badge from "@mui/material/Badge";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
Expand Down