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

refactor: Simplify editor toggle button group #3812

Merged
merged 1 commit into from
Oct 16, 2024
Merged

refactor: Simplify editor toggle button group #3812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
47 changes: 19 additions & 28 deletions editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleDataFieldsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import DataFieldIcon from "@mui/icons-material/Code";
import DataFieldOffIcon from "@mui/icons-material/CodeOff";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { useStore } from "pages/FlowEditor/lib/store";
Expand All @@ -13,32 +12,24 @@ export const ToggleDataFieldsButton: React.FC = () => {
]);

return (
<Box
sx={(theme) => ({
position: "fixed",
bottom: theme.spacing(6),
left: theme.spacing(7),
zIndex: theme.zIndex.appBar,
border: `1px solid ${theme.palette.border.main}`,
borderRadius: "3px",
background: theme.palette.background.paper,
})}
>
<Tooltip title="Toggle data fields" placement="right">
<IconButton
aria-label="Toggle data fields"
onClick={toggleShowDataFields}
size="large"
sx={(theme) => ({
padding: theme.spacing(1),
color: showDataFields
? theme.palette.text.primary
: theme.palette.text.disabled,
})}
>
{showDataFields ? <DataFieldIcon /> : <DataFieldOffIcon />}
</IconButton>
</Tooltip>
</Box>
<Tooltip title="Toggle data fields" placement="right">
<IconButton
aria-label="Toggle data fields"
onClick={toggleShowDataFields}
size="large"
sx={(theme) => ({
background: theme.palette.background.paper,
padding: theme.spacing(1),
color: showDataFields
? theme.palette.text.primary
: theme.palette.text.disabled,
"&:hover": {
background: theme.palette.common.white,
},
})}
>
{showDataFields ? <DataFieldIcon /> : <DataFieldOffIcon />}
</IconButton>
</Tooltip>
);
};
47 changes: 19 additions & 28 deletions editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleImagesButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import ImageOffIcon from "@mui/icons-material/HideImage";
import ImageIcon from "@mui/icons-material/Image";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { useStore } from "pages/FlowEditor/lib/store";
Expand All @@ -13,32 +12,24 @@ export const ToggleImagesButton: React.FC = () => {
]);

return (
<Box
sx={(theme) => ({
position: "fixed",
bottom: theme.spacing(10),
left: theme.spacing(7),
zIndex: theme.zIndex.appBar,
border: `1px solid ${theme.palette.border.main}`,
borderRadius: "3px",
background: theme.palette.background.paper,
})}
>
<Tooltip title="Toggle images" placement="right">
<IconButton
aria-label="Toggle images"
onClick={toggleShowImages}
size="large"
sx={(theme) => ({
padding: theme.spacing(1),
color: showImages
? theme.palette.text.primary
: theme.palette.text.disabled,
})}
>
{showImages ? <ImageIcon /> : <ImageOffIcon />}
</IconButton>
</Tooltip>
</Box>
<Tooltip title="Toggle images" placement="right">
<IconButton
aria-label="Toggle images"
onClick={toggleShowImages}
size="large"
sx={(theme) => ({
background: theme.palette.background.paper,
padding: theme.spacing(1),
color: showImages
? theme.palette.text.primary
: theme.palette.text.disabled,
"&:hover": {
background: theme.palette.common.white,
},
})}
>
{showImages ? <ImageIcon /> : <ImageOffIcon />}
</IconButton>
</Tooltip>
);
};
47 changes: 19 additions & 28 deletions editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import LabelIcon from "@mui/icons-material/Label";
import LabelOffIcon from "@mui/icons-material/LabelOff";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { useStore } from "pages/FlowEditor/lib/store";
Expand All @@ -13,32 +12,24 @@ export const ToggleTagsButton: React.FC = () => {
]);

return (
<Box
sx={(theme) => ({
position: "fixed",
bottom: theme.spacing(2),
left: theme.spacing(7),
zIndex: theme.zIndex.appBar,
border: `1px solid ${theme.palette.border.main}`,
borderRadius: "3px",
background: theme.palette.background.paper,
})}
>
<Tooltip title="Toggle tags" placement="right">
<IconButton
aria-label="Toggle tags"
onClick={toggleShowTags}
size="large"
sx={(theme) => ({
padding: theme.spacing(1),
color: showTags
? theme.palette.text.primary
: theme.palette.text.disabled,
})}
>
{showTags ? <LabelIcon /> : <LabelOffIcon />}
</IconButton>
</Tooltip>
</Box>
<Tooltip title="Toggle tags" placement="right">
<IconButton
aria-label="Toggle tags"
onClick={toggleShowTags}
size="large"
sx={(theme) => ({
background: theme.palette.background.paper,
padding: theme.spacing(1),
color: showTags
? theme.palette.text.primary
: theme.palette.text.disabled,
"&:hover": {
background: theme.palette.common.white,
},
})}
>
{showTags ? <LabelIcon /> : <LabelOffIcon />}
</IconButton>
</Tooltip>
);
};
16 changes: 14 additions & 2 deletions editor.planx.uk/src/pages/FlowEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,18 @@ const EditorContainer = styled(Box, {
: `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
}));

const EditorVisualControls = styled(ButtonGroup)(({ theme }) => ({
position: "fixed",
bottom: theme.spacing(2.5),
left: theme.spacing(7.5),
zIndex: theme.zIndex.appBar,
border: `1px solid ${theme.palette.border.main}`,
borderRadius: "3px",
background: theme.palette.border.main,
gap: "1px",
overflow: "hidden",
}));
Copy link
Member

@jessicamcinchak jessicamcinchak Oct 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Much cleaner solution, thank you !!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks @jessicamcinchak


const FlowEditor = () => {
const [flow, ...breadcrumbs] =
useCurrentRoute().url.pathname.split("/").at(-1)?.split(",") || [];
Expand All @@ -53,14 +65,14 @@ const FlowEditor = () => {
>
<Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
<Flow flow={flow} breadcrumbs={breadcrumbs} />
<ButtonGroup
<EditorVisualControls
orientation="vertical"
aria-label="Toggle node attributes"
>
<ToggleImagesButton />
<ToggleDataFieldsButton />
<ToggleTagsButton />
</ButtonGroup>
</EditorVisualControls>
</Box>
</Box>
<Sidebar />
Expand Down
Loading