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

Sidebar UI changed

Browse Source
This commit is contained in:
Monil Prajapati
2023-11-09 00:33:28 +05:30
parent a19b6baa0c
commit 7ea11f67d0
2 changed files with 278 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+2 -2
View File
@@ -76,10 +76,10 @@
"shellwords": "^0.1.1",
"simplebar": "^4.2.3",
"styled-components": "^4.4.0",
"webpack": "^5.88.2",
"yaml": "^1.7.2",
"yamljs": "^0.3.0",
"zone.js": "^0.13.1",
"webpack": "^5.88.2"
"zone.js": "^0.13.1"
},
"scripts": {
"start": "HTTPS=false&&PORT=3000 GENERATE_SOURCEMAP=false react-scripts --openssl-legacy-provider start",
frontend/src/views/Docs.jsx
+47 -34
View File
@@ -6,6 +6,8 @@ import { useParams, useNavigate, Link } from "react-router-dom";
import { isMobile } from "react-device-detect";
import theme from '../theme.jsx';
import remarkGfm from 'remark-gfm'
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {
Grid,
@@ -19,6 +21,9 @@ import {
Typography,
Paper,
List,
Collapse,
ListItemButton,
ListItemText
} from "@mui/material";
import {
@@ -62,7 +67,7 @@ const Docs = (defaultprops) => {
// Quickfix for react router 5 -> 6
const params = useParams();
//var props = JSON.parse(JSON.stringify(defaultprops))
var props = Object.assign({selected: false}, defaultprops);
var props = Object.assign({ selected: false }, defaultprops);
props.match = {}
props.match.params = params
@@ -78,6 +83,7 @@ const Docs = (defaultprops) => {
const [data, setData] = useState("");
const [firstrequest, setFirstrequest] = useState(true);
const [list, setList] = useState([]);
const [isopen, setOpen] = useState(-1);
const [, setListLoaded] = useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const [headingSet, setHeadingSet] = React.useState(false);
@@ -98,11 +104,16 @@ const Docs = (defaultprops) => {
setAnchorEl(null);
}
const handleCollapse = (index) => {
setOpen(isopen === index ? -1 : index)
};
const SidebarPaperStyle = {
backgroundColor: theme.palette.surfaceColor,
overflowX: "hidden",
position: "relative",
padding: 30,
paddingLeft: 15,
paddingRight: 15,
paddingTop: 15,
marginTop: 15,
minHeight: "80vh",
@@ -110,8 +121,8 @@ const Docs = (defaultprops) => {
};
const SideBar = {
minWidth: 250,
maxWidth: 300,
minWidth: 300,
width: "20%",
left: 0,
position: "sticky",
top: 50,
@@ -142,7 +153,7 @@ const Docs = (defaultprops) => {
}
setListLoaded(true);
})
.catch((error) => {});
.catch((error) => { });
};
const fetchDocs = (docId) => {
@@ -226,7 +237,7 @@ const Docs = (defaultprops) => {
setData("# Error\nThis page doesn't exist.");
}
})
.catch((error) => {});
.catch((error) => { });
};
if (firstrequest) {
@@ -445,7 +456,7 @@ const Docs = (defaultprops) => {
href={selectedMeta.link}
style={{ textDecoration: "none", color: "#f85a3e" }}
>
<Button style={{color: "white", }} variant="outlined" color="secondary">
<Button style={{ color: "white", }} variant="outlined" color="secondary">
<EditIcon /> &nbsp;&nbsp;Edit
</Button>
</a>
@@ -546,7 +557,7 @@ const Docs = (defaultprops) => {
const CustomButton = (props) => {
const {title, icon, link} = props
const { title, icon, link } = props
const [hover, setHover] = useState(false)
@@ -557,7 +568,7 @@ const Docs = (defaultprops) => {
target="_blank"
style={{ textDecoration: "none", color: "inherit", flex: 1, margin: 10, }}
>
<div style={{cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, flex: 1, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, padding: 25, }}
<div style={{ cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, flex: 1, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, padding: 25, }}
onClick={(event) => {
if (link === "" || link === undefined) {
event.preventDefault()
@@ -588,7 +599,7 @@ const Docs = (defaultprops) => {
const DocumentationButton = (props) => {
const {item, link} = props
const { item, link } = props
const [hover, setHover] = useState(false);
@@ -599,7 +610,7 @@ const Docs = (defaultprops) => {
return (
<Link to={link} style={hrefStyle}>
<div style={{width: "100%", height: 80, cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, }}
<div style={{ width: "100%", height: 80, cursor: hover ? "pointer" : "default", borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0.3)", backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor, }}
onMouseOver={() => {
setHover(true)
}}
@@ -631,15 +642,15 @@ const Docs = (defaultprops) => {
margin: "auto",
marginTop: 50,
}}>
<Typography variant="h4" style={{textAlign: "center",}}>
<Typography variant="h4" style={{ textAlign: "center", }}>
Documentation
</Typography>
<div style={{display: "flex", marginTop: 25, }}>
<CustomButton title="Talk to Support" icon=<img src="/images/Shuffle_logo_new.png" style={{height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> />
<CustomButton title="Ask the community" icon=<img src="/images/social/discord.png" style={{height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> link="https://discord.gg/B2CBzUm" />
<div style={{ display: "flex", marginTop: 25, }}>
<CustomButton title="Talk to Support" icon=<img src="/images/Shuffle_logo_new.png" style={{ height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> />
<CustomButton title="Ask the community" icon=<img src="/images/social/discord.png" style={{ height: 35, width: 35, border: "", borderRadius: theme.palette.borderRadius, }} /> link="https://discord.gg/B2CBzUm" />
</div>
<div style={{textAlign: "left"}}>
<div style={{ textAlign: "left" }}>
<Typography variant="h6" style={headerStyle} >Tutorial</Typography>
<Typography variant="body1">
<b>Dive in.</b> Hands-on is the best approach to see how Shuffle can transform your security operations. Our set of tutorials and videos teach you how to build your skills. Check out the <Link to="/docs/getting-started" style={hrefStyle2}>getting started</Link> section to give it a go!
@@ -724,6 +735,7 @@ const Docs = (defaultprops) => {
*/}
</div>
// PostDataBrowser Section
const postDataBrowser =
list === undefined || list === null ? null : (
<div style={Body}>
@@ -743,50 +755,51 @@ const Docs = (defaultprops) => {
const itemMatching = props.match.params.key === undefined ? false :
props.match.params.key.toLowerCase() === item.toLowerCase();
//const [tocLines, setTocLines] = React.useState([]);
return (
<li key={index} style={{ marginTop: 10 }}>
<Link
<li key={index}>
<ListItemButton
component={Link}
key={index}
style={hrefStyle}
to={path}
onClick={() => {
setTocLines([]);
fetchDocs(item);
handleCollapse(index);
}}
>
<Typography
<ListItemText
style={{ color: itemMatching ? "#f86a3e" : "inherit" }}
variant="body1"
>
<b>> {newname}</b>
</Typography>
</Link>
{newname}
</ListItemText>
{isopen === index ? <ExpandMoreIcon /> : <KeyboardArrowRightIcon />}
</ListItemButton>
{itemMatching &&
tocLines !== null &&
tocLines !== undefined &&
tocLines.length > 0 ? (
<div style={{ marginLeft: 5 }}>
<Collapse in={isopen === index} timeout="auto" unmountOnExit>
{tocLines.map((data, index) => {
//console.log(data)
return (
<Link
<ListItemButton
component={Link}
key={index}
style={innerHrefStyle}
to={data.link}
onClick={() => {}}
>
<Typography
<ListItemText
variant="body2"
style={{ cursor: "pointer" }}
>
- {data.text}
</Typography>
</Link>
{data.text}
</ListItemText>
</ListItemButton>
);
})}
</div>
</Collapse>
) : null}
</li>
);
@@ -794,7 +807,7 @@ const Docs = (defaultprops) => {
</List>
</Paper>
</div>
<div style={{maxWidth: 750, minWidth: 750, margin: "auto", overflow: "hidden", marginTop: 50, }}>
<div style={{ width: "70%", margin: "auto", overflow: "hidden", marginTop: 50, paddingRight: 50 }}>
{props.match.params.key === undefined ?
mainpageInfo
:
@@ -936,7 +949,7 @@ const Docs = (defaultprops) => {
// Padding and zIndex etc set because of footer in cloud.
const loadedCheck = (
<div style={{minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
<div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
<BrowserView>{postDataBrowser}</BrowserView>
<MobileView>{postDataMobile}</MobileView>
</div>