From f727131acf21175e248f5910bc8b2ae1ade6c361 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 07:11:49 +0800 Subject: [PATCH 001/111] task: changed global menu style --- src/shell/components/global-menu/index.tsx | 34 +++++++++------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/src/shell/components/global-menu/index.tsx b/src/shell/components/global-menu/index.tsx index 9df990fe52..f36544c171 100644 --- a/src/shell/components/global-menu/index.tsx +++ b/src/shell/components/global-menu/index.tsx @@ -37,6 +37,7 @@ export default memo(function GlobalMenu() { release: RocketLaunchIcon, apps: ExtensionIcon, }; + const activeBgColor = "rgba(255, 93, 10, 0.08)"; const MenuItemIcon = ({ product }: { product: Products }) => { const SpecificIcon = icons[product]; @@ -52,13 +53,7 @@ export default memo(function GlobalMenu() { }; return ( - + {products.map((product) => { // Covert dashes to spaces // Uppercase first letter of word @@ -66,6 +61,7 @@ export default memo(function GlobalMenu() { .split("-") .map((s) => s.charAt(0).toUpperCase() + s.slice(1)) .join(" "); + const isActive = slug === product; return ( - {openNav && ( {name} From 9cde14f81996569f31037cb016fe119f4491fc2a Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 07:42:20 +0800 Subject: [PATCH 002/111] task: adjust instance menu style --- src/shell/components/global-sidebar/GlobalSidebar.tsx | 2 +- .../global-sidebar/components/InstanceMenu/index.tsx | 10 +++++----- src/shell/views/Shell/Shell.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/shell/components/global-sidebar/GlobalSidebar.tsx b/src/shell/components/global-sidebar/GlobalSidebar.tsx index 588ec15f45..4fce00a3f0 100644 --- a/src/shell/components/global-sidebar/GlobalSidebar.tsx +++ b/src/shell/components/global-sidebar/GlobalSidebar.tsx @@ -76,7 +76,7 @@ const GlobalSidebar: FC = ({ onClick, openNav }) => { position: "absolute", top: "32px", - right: "-12px", + right: "-14px", zIndex: (theme) => theme.zIndex.appBar, "&:hover": { diff --git a/src/shell/components/global-sidebar/components/InstanceMenu/index.tsx b/src/shell/components/global-sidebar/components/InstanceMenu/index.tsx index 8d6d03e08d..d4114d0926 100644 --- a/src/shell/components/global-sidebar/components/InstanceMenu/index.tsx +++ b/src/shell/components/global-sidebar/components/InstanceMenu/index.tsx @@ -22,12 +22,12 @@ export const InstanceMenu: FC = ({ openNav }) => { <> diff --git a/src/shell/views/Shell/Shell.tsx b/src/shell/views/Shell/Shell.tsx index c991e88021..a2cbb53e77 100644 --- a/src/shell/views/Shell/Shell.tsx +++ b/src/shell/views/Shell/Shell.tsx @@ -39,7 +39,7 @@ export default memo(function Shell() { height="100vh" overflow="hidden" display="grid" - gridTemplateColumns={openNav ? "200px 1fr" : "64px 1fr"} + gridTemplateColumns={openNav ? "200px 1fr" : "48px 1fr"} sx={{ backgroundColor: "background.paper", }} From 26ef3e711a5ee1c56f34c946c7a821512a5af59b Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 08:46:13 +0800 Subject: [PATCH 003/111] task: remove white bg --- .../components/global-sidebar/components/InstanceAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shell/components/global-sidebar/components/InstanceAvatar.tsx b/src/shell/components/global-sidebar/components/InstanceAvatar.tsx index 2a8b32f5c2..cac51090ba 100644 --- a/src/shell/components/global-sidebar/components/InstanceAvatar.tsx +++ b/src/shell/components/global-sidebar/components/InstanceAvatar.tsx @@ -64,7 +64,7 @@ export const InstanceAvatar: FC = ({ sx={{ height: 32, width: 32, - backgroundColor: faviconURL ? "white" : "info.main", + backgroundColor: faviconURL ? "transparent" : "info.main", }} > {(!faviconURL && instance?.name[0]?.toUpperCase()) || "A"} From c35a544ea1d930edc86bfe0ba3118a35a3f21cb8 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 11:21:21 +0800 Subject: [PATCH 004/111] task: convert usage of theme to getTheme --- src/apps/code-editor/src/app/components/FileList/FileList.js | 3 ++- .../views/ItemEdit/Analytics/components/ByDayLineChart.tsx | 3 ++- .../app/views/ItemEdit/Analytics/components/UsersBarChart.tsx | 3 ++- .../ItemEdit/Analytics/components/UsersDoughnutChart.tsx | 3 ++- .../content-editor/src/app/views/ItemEdit/Analytics/index.tsx | 4 +++- .../content-editor/src/app/views/ItemEdit/PublishState.tsx | 3 ++- src/apps/home/app/components/CongratulationsDialog.tsx | 4 +++- src/apps/home/app/index.tsx | 4 +++- src/apps/marketplace/src/app/index.tsx | 4 +++- src/apps/media/src/app/index.tsx | 3 ++- src/apps/reports/src/app/components/ReportingNav.js | 3 ++- src/apps/reports/src/app/views/ActivityLog/index.js | 4 +++- src/apps/schema/src/app/components/AddFieldModal/index.tsx | 3 ++- src/apps/schema/src/app/components/SchemaCreateWizard.tsx | 3 ++- src/apps/schema/src/app/index.tsx | 4 +++- src/apps/settings/src/app/views/Instance/Instance.js | 3 ++- src/shell/components/CascadingMenuItem/index.tsx | 3 ++- src/shell/components/DirtyCodeModal/DirtyCodeModal.tsx | 4 +++- src/shell/components/Filters/UserFilter.tsx | 3 ++- src/shell/components/GlobalSearch/index.tsx | 3 ++- src/shell/components/GlobalTopbar/GlobalTopbar.tsx | 4 +++- src/shell/components/Staging.tsx | 4 +++- src/shell/components/global-sidebar/GlobalSidebar.tsx | 3 ++- src/shell/components/withAi/index.tsx | 3 ++- src/shell/views/SearchPage/SearchPage.tsx | 3 ++- 25 files changed, 59 insertions(+), 25 deletions(-) diff --git a/src/apps/code-editor/src/app/components/FileList/FileList.js b/src/apps/code-editor/src/app/components/FileList/FileList.js index f7c85c180c..51cad7414f 100644 --- a/src/apps/code-editor/src/app/components/FileList/FileList.js +++ b/src/apps/code-editor/src/app/components/FileList/FileList.js @@ -6,7 +6,7 @@ import { Nav } from "@zesty-io/core/Nav"; import Tooltip from "@mui/material/Tooltip"; import InfoIcon from "@mui/icons-material/InfoOutlined"; import { Box } from "@mui/material"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { CreateFile } from "./components/CreateFile"; import { OrderFiles } from "./components/OrderFiles"; @@ -35,6 +35,7 @@ export const FileList = memo(function FileList(props) { let { pathname } = useLocation(); let hashPath = `/${pathname}`; + const theme = getTheme(); useEffect(() => { setShownFiles(props.navCode.tree.sort(byLabel)); diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/ByDayLineChart.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/ByDayLineChart.tsx index 7df299ee54..4592e1d4c9 100644 --- a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/ByDayLineChart.tsx +++ b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/ByDayLineChart.tsx @@ -1,4 +1,4 @@ -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { Line } from "react-chartjs-2"; import ChartDataLabels from "chartjs-plugin-datalabels"; @@ -67,6 +67,7 @@ export const ByDayLineChart = ({ const [tooltipModel, setTooltipModel] = useState(null); const [isTooltipEntered, setIsTooltipEntered] = useState(false); const [type, setType] = useState(0); + const theme = getTheme(); const itemPublishes = useMemo( () => diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersBarChart.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersBarChart.tsx index 4f9abb562f..308ae9eea4 100644 --- a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersBarChart.tsx +++ b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersBarChart.tsx @@ -1,4 +1,4 @@ -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { useRef, useState } from "react"; import { Bar } from "react-chartjs-2"; import ChartDataLabels from "chartjs-plugin-datalabels"; @@ -42,6 +42,7 @@ export const UsersBarChart = ({ const chartRef = useRef(null); const [tooltipModel, setTooltipModel] = useState(null); const [type, setType] = useState("Source"); + const theme = getTheme(); const handleHover = (event: ChartEvent, chartElement: Array) => { if (chartElement.length === 0) { diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersDoughnutChart.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersDoughnutChart.tsx index eb94ebc56b..49e3d875c6 100644 --- a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersDoughnutChart.tsx +++ b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/components/UsersDoughnutChart.tsx @@ -1,4 +1,4 @@ -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { useRef, useState } from "react"; import { Doughnut } from "react-chartjs-2"; import { ChartEvent } from "chart.js"; @@ -17,6 +17,7 @@ export const UsersDoughnutChart = ({ }: any) => { const chartRef = useRef(null); const [tooltipModel, setTooltipModel] = useState(null); + const theme = getTheme(); const handleHover = (event: ChartEvent, chartElement: Array) => { if (chartElement.length === 0) { diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/index.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/index.tsx index 6162ce17d7..6c64795570 100644 --- a/src/apps/content-editor/src/app/views/ItemEdit/Analytics/index.tsx +++ b/src/apps/content-editor/src/app/views/ItemEdit/Analytics/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Box, CircularProgress } from "@mui/material"; import { ThemeProvider } from "@mui/material/styles"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { AuthView } from "./components/AuthView"; import { useGetAnalyticsPropertiesQuery } from "../../../../../../../shell/services/cloudFunctions"; import { SinglePageAnalyticsView } from "./views/SinglePageAnalyticsView"; @@ -13,6 +13,8 @@ const Analytics = ({ item }: any) => { refetch(); }; + const theme = getTheme(); + return ( {isFetching ? ( diff --git a/src/apps/content-editor/src/app/views/ItemEdit/PublishState.tsx b/src/apps/content-editor/src/app/views/ItemEdit/PublishState.tsx index daa0199ada..8adc68b099 100644 --- a/src/apps/content-editor/src/app/views/ItemEdit/PublishState.tsx +++ b/src/apps/content-editor/src/app/views/ItemEdit/PublishState.tsx @@ -3,7 +3,7 @@ import { useParams } from "react-router-dom"; import moment from "moment"; import { DataGridPro, GridValueGetterParams } from "@mui/x-data-grid-pro"; import { Box, Button, Chip } from "@mui/material"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { ThemeProvider } from "@mui/material/styles"; import { WithLoader } from "@zesty-io/core/WithLoader"; import { instanceApi } from "../../../../../../shell/services/instance"; @@ -24,6 +24,7 @@ export const PublishState = ({ reloadItem }: Props) => { itemZUID, }); const [deletePublishing] = instanceApi.useDeleteItemPublishingMutation(); + const theme = getTheme(); const columns = useMemo( () => [ diff --git a/src/apps/home/app/components/CongratulationsDialog.tsx b/src/apps/home/app/components/CongratulationsDialog.tsx index 5a653b4188..d71a9926f9 100644 --- a/src/apps/home/app/components/CongratulationsDialog.tsx +++ b/src/apps/home/app/components/CongratulationsDialog.tsx @@ -7,7 +7,7 @@ import { Typography, } from "@mui/material"; import { ThemeProvider } from "@mui/material/styles"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { ResourcesCard } from "./ResourcesCard"; interface Props { @@ -15,6 +15,8 @@ interface Props { } export const CongratulationsDialog = ({ onClose }: Props) => { + const theme = getTheme(); + return ( diff --git a/src/apps/home/app/index.tsx b/src/apps/home/app/index.tsx index d532cfe0b0..dd50fcc2ea 100644 --- a/src/apps/home/app/index.tsx +++ b/src/apps/home/app/index.tsx @@ -1,5 +1,5 @@ import { Box, ThemeProvider, CircularProgress } from "@mui/material"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { useState } from "react"; import moment from "moment"; import { useSelector } from "react-redux"; @@ -56,6 +56,8 @@ export const HomeApp = () => { isAMonthOld; const [dateRange, setDateRange] = useState(30); + const theme = getTheme(); + return ( { + const theme = getTheme(); + return ( (false); const fileId = new URLSearchParams(location.search).get("fileId"); + const theme = getTheme(); useEffect(() => { if (lockedToGroupId) { diff --git a/src/apps/reports/src/app/components/ReportingNav.js b/src/apps/reports/src/app/components/ReportingNav.js index d3a02270c3..7b73aed82c 100644 --- a/src/apps/reports/src/app/components/ReportingNav.js +++ b/src/apps/reports/src/app/components/ReportingNav.js @@ -1,5 +1,5 @@ import { useHistory, useLocation } from "react-router"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { Box, ListItem, @@ -17,6 +17,7 @@ import InsightsIcon from "@mui/icons-material/Insights"; export function ReportingNav() { const location = useLocation(); const history = useHistory(); + const theme = getTheme(); const tree = [ { diff --git a/src/apps/reports/src/app/views/ActivityLog/index.js b/src/apps/reports/src/app/views/ActivityLog/index.js index 4b2d81b065..23182bba2f 100644 --- a/src/apps/reports/src/app/views/ActivityLog/index.js +++ b/src/apps/reports/src/app/views/ActivityLog/index.js @@ -1,12 +1,14 @@ import { Route, Switch, Redirect } from "react-router"; import { Box } from "@mui/material"; import { ThemeProvider } from "@mui/material/styles"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { Home } from "./views/Home"; import { ResourceDetails } from "./views/ResourceDetails"; import { UserDetails } from "./views/UserDetails"; export const ActivityLog = () => { + const theme = getTheme(); + return ( { + const theme = getTheme(); const [viewMode, setViewMode] = useState(mode); const [selectedField, setSelectedField] = useState({ fieldType: "", diff --git a/src/apps/schema/src/app/components/SchemaCreateWizard.tsx b/src/apps/schema/src/app/components/SchemaCreateWizard.tsx index 512cc3b378..a35e9b503f 100644 --- a/src/apps/schema/src/app/components/SchemaCreateWizard.tsx +++ b/src/apps/schema/src/app/components/SchemaCreateWizard.tsx @@ -12,7 +12,7 @@ import { DialogActions, CircularProgress, } from "@mui/material"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { ThemeProvider } from "@mui/material/styles"; import EditIcon from "@mui/icons-material/Edit"; import winnerPanel from "../../../../../../public/images/winnerPanel.svg"; @@ -59,6 +59,7 @@ const templates = [ ]; export const SchemaCreateWizard = () => { + const theme = getTheme(); const history = useHistory(); const instance = useSelector((state: AppState) => state.instance); const models = useSelector((state: AppState) => state.models); diff --git a/src/apps/schema/src/app/index.tsx b/src/apps/schema/src/app/index.tsx index f4a33b4f8c..1a2434e76a 100644 --- a/src/apps/schema/src/app/index.tsx +++ b/src/apps/schema/src/app/index.tsx @@ -1,5 +1,5 @@ import { Box, ThemeProvider } from "@mui/material"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { Sidebar } from "./components/Sidebar"; import { Redirect, Route, Switch } from "react-router"; import { Model } from "./views/Model"; @@ -8,6 +8,8 @@ import { SearchModels } from "./views/SearchModels"; import { SchemaCreateWizard } from "./components/SchemaCreateWizard"; export const SchemaApp = () => { + const theme = getTheme(); + return ( { const [fields, setFields] = useState([]); const [fieldValues, setFieldValues] = useState({}); const [dirtyFields, setDirtyFields] = useState([]); + const theme = getTheme(); // Set Fields and Field Values from store/URL useEffect(() => { diff --git a/src/shell/components/CascadingMenuItem/index.tsx b/src/shell/components/CascadingMenuItem/index.tsx index b929507ad7..6ac59a04d1 100644 --- a/src/shell/components/CascadingMenuItem/index.tsx +++ b/src/shell/components/CascadingMenuItem/index.tsx @@ -7,7 +7,7 @@ import { Paper, PaperProps, } from "@mui/material"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; type CascadingMenuItemProps = MenuItemProps & { MenuItemComponent: React.ReactNode; @@ -23,6 +23,7 @@ export const CascadingMenuItem: FC = ({ ...props }) => { const [anchorEl, setAnchorEl] = useState(null); + const theme = getTheme(); return ( = ({ onSave, onDiscard, }) => { + const theme = getTheme(); + return ( = ({ defaultButtonText = "Created By", options, }) => { + const theme = getTheme(); const [filter, setFilter] = useState(""); const [menuAnchorEl, setMenuAnchorEl] = useState( null diff --git a/src/shell/components/GlobalSearch/index.tsx b/src/shell/components/GlobalSearch/index.tsx index ce6919c380..d54379fd45 100644 --- a/src/shell/components/GlobalSearch/index.tsx +++ b/src/shell/components/GlobalSearch/index.tsx @@ -18,7 +18,7 @@ import { useHistory } from "react-router"; import { useDispatch, useSelector } from "react-redux"; import TuneRoundedIcon from "@mui/icons-material/TuneRounded"; import { isEmpty } from "lodash"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import { useMetaKey } from "../../../shell/hooks/useMetaKey"; import { useSearchContentQuery } from "../../services/instance"; @@ -88,6 +88,7 @@ export const GlobalSearch = () => { const dispatch = useDispatch(); const [params, setParams] = useParams(); const textfieldRef = useRef(); + const theme = getTheme(); const apiQueryTerm = useMemo(() => { if (!!typedSearchAccelerator && !!searchKeyword) { diff --git a/src/shell/components/GlobalTopbar/GlobalTopbar.tsx b/src/shell/components/GlobalTopbar/GlobalTopbar.tsx index 74a721ccca..0daa92a558 100644 --- a/src/shell/components/GlobalTopbar/GlobalTopbar.tsx +++ b/src/shell/components/GlobalTopbar/GlobalTopbar.tsx @@ -2,7 +2,7 @@ import { GlobalSearch } from "../GlobalSearch"; import GlobalTabs from "../global-tabs"; import { GlobalNotifications } from "../global-notifications"; -import { theme, legacyTheme } from "@zesty-io/material"; +import { getTheme, legacyTheme } from "@zesty-io/material"; import { ThemeProvider } from "@mui/material/styles"; import Stack from "@mui/material/Stack"; import Box from "@mui/material/Box"; @@ -10,6 +10,8 @@ import Box from "@mui/material/Box"; import { DomainSwitcher } from "./DomainSwitcher"; export function GlobalTopbar() { + const theme = getTheme(); + return ( { + const theme = getTheme(); + return ( = ({ onClick, openNav }) => { const is15DaysFromCreation = instance?.createdAt && moment().diff(moment(instance?.createdAt), "days") <= 15; + const theme = getTheme(); return ( <> diff --git a/src/shell/components/withAi/index.tsx b/src/shell/components/withAi/index.tsx index 201df1616c..52e69deaca 100644 --- a/src/shell/components/withAi/index.tsx +++ b/src/shell/components/withAi/index.tsx @@ -1,5 +1,5 @@ import { Popover, IconButton } from "@mui/material"; -import { Brain, theme } from "@zesty-io/material"; +import { Brain, getTheme } from "@zesty-io/material"; import { ThemeProvider } from "@mui/material/styles"; import { ComponentType, MouseEvent, useState } from "react"; import { AIGenerator } from "./AIGenerator"; @@ -25,6 +25,7 @@ const paragraphFormat = (text: string) => { }; export const withAI = (WrappedComponent: ComponentType) => (props: any) => { + const theme = getTheme(); const instanceCreatedAt = useSelector( (state: AppState) => state.instance.createdAt ); diff --git a/src/shell/views/SearchPage/SearchPage.tsx b/src/shell/views/SearchPage/SearchPage.tsx index e8e32a6a9e..fac1f7c1d0 100644 --- a/src/shell/views/SearchPage/SearchPage.tsx +++ b/src/shell/views/SearchPage/SearchPage.tsx @@ -1,7 +1,7 @@ import { FC, useMemo, useEffect } from "react"; import { Typography, Box, Stack, Skeleton } from "@mui/material"; import { ThemeProvider } from "@mui/material/styles"; -import { theme } from "@zesty-io/material"; +import { getTheme } from "@zesty-io/material"; import moment from "moment-timezone"; import { cloneDeep, isEmpty } from "lodash"; import { useSelector } from "react-redux"; @@ -46,6 +46,7 @@ export interface SearchPageItem { langID?: number; } export const SearchPage: FC = () => { + const theme = getTheme(); const [params, setParams] = useParams(); const keyword = params.get("q") || ""; const instanceId = useSelector((state: any) => state.instance.ID); From 2ecfa51391eacfc5be573fff8b22e7224ec53ccf Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 11:37:55 +0800 Subject: [PATCH 005/111] task: created reusable appsidebar component --- src/shell/components/AppSidebar/index.tsx | 51 +++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/shell/components/AppSidebar/index.tsx diff --git a/src/shell/components/AppSidebar/index.tsx b/src/shell/components/AppSidebar/index.tsx new file mode 100644 index 0000000000..b0cd77d61b --- /dev/null +++ b/src/shell/components/AppSidebar/index.tsx @@ -0,0 +1,51 @@ +import { FC, useMemo } from "react"; +import { Box, Stack, Typography, PaletteMode } from "@mui/material"; +import { alpha, createTheme, ThemeProvider } from "@mui/material/styles"; +import { getTheme } from "@zesty-io/material"; + +interface Props { + mode?: PaletteMode; + HeaderSubComponent?: React.ReactNode; + headerTitle?: string; +} +export const AppSideBar: FC> = ({ + mode = "light", + HeaderSubComponent, + headerTitle, + children, + ...props +}) => { + const theme = useMemo(() => { + return getTheme(mode); + }, [mode]); + + const isLightMode = mode === "light"; + + return ( + + + {!!headerTitle && ( + + {headerTitle} + + )} + {!!HeaderSubComponent && {HeaderSubComponent}} + {children} + + + ); +}; From fc256501a1c4837ea12236333c8f3db51a604fc3 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 16:10:59 +0800 Subject: [PATCH 006/111] task: added subheader components --- package.json | 2 +- .../content-editor/src/app/ContentEditor.js | 14 ++- .../src/app/components/ContentNav/index.tsx | 107 ++++++++++++++++++ 3 files changed, 116 insertions(+), 7 deletions(-) create mode 100644 src/apps/content-editor/src/app/components/ContentNav/index.tsx diff --git a/package.json b/package.json index e0b7f9d859..adc476aae0 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@tinymce/tinymce-react": "^3.12.6", "@welldone-software/why-did-you-render": "^6.1.1", "@zesty-io/core": "1.9.1", - "@zesty-io/material": "^0.7.0", + "@zesty-io/material": "file:../material/zesty-io-material-0.7.1-rc.8.tgz", "chart.js": "^3.8.0", "chartjs-adapter-moment": "^1.0.1", "chartjs-plugin-datalabels": "^2.0.0", diff --git a/src/apps/content-editor/src/app/ContentEditor.js b/src/apps/content-editor/src/app/ContentEditor.js index ddd86a8d4e..4173894ad4 100644 --- a/src/apps/content-editor/src/app/ContentEditor.js +++ b/src/apps/content-editor/src/app/ContentEditor.js @@ -13,6 +13,7 @@ import { fetchNav } from "../store/navContent"; import { AppLink } from "@zesty-io/core/AppLink"; import { WithLoader } from "@zesty-io/core/WithLoader"; import { ContentNav } from "./components/Nav"; +import { ContentNav as ContentNavV2 } from "./components/ContentNav"; import { Dashboard } from "./views/Dashboard"; import { ItemList } from "./views/ItemList"; @@ -138,12 +139,13 @@ export default function ContentEditor() { : "" )} > - + + {/* */}
{ + return ( + + + + Content + + + + + + + ), + }} + placeholder="Search Content" + size="small" + sx={{ + px: 1.5, + }} + /> + + + + + + + Dashboard + + + + + + + + Releases + + + + + } + /> + ); +}; From 2a9aba7ed538f7c35508c92b04d07789976d1dbb Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 16:36:32 +0800 Subject: [PATCH 007/111] task: fixed hover color --- src/shell/components/global-menu/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shell/components/global-menu/index.tsx b/src/shell/components/global-menu/index.tsx index f36544c171..70d2f3123a 100644 --- a/src/shell/components/global-menu/index.tsx +++ b/src/shell/components/global-menu/index.tsx @@ -85,7 +85,7 @@ export default memo(function GlobalMenu() { color: isActive ? "primary.main" : "grey.400", }, "&:hover": { - backgroundColor: isActive ? "grey.800" : activeBgColor, + backgroundColor: activeBgColor, }, }} > From 418d5cace73f85760570faaf027c9d7e8509469e Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 16:36:59 +0800 Subject: [PATCH 008/111] task: fixed list item height --- .../src/app/components/ContentNav/index.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/apps/content-editor/src/app/components/ContentNav/index.tsx b/src/apps/content-editor/src/app/components/ContentNav/index.tsx index 4d14e267a7..7cc4f152d4 100644 --- a/src/apps/content-editor/src/app/components/ContentNav/index.tsx +++ b/src/apps/content-editor/src/app/components/ContentNav/index.tsx @@ -73,10 +73,13 @@ export const ContentNav = () => { sx={{ borderLeft: "2px solid", borderColor: "primary.main", - height: 36, }} > - + @@ -89,10 +92,13 @@ export const ContentNav = () => { svg: { color: "grey.400", }, - height: 36, }} > - + From 5f756404379a83698f01ff2b932c06db0eccab10 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 16:59:35 +0800 Subject: [PATCH 009/111] task: change spacing --- .../src/app/components/ContentNav/index.tsx | 96 +++++++++++-------- 1 file changed, 57 insertions(+), 39 deletions(-) diff --git a/src/apps/content-editor/src/app/components/ContentNav/index.tsx b/src/apps/content-editor/src/app/components/ContentNav/index.tsx index 7cc4f152d4..c3c98c4dc8 100644 --- a/src/apps/content-editor/src/app/components/ContentNav/index.tsx +++ b/src/apps/content-editor/src/app/components/ContentNav/index.tsx @@ -10,15 +10,42 @@ import { Button, InputAdornment, ListItemButton, + SvgIcon, } from "@mui/material"; +import { + SvgIconComponent, + BackupTableRounded, + ScheduleRounded, +} from "@mui/icons-material"; import AddRoundedIcon from "@mui/icons-material/AddRounded"; import SearchIcon from "@mui/icons-material/Search"; import BackupTableRoundedIcon from "@mui/icons-material/BackupTableRounded"; import ScheduleRoundedIcon from "@mui/icons-material/ScheduleRounded"; +import { useLocation } from "react-router-dom"; import { AppSideBar } from "../../../../../../shell/components/AppSidebar"; +interface SubMenu { + name: string; + icon: SvgIconComponent; + path: string; +} +const SubMenus: Readonly = [ + { + name: "Dashboard", + icon: BackupTableRounded, + path: "/content", + }, + { + name: "Releases", + icon: ScheduleRounded, + path: "/release", + }, +] as const; + export const ContentNav = () => { + const location = useLocation(); + return ( { px: 1.5, }} /> - - - - - - - Dashboard - - - - - - - - Releases - - + + {SubMenus.map((menu) => { + const isActive = location.pathname === menu.path; + + return ( + + console.log(menu.path)} + > + + + + {menu.name} + + + ); + })} } From 4d6ace78c781947232185a1e593f455ab9451e92 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 17:02:57 +0800 Subject: [PATCH 010/111] task: wire button click routing --- .../content-editor/src/app/components/ContentNav/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/apps/content-editor/src/app/components/ContentNav/index.tsx b/src/apps/content-editor/src/app/components/ContentNav/index.tsx index c3c98c4dc8..f4f37f09e2 100644 --- a/src/apps/content-editor/src/app/components/ContentNav/index.tsx +++ b/src/apps/content-editor/src/app/components/ContentNav/index.tsx @@ -19,9 +19,7 @@ import { } from "@mui/icons-material"; import AddRoundedIcon from "@mui/icons-material/AddRounded"; import SearchIcon from "@mui/icons-material/Search"; -import BackupTableRoundedIcon from "@mui/icons-material/BackupTableRounded"; -import ScheduleRoundedIcon from "@mui/icons-material/ScheduleRounded"; -import { useLocation } from "react-router-dom"; +import { useLocation, useHistory } from "react-router-dom"; import { AppSideBar } from "../../../../../../shell/components/AppSidebar"; @@ -45,6 +43,7 @@ const SubMenus: Readonly = [ export const ContentNav = () => { const location = useLocation(); + const history = useHistory(); return ( { pr: 1.5, py: 0.75, }} - onClick={() => console.log(menu.path)} + onClick={() => history.push(menu.path)} > From 746c21070e8ed03ace530b883b6b2046a4abe066 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 18:20:25 +0800 Subject: [PATCH 011/111] task: only allow scrolling for children --- .../src/app/components/ContentNav/index.tsx | 18 ++++++++- src/shell/components/AppSidebar/index.tsx | 40 +++++++++++-------- 2 files changed, 40 insertions(+), 18 deletions(-) diff --git a/src/apps/content-editor/src/app/components/ContentNav/index.tsx b/src/apps/content-editor/src/app/components/ContentNav/index.tsx index f4f37f09e2..34b5ebf7cb 100644 --- a/src/apps/content-editor/src/app/components/ContentNav/index.tsx +++ b/src/apps/content-editor/src/app/components/ContentNav/index.tsx @@ -98,6 +98,7 @@ export const ContentNav = () => { return ( { - {menu.name} + ); @@ -125,6 +132,13 @@ export const ContentNav = () => { } - /> + > + {/* TODO: Remove dummy data */} + + {[...new Array(50)].map((_, index) => ( + Menu Item {index} + ))} + + ); }; diff --git a/src/shell/components/AppSidebar/index.tsx b/src/shell/components/AppSidebar/index.tsx index b0cd77d61b..b0a40f481e 100644 --- a/src/shell/components/AppSidebar/index.tsx +++ b/src/shell/components/AppSidebar/index.tsx @@ -24,27 +24,35 @@ export const AppSideBar: FC> = ({ return ( - {!!headerTitle && ( - - {headerTitle} - - )} - {!!HeaderSubComponent && {HeaderSubComponent}} - {children} + + {!!headerTitle && ( + + {headerTitle} + + )} + {!!HeaderSubComponent && {HeaderSubComponent}} + + + {children} + ); From efeaef17222c298a217d19e0106cdc031805b0c3 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Wed, 19 Jul 2023 18:55:23 +0800 Subject: [PATCH 012/111] task: updated scrollbar color and only scroll children --- src/shell/components/AppSidebar/index.tsx | 66 +++++++++++++---------- 1 file changed, 37 insertions(+), 29 deletions(-) diff --git a/src/shell/components/AppSidebar/index.tsx b/src/shell/components/AppSidebar/index.tsx index b0a40f481e..a3843b3c87 100644 --- a/src/shell/components/AppSidebar/index.tsx +++ b/src/shell/components/AppSidebar/index.tsx @@ -1,5 +1,11 @@ import { FC, useMemo } from "react"; -import { Box, Stack, Typography, PaletteMode } from "@mui/material"; +import { + Box, + Stack, + Typography, + PaletteMode, + CssBaseline, +} from "@mui/material"; import { alpha, createTheme, ThemeProvider } from "@mui/material/styles"; import { getTheme } from "@zesty-io/material"; @@ -23,37 +29,39 @@ export const AppSideBar: FC> = ({ return ( - - - {!!headerTitle && ( - - {headerTitle} - - )} - {!!HeaderSubComponent && {HeaderSubComponent}} - - + - {children} - - + + {!!headerTitle && ( + + {headerTitle} + + )} + {!!HeaderSubComponent && {HeaderSubComponent}} + + + {children} + + + ); }; From 9ffadb182e7a4ddfd7f62706cb9ea866c20bd7fa Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 20 Jul 2023 13:48:55 +0800 Subject: [PATCH 013/111] task: nav tree --- src/apps/content-editor/src/store/types.ts | 27 +++ src/shell/components/NavTree/Nav/Nav.less | 9 + .../components/NavTree/Nav/Nav.less.json | 4 + src/shell/components/NavTree/Nav/Nav.tsx | 74 ++++++++ src/shell/components/NavTree/Nav/index.ts | 1 + src/shell/components/NavTree/Node/Node.less | 178 ++++++++++++++++++ .../components/NavTree/Node/Node.less.json | 12 ++ src/shell/components/NavTree/Node/Node.tsx | 88 +++++++++ src/shell/components/NavTree/Node/index.js | 1 + .../components/NavTree/Parent/Parent.less | 66 +++++++ .../NavTree/Parent/Parent.less.json | 7 + .../components/NavTree/Parent/Parent.tsx | 74 ++++++++ src/shell/components/NavTree/Parent/index.js | 1 + src/shell/components/NavTree/README.md | 22 +++ src/shell/components/NavTree/index.ts | 3 + 15 files changed, 567 insertions(+) create mode 100644 src/apps/content-editor/src/store/types.ts create mode 100644 src/shell/components/NavTree/Nav/Nav.less create mode 100644 src/shell/components/NavTree/Nav/Nav.less.json create mode 100644 src/shell/components/NavTree/Nav/Nav.tsx create mode 100644 src/shell/components/NavTree/Nav/index.ts create mode 100644 src/shell/components/NavTree/Node/Node.less create mode 100644 src/shell/components/NavTree/Node/Node.less.json create mode 100644 src/shell/components/NavTree/Node/Node.tsx create mode 100644 src/shell/components/NavTree/Node/index.js create mode 100644 src/shell/components/NavTree/Parent/Parent.less create mode 100644 src/shell/components/NavTree/Parent/Parent.less.json create mode 100644 src/shell/components/NavTree/Parent/Parent.tsx create mode 100644 src/shell/components/NavTree/Parent/index.js create mode 100644 src/shell/components/NavTree/README.md create mode 100644 src/shell/components/NavTree/index.ts diff --git a/src/apps/content-editor/src/store/types.ts b/src/apps/content-editor/src/store/types.ts new file mode 100644 index 0000000000..0e7862a57f --- /dev/null +++ b/src/apps/content-editor/src/store/types.ts @@ -0,0 +1,27 @@ +import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; + +export interface TreeItem { + ZUID: string; + children: TreeItem[]; + contentModelZUID: string; + icon: JSX.Element | IconDefinition; + label: string; + path: string; + sort: number; + type: + | "pageset" + | "dataset" + | "item" + | "internal" + | "external" + | "templateset"; + hidden?: boolean; + closed?: boolean; +} + +export interface NavData { + nav: TreeItem[]; + headless: TreeItem[]; + hidden: TreeItem[]; + raw: TreeItem[]; +} diff --git a/src/shell/components/NavTree/Nav/Nav.less b/src/shell/components/NavTree/Nav/Nav.less new file mode 100644 index 0000000000..ca61361a79 --- /dev/null +++ b/src/shell/components/NavTree/Nav/Nav.less @@ -0,0 +1,9 @@ +@import "~@zesty-io/core/colors.less"; + +.Nav.Dark { + background-color: #1d2939; +} + +.Nav { + background-color: transparent; //lighten(@zesty-light-blue, 10%); +} diff --git a/src/shell/components/NavTree/Nav/Nav.less.json b/src/shell/components/NavTree/Nav/Nav.less.json new file mode 100644 index 0000000000..c9371dea19 --- /dev/null +++ b/src/shell/components/NavTree/Nav/Nav.less.json @@ -0,0 +1,4 @@ +{ + "Nav": "Nav__2W2KZ", + "Dark": "Dark__324H3" +} diff --git a/src/shell/components/NavTree/Nav/Nav.tsx b/src/shell/components/NavTree/Nav/Nav.tsx new file mode 100644 index 0000000000..5d3633dec6 --- /dev/null +++ b/src/shell/components/NavTree/Nav/Nav.tsx @@ -0,0 +1,74 @@ +import { FC } from "react"; +import cx from "classnames"; +import { PaletteMode } from "@mui/material"; +import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; + +import { Parent } from "../Parent"; +import styles from "./Nav.less"; + +export interface TreeItem { + ZUID: string; + children: TreeItem[]; + contentModelZUID: string; + icon: JSX.Element | IconDefinition; + label: string; + path: string; + sort: number; + type: + | "pageset" + | "dataset" + | "item" + | "internal" + | "external" + | "templateset"; + hidden?: boolean; + closed?: boolean; +} + +// TODO: Set proper typing +interface Props { + activePath: string; + onCollapseNode: () => void; + actions: any; + tree: TreeItem[]; + mode?: PaletteMode; + id?: string; + className?: string; +} + +export const Nav: FC> = ({ + mode = "light", + activePath, + onCollapseNode, + actions, + tree, + id = "Navigation", + className = "", +}) => { + const isLightMode = mode === "light"; + + return ( + + ); +}; diff --git a/src/shell/components/NavTree/Nav/index.ts b/src/shell/components/NavTree/Nav/index.ts new file mode 100644 index 0000000000..0e1a56e6b0 --- /dev/null +++ b/src/shell/components/NavTree/Nav/index.ts @@ -0,0 +1 @@ +export { Nav } from "./Nav"; diff --git a/src/shell/components/NavTree/Node/Node.less b/src/shell/components/NavTree/Node/Node.less new file mode 100644 index 0000000000..9758f87a04 --- /dev/null +++ b/src/shell/components/NavTree/Node/Node.less @@ -0,0 +1,178 @@ +@import "~@zesty-io/core/colors.less"; + +.item { + background-color: #ffffff; + + display: flex; + align-items: center; + user-select: none; + border-left: 2px solid transparent; + font-family: Verdana, Helvetica, sans-serif; + + svg { + font-size: 0.9em; + } + + a, + .directory { + text-decoration: none; + color: #475467; + font-weight: 500; + flex: 1; + font-size: 0.9em; + padding: 7px 10px; + display: flex; + + i, + svg { + padding: 0; + margin-right: 8px; + align-self: center; + color: #10182866; + } + } + + &.Dark { + border-left: 2px solid @nav-background-color; + + a, + .directory { + color: @zesty-light-blue; + } + + svg { + color: @zesty-grey; + } + } + + .collapse { + color: @zesty-tab-blue; + cursor: pointer; + padding: 10px; + + &:hover, + &:active, + &:focus { + color: @zesty-dark-blue; + font-weight: 600; + } + } + + &.Dark { + .collapse { + color: @zesty-gray; + &:focus { + color: @zesty-white; + } + } + } + + .hide { + visibility: hidden; + } + + .actions { + padding: 8px; + + svg { + color: #10182866; + } + } + + .action { + cursor: pointer; + color: @zesty-dark-blue; + + &:hover, + &:active, + &:focus { + color: @zesty-dark-blue; + font-weight: 600; + } + } + + &.Dark { + .action { + color: @zesty-gray; + + &:focus { + color: @zesty-white; + } + } + } + + &.Dark { + &.depth1 { + background-color: #1a202c; + border-left: 2px solid #1a202c; + } + &.depth2 { + background-color: lighten(#1a202c, 5%); + border-left: 2px solid lighten(#1a202c, 5%); + } + &.depth3 { + background-color: lighten(#1a202c, 10%); + border-left: 2px solid lighten(#1a202c, 10%); + } + &.depth4 { + background-color: lighten(#1a202c, 15%); + border-left: 2px solid lighten(#1a202c, 15%); + } + } + + &:hover { + background-color: #1018280a; + + a { + color: #475467; + + svg { + color: #10182866; + } + } + + .hide { + visibility: visible; + } + } + + &.Dark:hover { + background-color: lighten(@nav-border-color, 6%); + + a, + .directory { + color: @zesty-light-blue; + } + + svg { + color: @zesty-grey; + } + } + + &.selected { + background-color: #ff5d0a14; + border-radius: 4px 0px 0px 4px !important; + + a { + color: #ec4a0a; + + svg { + color: #ff5d0a; + } + } + } + &.Dark.selected { + border-left: 2px solid @zesty-orange; + background: darken(@zesty-dark-blue, 5%); + border-radius: 0px 0px 0px 4px !important; + + a, + .directory { + color: @zesty-light-blue; + } + + svg { + color: @zesty-grey; + } + } +} diff --git a/src/shell/components/NavTree/Node/Node.less.json b/src/shell/components/NavTree/Node/Node.less.json new file mode 100644 index 0000000000..e1c17fbf72 --- /dev/null +++ b/src/shell/components/NavTree/Node/Node.less.json @@ -0,0 +1,12 @@ +{ + "item": "item__SWXQ5", + "Dark": "Dark__S23q5", + "active": "active__1EBVr", + "depth4": "depth4__2eH__", + "depth3": "depth3__JKZwc", + "depth2": "depth2__3JM-n", + "depth1": "depth1__1rT4i", + "hover": "hover__1dL7-", + "selected": "selected__3xuJr", + "closed": "closed__2EzEu" +} diff --git a/src/shell/components/NavTree/Node/Node.tsx b/src/shell/components/NavTree/Node/Node.tsx new file mode 100644 index 0000000000..4828caaf1d --- /dev/null +++ b/src/shell/components/NavTree/Node/Node.tsx @@ -0,0 +1,88 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import cx from "classnames"; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCaretLeft, faCaretDown } from "@fortawesome/free-solid-svg-icons"; + +import { TreeItem } from "../Nav/Nav"; + +import styles from "./Node.less"; +interface Props { + lightMode: boolean; + activePath: string; + depth: number; + treeData: TreeItem; + onCollapseNode: () => void; + actions: any; +} +export const Node = (props: any) => { + return ( +
  • + {props.type === "directory" ? ( + + {props.icon && } + {props.label} + + ) : ( + <> + + {props.icon ? ( + props.icon?.iconName ? ( + + ) : ( + props.icon + ) + ) : null} + {props.label} + + + {/* Only linkable nodes can have actions */} + + {React.Children.map(props.actions, (action, index) => { + // Run consumer provided function to determine + // whether action is available + const isAvailable = action.props.available + ? action.props.available(props) + : true; + + // Filter out props which will not translate to the DOM + const { showIcon, available, ...filteredProps } = action.props; + const child = { ...action, props: filteredProps }; + + return ( + isAvailable && + React.cloneElement(child, { + key: index, + className: cx( + styles.action, + action.props.showIcon ? null : styles.hide, + action.props.className + ), + onClick: () => action.props.onClick(props), + }) + ); + })} + + + )} + + {props.collapseNode && + Array.isArray(props.children) && + Boolean(props.children.length) && ( + props.collapseNode(props)} + /> + )} +
    • + ); +}; diff --git a/src/shell/components/NavTree/Node/index.js b/src/shell/components/NavTree/Node/index.js new file mode 100644 index 0000000000..b03361e0fd --- /dev/null +++ b/src/shell/components/NavTree/Node/index.js @@ -0,0 +1 @@ +export { Node } from "./Node"; diff --git a/src/shell/components/NavTree/Parent/Parent.less b/src/shell/components/NavTree/Parent/Parent.less new file mode 100644 index 0000000000..d39f65c1bf --- /dev/null +++ b/src/shell/components/NavTree/Parent/Parent.less @@ -0,0 +1,66 @@ +@import "~@zesty-io/core/colors.less"; + +.Parent { + margin: 0; + display: flex; + flex-direction: column; + user-select: none; + + &:hover { + background-color: #ffffff; + } + &.Dark:hover { + background-color: inherit; + } + + .titleIcon { + margin: 0 0.4rem; + } + + .title { + display: flex; + + color: @zesty-dark-blue; + align-items: baseline; + h2 { + flex: 1; + font-size: 1rem; + padding: 0.8rem 1rem 0.8rem 0; + letter-spacing: 1.5px; + } + i { + color: @zesty-dark-blue; + margin-right: 0.5rem; + } + } + + &.Dark .title { + color: @zesty-white; + background: darken(@nav-border-color, 14%); + i { + color: @zesty-white; + } + } + + ul { + line-height: 1.33; + letter-spacing: 1px; + list-style: none; + margin-left: 8px; + + & > article:last-child li:last-child { + border-radius: 0 0 0 4px; + } + + article:last-child { + margin-bottom: 8px; + } + ul article:last-child { + margin-bottom: 0; + } + } + .closed { + visibility: hidden; + max-height: 0; + } +} diff --git a/src/shell/components/NavTree/Parent/Parent.less.json b/src/shell/components/NavTree/Parent/Parent.less.json new file mode 100644 index 0000000000..391ab1191a --- /dev/null +++ b/src/shell/components/NavTree/Parent/Parent.less.json @@ -0,0 +1,7 @@ +{ + "Parent": "Parent__2moNz", + "Dark": "Dark__2MoNz", + "titleIcon": "titleIcon__2YrzX", + "title": "title__3Dwkv", + "active": "active__1gIxf" +} diff --git a/src/shell/components/NavTree/Parent/Parent.tsx b/src/shell/components/NavTree/Parent/Parent.tsx new file mode 100644 index 0000000000..af0b0be798 --- /dev/null +++ b/src/shell/components/NavTree/Parent/Parent.tsx @@ -0,0 +1,74 @@ +import React, { FC } from "react"; +import cx from "classnames"; + +import styles from "./Parent.less"; +import { Node } from "../Node"; +import { TreeItem } from "../Nav/Nav"; + +interface Props { + lightMode: boolean; + activePath: string; + onCollapseNode: () => void; + treeData: TreeItem; + actions: any; + depth?: number; + isClosed?: boolean; +} +export const Parent: FC> = ({ + lightMode, + activePath, + onCollapseNode, + treeData, + actions, + depth, + isClosed, +}) => { + // track recursion depth and pass it as a prop to the node component + const _depth = depth ? depth + 1 : 1; + + return ( +
    +
      + {Array.isArray(treeData?.children) && treeData?.children.length ? ( + // if the item has children + // render the item and then it's children + + + {treeData?.children?.map((child) => ( + + ))} + + ) : ( + + )} +
    +
    + ); +}; diff --git a/src/shell/components/NavTree/Parent/index.js b/src/shell/components/NavTree/Parent/index.js new file mode 100644 index 0000000000..f6896c03ea --- /dev/null +++ b/src/shell/components/NavTree/Parent/index.js @@ -0,0 +1 @@ +export { Parent } from "./Parent"; diff --git a/src/shell/components/NavTree/README.md b/src/shell/components/NavTree/README.md new file mode 100644 index 0000000000..acb8c5e444 --- /dev/null +++ b/src/shell/components/NavTree/README.md @@ -0,0 +1,22 @@ +The `Nav` component will receive the following props. + +`actions` +An array of objects that can be configurable from the client of the following structure: + +``` +const actions = [ + { + icon: '', // class of font-awesome icon + onClick: func, // function to trigger when clicking the icon. All nav item props are passed back to the function. + available: func, // Function. determines if action is shown, defaults to true. All nav item props are passed back to the function. + showIcon: // Boolean. Specifics whether an action should always be displayed. Default, false, behavior is to show on hover. + styles: { } // styles object passed to the action icon. + } +] +``` + +`handleOpen` +Function to handle interaction when clicking on nav item. + +`tree` +Array of objects used to build the Nav Tree diff --git a/src/shell/components/NavTree/index.ts b/src/shell/components/NavTree/index.ts new file mode 100644 index 0000000000..104522863b --- /dev/null +++ b/src/shell/components/NavTree/index.ts @@ -0,0 +1,3 @@ +export { Nav } from "./Nav"; +export { Parent } from "./Parent"; +export { Node } from "./Node"; From c6f079d42f23b997bd8650e4df9e7e53cde1f359 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Thu, 20 Jul 2023 14:38:09 +0800 Subject: [PATCH 014/111] task: convert nav to tsx --- .../content-editor/src/app/ContentEditor.js | 14 ++--- .../src/app/components/ContentNav/index.tsx | 38 +++++++++--- src/apps/content-editor/src/store/types.ts | 23 ++++--- src/shell/components/NavTree/Nav/Nav.tsx | 31 ++++++---- src/shell/components/NavTree/Node/Node.tsx | 61 +++++++++++-------- .../components/NavTree/Parent/Parent.tsx | 6 +- 6 files changed, 109 insertions(+), 64 deletions(-) diff --git a/src/apps/content-editor/src/app/ContentEditor.js b/src/apps/content-editor/src/app/ContentEditor.js index 4173894ad4..5337b4ac95 100644 --- a/src/apps/content-editor/src/app/ContentEditor.js +++ b/src/apps/content-editor/src/app/ContentEditor.js @@ -139,13 +139,13 @@ export default function ContentEditor() { : "" )} > - - {/* */} + + {/* */}
    = [ }, ] as const; -export const ContentNav = () => { +interface Props { + navData: NavData; +} +export const ContentNav: FC> = ({ navData }) => { const location = useLocation(); const history = useHistory(); + // console.log(navData); + const actions = [ + { + // dispatch(hideNavItem(path)); + console.log("hide", path); + }} + />, + ]; + return ( { } > - {/* TODO: Remove dummy data */} - - {[...new Array(50)].map((_, index) => ( - Menu Item {index} - ))} - +