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 all 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
252 changes: 153 additions & 99 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,3 +1,5 @@
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import LanguageIcon from "@mui/icons-material/Language";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
Expand All @@ -7,6 +9,7 @@ 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 ToggleButton from "@mui/material/ToggleButton";
import Tooltip from "@mui/material/Tooltip";
import React, { useState } from "react";
import { rootFlowPath } from "routes/utils";
Expand All @@ -23,21 +26,28 @@ import StyledTab from "./StyledTab";

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

const Root = styled(Box)(({ theme }) => ({
position: "relative",
top: "0",
right: "0",
bottom: "0",
width: "500px",
display: "flex",
flexShrink: 0,
flexDirection: "column",
borderLeft: `1px solid ${theme.palette.border.main}`,
background: theme.palette.background.paper,
"& iframe": {
flex: "1",
},
}));
const SIDEBAR_WIDTH = "500px";
const SIDEBAR_WIDTH_MINIMISED = "20px";

const Root = styled(Box)<{ isMinimised: boolean }>(
({ theme, isMinimised }) => ({
position: "relative",
top: "0",
right: "0",
bottom: "0",
width: isMinimised ? SIDEBAR_WIDTH_MINIMISED : SIDEBAR_WIDTH,
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,
},
}),
);

const SidebarContainer = styled(Box)(() => ({
overflow: "auto",
Expand All @@ -46,8 +56,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 +113,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 +124,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 +138,10 @@ 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,102 @@ 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