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

Merge pull request #1569 from LalitDeore/developer-lalit

Browse Source 
fix left side bar alignment issue
This commit is contained in:
Lalit Deore
2024-11-30 22:45:26 +05:30
committed by GitHub
parent 4697f9d2bc 294840a9a0
commit 91b9bde861
14 changed files with 213 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/icons/copyIcon.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" fill="#212121" fill-opacity="0.02"/>
<path d="M14 4H7.6C7.17565 4 6.76869 4.16857 6.46863 4.46863C6.16857 4.76869 6 5.17565 6 5.6V18.4C6 18.8243 6.16857 19.2313 6.46863 19.5314C6.76869 19.8314 7.17565 20 7.6 20H17.2C17.6243 20 18.0313 19.8314 18.3314 19.5314C18.6314 19.2313 18.8 18.8243 18.8 18.4V8.8L14 4Z" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 4V8.8H18.8" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 598 B

frontend/public/icons/deleteIcon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 7.20001H6.6H19.4" stroke="#FD4C62" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.7996 7.2V18.4C17.7996 18.8243 17.631 19.2313 17.331 19.5314C17.0309 19.8314 16.624 20 16.1996 20H8.19961C7.77526 20 7.3683 19.8314 7.06824 19.5314C6.76818 19.2313 6.59961 18.8243 6.59961 18.4V7.2M8.99961 7.2V5.6C8.99961 5.17565 9.16818 4.76869 9.46824 4.46863C9.7683 4.16857 10.1753 4 10.5996 4H13.7996C14.224 4 14.6309 4.16857 14.931 4.46863C15.231 4.76869 15.3996 5.17565 15.3996 5.6V7.2" stroke="#FD4C62" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 669 B

frontend/public/icons/detection.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99984 6.83329C8.73622 6.83329 9.33317 6.23634 9.33317 5.49996C9.33317 4.76358 8.73622 4.16663 7.99984 4.16663C7.26346 4.16663 6.6665 4.76358 6.6665 5.49996C6.6665 6.23634 7.26346 6.83329 7.99984 6.83329Z" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.8269 2.67329C11.1988 3.04478 11.4938 3.48593 11.6951 3.97153C11.8964 4.45712 12 4.97763 12 5.50329C12 6.02895 11.8964 6.54946 11.6951 7.03505C11.4938 7.52064 11.1988 7.9618 10.8269 8.33329M5.17354 8.32662C4.80163 7.95513 4.5066 7.51398 4.3053 7.02838C4.104 6.54279 4.00039 6.02228 4.00039 5.49662C4.00039 4.97096 4.104 4.45045 4.3053 3.96486C4.5066 3.47927 4.80163 3.03811 5.17354 2.66662M12.7135 0.786621C13.9633 2.03681 14.6654 3.73219 14.6654 5.49995C14.6654 7.26772 13.9633 8.9631 12.7135 10.2133M3.28687 10.2133C2.03706 8.9631 1.33496 7.26772 1.33496 5.49995C1.33496 3.73219 2.03706 2.03681 3.28687 0.786621" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

