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

Made some UI changes

Browse Source
This commit is contained in:
monilprajapati
2024-11-30 21:39:45 +05:30
parent dee99abbbc
commit 6753410525
2 changed files with 94 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppModal.jsx
-1
View File
@@ -293,7 +293,6 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
sx: { sx: {
borderRadius: 3, borderRadius: 3,
border: "1px solid var(--Container-Stroke, #494949)", border: "1px solid var(--Container-Stroke, #494949)",
backgroundColor: "var(--Container, #212121)",
minWidth: '440px', minWidth: '440px',
fontFamily: "Inter" fontFamily: "Inter"
} }
frontend/src/views/Workflows2.jsx
+94 -36
View File
@@ -2086,9 +2086,9 @@ const Workflows2 = (props) => {
continue continue
} }
if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") { // if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") {
continue // continue
} // }
if (appsFound.findIndex(data => data.name === parsedAction.name) < 0) { if (appsFound.findIndex(data => data.name === parsedAction.name) < 0) {
appsFound.push(parsedAction) appsFound.push(parsedAction)
@@ -3287,11 +3287,11 @@ const Workflows2 = (props) => {
<Typography variant="h5"> <Typography variant="h5">
{editingWorkflow.id !== undefined ? "Edit Workflow" : "Create New Workflow"} {editingWorkflow.id !== undefined ? "Edit Workflow" : "Create New Workflow"}
</Typography> </Typography>
<div style={{ display: "flex", gap: 10 }}> <div style={{ display: "flex", gap: 15 }}>
<Tooltip title={"Import manually"} placement="top"> <Tooltip title={"Import manually"} placement="top">
<IconButton <IconButton
color="primary" color="primary"
size="small" size="medium"
onClick={() => upload.click()} onClick={() => upload.click()}
style={{ backgroundColor: "rgba(255,255,255,0.08)" }} style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
> >
@@ -3299,7 +3299,7 @@ const Workflows2 = (props) => {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<IconButton <IconButton
size="small" size="medium"
onClick={() => setDialogModalOpen(false)} onClick={() => setDialogModalOpen(false)}
style={{ backgroundColor: "rgba(255,255,255,0.08)" }} style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
> >
@@ -3532,7 +3532,7 @@ const Workflows2 = (props) => {
setDefaultReturnValue(""); setDefaultReturnValue("");
setEditingWorkflow({}); setEditingWorkflow({});
setNewWorkflowTags([]); setNewWorkflowTags([]);
setModalOpen(false); setDialogModalOpen(false);
setSelectedUsecases([]) setSelectedUsecases([])
}} }}
> >
@@ -4035,6 +4035,7 @@ const Workflows2 = (props) => {
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, gap: 10 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, gap: 10 }}>
<MuiChipsInput <MuiChipsInput
placeholder="Filter Workflows" placeholder="Filter Workflows"
variant="outlined" variant="outlined"
@@ -4045,20 +4046,38 @@ const Workflows2 = (props) => {
setFilters(chips); setFilters(chips);
findWorkflow(chips); findWorkflow(chips);
}} }}
style={{ flex: 0.9, borderRadius: 8 }} style={{ flex: 0.9 }}
// style={searchStyle} InputProps={{
//onAdd={(chip) => { style: {
// console.log("ADd: ", chip); color: "white",
// addFilter(chip); borderRadius: 8,
//}} },
//onDelete={(_, index) => { }}
// console.log("Remove: ", index); sx={{
// removeFilter(index); '& .MuiOutlinedInput-root': {
//}} '& fieldset': {
borderColor: 'rgba(255, 255, 255, 0.2)',
},
'&:hover fieldset': {
borderColor: 'rgba(255, 255, 255, 0.3)',
},
'&.Mui-focused fieldset': {
borderColor: '#f85a3e',
},
},
'& .MuiChip-root': {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
color: 'white',
'& .MuiChip-deleteIcon': {
color: 'rgba(255, 255, 255, 0.7)',
'&:hover': {
color: 'white',
},
},
},
}}
/> />
<Select <Select
fullWidth fullWidth
variant="outlined" variant="outlined"
@@ -4069,14 +4088,12 @@ const Workflows2 = (props) => {
style={{ flex: 0.9, maxWidth: 350, borderRadius: 8 }} style={{ flex: 0.9, maxWidth: 350, borderRadius: 8 }}
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'} renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'}
> >
<MenuItem disabled value="">All Categories</MenuItem> <MenuItem disabled value="" style={{}}>All Categories</MenuItem>
{usecases.map((usecase) => { {usecases.map((usecase, index) => {
if (usecase?.name === "5. Verify") { if (usecase?.name === "5. Verify") {
return null; return null;
} }
const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length / usecase.list.length * 100) : 0 const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length / usecase.list.length * 100) : 0
if (percentDone === 0) { if (percentDone === 0) {
usecase = findMatches(usecase, workflows) usecase = findMatches(usecase, workflows)
@@ -4084,27 +4101,68 @@ const Workflows2 = (props) => {
const category = usecase?.name.split(" ")[1] const category = usecase?.name.split(" ")[1]
return ( return (
<MenuItem value={category} <MenuItem
value={category}
onClick={() => { onClick={() => {
console.log("Filters: ", filters, usecase?.name.toLowerCase())
if (!filters.includes(usecase?.name.toLowerCase())) { if (!filters.includes(usecase?.name.toLowerCase())) {
addFilter(usecase.name) addFilter(usecase.name)
} else { } else {
removeFilter(filters.indexOf(usecase?.name.toLowerCase())) removeFilter(filters.indexOf(usecase?.name.toLowerCase()))
} }
}} }}
style={{
padding: "12px 16px",
borderBottom: index === usecases.length - 2 ? "none" : "1px solid rgba(255,255,255,0.05)",
"&:hover": {
backgroundColor: "rgba(255,255,255,0.1)"
}
}}
> >
<Checkbox checked={selectedCategory.includes(category)} /> <div style={{
<span style={{ textDecoration: "none", width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 2 }}> display: "flex",
<Typography variant="body1" color="textPrimary"> alignItems: "center",
{category} width: "100%",
</Typography> gap: "12px"
<Typography variant="body2" color="textSecondary"> }}>
{usecase?.matches.length}/{usecase?.list.length} <Checkbox
</Typography> checked={selectedCategory.includes(category)}
</span> style={{
</MenuItem>) padding: 0,
marginRight: 8,
color: "rgba(255,255,255,0.7)"
}}
/>
<div style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%"
}}>
<Typography
variant="body1"
style={{
color: "rgba(255,255,255,0.9)",
fontWeight: selectedCategory.includes(category) ? 500 : 400
}}
>
{category}
</Typography>
<Typography
variant="body2"
style={{
color: "rgba(255,255,255,0.5)",
backgroundColor: "rgba(255,255,255,0.1)",
padding: "2px 8px",
borderRadius: "12px",
fontSize: "0.75rem"
}}
>
{usecase?.matches.length}/{usecase?.list.length}
</Typography>
</div>
</div>
</MenuItem>
)
})} })}
</Select> </Select>