diff --git a/src/components/FileItem/FileItem.js b/src/components/FileItem/FileItem.js index bff1cdc..9ea27c3 100644 --- a/src/components/FileItem/FileItem.js +++ b/src/components/FileItem/FileItem.js @@ -37,13 +37,18 @@ const FileItem = (props) => {
{props.fileClick(props._id, props)}} - onContextMenu={(e) => props.getContextMenu(e)}> + onContextMenu={(e) => props.getContextMenu(e)} + onTouchStart={props.onTouchStart} + onTouchEnd={props.onTouchEnd} + onTouchMove={props.onTouchMove}>
- {props.image.src = "/images/file-svg.svg"; props.image.className="file__image"; props.failedToLoad = true;}}/> + {props.image.src = "/images/file-svg.svg"; props.image.className="file__image"; props.failedToLoad = true;}} + />
-
{capitalize(props.filename)}
+
{capitalize(props.filename)}
{(props.rightSelected === props._id && props._id === props.selected) ? diff --git a/src/components/FileItem/index.js b/src/components/FileItem/index.js index cd1ce06..7b404f0 100644 --- a/src/components/FileItem/index.js +++ b/src/components/FileItem/index.js @@ -15,6 +15,8 @@ class FileItemContainer extends React.Component { this.failedToLoad = false; + this.lastTouch = 0; + this.state = { contextMenuPos: {}, imageSrc: "/images/file-svg.svg", @@ -95,10 +97,42 @@ class FileItemContainer extends React.Component { } } + 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(); const windowX = window.innerWidth; @@ -106,33 +140,40 @@ class FileItemContainer extends React.Component { let styleObj = {right:0, left:0, top: "-38px", bottom: 0} - const clientY = e.nativeEvent.clientY; - const clientX = e.nativeEvent.clientX; - - if (clientY < (windowY / 3)) { - - styleObj = {bottom:"-190px", 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", right: "unset"} + + } else { + + const clientY = e.nativeEvent.clientY; + const clientX = e.nativeEvent.clientX; + + if (clientY < (windowY / 3)) { + + styleObj = {bottom:"-190px", 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", right: "unset"} + // } + this.setState(() => ({...this.state, contextMenuPos: styleObj})) this.props.dispatch(startSetSelectedItem(this.props._id, true, false)) @@ -167,6 +208,9 @@ class FileItemContainer extends React.Component { return } diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss index 3707c06..e0d0ede 100644 --- a/src/styles/base/_base.scss +++ b/src/styles/base/_base.scss @@ -3,7 +3,15 @@ } html { - font-size: 62.5% + font-size: 62.5%; + // --webkit-touch-callout: default; +} + +input[type=text], +input[type=email], +input[type=password], +textarea { + -webkit-appearance: none; } body { diff --git a/src/styles/components/_ContentMenu.scss b/src/styles/components/_ContentMenu.scss index d2ce286..f37a412 100644 --- a/src/styles/components/_ContentMenu.scss +++ b/src/styles/components/_ContentMenu.scss @@ -16,6 +16,13 @@ width: 99%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; } } diff --git a/src/styles/components/_File.scss b/src/styles/components/_File.scss index 292c7d8..1652c4a 100644 --- a/src/styles/components/_File.scss +++ b/src/styles/components/_File.scss @@ -15,18 +15,19 @@ // overflow: hidden; position: relative; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + // -webkit-touch-callout: none; + // -webkit-user-select: none; + // -khtml-user-select: none; + // -moz-user-select: none; + // -ms-user-select: none; + // user-select: none; -webkit-tap-highlight-color: transparent; @media (max-width: $desktop-breakpoint) { flex-basis: 28%; max-width: 30.2%; position: unset; + //-webkit-touch-callout: default; } } @@ -44,6 +45,12 @@ max-width: 23vw; text-align: center; font-weight: 300; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; // text-transform: capitalize; } @@ -65,11 +72,26 @@ flex-direction: column; justify-content: center; overflow: hidden; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + pointer-events: none; } .file__image { width: 100px; opacity: 0.7; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: none; } .file__item__wrapper { @@ -78,15 +100,16 @@ flex-direction: column; align-items: center; justify-content: initial; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: transparent; + // -webkit-touch-callout: none; + // -webkit-user-select: none; + // -khtml-user-select: none; + // -moz-user-select: none; + // -ms-user-select: none; + // user-select: none; + // -webkit-tap-highlight-color: transparent; width: 100%; height: 100%; + cursor: pointer; } .file__item__listview { diff --git a/src/styles/components/_MoverMenu.scss b/src/styles/components/_MoverMenu.scss index 97110e3..b680cf3 100644 --- a/src/styles/components/_MoverMenu.scss +++ b/src/styles/components/_MoverMenu.scss @@ -15,6 +15,7 @@ @media (max-width: $desktop-breakpoint) { width: 100%; height: 100%; + z-index: 2; } } diff --git a/src/styles/components/_QuickAccess.scss b/src/styles/components/_QuickAccess.scss index b9931f5..8f8e506 100644 --- a/src/styles/components/_QuickAccess.scss +++ b/src/styles/components/_QuickAccess.scss @@ -11,6 +11,12 @@ @media (max-width: $desktop-breakpoint) { // margin-top: calc(80px + 3vh); + width: inherit; + height: 153px; + display: flex; + flex-flow: row wrap; + align-items: center; + overflow: hidden; } } @@ -37,7 +43,10 @@ position: relative; @media (max-width: $desktop-breakpoint) { - + min-height: 144px; + height: 148px; + min-width: 46%; + width: 46%; position: unset; } diff --git a/src/styles/components/_Sharemenu.scss b/src/styles/components/_Sharemenu.scss index 499998b..4b7a7ac 100644 --- a/src/styles/components/_Sharemenu.scss +++ b/src/styles/components/_Sharemenu.scss @@ -22,6 +22,7 @@ width: 100%; height: 100%; top: 0; + z-index: 2; } } diff --git a/src/styles/components/_Spacer.scss b/src/styles/components/_Spacer.scss index e9f92ff..57d8802 100644 --- a/src/styles/components/_Spacer.scss +++ b/src/styles/components/_Spacer.scss @@ -16,4 +16,10 @@ font-weight: 500; font-size: 13px; margin-left: 38px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } \ No newline at end of file diff --git a/src/styles/components/_Uploader.scss b/src/styles/components/_Uploader.scss index f166de7..4949335 100644 --- a/src/styles/components/_Uploader.scss +++ b/src/styles/components/_Uploader.scss @@ -74,6 +74,9 @@ border-bottom: 1px solid #dadce0; position: relative; + @media (max-width: $desktop-breakpoint) { + min-height: 50px; + } } .CircularProgressbar {