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

Fixed multiple navigation issues

Browse Source
This commit is contained in:
Frikky
2025-03-18 13:29:36 +01:00
parent 5395ad40ec
commit 10811b4624
7 changed files with 272 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Billing.jsx
+7 -4
View File
@@ -860,6 +860,7 @@ const Billing = memo((props) => {
"Add Card Details"
}
</Button>
{userdata.has_card_available === true ?
<Button
fullWidth
@@ -888,7 +889,8 @@ const Billing = memo((props) => {
: null}
</span>
: null}
: null}
{showSupport ?
<Button variant="outlined" color="primary" style={{ marginTop: 20, marginBottom: 10, }} onClick={() => {
if (window.drift !== undefined) {
@@ -1204,12 +1206,13 @@ const Billing = memo((props) => {
ReactGA.event({
category: "Billing",
action: "Buy_consultation_hours",
});
})
}
const url = userdata.licensed === true
? "https://book.stripe.com/6oEeY23fw2T84M06oq"
: "https://book.stripe.com/00g6rw3fw9hwguI289";
window.open(url, "_blank");
: "https://book.stripe.com/00g6rw3fw9hwguI289"
window.open(url, "_blank")
}}
>
Book Professional Service Hours
frontend/src/components/LeftSideBar.jsx
+4 -4
View File
@@ -57,7 +57,7 @@ const ExpandMoreAndLessIcon = "/icons/expandMoreIcon.svg";
const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
const navigate = useNavigate();
const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, setSearchBarModalOpen, searchBarModalOpen} = useContext(Context);
const {setLeftSideBarOpenByClick, leftSideBarOpenByClick, setSearchBarModalOpen, searchBarModalOpen, isDocSearchModalOpen} = useContext(Context);
const [expandLeftNav, setExpandLeftNav] = useState(false);
const [activeOrgName, setActiveOrgName] = useState(
@@ -790,7 +790,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
height: "calc((100vh - 32px)*1.2)",
}}
>
{searchBarModalOpen ? <ModalView serverside={serverside} userdata={userdata} searchBarModalOpen={searchBarModalOpen} setSearchBarModalOpen={setSearchBarModalOpen} globalUrl={globalUrl} /> : null}
{searchBarModalOpen && !isDocSearchModalOpen ? <ModalView serverside={serverside} userdata={userdata} searchBarModalOpen={searchBarModalOpen} setSearchBarModalOpen={setSearchBarModalOpen} globalUrl={globalUrl} isDocSearchModalOpen={isDocSearchModalOpen} /> : null}
<Box
sx={{
display: "flex",
@@ -1911,11 +1911,11 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
};
export default LeftSideBar;
const ModalView = memo(({searchBarModalOpen, setSearchBarModalOpen, globalUrl, serverside, userdata}) => {
const ModalView = memo(({searchBarModalOpen, setSearchBarModalOpen, globalUrl, serverside, userdata, isDocSearchModalOpen}) => {
return (
(
<Dialog
open={searchBarModalOpen}
open={searchBarModalOpen && !isDocSearchModalOpen}
onClose={() => {
setSearchBarModalOpen(false);
}}
frontend/src/components/Navbar.jsx
+32 -6
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useContext, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import {
AppBar,
@@ -35,6 +35,7 @@ import { toast } from "react-toastify";
import AddIcon from '@mui/icons-material/Add';
import Mousetrap from "mousetrap";
import LicencePopup from "../components/LicencePopup.jsx";
import { Context } from "../context/ContextApi.jsx";
const curpath = (typeof window !== "undefined" && window.location && typeof window.location.pathname === "string")
? window.location.pathname
@@ -750,7 +751,7 @@ const Navbar = (props) => {
const topbar_var = "topbar_closed10"
const theme = useTheme();
const [searchBarModalOpen, setSearchBarModalOpen] = useState(false);
const {searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen} = useContext(Context)
const [pricingModalOpen, setPricingModalOpen] = useState(false);
const isTabletOrMobile = useMediaQuery(theme.breakpoints.down("lg"));
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
@@ -845,7 +846,7 @@ const Navbar = (props) => {
const modalView = (
<Dialog
open={searchBarModalOpen}
open={searchBarModalOpen && !isDocSearchModalOpen}
onClose={() => {
setSearchBarModalOpen(false);
}}
@@ -1287,10 +1288,21 @@ const Navbar = (props) => {
<Button
onMouseEnter={() => handleMenuOpen(item)}
onMouseLeave={(e) => {
// Only close if not moving to dropdown
const dropdown = document.querySelector('.dropdown-content'); // Adjust the selector as needed
const rect = e.currentTarget.getBoundingClientRect();
const dropdownRect = dropdown ? dropdown.getBoundingClientRect() : null;
// Check if the cursor is moving down
const isMovingDown = e.clientY > rect.bottom;
if (!isMovingDown) {
// Check if the cursor is within the dropdown area or a buffer zone
const isOverDropdown = dropdownRect && (
(e.clientY >= dropdownRect.top - 20 && e.clientY <= dropdownRect.bottom + 20) && // Buffer zone
(e.clientX >= dropdownRect.left && e.clientX <= dropdownRect.right)
);
if (!isMovingDown && !isOverDropdown) {
handleMenuClose();
}
}}
@@ -1352,6 +1364,11 @@ const Navbar = (props) => {
onClick={() => {
if(isCloud) {
navigate("/pricing");
ReactGA.event({
category: "navbar",
action: "pricing_click",
label: "go_to_pricing",
})
} else {
window.open("https://shuffler.io/pricing", '_blank');
return;
@@ -1365,6 +1382,11 @@ const Navbar = (props) => {
onClick={() => {
if(isCloud) {
navigate("/partners");
ReactGA.event({
category: "navbar",
action: "partners_click",
label: "go_to_partners",
})
} else {
window.open("https://shuffler.io/partners", '_blank');
return;
@@ -1722,7 +1744,11 @@ const Navbar = (props) => {
}}
>
{topbar}
<Container maxWidth="xl">
<Container maxWidth="xl" sx={{ zoom: {
md: "0.7",
lg: "0.8",
xl: "1",
} }}>
<Toolbar disableGutters sx={{ justifyContent: "space-between" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Link
frontend/src/components/SearchData.jsx
+79 -45
View File
@@ -51,12 +51,13 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e52
const SearchData = props => {
const { serverside, globalUrl, userdata } = props
let navigate = useNavigate();
const { searchBarModalOpen, setSearchBarModalOpen } = useContext(Context);
const { searchBarModalOpen, setSearchBarModalOpen, isDocSearchModalOpen } = useContext(Context);
const borderRadius = 3
const node = useRef()
const [searchOpen, setSearchOpen] = useState(false)
const [oldPath, setOldPath] = useState("")
const [value, setValue] = useState("");
const isDocSearchModal = isDocSearchModalOpen;
const handleLinkClick = () => {
if (searchBarModalOpen) {
@@ -90,6 +91,8 @@ const SearchData = props => {
const [inputValue, setInputValue] = useState(currentRefinement);
const textFieldRef = useRef(null);
const debounceTimeoutRef = useRef(null);
const keyPressHandler = (e) => {
if (e.key === "Enter") {
e.preventDefault();
@@ -110,10 +113,25 @@ const SearchData = props => {
}, [searchOpen]);
useEffect(() => {
if (currentRefinement !== inputValue) {
refine(inputValue);
// Clear any existing timeout to prevent multiple executions
if (debounceTimeoutRef.current) {
clearTimeout(debounceTimeoutRef.current);
}
}, [currentRefinement]);
// Set a new timeout that will execute the search after a 200ms delay
debounceTimeoutRef.current = setTimeout(() => {
refine(inputValue);
setSearchOpen(inputValue.trim() !== '');
}, 200);
// Cleanup function that runs when component unmounts or when dependencies change
// This ensures we don't have any hanging timeouts
return () => {
if (debounceTimeoutRef.current) {
clearTimeout(debounceTimeoutRef.current);
}
};
}, [inputValue, refine]); // Effect runs when inputValue or refine function changes
return (
@@ -122,7 +140,7 @@ const SearchData = props => {
>
<TextField
fullWidth
style={{ zIndex: 1100, marginTop: -20, marginBottom: 200, position: "fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 685, }}
style={{ zIndex: 1100, marginTop: -20, marginBottom: 200, position: "fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 690, }}
InputProps={{
style: {
color: "white",
@@ -149,7 +167,7 @@ const SearchData = props => {
autoComplete='off'
type="search"
color="primary"
placeholder="Find Public Apps, Workflows, Documentation..."
placeholder={isDocSearchModal ? "Type to search documentation..." : "Find Public Apps, Workflows, Documentation..."}
value={inputValue}
id="shuffle_search_field"
onClick={(event) => {
@@ -163,12 +181,6 @@ const SearchData = props => {
onChange={(event) => {
const newValue = event.target.value;
setInputValue(newValue);
refine(newValue);
if (newValue.trim() !== '') {
setSearchOpen(true);
} else {
setSearchOpen(false);
}
}}
onKeyDown={keyPressHandler}
inputRef={textFieldRef}
@@ -605,7 +617,11 @@ const SearchData = props => {
}
if (hits.length > 4) {
hits = hits.slice(0, 4)
if(!isDocSearchModal) {
hits = hits.slice(0, 4)
} else {
hits = hits.slice(0, 15)
}
}
const type = "documentation"
@@ -614,15 +630,19 @@ const SearchData = props => {
//console.log(type, hits.length, hits)
return (
<Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
<Card elevation={0} style={{ marginRight: 10, marginTop: isDocSearchModal ? 0 : 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
{/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
setSearchOpen(false)
}}>
<CloseIcon />
</IconButton> */}
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 152 }}>
Documentation
</Typography>
{
!isDocSearchModal && (
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 152 }}>
Documentation
</Typography>
)
}
{/*
<IconButton edge="end" aria-label="delete" style={{position: "absolute", top: 5, right: 15,}} onClick={() => {
setSearchOpen(false)
@@ -630,7 +650,7 @@ const SearchData = props => {
<DeleteIcon />
</IconButton>
*/}
<List style={{ backgroundColor: theme.palette.inputColor, }}>
<List style={{ backgroundColor: theme.palette.inputColor, marginTop: isDocSearchModal ? 35 : 0, }}>
{hits.length === 0 ?
<ListItem style={outerlistitemStyle}>
<ListItemAvatar onClick={() => console.log(hits)}>
@@ -654,8 +674,8 @@ const SearchData = props => {
cursor: "pointer",
marginLeft: 5,
marginRight: 5,
maxHeight: 75,
minHeight: 75,
maxHeight: isDocSearchModal ? 100 : 75,
minHeight: isDocSearchModal ? 100 : 75,
maxWidth: 420,
minWidth: "100%",
}
@@ -666,9 +686,13 @@ const SearchData = props => {
(hit.name.charAt(0).toUpperCase() + hit.name.slice(1)).replaceAll("_", " ")
if (name.length > 30) {
name = name.slice(0, 30) + "..."
if(isDocSearchModal) {
name = name.slice(0, 70) + "..."
} else {
name = name.slice(0, 30) + "..."
}
}
const secondaryText = hit.data !== undefined ? hit.data.slice(0, 40) + "..." : ""
const secondaryText = hit.data !== undefined ? hit.data.slice(0, 80) + "..." : ""
const avatar = hit.image_url === undefined ?
baseImage
:
@@ -719,7 +743,7 @@ const SearchData = props => {
</ListItemAvatar>
<ListItemText
primary={name}
secondary={secondaryText}
secondary={<div style={{ padding: '8px 0' }}>{secondaryText}</div>}
/>
{/*
<ListItemSecondaryAction>
@@ -897,28 +921,38 @@ const SearchData = props => {
const modalView = (
<div>
<Grid container style={{ display: "contents", }}>
<Grid item xs="auto" style={{}}>
<Index indexName="appsearch">
<CustomAppHits />
</Index>
{
!isDocSearchModal ? (
<Grid container style={{ display: "contents", }}>
<Grid item xs="auto" style={{}}>
<Index indexName="appsearch">
<CustomAppHits />
</Index>
</Grid>
<Grid item xs="auto" style={{}}>
<Index indexName="workflows">
<CustomWorkflowHits />
</Index>
</Grid>
<Grid item xs="auto" style={{}}>
<Index indexName="documentation">
<CustomDocHits />
</Index>
</Grid>
<Grid item xs="auto" style={{}}>
<Index indexName="discord_chat">
<CustomDiscordHits />
</Index>
</Grid>
</Grid>
<Grid item xs="auto" style={{}}>
<Index indexName="workflows">
<CustomWorkflowHits />
</Index>
</Grid>
<Grid item xs="auto" style={{}}>
<Index indexName="documentation">
<CustomDocHits />
</Index>
</Grid>
<Grid item xs="auto" style={{}}>
<Index indexName="discord_chat">
<CustomDiscordHits />
</Index>
</Grid>
</Grid>
) : (
<Grid item xs="auto" style={{width: "100%"}}>
<Index indexName="documentation">
<CustomDocHits />
</Index>
</Grid>
)
}
</div>
)
@@ -932,7 +966,7 @@ const SearchData = props => {
<CustomSearchBox />
{modalView}
</InstantSearch>
{gettingStartData}
{!isDocSearchModal && gettingStartData}
</div>
)
}