admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BOD-25 BOD-24 Uploading to cloudinary + thumbnail generation

Browse Source
This commit is contained in:
Patrick Fic
2020-04-20 14:14:41 -07:00
parent d3b36776c9
commit 01e6e78c71
33 changed files with 784 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
client/src/components/global-loading-bar/global-loading-bar.component.jsx
View File

@@ -1,52 +1,54 @@
import { useNProgress } from "@tanem/react-nprogress";
//import { useNProgress } from "@tanem/react-nprogress";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectLoading } from "../../redux/application/application.selectors";
const mapStateToProps = createStructuredSelector({
loading: selectLoading
loading: selectLoading,
});
export default connect(mapStateToProps, null)(GlobalLoadingHeader);
function GlobalLoadingHeader({ loading }) {
const { animationDuration, isFinished, progress } = useNProgress({
isAnimating: loading
});
return (
<div
style={{
opacity: isFinished ? 0 : 1,
pointerEvents: "none",
transition: `opacity ${animationDuration}ms linear`
}}>
<div
style={{
background: "#29d",
height: 4,
left: 0,
marginLeft: `${(-1 + progress) * 100}%`,
position: "fixed",
top: 0,
transition: `margin-left ${animationDuration}ms linear`,
width: "100%",
zIndex: 1031
}}>
<div
style={{
boxShadow: "0 0 10px #29d, 0 0 5px #29d",
display: "block",
height: "100%",
opacity: 1,
position: "absolute",
right: 0,
transform: "rotate(3deg) translate(0px, -4px)",
width: 100
}}
/>
</div>
</div>
);
return <span></span>;
// const { animationDuration, isFinished, progress } = useNProgress({
// isAnimating: loading,
// });
// return (
// <div
// style={{
// opacity: isFinished ? 0 : 1,
// pointerEvents: "none",
// transition: `opacity ${animationDuration}ms linear`,
// }}
// >
// <div
// style={{
// background: "#29d",
// height: 4,
// left: 0,
// marginLeft: `${(-1 + progress) * 100}%`,
// position: "fixed",
// top: 0,
// transition: `margin-left ${animationDuration}ms linear`,
// width: "100%",
// zIndex: 1031,
// }}
// >
// <div
// style={{
// boxShadow: "0 0 10px #29d, 0 0 5px #29d",
// display: "block",
// height: "100%",
// opacity: 1,
// position: "absolute",
// right: 0,
// transform: "rotate(3deg) translate(0px, -4px)",
// width: 100,
// }}
// />
// </div>
// </div>
// );
}