made CSS fixes, added classnames library
This commit is contained in:
subnub
@@ -71,6 +71,7 @@
|
||||
"bcrypt": "^5.1.1",
|
||||
"body-parser": "^1.20.2",
|
||||
"bytes": "^3.1.0",
|
||||
"classnames": "^2.5.1",
|
||||
"cli-progress": "^3.6.0",
|
||||
"compression": "^1.7.4",
|
||||
"concat-stream": "^2.0.0",
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150" height="150" viewBox="0 0 24 24"><path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" /></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150" height="150" viewBox="0 0 24 24">
|
||||
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 408 B |
@@ -38,3 +38,8 @@ export const getFilesList = async ({
|
||||
});
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getQuickFilesList = async () => {
|
||||
const response = await axios.get(`/file-service/quick-list`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
+496
-521
File diff suppressed because it is too large
Load Diff
@@ -32,8 +32,7 @@ const Homepage2 = () => {
|
||||
|
||||
<div className="">
|
||||
<Header goHome={goHome} />
|
||||
<div className="flex space-between mt-20">
|
||||
<LeftSection goHome={goHome} />
|
||||
<div className="flex space-between">
|
||||
<MainSection />
|
||||
<Uploader />
|
||||
{/* {photoID.length === 0 ? undefined : <PhotoViewer />} */}
|
||||
|
||||
@@ -14,7 +14,7 @@ class LeftSection extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className="menu__block"
|
||||
className="menu__block p-6"
|
||||
ref={this.props.leftSectionRef}
|
||||
style={
|
||||
this.props.leftSectionMode === ""
|
||||
|
||||
@@ -119,9 +119,6 @@ const LoginPage = (props) => {
|
||||
placeholder="Verify Password"
|
||||
onChange={props.verifyPasswordOnChange}
|
||||
value={props.state.verifyPassword}
|
||||
ref={(ref) => {
|
||||
props.passwordInput = ref;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -3,6 +3,7 @@ import RightSection from "../RightSection";
|
||||
import MoverMenu from "../MoverMenu";
|
||||
import PopupWindow from "../PopupWindow";
|
||||
import React from "react";
|
||||
import LeftSection from "../LeftSection";
|
||||
|
||||
const MainSection = React.forwardRef((props, ref) => {
|
||||
return (
|
||||
@@ -97,17 +98,21 @@ const MainSection = React.forwardRef((props, ref) => {
|
||||
|
||||
{props.moverID.length === 0 ? undefined : <MoverMenu />}
|
||||
|
||||
<DataForm
|
||||
folderClick={props.folderClick}
|
||||
fileClick={props.fileClick}
|
||||
downloadFile={props.downloadFile}
|
||||
/>
|
||||
<div className="flex flex-row h-screen w-screen pt-16">
|
||||
<LeftSection goHome={() => {}} />
|
||||
|
||||
<RightSection
|
||||
folderClick={props.folderClick}
|
||||
fileClick={props.fileClick}
|
||||
downloadFile={props.downloadFile}
|
||||
/>
|
||||
<DataForm
|
||||
folderClick={props.folderClick}
|
||||
fileClick={props.fileClick}
|
||||
downloadFile={props.downloadFile}
|
||||
/>
|
||||
|
||||
<RightSection
|
||||
folderClick={props.folderClick}
|
||||
fileClick={props.fileClick}
|
||||
downloadFile={props.downloadFile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import QuickAccessItem from "../QuickAccessItem";
|
||||
import React from "react";
|
||||
|
||||
const QuickAccess = (props) => (
|
||||
<div
|
||||
className="quick__access"
|
||||
style={
|
||||
props.currentRouteType === "home"
|
||||
? { display: "block" }
|
||||
: { display: "none" }
|
||||
}
|
||||
>
|
||||
<div className="head__access">
|
||||
<h2 className="noSelect">Quick Access</h2>
|
||||
</div>
|
||||
|
||||
<div className="main__access">
|
||||
{props.quickFiles.map((file) => (
|
||||
<QuickAccessItem
|
||||
key={file._id}
|
||||
downloadFile={props.downloadFile}
|
||||
fileClick={props.fileClick}
|
||||
{...file}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default QuickAccess;
|
||||
@@ -1,22 +1,44 @@
|
||||
import QuickAccess from "./QuickAccess";
|
||||
import {connect} from "react-redux";
|
||||
import { useSelector } from "react-redux";
|
||||
import QuickAccessItem from "../QuickAccessItem";
|
||||
import React from "react";
|
||||
import { useQuickFiles } from "../../hooks/files";
|
||||
|
||||
class QuickAccessContainer extends React.Component {
|
||||
const QuickAccess = (props) => {
|
||||
const { data: quickfilesList } = useQuickFiles();
|
||||
const currentRouteType = useSelector((state) => state.main.currentRouteType);
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="h-26 overflow-hidden"
|
||||
style={
|
||||
currentRouteType === "home" ? { display: "block" } : { display: "none" }
|
||||
}
|
||||
>
|
||||
<div className="head__access">
|
||||
<h2 className="m-0 mb-[20px] text-[#212b36] text-[22px] font-medium">
|
||||
Quick Access
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
render() {
|
||||
return <QuickAccess {...this.props}/>
|
||||
}
|
||||
<div
|
||||
className="grid gap-5 h-40"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(185px, 185px))",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
{quickfilesList?.map((file) => (
|
||||
<QuickAccessItem
|
||||
key={file._id}
|
||||
downloadFile={props.downloadFile}
|
||||
fileClick={props.fileClick}
|
||||
{...file}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const connectStateToProp = (state) => ({
|
||||
quickFiles: state.quickFiles,
|
||||
currentRouteType: state.main.currentRouteType
|
||||
})
|
||||
|
||||
export default connect(connectStateToProp)(QuickAccessContainer)
|
||||
export default QuickAccess;
|
||||
|
||||
@@ -1,28 +1,168 @@
|
||||
import capitalize from "../../utils/capitalize";
|
||||
import moment from "moment";
|
||||
import React from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import NewContextMenu from "../NewContextMenu";
|
||||
import classNames from "classnames";
|
||||
|
||||
const QuickAccessItem = (props) => (
|
||||
const QuickAccessItem = (props) => {
|
||||
const fileExtension = useMemo(() => {
|
||||
const filenameSplit = props.filename.split(".");
|
||||
|
||||
<div className={"quick-"+props._id !== props.selected ? "elem__access noSelect" : "elem__access active__recent noSelect"} onClick={() => {props.fileClick(props._id, props, true)}}
|
||||
onContextMenu={props.selectContext}
|
||||
onTouchStart={props.onTouchStart}
|
||||
onTouchEnd={props.onTouchEnd}
|
||||
onTouchMove={props.onTouchMove}
|
||||
if (filenameSplit.length > 1) {
|
||||
let extension = filenameSplit[filenameSplit.length - 1];
|
||||
|
||||
if (extension.length > 4)
|
||||
extension =
|
||||
extension.substring(0, 3) +
|
||||
extension.substring(extension.length - 1, extension.length);
|
||||
|
||||
return extension.toUpperCase();
|
||||
} else {
|
||||
return "UNK";
|
||||
}
|
||||
}, [props.filename]);
|
||||
|
||||
const imageColor = useMemo(() => {
|
||||
const letter = fileExtension.substring(0, 1).toUpperCase();
|
||||
|
||||
const colorObj = {
|
||||
A: "#e53935",
|
||||
B: "#d81b60",
|
||||
C: "#8e24aa",
|
||||
D: "#5e35b1",
|
||||
E: "#3949ab",
|
||||
F: "#1e88e5",
|
||||
G: "#039be5",
|
||||
H: "#00acc1",
|
||||
I: "#00897b",
|
||||
J: "#43a047",
|
||||
K: "#fdd835",
|
||||
L: "#ffb300",
|
||||
M: "#fb8c00",
|
||||
N: "#f4511e",
|
||||
O: "#d32f2f",
|
||||
P: "#c2185b",
|
||||
Q: "#7b1fa2",
|
||||
R: "#512da8",
|
||||
S: "#303f9f",
|
||||
T: "#1976d2",
|
||||
U: "#0288d1",
|
||||
V: "#0097a7",
|
||||
W: "#0097a7",
|
||||
X: "#00796b",
|
||||
Y: "#388e3c",
|
||||
Z: "#fbc02d",
|
||||
};
|
||||
|
||||
if (colorObj[letter]) {
|
||||
return colorObj[letter];
|
||||
} else {
|
||||
return "#03a9f4";
|
||||
}
|
||||
}, [props.filename]);
|
||||
|
||||
const elementSelected = useMemo(
|
||||
() => `quick-${props._id}` === props.selected,
|
||||
[props._id, props.selected]
|
||||
);
|
||||
|
||||
console.log("thumbnail", props.state);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
"border border-[#ebe9f9] rounded-md o transition-all duration-400 ease-in-out cursor-pointer w-48 flex items-center justify-center flex-col overflow-hidden h-[150px]",
|
||||
{ "border-[#3c85ee]": elementSelected }
|
||||
)}
|
||||
onClick={() => {
|
||||
props.fileClick(props._id, props, true);
|
||||
}}
|
||||
onContextMenu={props.selectContext}
|
||||
onTouchStart={props.onTouchStart}
|
||||
onTouchEnd={props.onTouchEnd}
|
||||
onTouchMove={props.onTouchMove}
|
||||
>
|
||||
<div className="context__menu--wrapper" onClick={props.clickStopPropagation}>
|
||||
<NewContextMenu gridMode={true} quickItemMode={true} contextSelected={props.state.contextSelected} closeContext={props.closeContext} downloadFile={props.downloadFile} file={props} changeEditNameMode={props.changeEditNameMode} closeEditNameMode={props.closeEditNameMode} changeDeleteMode={props.changeDeleteMode} startMovingFile={props.startMovingFile}/>
|
||||
</div>
|
||||
<div class="access__image">
|
||||
<img className={props.state.imageClassname} src={props.state.image} onError={props.thumbnailOnError}/>
|
||||
</div>
|
||||
<div class="access__info--file">
|
||||
<p className="noSelect" style={"quick-"+props._id !== props.selected ? {} : {color:"white"}}>{capitalize(props.filename)}</p>
|
||||
<span className="noSelect" style={"quick-"+props._id !== props.selected ? {} : {color:"white"}}>Created {moment(props.uploadDate).calendar()}</span>
|
||||
</div>
|
||||
<div onClick={props.clickStopPropagation}>
|
||||
<NewContextMenu
|
||||
gridMode={true}
|
||||
quickItemMode={true}
|
||||
contextSelected={props.state.contextSelected}
|
||||
closeContext={props.closeContext}
|
||||
downloadFile={props.downloadFile}
|
||||
file={props}
|
||||
changeEditNameMode={props.changeEditNameMode}
|
||||
closeEditNameMode={props.closeEditNameMode}
|
||||
changeDeleteMode={props.changeDeleteMode}
|
||||
startMovingFile={props.startMovingFile}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
"inline-flex items-center w-full bg-white relative",
|
||||
{
|
||||
"mt-2": !props.state.hasThumbnail,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{props.state.hasThumbnail ? (
|
||||
<img
|
||||
className="w-full min-h-[88px] max-h-[88px] h-full flex object-cover"
|
||||
src={props.state.image}
|
||||
onError={props.thumbnailOnError}
|
||||
/>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
width="150"
|
||||
height="150"
|
||||
viewBox="0 0 24 24"
|
||||
className="w-full min-h-[80px] max-h-[80px] h-full flex"
|
||||
>
|
||||
<path
|
||||
d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
|
||||
fill={imageColor}
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{!props.state.hasThumbnail && (
|
||||
<div className="w-full h-full absolute flex justify-center items-center text-white mt-3">
|
||||
<p className="text-sm">{fileExtension}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
"p-3 overflow-hidden text-ellipsis block w-full",
|
||||
{
|
||||
"bg-[#3c85ee]": elementSelected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<p
|
||||
className={classNames(
|
||||
"m-0 text-[#212b36] text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap",
|
||||
{
|
||||
"text-white": elementSelected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{capitalize(props.filename)}
|
||||
</p>
|
||||
<span
|
||||
className={classNames(
|
||||
"m-0 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs",
|
||||
{
|
||||
"text-white": elementSelected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
Created {moment(props.uploadDate).calendar()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default QuickAccessItem
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickAccessItem;
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import QuickAccessItem from "./QuickAccessItem"
|
||||
import {setRightSelected, setLastSelected, setSelected} from "../../actions/selectedItem"
|
||||
import mobileCheck from "../../utils/mobileCheck"
|
||||
import QuickAccessItem from "./QuickAccessItem";
|
||||
import {
|
||||
setRightSelected,
|
||||
setLastSelected,
|
||||
setSelected,
|
||||
} from "../../actions/selectedItem";
|
||||
import mobileCheck from "../../utils/mobileCheck";
|
||||
import env from "../../enviroment/envFrontEnd";
|
||||
import axios from "../../axiosInterceptor";
|
||||
import {connect} from "react-redux";
|
||||
import { connect } from "react-redux";
|
||||
import React from "react";
|
||||
import Swal from "sweetalert2";
|
||||
import { startRenameFile, startRemoveFile } from "../../actions/files";
|
||||
@@ -14,268 +18,263 @@ import { setMobileContextMenu } from "../../actions/mobileContextMenu";
|
||||
const currentURL = env.url;
|
||||
|
||||
class QuickAccessItemContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.failedToLoad = false;
|
||||
this.lastTouch = 0;
|
||||
|
||||
this.failedToLoad = false;
|
||||
this.lastTouch = 0;
|
||||
this.state = {
|
||||
contextMenuPos: {},
|
||||
image: "/images/file-svg.svg",
|
||||
imageClassname: "noSelect file__item-no-thumbnail",
|
||||
contextSelected: false,
|
||||
hasThumbnail: false,
|
||||
};
|
||||
}
|
||||
|
||||
this.state = {
|
||||
contextMenuPos: {},
|
||||
image: "/images/file-svg.svg",
|
||||
imageClassname: "noSelect file__item-no-thumbnail",
|
||||
contextSelected: false,
|
||||
}
|
||||
componentDidMount = () => {
|
||||
const hasThumbnail = this.props.metadata.hasThumbnail;
|
||||
console.log("has", hasThumbnail);
|
||||
|
||||
if (hasThumbnail && !this.failedToLoad) {
|
||||
this.getThumbnail();
|
||||
}
|
||||
};
|
||||
|
||||
closeContext = () => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: false,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
selectContext = (e) => {
|
||||
if (e) e.stopPropagation();
|
||||
if (e) e.preventDefault();
|
||||
|
||||
if (mobilecheck()) {
|
||||
this.props.dispatch(setMobileContextMenu(true, this.props));
|
||||
return;
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: !this.state.contextSelected,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const hasThumbnail = this.props.metadata.hasThumbnail;
|
||||
getThumbnail = async () => {
|
||||
const thumbnailID = this.props.metadata.thumbnailID;
|
||||
const imageClassname = "noSelect";
|
||||
|
||||
if (hasThumbnail && !this.failedToLoad) {
|
||||
this.getThumbnail();
|
||||
}
|
||||
// GOOGLE DRIVE IMAGE
|
||||
if (this.props.metadata.drive) {
|
||||
return await this.setState(() => ({
|
||||
...this.state,
|
||||
image: this.props.metadata.thumbnailID,
|
||||
imageClassname: imageClassname,
|
||||
}));
|
||||
}
|
||||
|
||||
closeContext = () => {
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: false
|
||||
}
|
||||
})
|
||||
}
|
||||
const config = {
|
||||
responseType: "arraybuffer",
|
||||
};
|
||||
|
||||
selectContext = (e) => {
|
||||
await this.setState(() => ({
|
||||
...this.state,
|
||||
image: "/images/file-svg.svg",
|
||||
imageClassname: "noSelect file__item-no-thumbnail",
|
||||
}));
|
||||
|
||||
if (e) e.stopPropagation()
|
||||
if (e) e.preventDefault();
|
||||
const url = `http://localhost:5173/api/file-service/thumbnail/${thumbnailID}`;
|
||||
|
||||
if (mobilecheck()) {
|
||||
|
||||
this.props.dispatch(setMobileContextMenu(true, this.props));
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: !this.state.contextSelected
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getThumbnail = async() => {
|
||||
|
||||
const thumbnailID = this.props.metadata.thumbnailID;
|
||||
const imageClassname = "noSelect"
|
||||
|
||||
// GOOGLE DRIVE IMAGE
|
||||
if (this.props.metadata.drive) {
|
||||
return await this.setState(() => ({
|
||||
...this.state,
|
||||
image: this.props.metadata.thumbnailID,
|
||||
imageClassname: imageClassname
|
||||
}))
|
||||
}
|
||||
|
||||
const config = {
|
||||
responseType: 'arraybuffer'
|
||||
};
|
||||
|
||||
await this.setState(() => ({
|
||||
...this.state,
|
||||
image: "/images/file-svg.svg",
|
||||
imageClassname: "noSelect file__item-no-thumbnail"
|
||||
}))
|
||||
|
||||
const isPersonal = this.props.metadata.personalFile;
|
||||
|
||||
const url = !isPersonal ? `/file-service/thumbnail/${thumbnailID}` : `/file-service-personal/thumbnail/${thumbnailID}`;
|
||||
|
||||
axios.get(url, config).then((results) => {
|
||||
|
||||
const imgFile = new Blob([results.data]);
|
||||
const imgUrl = URL.createObjectURL(imgFile);
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
image: imgUrl,
|
||||
imageClassname: imageClassname
|
||||
}))
|
||||
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
|
||||
thumbnailOnError = () => {
|
||||
|
||||
console.log("thumbnail on error");
|
||||
axios
|
||||
.get(url, config)
|
||||
.then((results) => {
|
||||
const imgFile = new Blob([results.data]);
|
||||
const imgUrl = URL.createObjectURL(imgFile);
|
||||
console.log("got image");
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
image: "/images/file-svg.svg",
|
||||
imageClassname: "noSelect file__item-no-thumbnail",
|
||||
}))
|
||||
...this.state,
|
||||
image: imgUrl,
|
||||
imageClassname: imageClassname,
|
||||
hasThumbnail: true,
|
||||
}));
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
thumbnailOnError = (e) => {
|
||||
console.log("thumbnail on error", e);
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
image: "/images/file-svg.svg",
|
||||
imageClassname: "noSelect file__item-no-thumbnail",
|
||||
hasThumbnail: false,
|
||||
}));
|
||||
};
|
||||
|
||||
onTouchStart = () => {
|
||||
const date = new Date();
|
||||
this.lastTouch = date.getTime();
|
||||
};
|
||||
|
||||
onTouchMove = () => {
|
||||
this.lastTouch = 0;
|
||||
};
|
||||
|
||||
onTouchEnd = () => {
|
||||
if (this.lastTouch === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
onTouchStart = () => {
|
||||
const date = new Date();
|
||||
this.lastTouch = date.getTime();
|
||||
const date = new Date();
|
||||
const difference = date - this.lastTouch;
|
||||
|
||||
this.lastTouch = 0;
|
||||
|
||||
if (difference > 500) {
|
||||
this.selectContext();
|
||||
}
|
||||
};
|
||||
|
||||
getContextMenu = (e) => {
|
||||
if (e) e.preventDefault();
|
||||
|
||||
const isMobile = mobileCheck();
|
||||
|
||||
const windowX = window.innerWidth;
|
||||
const windowY = window.innerHeight;
|
||||
|
||||
let styleObj = { right: 0, left: 0, top: "-3px", bottom: 0 };
|
||||
|
||||
if (isMobile) {
|
||||
styleObj = { bottom: 0, left: "2px" };
|
||||
} else {
|
||||
const clientY = e.nativeEvent.clientY;
|
||||
const clientX = e.nativeEvent.clientX;
|
||||
|
||||
if (clientX > windowX / 2) {
|
||||
styleObj = { ...styleObj, left: "unset", right: 0 };
|
||||
} else {
|
||||
styleObj = { ...styleObj, left: 0, right: "unset" };
|
||||
}
|
||||
}
|
||||
|
||||
onTouchMove = () => {
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
contextMenuPos: styleObj,
|
||||
}));
|
||||
|
||||
this.lastTouch = 0;
|
||||
}
|
||||
this.props.dispatch(setSelected("quick-" + this.props._id));
|
||||
this.props.dispatch(setRightSelected("quick-" + this.props._id));
|
||||
this.props.dispatch(setLastSelected(0));
|
||||
};
|
||||
|
||||
onTouchEnd = () => {
|
||||
changeEditNameMode = async () => {
|
||||
let inputValue = this.props.filename;
|
||||
|
||||
if (this.lastTouch === 0) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const date = new Date();
|
||||
const difference = date - this.lastTouch;
|
||||
|
||||
this.lastTouch = 0;
|
||||
|
||||
if (difference > 500) {
|
||||
this.selectContext()
|
||||
const { value: folderName } = await Swal.fire({
|
||||
title: "Enter A File Name",
|
||||
input: "text",
|
||||
inputValue: inputValue,
|
||||
showCancelButton: true,
|
||||
inputValidator: (value) => {
|
||||
if (!value) {
|
||||
return "Please Enter a Name";
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (folderName === undefined || folderName === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
getContextMenu = (e) => {
|
||||
this.props.dispatch(
|
||||
startRenameFile(this.props._id, folderName, this.props.metadata.drive)
|
||||
);
|
||||
};
|
||||
|
||||
if (e) e.preventDefault();
|
||||
closeEditNameMode = () => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
editNameMode: false,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const isMobile = mobileCheck()
|
||||
|
||||
const windowX = window.innerWidth;
|
||||
const windowY = window.innerHeight;
|
||||
changeDeleteMode = async () => {
|
||||
Swal.fire({
|
||||
title: "Confirm Deletion",
|
||||
text: "You cannot undo this action",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Yes, delete",
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.props.dispatch(
|
||||
startRemoveFile(
|
||||
this.props._id,
|
||||
this.props.metadata.drive,
|
||||
this.props.metadata.personalFile
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let styleObj = {right:0, left:0, top: "-3px", bottom: 0}
|
||||
startMovingFile = async () => {
|
||||
this.props.dispatch(
|
||||
setMoverID(
|
||||
this.props._id,
|
||||
this.props.metadata.parent,
|
||||
true,
|
||||
this.props.metadata.drive,
|
||||
this.props.metadata.personalFile
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
if (isMobile) {
|
||||
|
||||
styleObj = {bottom: 0, left: "2px"};
|
||||
|
||||
} else {
|
||||
|
||||
const clientY = e.nativeEvent.clientY;
|
||||
const clientX = e.nativeEvent.clientX;
|
||||
|
||||
if (clientX > windowX / 2) {
|
||||
|
||||
styleObj = {...styleObj, left:"unset", right:0}
|
||||
|
||||
} else {
|
||||
|
||||
styleObj = {...styleObj, left:0, right:"unset"}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.setState(() => ({
|
||||
...this.state,
|
||||
contextMenuPos: styleObj
|
||||
}))
|
||||
|
||||
this.props.dispatch(setSelected("quick-"+this.props._id))
|
||||
this.props.dispatch(setRightSelected("quick-"+this.props._id))
|
||||
this.props.dispatch(setLastSelected(0));
|
||||
}
|
||||
|
||||
changeEditNameMode = async() => {
|
||||
|
||||
let inputValue = this.props.filename;
|
||||
|
||||
const { value: folderName} = await Swal.fire({
|
||||
title: 'Enter A File Name',
|
||||
input: 'text',
|
||||
inputValue: inputValue,
|
||||
showCancelButton: true,
|
||||
inputValidator: (value) => {
|
||||
if (!value) {
|
||||
return 'Please Enter a Name'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (folderName === undefined || folderName === null) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.dispatch(startRenameFile(this.props._id, folderName, this.props.metadata.drive))
|
||||
}
|
||||
|
||||
closeEditNameMode = () => {
|
||||
|
||||
this.setState(() => {
|
||||
|
||||
return {
|
||||
...this.state,
|
||||
editNameMode: false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
changeDeleteMode = async() => {
|
||||
|
||||
Swal.fire({
|
||||
title: 'Confirm Deletion',
|
||||
text: "You cannot undo this action",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, delete'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.props.dispatch(startRemoveFile(this.props._id, this.props.metadata.drive, this.props.metadata.personalFile))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
startMovingFile = async() => {
|
||||
this.props.dispatch(setMoverID(this.props._id, this.props.metadata.parent, true, this.props.metadata.drive, this.props.metadata.personalFile));
|
||||
}
|
||||
|
||||
clickStopPropagation = (e) => {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return <QuickAccessItem
|
||||
getContextMenu={this.getContextMenu}
|
||||
onTouchStart={this.onTouchStart}
|
||||
onTouchMove={this.onTouchMove}
|
||||
onTouchEnd={this.onTouchEnd}
|
||||
closeContext={this.closeContext}
|
||||
selectContext={this.selectContext}
|
||||
changeEditNameMode={this.changeEditNameMode}
|
||||
closeEditNameMode={this.closeEditNameMode}
|
||||
changeDeleteMode={this.changeDeleteMode}
|
||||
startMovingFile={this.startMovingFile}
|
||||
thumbnailOnError={this.thumbnailOnError}
|
||||
state={this.state}
|
||||
{...this.props}/>
|
||||
}
|
||||
clickStopPropagation = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<QuickAccessItem
|
||||
getContextMenu={this.getContextMenu}
|
||||
onTouchStart={this.onTouchStart}
|
||||
onTouchMove={this.onTouchMove}
|
||||
onTouchEnd={this.onTouchEnd}
|
||||
closeContext={this.closeContext}
|
||||
selectContext={this.selectContext}
|
||||
changeEditNameMode={this.changeEditNameMode}
|
||||
closeEditNameMode={this.closeEditNameMode}
|
||||
changeDeleteMode={this.changeDeleteMode}
|
||||
startMovingFile={this.startMovingFile}
|
||||
thumbnailOnError={this.thumbnailOnError}
|
||||
state={this.state}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connectStateToProp = (state) => ({
|
||||
rightSelected: state.selectedItem.rightSelected,
|
||||
selected: state.selectedItem.selected
|
||||
})
|
||||
rightSelected: state.selectedItem.rightSelected,
|
||||
selected: state.selectedItem.selected,
|
||||
});
|
||||
|
||||
export default connect(connectStateToProp)(QuickAccessItemContainer);
|
||||
|
||||
|
||||
+8
-2
@@ -1,6 +1,6 @@
|
||||
import { useInfiniteQuery } from "react-query";
|
||||
import { useInfiniteQuery, useQuery } from "react-query";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { getFilesList } from "../api/filesAPI";
|
||||
import { getFilesList, getQuickFilesList } from "../api/filesAPI";
|
||||
|
||||
export const useFiles = () => {
|
||||
const params = useParams();
|
||||
@@ -33,3 +33,9 @@ export const useFiles = () => {
|
||||
|
||||
return { ...filesReactQuery, testFunction };
|
||||
};
|
||||
|
||||
export const useQuickFiles = () => {
|
||||
const quickFilesQuery = useQuery("quickFiles", getQuickFilesList);
|
||||
|
||||
return quickFilesQuery;
|
||||
};
|
||||
|
||||
+17
-14
@@ -1,31 +1,34 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
// font-size: 62.5%;
|
||||
// --webkit-touch-callout: default;
|
||||
// font-size: 62.5%;
|
||||
// --webkit-touch-callout: default;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
body {
|
||||
// color: $dark-grey;
|
||||
// font-family: Helvetica, Arial, sans-serif;
|
||||
// font-size: $m-size;
|
||||
// background-color: white;
|
||||
// line-height: 1.6;
|
||||
// color: $dark-grey;
|
||||
// font-family: Helvetica, Arial, sans-serif;
|
||||
// font-size: $m-size;
|
||||
// background-color: white;
|
||||
// line-height: 1.6;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+1116
-1119
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user