fixed and improved context menu, removed more SCSS, added expand and improved quick access items
This commit is contained in:
subnub
@@ -219,8 +219,9 @@ class FileController {
|
||||
|
||||
try {
|
||||
const user = req.user;
|
||||
const limit = req.query.limit?.toString();
|
||||
|
||||
const quickList = await fileService.getQuickList(user);
|
||||
const quickList = await fileService.getQuickList(user, limit);
|
||||
|
||||
res.send(quickList);
|
||||
} catch (e: unknown) {
|
||||
|
||||
@@ -82,18 +82,14 @@ class DbUtil {
|
||||
return file;
|
||||
};
|
||||
|
||||
getQuickList = async (userID: string, s3Enabled: boolean) => {
|
||||
getQuickList = async (userID: string, limit: number) => {
|
||||
let query: any = { "metadata.owner": userID };
|
||||
|
||||
if (!s3Enabled) {
|
||||
query = { ...query, "metadata.personalFile": null };
|
||||
}
|
||||
|
||||
const fileList = (await conn.db
|
||||
.collection("fs.files")
|
||||
.find(query)
|
||||
.sort({ uploadDate: -1 })
|
||||
.limit(10)
|
||||
.limit(limit)
|
||||
.toArray()) as FileInterface[];
|
||||
|
||||
return fileList;
|
||||
|
||||
@@ -102,14 +102,13 @@ class MongoFileService {
|
||||
return { ...currentFile, parentName };
|
||||
};
|
||||
|
||||
getQuickList = async (user: userAccessType | UserInterface) => {
|
||||
getQuickList = async (
|
||||
user: userAccessType | UserInterface,
|
||||
limit: number | string = 12
|
||||
) => {
|
||||
const userID = user._id;
|
||||
const s3Enabled = user.s3Enabled ? true : false;
|
||||
|
||||
const quickList = await dbUtilsFile.getQuickList(
|
||||
userID.toString(),
|
||||
s3Enabled
|
||||
);
|
||||
const quickList = await dbUtilsFile.getQuickList(userID.toString(), +limit);
|
||||
|
||||
if (!quickList) throw new NotFoundError("Quick List Not Found Error");
|
||||
|
||||
|
||||
+5
-1
@@ -40,6 +40,10 @@ export const getFilesList = async ({
|
||||
};
|
||||
|
||||
export const getQuickFilesList = async () => {
|
||||
const response = await axios.get(`/file-service/quick-list`);
|
||||
const response = await axios.get(`/file-service/quick-list`, {
|
||||
params: {
|
||||
limit: 12,
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
};
|
||||
|
||||
@@ -142,15 +142,19 @@ const DataForm = (props) => {
|
||||
|
||||
{!props.listView ? (
|
||||
<div className="main__access">
|
||||
{files?.pages.map((file) => (
|
||||
<FileItem
|
||||
{...file}
|
||||
key={file._id}
|
||||
itemSelected={file._id === props.selected}
|
||||
downloadFile={props.downloadFile}
|
||||
removeFile={props.removeFile}
|
||||
fileClick={props.fileClick}
|
||||
/>
|
||||
{files?.pages.map((filePage, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{filePage.map((file) => (
|
||||
<FileItem
|
||||
{...file}
|
||||
key={file._id}
|
||||
itemSelected={file._id === props.selected}
|
||||
downloadFile={props.downloadFile}
|
||||
removeFile={props.removeFile}
|
||||
fileClick={props.fileClick}
|
||||
/>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
+229
-226
@@ -1,7 +1,11 @@
|
||||
import FolderItem from "./FolderItem"
|
||||
import {startSetSelectedItem, setRightSelected, setLastSelected} from "../../actions/selectedItem"
|
||||
import mobileCheck from "../../utils/mobileCheck"
|
||||
import {connect} from "react-redux";
|
||||
import FolderItem from "./FolderItem";
|
||||
import {
|
||||
startSetSelectedItem,
|
||||
setRightSelected,
|
||||
setLastSelected,
|
||||
} from "../../actions/selectedItem";
|
||||
import mobileCheck from "../../utils/mobileCheck";
|
||||
import { connect } from "react-redux";
|
||||
import React from "react";
|
||||
import { startRenameFolder, startRemoveFolder } from "../../actions/folders";
|
||||
import Swal from "sweetalert2";
|
||||
@@ -10,240 +14,239 @@ import mobilecheck from "../../utils/mobileCheck";
|
||||
import { setMobileContextMenu } from "../../actions/mobileContextMenu";
|
||||
|
||||
class FolderItemContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.lastTouch = 0;
|
||||
|
||||
this.lastTouch = 0;
|
||||
this.state = {
|
||||
contextSelected: false,
|
||||
};
|
||||
}
|
||||
|
||||
this.state = {
|
||||
contextSelected: false
|
||||
shouldComponentUpdate = (nextProp, nextState) => {
|
||||
return (
|
||||
nextProp.itemSelected !== this.props.itemSelected ||
|
||||
nextProp.listView !== this.props.listView ||
|
||||
nextProp.rightSelected !== this.props.rightSelected ||
|
||||
nextProp.name !== this.props.name ||
|
||||
nextProp.quickFilesLength !== this.props.quickFilesLength ||
|
||||
nextState.contextSelected !== this.state.contextSelected
|
||||
);
|
||||
};
|
||||
|
||||
onTouchStart = () => {
|
||||
const date = new Date();
|
||||
this.lastTouch = date.getTime();
|
||||
};
|
||||
|
||||
onTouchMove = () => {
|
||||
this.lastTouch = 0;
|
||||
};
|
||||
|
||||
onTouchEnd = () => {
|
||||
if (this.lastTouch === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
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: "-14px", bottom: 0 };
|
||||
|
||||
if (isMobile) {
|
||||
styleObj = { bottom: 0, left: "2px", top: "unset" };
|
||||
} else {
|
||||
const clientY = e.nativeEvent.clientY;
|
||||
const clientX = e.nativeEvent.clientX;
|
||||
|
||||
if (clientY < windowY / 3) {
|
||||
const bottomSize =
|
||||
this.props.quickFilesLength === 0 ? "-126px" : "-190px";
|
||||
|
||||
styleObj = { bottom: bottomSize, top: "unset" };
|
||||
}
|
||||
|
||||
if (clientY > (windowY / 4) * 3.5) {
|
||||
styleObj = { bottom: "unset", top: "-190px" };
|
||||
}
|
||||
|
||||
if (clientX > windowX / 2) {
|
||||
styleObj = { ...styleObj, left: "unset", right: 0 };
|
||||
} else {
|
||||
styleObj = { ...styleObj, left: 0, right: "unset" };
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(() => styleObj);
|
||||
|
||||
this.props.dispatch(startSetSelectedItem(this.props._id, false));
|
||||
this.props.dispatch(setLastSelected(0));
|
||||
this.props.dispatch(setRightSelected(this.props._id));
|
||||
};
|
||||
|
||||
getClassName = () => {
|
||||
let classname = "";
|
||||
|
||||
if (this.props.listView) {
|
||||
classname += "file__item__listview";
|
||||
} else {
|
||||
classname += "folder__item__wrapper";
|
||||
}
|
||||
|
||||
if (this.props._id === this.props.selected) {
|
||||
classname += " file__item--selected";
|
||||
}
|
||||
|
||||
return classname;
|
||||
};
|
||||
|
||||
changeEditNameMode = async () => {
|
||||
let inputValue = this.props.name;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
shouldComponentUpdate = (nextProp, nextState) => {
|
||||
this.props.dispatch(
|
||||
startRenameFolder(
|
||||
this.props._id,
|
||||
folderName,
|
||||
this.props.drive,
|
||||
this.props.parent
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (nextProp.itemSelected !== this.props.itemSelected
|
||||
|| nextProp.listView !== this.props.listView
|
||||
|| nextProp.rightSelected !== this.props.rightSelected
|
||||
|| nextProp.name !== this.props.name
|
||||
|| nextProp.quickFilesLength !== this.props.quickFilesLength
|
||||
|| nextState.contextSelected !== this.state.contextSelected)
|
||||
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(
|
||||
startRemoveFolder(
|
||||
this.props._id,
|
||||
[...this.props.parentList, this.props._id],
|
||||
this.props.drive,
|
||||
this.props.parent,
|
||||
this.props.personalFolder
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
closeContext = () => {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: false,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
selectContext = (e) => {
|
||||
if (e) e.stopPropagation();
|
||||
if (e) e.preventDefault();
|
||||
|
||||
if (mobilecheck()) {
|
||||
this.props.dispatch(setMobileContextMenu(false, this.props));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
onTouchStart = () => {
|
||||
const date = new Date();
|
||||
this.lastTouch = date.getTime();
|
||||
}
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: {
|
||||
width: e.clientX,
|
||||
height: e.clientY,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
onTouchMove = () => {
|
||||
|
||||
this.lastTouch = 0;
|
||||
}
|
||||
|
||||
onTouchEnd = () => {
|
||||
|
||||
if (this.lastTouch === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
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: "-14px", bottom: 0}
|
||||
|
||||
if (isMobile) {
|
||||
|
||||
styleObj = {bottom: 0, left: "2px", top:"unset"}
|
||||
|
||||
} else {
|
||||
|
||||
const clientY = e.nativeEvent.clientY;
|
||||
const clientX = e.nativeEvent.clientX;
|
||||
|
||||
|
||||
if (clientY < (windowY / 3)) {
|
||||
|
||||
const bottomSize = this.props.quickFilesLength === 0 ? "-126px" : "-190px"
|
||||
|
||||
styleObj = {bottom: bottomSize, top:"unset"}
|
||||
}
|
||||
|
||||
if (clientY > ((windowY / 4) * 3.5)) {
|
||||
|
||||
styleObj = {bottom:"unset", top: "-190px"}
|
||||
}
|
||||
|
||||
if (clientX > windowX / 2) {
|
||||
|
||||
styleObj = {...styleObj, left:"unset", right:0}
|
||||
|
||||
} else {
|
||||
|
||||
styleObj = {...styleObj, left:0, right:"unset"}
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(() => styleObj)
|
||||
|
||||
this.props.dispatch(startSetSelectedItem(this.props._id, false))
|
||||
this.props.dispatch(setLastSelected(0));
|
||||
this.props.dispatch(setRightSelected(this.props._id))
|
||||
|
||||
}
|
||||
|
||||
getClassName = () => {
|
||||
|
||||
let classname = "";
|
||||
|
||||
if (this.props.listView) {
|
||||
|
||||
classname += "file__item__listview"
|
||||
|
||||
} else {
|
||||
|
||||
classname += "folder__item__wrapper"
|
||||
}
|
||||
|
||||
if (this.props._id === this.props.selected) {
|
||||
|
||||
classname += " file__item--selected"
|
||||
}
|
||||
|
||||
return classname;
|
||||
}
|
||||
|
||||
changeEditNameMode = async() => {
|
||||
|
||||
let inputValue = this.props.name;
|
||||
|
||||
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(startRenameFolder(this.props._id, folderName, this.props.drive, this.props.parent));
|
||||
}
|
||||
|
||||
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(startRemoveFolder(this.props._id, [...this.props.parentList, this.props._id], this.props.drive, this.props.parent, this.props.personalFolder))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
closeContext = () => {
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
selectContext = (e) => {
|
||||
|
||||
if (e) e.stopPropagation()
|
||||
if (e) e.preventDefault();
|
||||
|
||||
if (mobilecheck()) {
|
||||
|
||||
this.props.dispatch(setMobileContextMenu(false, this.props))
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: !this.state.contextSelected
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
startMoveFolder = async() => {
|
||||
|
||||
this.props.dispatch(setMoverID(this.props._id, this.props.parent, false, this.props.drive, this.props.personalFolder));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return <FolderItem
|
||||
getContextMenu={this.getContextMenu}
|
||||
getClassName={this.getClassName}
|
||||
onTouchStart={this.onTouchStart}
|
||||
onTouchMove={this.onTouchMove}
|
||||
onTouchEnd={this.onTouchEnd}
|
||||
closeContext={this.closeContext}
|
||||
selectContext={this.selectContext}
|
||||
changeEditNameMode={this.changeEditNameMode}
|
||||
closeEditNameMode={this.closeEditNameMode}
|
||||
startMoveFolder={this.startMoveFolder}
|
||||
changeDeleteMode={this.changeDeleteMode}
|
||||
state={this.state}
|
||||
{...this.props}/>
|
||||
}
|
||||
startMoveFolder = async () => {
|
||||
this.props.dispatch(
|
||||
setMoverID(
|
||||
this.props._id,
|
||||
this.props.parent,
|
||||
false,
|
||||
this.props.drive,
|
||||
this.props.personalFolder
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FolderItem
|
||||
getContextMenu={this.getContextMenu}
|
||||
getClassName={this.getClassName}
|
||||
onTouchStart={this.onTouchStart}
|
||||
onTouchMove={this.onTouchMove}
|
||||
onTouchEnd={this.onTouchEnd}
|
||||
closeContext={this.closeContext}
|
||||
selectContext={this.selectContext}
|
||||
changeEditNameMode={this.changeEditNameMode}
|
||||
closeEditNameMode={this.closeEditNameMode}
|
||||
startMoveFolder={this.startMoveFolder}
|
||||
changeDeleteMode={this.changeDeleteMode}
|
||||
state={this.state}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connectPropToState = (state) => ({
|
||||
listView: state.filter.listView,
|
||||
rightSelected: state.selectedItem.rightSelected,
|
||||
resetSelected: state.selectedItem.resetSelected,
|
||||
selected: state.selectedItem.selected,
|
||||
quickFilesLength: state.quickFiles.length
|
||||
})
|
||||
listView: state.filter.listView,
|
||||
rightSelected: state.selectedItem.rightSelected,
|
||||
resetSelected: state.selectedItem.resetSelected,
|
||||
selected: state.selectedItem.selected,
|
||||
quickFilesLength: state.quickFiles.length,
|
||||
});
|
||||
|
||||
export default connect(connectPropToState)(FolderItemContainer);
|
||||
export default connect(connectPropToState)(FolderItemContainer);
|
||||
|
||||
@@ -1,25 +1,91 @@
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
|
||||
class NewContextMenu extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
// settings__folder__margin
|
||||
<div onClick={this.props.stopPropagation} ref={this.props.wrapperRef} class={(this.props.parent === "/" || this.props.parent === undefined) ? "settings__drop" : "settings__drop"} style={this.props.contextSelected ? this.props.quickItemMode ? {display:"block", marginTop: '138px'} : {display:"block"} : {display:"none"}}>
|
||||
<ul>
|
||||
<li><a onClick={this.props.startRenameFile} class="rename__file"><span><img src="/assets/filesetting1.svg" alt="setting"/></span> Rename</a></li>
|
||||
{!this.props.folderMode ? <li><a onClick={this.props.startShareFile} class="modal__button" data-modal="share__modal"><span><img src="/assets/filesetting2.svg" alt="setting"/></span> Share</a></li> : undefined}
|
||||
{!this.props.folderMode ? <li><a onClick={this.props.startFileDownload}><span><img src="/assets/filesetting3.svg" alt="setting"/></span> Download</a></li> : undefined}
|
||||
<li><a onClick={this.props.startMovingFile} class="modal__button" data-modal="destination__modal"><span><img src="/assets/filesetting4.svg" alt="setting"/></span> Move</a></li>
|
||||
<li><a onClick={this.props.startDeleteFile} class="delete__file"><span><img src="/assets/filesetting5.svg" alt="setting"/></span> Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
// settings__folder__margin
|
||||
<div
|
||||
onClick={this.props.stopPropagation}
|
||||
ref={this.props.wrapperRef}
|
||||
className={classNames(
|
||||
"fixed min-w-[215px] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.15),_inset_0px_1px_0px_#f5f7fa] rounded-[4px] mt-[-5px] z-[2] animate-very-long",
|
||||
this.props.contextSelected ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
style={
|
||||
this.props.contextSelected
|
||||
? {
|
||||
display: "block",
|
||||
left: `${this.props.contextSelected.width}px`,
|
||||
top: `${this.props.contextSelected.height}px`,
|
||||
}
|
||||
: { display: "none" }
|
||||
}
|
||||
>
|
||||
<ul className="p-0 list-none m-0 ">
|
||||
<li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
|
||||
<a onClick={this.props.startRenameFile} className="flex">
|
||||
<span className="inline-flex mr-[18px]">
|
||||
<img src="/assets/filesetting1.svg" alt="setting" />
|
||||
</span>
|
||||
Rename
|
||||
</a>
|
||||
</li>
|
||||
{!this.props.folderMode ? (
|
||||
<li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
|
||||
<a
|
||||
onClick={this.props.startShareFile}
|
||||
className="flex"
|
||||
data-modal="share__modal"
|
||||
>
|
||||
<span
|
||||
className="inline-flex mr-[18px]
|
||||
"
|
||||
>
|
||||
<img src="/assets/filesetting2.svg" alt="setting" />
|
||||
</span>
|
||||
Share
|
||||
</a>
|
||||
</li>
|
||||
) : undefined}
|
||||
{!this.props.folderMode ? (
|
||||
<li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
|
||||
<a onClick={this.props.startFileDownload} className="flex">
|
||||
<span className="inline-flex mr-[18px]">
|
||||
<img src="/assets/filesetting3.svg" alt="setting" />
|
||||
</span>
|
||||
Download
|
||||
</a>
|
||||
</li>
|
||||
) : undefined}
|
||||
<li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
|
||||
<a
|
||||
onClick={this.props.startMovingFile}
|
||||
className="flex"
|
||||
data-modal="destination__modal"
|
||||
>
|
||||
<span className="inline-flex mr-[18px]">
|
||||
<img src="/assets/filesetting4.svg" alt="setting" />
|
||||
</span>{" "}
|
||||
Move
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
|
||||
<a onClick={this.props.startDeleteFile} className="flex">
|
||||
<span className="inline-flex mr-[18px]">
|
||||
<img src="/assets/filesetting5.svg" alt="setting" />
|
||||
</span>
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NewContextMenu;
|
||||
export default NewContextMenu;
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { useSelector } from "react-redux";
|
||||
import QuickAccessItem from "../QuickAccessItem";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useQuickFiles } from "../../hooks/files";
|
||||
import classNames from "classnames";
|
||||
|
||||
const QuickAccess = (props) => {
|
||||
const { data: quickfilesList } = useQuickFiles();
|
||||
const currentRouteType = useSelector((state) => state.main.currentRouteType);
|
||||
const [quickAccessExpanded, setQuickAccessExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -14,14 +16,32 @@ const QuickAccess = (props) => {
|
||||
currentRouteType === "home" ? { display: "block" } : { display: "none" }
|
||||
}
|
||||
>
|
||||
<div className="head__access">
|
||||
<h2 className="m-0 mb-[20px] text-[#212b36] text-[22px] font-medium">
|
||||
<div className="flex flex-row items-center justify-between mb-4">
|
||||
<h2 className=" text-[#212b36] text-[22px] font-medium">
|
||||
Quick Access
|
||||
</h2>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="35"
|
||||
height="35"
|
||||
onClick={() => setQuickAccessExpanded(!quickAccessExpanded)}
|
||||
className={classNames("cursor-pointer animate", {
|
||||
"rotate-180": quickAccessExpanded,
|
||||
})}
|
||||
>
|
||||
<path
|
||||
d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
|
||||
fill="#3c85ee"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="grid gap-5 h-40"
|
||||
className={classNames("grid gap-5 animate", {
|
||||
"max-h-40": !quickAccessExpanded,
|
||||
"max-h-[740px]": quickAccessExpanded,
|
||||
})}
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(185px, 185px))",
|
||||
|
||||
@@ -71,8 +71,11 @@ const QuickAccessItem = (props) => {
|
||||
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 }
|
||||
"border rounded-md o transition-all duration-400 ease-in-out cursor-pointer w-48 flex items-center justify-center flex-col h-[150px] animiate hover:border-[#3c85ee] overflow-hidden",
|
||||
{
|
||||
"border-[#3c85ee]": elementSelected,
|
||||
"border-[#ebe9f9]": !elementSelected,
|
||||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
props.fileClick(props._id, props, true);
|
||||
@@ -134,28 +137,22 @@ const QuickAccessItem = (props) => {
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
"p-3 overflow-hidden text-ellipsis block w-full",
|
||||
{
|
||||
"bg-[#3c85ee]": elementSelected,
|
||||
}
|
||||
"p-3 overflow-hidden text-ellipsis block w-full animate",
|
||||
elementSelected ? "bg-[#3c85ee]" : "bg-white"
|
||||
)}
|
||||
>
|
||||
<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,
|
||||
}
|
||||
"m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
|
||||
elementSelected ? "text-white" : "text-[#212b36]"
|
||||
)}
|
||||
>
|
||||
{capitalize(props.filename)}
|
||||
</p>
|
||||
<span
|
||||
className={classNames(
|
||||
"m-0 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs",
|
||||
{
|
||||
"text-white": elementSelected,
|
||||
}
|
||||
"m-0 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate",
|
||||
elementSelected ? "text-white" : "text-[#637381]"
|
||||
)}
|
||||
>
|
||||
Created {moment(props.uploadDate).calendar()}
|
||||
|
||||
@@ -63,7 +63,10 @@ class QuickAccessItemContainer extends React.Component {
|
||||
this.setState(() => {
|
||||
return {
|
||||
...this.state,
|
||||
contextSelected: !this.state.contextSelected,
|
||||
contextSelected: {
|
||||
width: e.clientX,
|
||||
height: e.clientY,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
@@ -802,16 +802,11 @@
|
||||
& .settings__drop {
|
||||
display: none;
|
||||
position: absolute;
|
||||
// left:-60%;
|
||||
// right:50%;
|
||||
//bottom:auto;
|
||||
min-width: 215px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px #f5f7fa;
|
||||
border-radius: 4px;
|
||||
//top: -100%;
|
||||
margin-top: -5px;
|
||||
transform: translate(0%, -80%);
|
||||
z-index: 2;
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// transform: translate(-6%,-80%) !important;
|
||||
|
||||
@@ -40,3 +40,15 @@
|
||||
@import "./components/main.scss";
|
||||
@import "./components/settings.scss";
|
||||
@import "./components/MobileContextMenu";
|
||||
|
||||
.animate {
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
|
||||
.animate-medium {
|
||||
transition: 0.6s ease all;
|
||||
}
|
||||
|
||||
.animate-very-long {
|
||||
transition: 6s ease all;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user