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

Added basic reloading UX fixes

Browse Source
This commit is contained in:
frikky
2022-01-14 23:35:50 +01:00
parent e77bcac26f
commit 622baeb59f
4 changed files with 111 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/AngularWorkflow.jsx
+1
View File
@@ -11998,6 +11998,7 @@ const AngularWorkflow = (defaultprops) => {
<Button
style={{ borderRadius: "0px" }}
disabled={newVariableName.length === 0}
variant="contained"
onClick={() => {
console.log("VARIABLES! ", newVariableName);
if (
frontend/src/views/Apps.jsx
+30 -6
View File
@@ -25,7 +25,9 @@ import {
DialogActions,
DialogContent,
CircularProgress,
Zoom,
} from "@material-ui/core";
import {
LockOpen as LockOpenIcon,
OpenInNew as OpenInNewIcon,
@@ -201,6 +203,7 @@ const Apps = (props) => {
const [isDropzone, setIsDropzone] = React.useState(false);
const upload = React.useRef(null);
const [firstLoad, setFirstLoad] = React.useState(true);
const isCloud =
window.location.host === "localhost:3002" ||
window.location.host === "shuffler.io"
@@ -343,7 +346,9 @@ const Apps = (props) => {
}
}
//runAppSearch("")
//setTimeout(() => {
// setFirstLoad(false)
//}, 5000)
})
.catch((error) => {
alert.error(error.toString());
@@ -435,7 +440,10 @@ const Apps = (props) => {
};
// dropdown with copy etc I guess
const appPaper = (data) => {
const AppPaper = (props) => {
const { app } = props
const data = app
if (data.name === "" && data.id === "") {
return null;
}
@@ -1376,6 +1384,7 @@ const Apps = (props) => {
}
}, [appValidation, isDropzone]);
var appDelay = -75
const appView = isLoggedIn ? (
<Dropzone
style={{ width: viewWidth * 2 + 20, margin: "auto", padding: 20 }}
@@ -1504,13 +1513,28 @@ const Apps = (props) => {
{apps.length > 0 ? (
filteredApps.length > 0 ? (
<div style={{ height: "75vh", overflowY: "auto" }}>
{filteredApps.map((app) => {
return appPaper(app);
{filteredApps.map((app, index) => {
if (firstLoad) {
appDelay += 75
} else {
//return returnData
return <AppPaper app={app} />
}
return (
<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
<span>
<AppPaper app={app} />
</span>
</Zoom>
)
})}
{cursearch.length > 0
? null
: searchableApps.map((app) => {
return appPaper(app);
: searchableApps.map((app, index) => {
return (
<AppPaper app={app} />
)
})}
</div>
) : (
frontend/src/views/SettingsPage.jsx
+13
View File
@@ -727,6 +727,19 @@ const Settings = (props) => {
<Divider style={{ marginTop: "40px" }} />
<h2>Platform Earnings</h2>
<div style={{ display: runFlex ? "flex" : "", width: "100%" }}>
<div>
<Button
style={{ height: 40, marginTop: 10 }}
variant="outlined"
color="primary"
fullWidth={true}
onClick={() => {
handleEthereumConnection();
}}
>
Connect to Github
</Button>
</div>
<div style={{ flex: 1, display: "flex" }}>
<div>
{userdata.eth_info !== undefined &&
frontend/src/views/Workflows.jsx
+67 -59
View File
@@ -2605,7 +2605,6 @@ const Workflows = (props) => {
return (
<div style={viewStyle}>
<div style={workflowViewStyle}>
<div style={{ display: "flex" }}>
<div style={{ flex: 3 }}>
@@ -2724,71 +2723,75 @@ const Workflows = (props) => {
data.large_image = theme.palette.defaultImage;
}
const returnData =
<span key={index} style={{ zIndex: 10 }}>
<IconButton
style={{
backgroundColor: "transparent",
margin: 0,
padding: 12,
}}
onClick={() => {
console.log("FILTER: ", data);
addFilter(data.app_name);
}}
>
<Tooltip
title={`Filter by ${data.app_name}`}
placement="top"
>
<Badge
badgeContent={0}
color="secondary"
style={{ fontSize: 10 }}
>
<div
style={{
height: imgSize,
width: imgSize,
position: "relative",
filter: "brightness(0.6)",
backgroundColor: "#000",
borderRadius: imgSize / 2,
zIndex: 100,
overflow: "hidden",
display: "flex",
justifyContent: "center",
}}
>
<img
style={{
height: imgSize,
width: imgSize,
position: "absolute",
top: -2,
left: -2,
cursor: "pointer",
zIndex: 99,
border: "2px solid rgba(255,255,255,0.7)",
}}
alt={data.app_name}
src={data.large_image}
/>
</div>
</Badge>
</Tooltip>
</IconButton>
</span>
if (firstLoad) {
appDelay += 75
} else {
appDelay = 0
//appDelay = 0
return returnData
}
return (
<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
<span key={index} style={{ zIndex: 10 }}>
<IconButton
style={{
backgroundColor: "transparent",
margin: 0,
padding: 12,
}}
onClick={() => {
console.log("FILTER: ", data);
addFilter(data.app_name);
}}
>
<Tooltip
title={`Filter by ${data.app_name}`}
placement="top"
>
<Badge
badgeContent={0}
color="secondary"
style={{ fontSize: 10 }}
>
<div
style={{
height: imgSize,
width: imgSize,
position: "relative",
filter: "brightness(0.6)",
backgroundColor: "#000",
borderRadius: imgSize / 2,
zIndex: 100,
overflow: "hidden",
display: "flex",
justifyContent: "center",
}}
>
<img
style={{
height: imgSize,
width: imgSize,
position: "absolute",
top: -2,
left: -2,
cursor: "pointer",
zIndex: 99,
border: "2px solid rgba(255,255,255,0.7)",
}}
alt={data.app_name}
src={data.large_image}
/>
</div>
</Badge>
</Tooltip>
</IconButton>
</span>
{returnData}
</Zoom>
);
})}
);
})}
</div>
) : null}
{view === "grid" ? (
@@ -2796,11 +2799,16 @@ const Workflows = (props) => {
<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
<NewWorkflowPaper />
</Zoom>
{filteredWorkflows.map((data, index) => {
if (firstLoad) {
workflowDelay += 75
} else {
workflowDelay = 0
return (
<Grid item xs={4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} />
</Grid>
)
}
return (