diff --git a/src/components/FolderItem/FolderItem.js b/src/components/FolderItem/FolderItem.js index fce7027..e5532bf 100644 --- a/src/components/FolderItem/FolderItem.js +++ b/src/components/FolderItem/FolderItem.js @@ -14,7 +14,10 @@ const FolderItem = (props) => {
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}>
@@ -33,7 +36,10 @@ const FolderItem = (props) => {
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;