From d32edc6b51754bfe80393d6def9c1614c1288a1f Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 16 Apr 2024 13:01:50 +0100 Subject: [PATCH 1/5] feat: Tab styling for editor browser preview / history --- .../FlowEditor/components/PreviewBrowser.tsx | 87 +++++++++++++++++-- .../src/pages/FlowEditor/floweditor.scss | 33 ------- 2 files changed, 82 insertions(+), 38 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx index d7992f674f..1e206b343c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx @@ -18,6 +18,8 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import ListItemText from "@mui/material/ListItemText"; import { styled } from "@mui/material/styles"; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; @@ -37,17 +39,86 @@ const Console = styled(Box)(() => ({ maxHeight: "50%", })); +const EmbeddedBrowser = styled(Box)(({ theme }) => ({ + position: "relative", + top: "0", + right: "0", + bottom: "0", + width: "500px", + display: "flex", + flexDirection: "column", + borderLeft: `1px solid ${theme.palette.border.main}`, + background: theme.palette.background.paper, + "& iframe": { + flex: "1", + }, +})); + const PreviewContainer = styled(Box)(() => ({ overflow: "auto", flex: 1, background: "#fff", })); -const Header = styled("header")(() => ({ - display: "flex", - flexDirection: "column", +const Header = styled("header")(({ theme }) => ({ + padding: theme.spacing(1), + "& input": { + flex: "1", + padding: "5px", + marginRight: "5px", + background: theme.palette.common.white, + border: "1px solid rgba(0, 0, 0, 0.2)", + }, + "& svg": { + cursor: "pointer", + opacity: "0.7", + margin: "6px 4px 1px 4px", + fontSize: "1.2rem", + }, })); +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", + bottom: 0, + left: 0, + width: "100%", + height: "1px", + backgroundColor: theme.palette.border.main, + }, + "& .MuiTabs-root": { + minHeight: "0", + }, +})); + + +const StyledTab = styled(Tab)(({ theme }) => ({ + position: "relative", + zIndex: 1, + textTransform: "none", + background: "transparent", + border: `1px solid transparent`, + borderBottomColor: theme.palette.border.main, + color: theme.palette.primary.main, + fontWeight: "600", + minHeight: "36px", + margin: theme.spacing(0, 0.5), + marginBottom: "-1px", + padding: "0.5em", + // Using as placeholder stying for active/current tab + "&[data-state='active']": { + background: theme.palette.background.default, + borderColor: theme.palette.border.main, + borderBottomColor: theme.palette.common.white, + color: theme.palette.text.primary, + }, +})) as typeof Tab; + + + const formatLastPublish = (date: string, user: string) => `Last published ${formatDistanceToNow(new Date(date))} ago by ${user}`; @@ -335,7 +406,7 @@ const PreviewBrowser: React.FC<{ const teamSlug = window.location.pathname.split("/")[1]; return ( - +
+ + + + + + {showDebugConsole && } - + ); }); diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss index 5406c62011..1481c21f65 100644 --- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss +++ b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss @@ -37,39 +37,6 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA overflow: hidden; } -#embedded-browser { - position: relative; - top: 0; - right: 0; - bottom: 0; - width: 500px; - display: flex; - flex-direction: column; - flex-shrink: 0; - border-left: 1px solid #ccc; - header { - input { - flex: 1; - padding: 5px; - margin-right: 5px; - background: white; - border: 1px solid rgba(0, 0, 0, 0.2); - } - svg { - cursor: pointer; - opacity: 0.7; - margin: 6px 4px 1px 4px; - font-size: 1.2rem; - } - display: flex; - background: #ddd; - padding: 10px; - } - iframe { - flex: 1; - } -} - #editor { flex: 1; overflow: auto; From 7fa3512bcd3738c7b643e1d2f28ab63ba8b08846 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 16 Apr 2024 14:15:23 +0100 Subject: [PATCH 2/5] fix: Prevent panel from reducing in width --- .../src/pages/FlowEditor/components/PreviewBrowser.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx index 1e206b343c..dd12b5ba6f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx @@ -46,6 +46,7 @@ const EmbeddedBrowser = styled(Box)(({ theme }) => ({ bottom: "0", width: "500px", display: "flex", + flexShrink: 0, flexDirection: "column", borderLeft: `1px solid ${theme.palette.border.main}`, background: theme.palette.background.paper, From 791e1d45b02b01eb9807a1a19222627451086c59 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 16 Apr 2024 14:20:34 +0100 Subject: [PATCH 3/5] fix: Ensure settings panels are not overlapped by elements with explicit z-index values --- .../src/pages/FlowEditor/components/Settings/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx index 42ec847356..3462cd56e2 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx @@ -97,6 +97,8 @@ const Root = styled(Box)(({ theme }) => ({ left: 0, right: 0, minHeight: `calc(100% - ${HEADER_HEIGHT}px)`, + // Ensure settings panels sit above editor content with explicit z-index set, will be redundent when we move to side-tabbed settings + zIndex: "100", [`& .${classes.tabs}`]: { backgroundColor: theme.palette.border.main, }, From 9f31e3bebaccd8f67cb4b96fd3bc35d99bd05abf Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Wed, 17 Apr 2024 09:18:37 +0100 Subject: [PATCH 4/5] fix: z-index using theme setting --- .../src/pages/FlowEditor/components/Settings/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx index 3462cd56e2..fe05eeb961 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx @@ -98,7 +98,7 @@ const Root = styled(Box)(({ theme }) => ({ right: 0, minHeight: `calc(100% - ${HEADER_HEIGHT}px)`, // Ensure settings panels sit above editor content with explicit z-index set, will be redundent when we move to side-tabbed settings - zIndex: "100", + zIndex: theme.zIndex.appBar, [`& .${classes.tabs}`]: { backgroundColor: theme.palette.border.main, }, @@ -107,7 +107,6 @@ const Root = styled(Box)(({ theme }) => ({ backgroundColor: "#f2f2f2", zIndex: 0, }, - zIndex: theme.zIndex.appBar, })); const Settings: React.FC = ({ currentTab, tabs }) => { From 23ab62f4d6364d3fa9f9fa567eb604347bab0b0f Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 23 Apr 2024 12:40:12 +0100 Subject: [PATCH 5/5] feat: React states for sidebar tabs --- .../FlowEditor/components/PreviewBrowser.tsx | 42 ++++++++++++++----- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx index dd12b5ba6f..e0b01cfce5 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx @@ -8,6 +8,7 @@ import Badge from "@mui/material/Badge"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Collapse from "@mui/material/Collapse"; +import Container from "@mui/material/Container"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; @@ -18,7 +19,7 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import ListItemText from "@mui/material/ListItemText"; import { styled } from "@mui/material/styles"; -import Tab from '@mui/material/Tab'; +import Tab, { tabClasses } from '@mui/material/Tab'; import Tabs from '@mui/material/Tabs'; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; @@ -55,7 +56,7 @@ const EmbeddedBrowser = styled(Box)(({ theme }) => ({ }, })); -const PreviewContainer = styled(Box)(() => ({ +const SidebarContainer = styled(Box)(() => ({ overflow: "auto", flex: 1, background: "#fff", @@ -93,6 +94,10 @@ const TabList = styled(Box)(({ theme }) => ({ "& .MuiTabs-root": { minHeight: "0", }, + // Hide default MUI indicator as we're using custom styling + "& .MuiTabs-indicator": { + display: "none", + }, })); @@ -109,13 +114,12 @@ const StyledTab = styled(Tab)(({ theme }) => ({ margin: theme.spacing(0, 0.5), marginBottom: "-1px", padding: "0.5em", - // Using as placeholder stying for active/current tab - "&[data-state='active']": { + [`&.${tabClasses.selected}`]: { background: theme.palette.background.default, borderColor: theme.palette.border.main, borderBottomColor: theme.palette.common.white, color: theme.palette.text.primary, - }, + }, })) as typeof Tab; @@ -156,6 +160,8 @@ interface AlteredNode { data?: any; } +type SideBarTabs = "PreviewBrowser" | "History" + const AlteredNodeListItem = (props: { node: AlteredNode }) => { const { node } = props; let text, data; @@ -388,6 +394,11 @@ const PreviewBrowser: React.FC<{ const [alteredNodes, setAlteredNodes] = useState(); const [dialogOpen, setDialogOpen] = useState(false); const [summary, setSummary] = useState(); + const [activeTab, setActiveTab] = useState("PreviewBrowser"); + + const handleChange = (event: React.SyntheticEvent, newValue: SideBarTabs) => { + setActiveTab(newValue); + }; const _lastPublishedRequest = useAsync(async () => { const date = await lastPublished(flowId); @@ -618,14 +629,23 @@ const PreviewBrowser: React.FC<{ - - - + + + - - - + {activeTab === "PreviewBrowser" && + + + + } + {activeTab === "History" && + + +

History

+ + + } {showDebugConsole && } );