marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix left side bar alignment issue

Browse Source
This commit is contained in:
lalitdeore
2024-11-30 22:42:19 +05:30
parent 565676f7de
commit 294840a9a0
14 changed files with 213 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+3 -2
View File
@@ -205,7 +205,7 @@ const App = (message, props) => {
/>
}
<div style={{ minHeight: 68, maxHeight: 68, }}>
{curpath.includes("/workflows") && curpath.includes("/run") ?
<div style={{ height: 60, }} />
:
@@ -214,6 +214,7 @@ const App = (message, props) => {
<LeftSideBar userdata={userdata} globalUrl={globalUrl} serverside={false} notifications={notifications} />
</div>
:
<div style={{ minHeight: 68, maxHeight: 68, }}>
<Header
billingInfo={{}}
@@ -234,8 +235,8 @@ const App = (message, props) => {
{...props}
/>
</div>
}
</div>
{/*
<div style={{ height: 60 }} />
frontend/src/components/LeftSideBar.jsx
+157 -82
View File
@@ -795,7 +795,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
</Button>
</Box>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease' }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true);}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false);}}>
<Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease',paddingTop: 0.5 }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true);}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false);}}>
<Box
sx={{
display: "flex",
@@ -1053,9 +1053,17 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
marginTop: 2.5,
}}
>
<Link to="/dashboards/security" style={hrefStyle}>
<span style={{ display: "inline-block", width: "100%" }}>
<Link
to={userdata?.support ? "/dashboards/security" : "#"}
style={{
...hrefStyle,
pointerEvents: userdata?.support ? "auto" : "none",
}}
>
<Button
onClick={(event) => {
if (!userdata?.support) return;
setOpenSecurityTab(true);
setOpenautomateTab(false);
setCurrentOpenTab("security");
@@ -1063,24 +1071,43 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
}}
sx={{
...ButtonStyle,
backgroundColor: ((currentOpenTab === "security" && currentPath.includes("/security")) || ((!expandLeftNav) && (currentPath.includes("detections") || currentPath.includes("response")))) ? "#2f2f2f": "transparent",
"&:hover": { backgroundColor: "#2f2f2f" },
backgroundColor:
((currentOpenTab === "security" && currentPath.includes("/security")) ||
(!expandLeftNav &&
(currentPath.includes("detections") || currentPath.includes("response"))))
? "#2f2f2f"
: "transparent",
"&:hover": {
backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
},
cursor: userdata?.support ? "pointer" : "not-allowed",
}}
disabled={!userdata?.support}
>
<ShieldOutlinedIcon
style={{ width: 16, height: 16, marginRight: expandLeftNav ? 10 : 0 }}
style={{
width: 16,
height: 16,
marginRight: expandLeftNav ? 10 : 0,
color: userdata?.support ? "inherit" : "#6F6F6F",
}}
/>
<span
style={{
display: expandLeftNav ? "inline" : "none",
marginRight: "auto",
color: currentOpenTab === "security" && currentPath.includes("/security") ? "#F1F1F1" : "#C8C8C8",
color: userdata?.support
? currentOpenTab === "security" && currentPath.includes("/security")
? "#F1F1F1"
: "#C8C8C8"
: "#6F6F6F",
}}
>
Security
</span>
</Button>
</Link>
</Link>
</span>
<IconButton
onClick={() => {
setOpenSecurityTab((prev) => !prev);
@@ -1106,82 +1133,126 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
</IconButton>
</Box>
<Collapse in={openSecurityTab} timeout="auto" unmountOnExit>
<Box
style={{
maxHeight: openSecurityTab && expandLeftNav ? 100 : 0,
overflow: "hidden",
transition: "max-height 0.3s ease, opacity 0.3s ease",
display: "flex",
flexDirection: "column",
paddingLeft: 16,
gap: 4,
marginTop: expandLeftNav ? 16 : 0,
}}
disableRipple={expandLeftNav ? false : true}
>
<Link to="/detections" style={hrefStyle}>
<Button
onClick={(event) => {
setCurrentOpenTab("detection");
localStorage.setItem("lastTabOpenByUser", "detection");
}}
sx={{
width: "100%",
height: 35,
color: "#C8C8C8",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: currentOpenTab === "detection" && currentPath.includes("/detection")? "#2f2f2f": "transparent",
"&:hover": { backgroundColor: "#2f2f2f" },
}}
disableRipple={expandLeftNav ? false : true}
>
<span style={{position: 'relative', left: !expandLeftNav ? 10: 0, marginRight: 10, fontSize: 16 }}>•</span>
<span
<Box
style={{
display: expandLeftNav ? "inline" : "none",
opacity: expandLeftNav ? 1 : 0,
transition: "opacity 0.3s ease",
color:
currentOpenTab === "detection" && currentPath.includes("/detection") ? "#F1F1F1" : "#C8C8C8",
maxHeight: openSecurityTab && expandLeftNav ? 100 : 0,
overflow: "hidden",
transition: "max-height 0.3s ease, opacity 0.3s ease",
display: "flex",
flexDirection: "column",
paddingLeft: 16,
gap: 4,
marginTop: expandLeftNav ? 16 : 0,
}}
disableRipple={expandLeftNav ? false : true}
>
Detection
</span>
</Button>
</Link>
<Link to="/response" style={hrefStyle}>
<Button
onClick={(event) => {
setCurrentOpenTab("response");
localStorage.setItem("lastTabOpenByUser", "response");
}}
sx={{
width: "100%",
height: 35,
color: "#C8C8C8",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: currentOpenTab === "response" && currentPath.includes("/response") ? "#2f2f2f": "transparent",
"&:hover": { backgroundColor: "#2f2f2f" },
}}
disableRipple={expandLeftNav ? false : true}
>
<span style={{position: 'relative', left: !expandLeftNav ? 10: 0, marginRight: 10, fontSize: 16 }}>•</span>
<span
style={{
display: expandLeftNav ? "inline" : "none",
opacity: expandLeftNav ? 1 : 0,
transition: "opacity 0.3s ease",
color: currentOpenTab === "response" && currentPath.includes("/response")? "#F1F1F1" : "#C8C8C8",
}}
>
Response
</span>
</Button>
</Link>
</Box>
</Collapse>
<span style={{ display: "inline-block", width: "100%" }}>
<Link
to={userdata?.support ? "/detections" : "#"}
style={{
...hrefStyle,
pointerEvents: userdata?.support ? "auto" : "none",
}}
>
<Button
onClick={(event) => {
if (!userdata?.support) return;
setCurrentOpenTab("detection");
localStorage.setItem("lastTabOpenByUser", "detection");
}}
sx={{
width: "100%",
height: 35,
color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor:
currentOpenTab === "detection" && currentPath.includes("/detection")
? "#2f2f2f"
: "transparent",
"&:hover": {
backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
},
cursor: userdata?.support ? "pointer" : "not-allowed",
}}
disabled={!userdata?.support}
>
<span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 16 }}>
•
</span>
<span
style={{
display: expandLeftNav ? "inline" : "none",
opacity: expandLeftNav ? 1 : 0,
transition: "opacity 0.3s ease",
color:
userdata?.support && currentOpenTab === "detection" && currentPath.includes("/detection")
? "#F1F1F1"
: userdata?.support
? "#C8C8C8"
: "#6F6F6F",
}}
>
Detection
</span>
</Button>
</Link>
</span>
<span style={{ display: "inline-block", width: "100%" }}>
<Link
to={userdata?.support ? "/response" : "#"}
style={{
...hrefStyle,
pointerEvents: userdata?.support ? "auto" : "none",
}}
>
<Button
onClick={(event) => {
if (!userdata?.support) return;
setCurrentOpenTab("response");
localStorage.setItem("lastTabOpenByUser", "response");
}}
sx={{
width: "100%",
height: 35,
color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor:
currentOpenTab === "response" && currentPath.includes("/response")
? "#2f2f2f"
: "transparent",
"&:hover": {
backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
},
cursor: userdata?.support ? "pointer" : "not-allowed",
}}
disabled={!userdata?.support}
>
<span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 16 }}>
•
</span>
<span
style={{
display: expandLeftNav ? "inline" : "none",
opacity: expandLeftNav ? 1 : 0,
transition: "opacity 0.3s ease",
color:
userdata?.support && currentOpenTab === "response" && currentPath.includes("/response")
? "#F1F1F1"
: userdata?.support
? "#C8C8C8"
: "#6F6F6F",
}}
>
Response
</span>
</Button>
</Link>
</span>
</Box>
</Collapse>
<Link to="/docs" style={hrefStyle}>
<Button
@@ -1280,6 +1351,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
style={{
display: "flex",
alignItems: "center",
minWidth: "250px",
justifyContent:
option.id === "add_suborg" ? "center" : "flex-start",
backgroundColor:
@@ -1308,7 +1380,9 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
setOpenAutocomplete(false);
}}
>
<span
{
isCloud ? (
<span
style={{
color: "#bbb",
fontSize: "16px",
@@ -1316,7 +1390,8 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
}}
>
{option.region_url}
</span>
</span>) : null
}
<img
src={option.image ? option.image : "/images/no_image.png"}
alt={option.name}
frontend/src/views/AngularWorkflow.jsx
+11 -16
View File
@@ -9025,7 +9025,7 @@ const releaseToConnectLabel = "Release to Connect"
});
};
const parsedHeight = isMobile ? bodyHeight - appBarSize * 4 : userdata?.support ? bodyHeight - 80 : bodyHeight - appBarSize - 50
const parsedHeight = isMobile ? bodyHeight - appBarSize * 4 : bodyHeight - 65;
const appViewStyle = {
marginLeft: 5,
marginRight: 5,
@@ -9365,7 +9365,6 @@ const releaseToConnectLabel = "Release to Connect"
minHeight: parsedHeight,
maxHeight: parsedHeight,
overflow: "hidden",
paddingTop: userdata?.support ? 10 : 0,
}}
>
{thisview}
@@ -11081,9 +11080,9 @@ const releaseToConnectLabel = "Release to Connect"
const minSize = 370
var rightsidebarStyle = {
position: "fixed",
top: userdata?.support ? appBarSize - 35 : appBarSize + 25,
top: appBarSize - 35,
right: 25,
height: userdata?.support ? "90vh": "80vh",
height: "90vh",
width: isMobile ? "100%" : minSize,
minWidth: minSize,
maxWidth: 600,
@@ -15993,30 +15992,26 @@ const releaseToConnectLabel = "Release to Connect"
const bottomBarStyle = {
position: "fixed",
transition: "all 0.3s ease",
minWidth: userdata?.support && windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
maxWidth: userdata?.support && windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
minWidth: windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
maxWidth: windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
marginLeft: 20,
marginBottom: 30,
zIndex: 10,
transform: isMobile
? `translateX(20px)`
: `translateX(${userdata?.support
? leftSideBarOpenByClick ? 340 : 330
: leftBarSize}px)`,
: `translateX(${leftSideBarOpenByClick ? 340 : 330}px)`,
top: isMobile ? appBarSize + 55 : undefined,
bottom: isMobile ? undefined : 0,
};
const topBarStyle = {
position: "fixed",
top: isMobile ? 30 : userdata?.support ? appBarSize - 20 : appBarSize + 20,
top: isMobile ? 30 : appBarSize - 20,
pointerEvents: "none",
transition: "transform 0.3s ease",
transform: isMobile
? `translateX(20px)`
: userdata?.support
? `translateX(${leftSideBarOpenByClick ? 340 : 330}px)`
: `translateX(${leftBarSize + 20}px)`,
: `translateX(${leftSideBarOpenByClick ? 340 : 330}px)`
};
@@ -16767,7 +16762,7 @@ const releaseToConnectLabel = "Release to Connect"
border: "1px solid rgba(255,255,255,0.1)",
position: "absolute",
bottom: 140,
left: userdata?.support ? leftSideBarOpenByClick ? 620 : 435 : leftBarSize + 20,
left: leftSideBarOpenByClick ? 620 : 435,
color: "white",
padding: 10,
borderRadius: theme.palette?.borderRadius,
@@ -20354,7 +20349,7 @@ const releaseToConnectLabel = "Release to Connect"
);
const newView = (
<div style={{ color: "white", marginLeft: userdata?.support ? leftSideBarOpenByClick ? 280 : 100 : 0, transition: "margin-left 0.3s ease", }}>
<div style={{ color: "white", marginLeft: leftSideBarOpenByClick ? 280 : 100, transition: "margin-left 0.3s ease", }}>
<div
style={{ display: "flex", borderTop: "1px solid rgba(91, 96, 100, 1)" }}
>
@@ -20391,7 +20386,7 @@ const releaseToConnectLabel = "Release to Connect"
wheelSensitivity={0.25}
style={{
width: cytoscapeWidth,
height: userdata?.support ? bodyHeight - 20 : bodyHeight - appBarSize - 5,
height: bodyHeight - 20,
backgroundColor: theme.palette.surfaceColor,
}}
stylesheet={cystyle}
frontend/src/views/Docs.jsx
+5 -5
View File
@@ -1294,11 +1294,11 @@ const DocsWrapper = memo(({userdata, children })=>{
return (
<div style={{
minHeight: 1000, zIndex: 1,
maxWidth: Math.min(!userdata?.support ? 1920 : leftSideBarOpenByClick ? windowWidth - 300 : windowWidth - 200, 1920),
minWidth: isMobile ? null : userdata?.support ? leftSideBarOpenByClick ? 800 : 900 : null, margin: "auto",
position: userdata?.support && leftSideBarOpenByClick ? "relative" : "static",
left: userdata?.support && leftSideBarOpenByClick ? 120 : userdata?.support && !leftSideBarOpenByClick ? 80 : 0,
marginLeft: windowWidth < 1920 ? leftSideBarOpenByClick && userdata?.support ? 160 : userdata?.support && !leftSideBarOpenByClick ? 80 : 0 : "auto", width: "100%",
maxWidth: Math.min(leftSideBarOpenByClick ? windowWidth - 300 : windowWidth - 200, 1920),
minWidth: isMobile ? null : leftSideBarOpenByClick ? 800 : 900, margin: "auto",
position: leftSideBarOpenByClick ? "relative" : "static",
left: leftSideBarOpenByClick ? 120 : !leftSideBarOpenByClick ? 80 : 0,
marginLeft: windowWidth < 1920 ? leftSideBarOpenByClick ? 160 : !leftSideBarOpenByClick ? 80 : 0 : "auto", width: "100%",
transition: "left 0.3s ease-in-out, min-width 0.3s ease-in-out, max-width 0.3s ease-in-out, position 0.3s ease-in-out, margin 0.3s ease-in-out, margin-left 0.3s ease"
}}>
{children}
frontend/src/views/Search.jsx
+1 -1
View File
@@ -130,7 +130,7 @@ const Search = (props) => {
flexDirection: "column",
overflowX: "hidden",
minHeight: 400,
paddingLeft: leftSideBarOpenByClick ? 250 : 0,
paddingLeft: leftSideBarOpenByClick ? 270 : 80,
transition: "padding-left 0.3s ease",
};
frontend/src/views/Usecases2.jsx
+1 -1
View File
@@ -1220,7 +1220,7 @@ const Usecases2 = (props) => {
) : null
const data =
<div className="content" style={{width: isMobile ? "100%": 1000, margin: "auto", paddingBottom: 200, textAlign: "center", paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease"}}>
<div className="content" style={{width: isMobile ? "100%": leftSideBarOpenByClick ? 1200: 1000, margin: "auto", paddingBottom: 200, textAlign: "center", paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease, width 0.3s ease"}}>
<UsecaseListComponent
userdata={userdata}