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

Added basic mobile view for workflows

Browse Source
This commit is contained in:
frikky
2022-03-02 20:45:58 +01:00
parent 790bb8607d
commit 80a6893b16
3 changed files with 548 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "shuffler", "name": "shuffler",
"homepage": "https://shuffler.io", "homepage": "https://shuffler.io",
"version": "0.9.50", "version": "0.9.61",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@babel/core": "^7.15.8", "@babel/core": "^7.15.8",
frontend/src/views/AngularWorkflow.jsx
+510 -344
View File
File diff suppressed because it is too large Load Diff
frontend/src/views/Workflows.jsx
+37 -32
View File
@@ -6,6 +6,7 @@ import { Navigate } from "react-router-dom";
import SecurityFramework from '../components/SecurityFramework.jsx'; import SecurityFramework from '../components/SecurityFramework.jsx';
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd' import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import { isMobile } from "react-device-detect"
import { import {
@@ -1017,8 +1018,8 @@ const Workflows = (props) => {
color: "#ffffff", color: "#ffffff",
width: "100%", width: "100%",
display: "flex", display: "flex",
minWidth: 1024, minWidth: isMobile ? "100%" : 1024,
maxWidth: 1024, maxWidth: isMobile ? "100%" : 1024,
margin: "auto", margin: "auto",
}; };
@@ -1038,6 +1039,7 @@ const Workflows = (props) => {
flexDirection: "column", flexDirection: "column",
}; };
//flexDirection: !isMobile ? "column" : "row",
const paperAppContainer = { const paperAppContainer = {
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
@@ -1382,7 +1384,7 @@ const Workflows = (props) => {
}; };
return ( return (
<Grid item xs={4} style={{ padding: "12px 10px 12px 10px" }}> <Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<Paper <Paper
square square
style={setupPaperStyle} style={setupPaperStyle}
@@ -2402,7 +2404,8 @@ const Workflows = (props) => {
style: { style: {
backgroundColor: surfaceColor, backgroundColor: surfaceColor,
color: "white", color: "white",
minWidth: "800px", minWidth: isMobile ? "90%" : "800px",
maxWidth: isMobile ? "90%" : "800px",
}, },
}} }}
> >
@@ -2905,30 +2908,32 @@ const Workflows = (props) => {
</Typography> </Typography>
</div> </div>
*/} */}
<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}> {isMobile ? null :
<div style={{ flex: 1, float: "right" }}> <div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
<ChipInput <div style={{ flex: 1, float: "right" }}>
style={{}} <ChipInput
InputProps={{ style={{}}
style: { InputProps={{
color: "white", style: {
maxWidth: 275, color: "white",
minWidth: 275, maxWidth: 275,
}, minWidth: 275,
}} },
placeholder="Add Filter" }}
color="primary" placeholder="Add Filter"
fullWidth color="primary"
value={filters} fullWidth
onAdd={(chip) => { value={filters}
addFilter(chip); onAdd={(chip) => {
}} addFilter(chip);
onDelete={(_, index) => { }}
removeFilter(index); onDelete={(_, index) => {
}} removeFilter(index);
/> }}
/>
</div>
</div> </div>
</div> }
<div style={{ flex: 1, textAlign: "right" }}> <div style={{ flex: 1, textAlign: "right" }}>
{workflowButtons} {workflowButtons}
</div> </div>
@@ -2982,8 +2987,8 @@ const Workflows = (props) => {
*/} */}
<div style={{width: "100%",}}> <div style={{width: "100%",}}>
{usecases !== null && usecases !== undefined && usecases.length > 0 ? {!isMobile && usecases !== null && usecases !== undefined && usecases.length > 0 ?
<div style={{ display: "flex",}}> <div style={{ display: "flex", }}>
{usecases.map((usecase, index) => { {usecases.map((usecase, index) => {
//console.log(usecase) //console.log(usecase)
return ( return (
@@ -3136,7 +3141,7 @@ const Workflows = (props) => {
workflowDelay += 75 workflowDelay += 75
} else { } else {
return ( return (
<Grid key={index} item xs={4} style={{ padding: "12px 10px 12px 10px" }}> <Grid key={index} item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} /> <WorkflowPaper key={index} data={data} />
</Grid> </Grid>
) )
@@ -3144,7 +3149,7 @@ const Workflows = (props) => {
return ( return (
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}> <Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
<Grid item xs={4} style={{ padding: "12px 10px 12px 10px" }}> <Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} /> <WorkflowPaper key={index} data={data} />
</Grid> </Grid>
</Zoom> </Zoom>
@@ -3355,7 +3360,7 @@ const Workflows = (props) => {
*/} */}
<Dropzone <Dropzone
style={{ style={{
maxWidth: window.innerWidth > 1366 ? 1366 : 1200, maxWidth: window.innerWidth > 1366 ? 1366 : isMobile ? "100%" : 1200,
margin: "auto", margin: "auto",
padding: 20, padding: 20,
}} }}