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

Merge pull request #1255 from Monilprajapati/main

Browse Source 
Solved Issue: Sidebar UI Enhancement
This commit is contained in:
Frikky
2023-11-11 16:53:15 +01:00
committed by GitHub
parent 1fa3210643 7ea11f67d0
commit a023e8c912
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", "shellwords": "^0.1.1",
"simplebar": "^4.2.3", "simplebar": "^4.2.3",
"styled-components": "^4.4.0", "styled-components": "^4.4.0",
"webpack": "^5.88.2",
"yaml": "^1.7.2", "yaml": "^1.7.2",
"yamljs": "^0.3.0", "yamljs": "^0.3.0",
"zone.js": "^0.13.1", "zone.js": "^0.13.1"
"webpack": "^5.88.2"
}, },
"scripts": { "scripts": {
"start": "HTTPS=false&&PORT=3000 GENERATE_SOURCEMAP=false react-scripts --openssl-legacy-provider start", "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 { isMobile } from "react-device-detect";
import theme from '../theme.jsx'; import theme from '../theme.jsx';
import remarkGfm from 'remark-gfm' import remarkGfm from 'remark-gfm'
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { import {
Grid, Grid,
@@ -19,6 +21,9 @@ import {
Typography, Typography,
Paper, Paper,
List, List,
Collapse,
ListItemButton,
ListItemText
} from "@mui/material"; } from "@mui/material";
import { import {
@@ -62,7 +67,7 @@ const Docs = (defaultprops) => {
// Quickfix for react router 5 -> 6 // Quickfix for react router 5 -> 6
const params = useParams(); const params = useParams();
//var props = JSON.parse(JSON.stringify(defaultprops)) //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 = {}
props.match.params = params props.match.params = params
@@ -78,6 +83,7 @@ const Docs = (defaultprops) => {
const [data, setData] = useState(""); const [data, setData] = useState("");
const [firstrequest, setFirstrequest] = useState(true); const [firstrequest, setFirstrequest] = useState(true);
const [list, setList] = useState([]); const [list, setList] = useState([]);
const [isopen, setOpen] = useState(-1);
const [, setListLoaded] = useState(false); const [, setListLoaded] = useState(false);
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const [headingSet, setHeadingSet] = React.useState(false); const [headingSet, setHeadingSet] = React.useState(false);
@@ -98,11 +104,16 @@ const Docs = (defaultprops) => {
setAnchorEl(null); setAnchorEl(null);
} }
const handleCollapse = (index) => {
setOpen(isopen === index ? -1 : index)
};
const SidebarPaperStyle = { const SidebarPaperStyle = {
backgroundColor: theme.palette.surfaceColor, backgroundColor: theme.palette.surfaceColor,
overflowX: "hidden", overflowX: "hidden",
position: "relative", position: "relative",
padding: 30, paddingLeft: 15,
paddingRight: 15,
paddingTop: 15, paddingTop: 15,
marginTop: 15, marginTop: 15,
minHeight: "80vh", minHeight: "80vh",
@@ -110,8 +121,8 @@ const Docs = (defaultprops) => {
}; };
const SideBar = { const SideBar = {
minWidth: 250, minWidth: 300,
maxWidth: 300, width: "20%",
left: 0, left: 0,
position: "sticky", position: "sticky",
top: 50, top: 50,
@@ -142,7 +153,7 @@ const Docs = (defaultprops) => {
} }
setListLoaded(true); setListLoaded(true);
}) })
.catch((error) => {}); .catch((error) => { });
}; };
const fetchDocs = (docId) => { const fetchDocs = (docId) => {
@@ -226,7 +237,7 @@ const Docs = (defaultprops) => {
setData("# Error\nThis page doesn't exist."); setData("# Error\nThis page doesn't exist.");
} }
}) })
.catch((error) => {}); .catch((error) => { });
}; };
if (firstrequest) { if (firstrequest) {
@@ -445,7 +456,7 @@ const Docs = (defaultprops) => {
href={selectedMeta.link} href={selectedMeta.link}
style={{ textDecoration: "none", color: "#f85a3e" }} 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 <EditIcon /> &nbsp;&nbsp;Edit
</Button> </Button>
</a> </a>
@@ -546,7 +557,7 @@ const Docs = (defaultprops) => {
const CustomButton = (props) => { const CustomButton = (props) => {
const {title, icon, link} = props const { title, icon, link } = props
const [hover, setHover] = useState(false) const [hover, setHover] = useState(false)
@@ -557,7 +568,7 @@ const Docs = (defaultprops) => {
target="_blank" target="_blank"
style={{ textDecoration: "none", color: "inherit", flex: 1, margin: 10, }} 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) => { onClick={(event) => {
if (link === "" || link === undefined) { if (link === "" || link === undefined) {
event.preventDefault() event.preventDefault()
@@ -588,7 +599,7 @@ const Docs = (defaultprops) => {
const DocumentationButton = (props) => { const DocumentationButton = (props) => {
const {item, link} = props const { item, link } = props
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
@@ -599,7 +610,7 @@ const Docs = (defaultprops) => {
return ( return (
<Link to={link} style={hrefStyle}> <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={() => { onMouseOver={() => {
setHover(true) setHover(true)
}} }}
@@ -631,15 +642,15 @@ const Docs = (defaultprops) => {
margin: "auto", margin: "auto",
marginTop: 50, marginTop: 50,
}}> }}>
<Typography variant="h4" style={{textAlign: "center",}}> <Typography variant="h4" style={{ textAlign: "center", }}>
Documentation Documentation
</Typography> </Typography>
<div style={{display: "flex", marginTop: 25, }}> <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="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" /> <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>
<div style={{textAlign: "left"}}> <div style={{ textAlign: "left" }}>
<Typography variant="h6" style={headerStyle} >Tutorial</Typography> <Typography variant="h6" style={headerStyle} >Tutorial</Typography>
<Typography variant="body1"> <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! <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> </div>
// PostDataBrowser Section
const postDataBrowser = const postDataBrowser =
list === undefined || list === null ? null : ( list === undefined || list === null ? null : (
<div style={Body}> <div style={Body}>
@@ -743,50 +755,51 @@ const Docs = (defaultprops) => {
const itemMatching = props.match.params.key === undefined ? false : const itemMatching = props.match.params.key === undefined ? false :
props.match.params.key.toLowerCase() === item.toLowerCase(); props.match.params.key.toLowerCase() === item.toLowerCase();
//const [tocLines, setTocLines] = React.useState([]);
return ( return (
<li key={index} style={{ marginTop: 10 }}> <li key={index}>
<Link <ListItemButton
component={Link}
key={index} key={index}
style={hrefStyle} style={hrefStyle}
to={path} to={path}
onClick={() => { onClick={() => {
setTocLines([]); setTocLines([]);
fetchDocs(item); fetchDocs(item);
handleCollapse(index);
}} }}
> >
<Typography <ListItemText
style={{ color: itemMatching ? "#f86a3e" : "inherit" }} style={{ color: itemMatching ? "#f86a3e" : "inherit" }}
variant="body1" variant="body1"
> >
<b>> {newname}</b> {newname}
</Typography> </ListItemText>
</Link> {isopen === index ? <ExpandMoreIcon /> : <KeyboardArrowRightIcon />}
</ListItemButton>
{itemMatching && {itemMatching &&
tocLines !== null && tocLines !== null &&
tocLines !== undefined && tocLines !== undefined &&
tocLines.length > 0 ? ( tocLines.length > 0 ? (
<div style={{ marginLeft: 5 }}> <Collapse in={isopen === index} timeout="auto" unmountOnExit>
{tocLines.map((data, index) => { {tocLines.map((data, index) => {
//console.log(data)
return ( return (
<Link <ListItemButton
component={Link}
key={index} key={index}
style={innerHrefStyle} style={innerHrefStyle}
to={data.link} to={data.link}
onClick={() => {}}
> >
<Typography <ListItemText
variant="body2" variant="body2"
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
- {data.text} {data.text}
</Typography> </ListItemText>
</Link> </ListItemButton>
); );
})} })}
</div> </Collapse>
) : null} ) : null}
</li> </li>
); );
@@ -794,7 +807,7 @@ const Docs = (defaultprops) => {
</List> </List>
</Paper> </Paper>
</div> </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 ? {props.match.params.key === undefined ?
mainpageInfo mainpageInfo
: :
@@ -936,7 +949,7 @@ const Docs = (defaultprops) => {
// Padding and zIndex etc set because of footer in cloud. // Padding and zIndex etc set because of footer in cloud.
const loadedCheck = ( const loadedCheck = (
<div style={{minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}> <div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
<BrowserView>{postDataBrowser}</BrowserView> <BrowserView>{postDataBrowser}</BrowserView>
<MobileView>{postDataMobile}</MobileView> <MobileView>{postDataMobile}</MobileView>
</div> </div>