From 19d23ecd41af7d568b15a14e7e25f35ea97fba21 Mon Sep 17 00:00:00 2001 From: Ian Jones <51156018+ianjon3s@users.noreply.github.com> Date: Tue, 23 Apr 2024 16:21:02 +0100 Subject: [PATCH] feat: Tab styling for editor browser preview / history (#3020) --- .../FlowEditor/components/PreviewBrowser.tsx | 116 ++++++++++++++++-- .../FlowEditor/components/Settings/index.tsx | 3 +- .../src/pages/FlowEditor/floweditor.scss | 33 ----- 3 files changed, 109 insertions(+), 43 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..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,6 +19,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, { tabClasses } 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 +40,90 @@ const Console = styled(Box)(() => ({ maxHeight: "50%", })); -const PreviewContainer = styled(Box)(() => ({ +const EmbeddedBrowser = 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 SidebarContainer = 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", + }, + // Hide default MUI indicator as we're using custom styling + "& .MuiTabs-indicator": { + display: "none", + }, })); + +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", + [`&.${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; + + + const formatLastPublish = (date: string, user: string) => `Last published ${formatDistanceToNow(new Date(date))} ago by ${user}`; @@ -84,6 +160,8 @@ interface AlteredNode { data?: any; } +type SideBarTabs = "PreviewBrowser" | "History" + const AlteredNodeListItem = (props: { node: AlteredNode }) => { const { node } = props; let text, data; @@ -316,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); @@ -335,7 +418,7 @@ const PreviewBrowser: React.FC<{ const teamSlug = window.location.pathname.split("/")[1]; return ( - +
- - - + + + + + + + {activeTab === "PreviewBrowser" && + + + + } + {activeTab === "History" && + + +

History

+ + + } {showDebugConsole && } - + ); }); 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..fe05eeb961 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: theme.zIndex.appBar, [`& .${classes.tabs}`]: { backgroundColor: theme.palette.border.main, }, @@ -105,7 +107,6 @@ const Root = styled(Box)(({ theme }) => ({ backgroundColor: "#f2f2f2", zIndex: 0, }, - zIndex: theme.zIndex.appBar, })); const Settings: React.FC = ({ currentTab, tabs }) => { 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;