frontend/public/icons/docker copy.svg
+5
View File
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<circle cx="512" cy="512" r="512" style="fill:#0091e2"/>
<path d="M827.3 461.5c-1.6-1.3-16.1-12.2-46.7-12.2-8.1 0-16.2.6-24.2 2.1-5.9-40.7-39.5-60.5-41-61.4l-8.2-4.8-5.4 7.8c-6.8 10.5-11.7 22-14.6 34.2-5.5 23.2-2.2 45 9.6 63.6-14.2 7.9-37.1 9.9-41.7 10H277c-9.9 0-17.9 8-17.9 17.9-.4 33.1 5.2 66 16.5 97.1 13 34.2 32.4 59.3 57.6 74.7 28.2 17.3 74.1 27.2 126.2 27.2 23.5.1 47-2.1 70.1-6.4 32.1-5.9 63-17.1 91.4-33.2 23.4-13.6 44.5-30.8 62.4-51.1 29.9-33.9 47.8-71.7 61.1-105.2h5.3c32.8 0 53-13.1 64.1-24.1 7.4-7 13.2-15.5 16.9-25l2.3-6.9-5.7-4.3zM312 489.9h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.4-2-4.4-4.4-4.5H312c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.5 2 4.4 4.4 4.4m69.9 0h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.4-2-4.4-4.4-4.5h-50.7c-2.5 0-4.5 2-4.5 4.5v45.1c0 2.5 2 4.4 4.5 4.4m70.8.1h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.4-2-4.4-4.4-4.5h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.4 2 4.3 4.4 4.4m70.1 0h50.7c2.4 0 4.4-2 4.5-4.4v-45.1c0-2.5-2-4.5-4.5-4.5h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.4 1.9 4.4 4.4 4.4m-141-65h50.7c2.4 0 4.4-2 4.4-4.5v-45.1c0-2.4-2-4.4-4.4-4.4h-50.7c-2.5 0-4.4 2-4.5 4.4v45.1c.1 2.5 2.1 4.5 4.5 4.5m70.9 0h50.7c2.4 0 4.4-2 4.4-4.5v-45.1c0-2.4-2-4.4-4.4-4.4h-50.7c-2.4 0-4.4 2-4.4 4.4v45.1c0 2.5 2 4.5 4.4 4.5m70.1 0h50.7c2.5 0 4.4-2 4.5-4.5v-45.1c0-2.5-2-4.4-4.5-4.4h-50.7c-2.4 0-4.4 2-4.4 4.4v45.1c0 2.5 1.9 4.5 4.4 4.5m0-64.9h50.7c2.5 0 4.5-2 4.5-4.5v-45.2c0-2.4-2-4.4-4.5-4.4h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.5 1.9 4.5 4.4 4.5M593.4 490h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.5-2-4.4-4.4-4.5h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.4 2 4.4 4.4 4.4" style="fill:#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

frontend/public/icons/documentation.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.75 1H2.5C2.10218 1 1.72064 1.15804 1.43934 1.43934C1.15804 1.72064 1 2.10218 1 2.5V14.5C1 14.8978 1.15804 15.2794 1.43934 15.5607C1.72064 15.842 2.10218 16 2.5 16H11.5C11.8978 16 12.2794 15.842 12.5607 15.5607C12.842 15.2794 13 14.8978 13 14.5V6.25L7.75 1Z" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.75 1V6.25H13" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 569 B

frontend/public/icons/downloadIcon.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" fill="#212121" fill-opacity="0.02"/>
<path d="M8.22559 16.4467L11.7788 20L15.3321 16.4467" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.7793 12.0052V20" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.6676 17.415C20.4399 16.8719 21.019 16.0968 21.321 15.2023C21.6229 14.3078 21.632 13.3403 21.3468 12.4403C21.0617 11.5402 20.4971 10.7545 19.7352 10.197C18.9732 9.6396 18.0534 9.33948 17.1092 9.34021H15.99C15.7228 8.299 15.2229 7.33196 14.5279 6.5119C13.8329 5.69184 12.961 5.04013 11.9777 4.60583C10.9944 4.17153 9.92534 3.96596 8.85109 4.00459C7.77684 4.04322 6.72535 4.32505 5.77578 4.82886C4.82621 5.33267 4.00331 6.04534 3.36902 6.9132C2.73474 7.78106 2.30559 8.78151 2.11391 9.83922C1.92222 10.8969 1.97297 11.9844 2.26236 13.0196C2.55174 14.0549 3.07221 15.011 3.78459 15.816" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

frontend/public/icons/editIcon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 596 B

frontend/public/icons/expandMoreIcon.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" transform="matrix(-1 0 0 1 24 0)" fill="#2F2F2F"/>
<path d="M8 6L14 12L8 18" stroke="#F1F1F1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 296 B

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}