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 {