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: Handle editor sidebar visibility toggle on sidebar #3747

Merged
merged 3 commits into from
Oct 2, 2024
Merged

feat: Handle editor sidebar visibility toggle on sidebar #3747

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
280c5ed
feat: Handle editor sidebar visibility toggle on sidebar
ianjon3s Oct 1, 2024
d630287
save toggle state in localstorage
ianjon3s Oct 1, 2024
1551eb0
update widths to strings with px
ianjon3s Oct 2, 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
13 changes: 1 addition & 12 deletions editor.planx.uk/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,8 +464,7 @@ const EditorToolbar: React.FC<{
}> = ({ headerRef, route }) => {
const { navigate } = useNavigation();
const [open, setOpen] = useState(false);
const [togglePreview, user] = useStore((state) => [
state.togglePreview,
const [user] = useStore((state) => [
state.getUser(),
state.getTeam(),
state.canUserEditTeam,
Expand All @@ -490,16 +489,6 @@ const EditorToolbar: React.FC<{
<RightBox>
{user && (
<ProfileSection disableGutters>
{route.data.flow && (
<IconButton
color="inherit"
onClick={togglePreview}
aria-label="Toggle Preview"
size="large"
>
<MenuOpenIcon />
</IconButton>
)}
<Box mr={1}></Box>
<IconButton
edge="end"
Expand Down
234 changes: 146 additions & 88 deletions 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
@@ -1,14 +1,17 @@
import LanguageIcon from "@mui/icons-material/Language";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ToggleButton from "@mui/material/ToggleButton";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Container from "@mui/material/Container";
import Link from "@mui/material/Link";
import { styled } from "@mui/material/styles";
import Tabs from "@mui/material/Tabs";
import Tooltip from "@mui/material/Tooltip";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { rootFlowPath } from "routes/utils";
import Permission from "ui/editor/Permission";
import Reset from "ui/icons/Reset";
Expand All @@ -23,19 +26,24 @@ import StyledTab from "./StyledTab";

type SidebarTabs = "PreviewBrowser" | "History" | "Search" | "Console";

const Root = styled(Box)(({ theme }) => ({
const SIDEBAR_WIDTH = 500;
const SIDEBAR_WIDTH_MINIMISED = 20;
Copy link
Member

Choose a reason for hiding this comment

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

nit: should these simply be set directly as strings to avoid the extra templating below?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Great spot, updated 👍

Copy link
Member

Choose a reason for hiding this comment

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

nit: should these be set directly as strings to avoid the extra templating step below?


const Root = styled(Box)<{ isMinimised: boolean }>(({ theme, isMinimised }) => ({
position: "relative",
top: "0",
right: "0",
bottom: "0",
width: "500px",
width: isMinimised ? `${SIDEBAR_WIDTH_MINIMISED}px` : `${SIDEBAR_WIDTH}px`,
display: "flex",
flexShrink: 0,
flexDirection: "column",
borderLeft: `1px solid ${theme.palette.border.main}`,
background: theme.palette.background.paper,
zIndex: 1,
transition: "width 200ms ease-in-out",
"& iframe": {
flex: "1",
flex: 1,
},
}));

Expand All @@ -46,8 +54,37 @@ const SidebarContainer = styled(Box)(() => ({
position: "relative",
}));

const SidebarWrapper = styled(Box)(() => ({
width: SIDEBAR_WIDTH,
display: "flex",
flexDirection: "column",
flexShrink: 0,
flexGrow: 1,
maxHeight: "100%",
}));

const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.border.main}`,
borderImage: `linear-gradient(to right, ${theme.palette.border.main} 50%, transparent 50%) 30% 1`,
position: "absolute",
width: "40px",
height: "40px",
left: "-20px",
top: theme.spacing(0.5),
boxShadow: "none",
color: theme.palette.text.primary,
"& > svg": {
fontSize: "1.875rem",
},
"&:hover": {
background: theme.palette.background.paper,
boxShadow: "none",
},
}));

const Header = styled("header")(({ theme }) => ({
padding: theme.spacing(1, 1.5),
padding: theme.spacing(1, 2),
"& input": {
flex: "1",
padding: "5px",
Expand All @@ -74,7 +111,6 @@ const ResetToggle = styled(Button)(({ theme }) => ({

const TabList = styled(Box)(({ theme }) => ({
position: "relative",
// Use a pseudo element as border to allow for tab border overlap without excessive MUI overrides
"&::after": {
content: "''",
position: "absolute",
Expand All @@ -86,9 +122,8 @@ const TabList = styled(Box)(({ theme }) => ({
},
"& .MuiTabs-root": {
minHeight: "0",
padding: theme.spacing(0, 1.5),
padding: theme.spacing(0, 1.75),
},
// Hide default MUI indicator as we're using custom styling
"& .MuiTabs-indicator": {
display: "none",
},
Expand All @@ -101,6 +136,12 @@ const Sidebar: React.FC = React.memo(() => {
]);

const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser");
const [isSidebarMinimised, setIsSidebarMinimised] = useState<boolean>(
() => {
const savedState = localStorage.getItem("isSidebarMinimised");
return savedState === 'true';
}
);

const handleChange = (
_event: React.SyntheticEvent,
Expand All @@ -109,6 +150,14 @@ const Sidebar: React.FC = React.memo(() => {
setActiveTab(newValue);
};

const togglePreview = () => {
setIsSidebarMinimised((prev) => {
const newState = !prev;
localStorage.setItem("isSidebarMinimised", JSON.stringify(newState));
return newState;
});
};

const baseUrl = `${window.location.origin}${rootFlowPath(false)}`;

const urls = {
Expand All @@ -118,97 +167,106 @@ const Sidebar: React.FC = React.memo(() => {
};

return (
<Root>
<Header>
<Box width="100%" display="flex">
<input type="text" disabled value={urls.preview} />
<Root isMinimised={isSidebarMinimised}>
Copy link
Member

Choose a reason for hiding this comment

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

👍 nice & clear !

<SidebarWrapper>
<StyledToggleButton onClick={togglePreview} value="toggleSidebar">
{isSidebarMinimised ? (
<ChevronLeftIcon />
) : (
<ChevronRightIcon />
)}
</StyledToggleButton>
<Header>
<Box width="100%" display="flex">
<input type="text" disabled value={urls.preview} />

<Permission.IsPlatformAdmin>
<Tooltip arrow title="Open draft service">
<Link
href={urls.draft}
target="_blank"
rel="noopener noreferrer"
color="inherit"
>
<OpenInNewOffIcon />
</Link>
</Tooltip>
</Permission.IsPlatformAdmin>

<Tooltip arrow title="Open preview of changes to publish">
<Link
href={urls.preview}
target="_blank"
rel="noopener noreferrer"
color="inherit"
>
<OpenInNewIcon />
</Link>
</Tooltip>
<Permission.IsPlatformAdmin>
<Tooltip arrow title="Open draft service">
<Link
href={urls.draft}
target="_blank"
rel="noopener noreferrer"
color="inherit"
>
<OpenInNewOffIcon />
</Link>
</Tooltip>
</Permission.IsPlatformAdmin>

{isFlowPublished ? (
<Tooltip arrow title="Open published service">
<Tooltip arrow title="Open preview of changes to publish">
<Link
href={urls.analytics}
href={urls.preview}
target="_blank"
rel="noopener noreferrer"
color="inherit"
>
<LanguageIcon />
<OpenInNewIcon />
</Link>
</Tooltip>
) : (
<Tooltip arrow title="Flow not yet published">
<Box>
<Link component={"button"} disabled aria-disabled={true}>

{isFlowPublished ? (
<Tooltip arrow title="Open published service">
<Link
href={urls.analytics}
target="_blank"
rel="noopener noreferrer"
color="inherit"
>
<LanguageIcon />
</Link>
</Box>
</Tooltip>
)}
</Box>
<PublishFlowButton previewURL={urls.preview} />
</Header>
<TabList>
<Tabs onChange={handleChange} value={activeTab} aria-label="">
<StyledTab value="PreviewBrowser" label="Preview" />
<StyledTab value="History" label="History" />
<StyledTab value="Search" label="Search" />
<StyledTab value="Console" label="Console" />
</Tabs>
</TabList>
{activeTab === "PreviewBrowser" && (
<SidebarContainer>
<ResetToggle
variant="link"
onClick={() => {
resetPreview();
}}
>
<Reset fontSize="small" />
Restart
</ResetToggle>
<Questions previewEnvironment="editor" />
</SidebarContainer>
)}
{activeTab === "History" && (
<SidebarContainer py={3}>
<Container>
<EditHistory />
</Container>
</SidebarContainer>
)}
{activeTab === "Search" && (
<SidebarContainer>
<Search />
</SidebarContainer>
)}
{activeTab === "Console" && (
<SidebarContainer>
<DebugConsole />
</SidebarContainer>
)}
</Tooltip>
) : (
<Tooltip arrow title="Flow not yet published">
<Box>
<Link component={"button"} disabled aria-disabled={true}>
<LanguageIcon />
</Link>
</Box>
</Tooltip>
)}
</Box>
<PublishFlowButton previewURL={urls.preview} />
</Header>
<TabList>
<Tabs onChange={handleChange} value={activeTab} aria-label="">
<StyledTab value="PreviewBrowser" label="Preview" />
<StyledTab value="History" label="History" />
<StyledTab value="Search" label="Search" />
<StyledTab value="Console" label="Console" />
</Tabs>
</TabList>
{activeTab === "PreviewBrowser" && (
<SidebarContainer>
<ResetToggle
variant="link"
onClick={() => {
resetPreview();
}}
>
<Reset fontSize="small" />
Restart
</ResetToggle>
<Questions previewEnvironment="editor" />
</SidebarContainer>
)}
{activeTab === "History" && (
<SidebarContainer py={3}>
<Container>
<EditHistory />
</Container>
</SidebarContainer>
)}
{activeTab === "Search" && (
<SidebarContainer>
<Search />
</SidebarContainer>
)}
{activeTab === "Console" && (
<SidebarContainer>
<DebugConsole />
</SidebarContainer>
)}
</SidebarWrapper>
</Root>
);
});
Expand Down
Loading