props.folderClick(props._id, props.name)}
- onContextMenu={(e) => props.getContextMenu(e)}>
+ onContextMenu={(e) => props.getContextMenu(e)}
+ onTouchStart={props.onTouchStart}
+ onTouchEnd={props.onTouchEnd}
+ onTouchMove={props.onTouchMove}>
{props.name}
diff --git a/src/components/FolderItem/index.js b/src/components/FolderItem/index.js
index 1e82711..ec8bcde 100644
--- a/src/components/FolderItem/index.js
+++ b/src/components/FolderItem/index.js
@@ -8,6 +8,8 @@ class FolderItemContainer extends React.Component {
constructor(props) {
super(props)
+
+ this.lastTouch = 0;
}
shouldComponentUpdate = (nextProp) => {
@@ -19,9 +21,41 @@ class FolderItemContainer extends React.Component {
|| nextProp.quickFilesLength !== this.props.quickFilesLength)
}
+ onTouchStart = () => {
+ //alert("Touch start");
+ const date = new Date();
+ this.lastTouch = date.getTime();
+ }
+
+ onTouchMove = () => {
+
+ this.lastTouch = 0;
+ }
+
+ onTouchEnd = () => {
+
+ if (this.lastTouch === 0) {
+
+ //alert("last touch 0");
+ return;
+ }
+
+ const date = new Date();
+ const difference = date - this.lastTouch;
+ //alert("Touch end: " + difference)
+ //alert("touch end: " + difference);
+ this.lastTouch = 0;
+
+ if (difference > 500) {
+ //alert("Context menu");
+ this.getContextMenu();
+ }
+
+ }
+
getContextMenu = (e) => {
- e.preventDefault();
+ if (e) e.preventDefault();
const isMobile = mobileCheck();
@@ -30,34 +64,36 @@ class FolderItemContainer extends React.Component {
let styleObj = {right:0, left:0, top: "-14px", bottom: 0}
- 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"}
- }
-
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)
@@ -95,6 +131,9 @@ class FolderItemContainer extends React.Component {
return
}
diff --git a/src/styles/components/_Filter.scss b/src/styles/components/_Filter.scss
index 6d19643..5a7b22f 100644
--- a/src/styles/components/_Filter.scss
+++ b/src/styles/components/_Filter.scss
@@ -18,6 +18,12 @@
margin-left: 22px;
font-weight: 500;
font-size: 13px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.filter__folder-title-wrapper {
margin-left: 15px;