oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed more styling for mobile, also fixed the context menu not appearing on iOS for file items, still need to add the fix to folders, and quickitems

Browse Source
This commit is contained in:
subnub
2020-05-09 17:36:45 -04:00
parent ca1e313867
commit d497799c7e
10 changed files with 149 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FileItem/FileItem.js
+8 -3
View File
@@ -37,13 +37,18 @@ const FileItem = (props) => {
<div className="file__item__wrapper"
onClick={() => {props.fileClick(props._id, props)}}
onContextMenu={(e) => props.getContextMenu(e)}>
onContextMenu={(e) => props.getContextMenu(e)}
onTouchStart={props.onTouchStart}
onTouchEnd={props.onTouchEnd}
onTouchMove={props.onTouchMove}>
<div className="file__image__wrapper">
<img className={props.state.imageClassname} src={props.state.imageSrc} onError={() => {props.image.src = "/images/file-svg.svg"; props.image.className="file__image"; props.failedToLoad = true;}}/>
<img className={props.state.imageClassname} src={props.state.imageSrc} onError={() => {props.image.src = "/images/file-svg.svg"; props.image.className="file__image"; props.failedToLoad = true;}}
/>
</div>
<h5 className={props._id !== props.selected ? "file__title" : "file__title file__title--selected"}>{capitalize(props.filename)}</h5>
<h5 className={props._id !== props.selected ? "file__title" : "file__title file__title--selected"}
>{capitalize(props.filename)}</h5>
{(props.rightSelected === props._id && props._id === props.selected) ?
src/components/FileItem/index.js
+68 -24
View File
@@ -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 <FileItem
getWrapperClassname={this.getWrapperClassname}
getContextMenu={this.getContextMenu}
onTouchStart={this.onTouchStart}
onTouchEnd={this.onTouchEnd}
onTouchMove={this.onTouchMove}
state={this.state}
{...this.props}/>
}
src/styles/base/_base.scss
+9 -1
View File
@@ -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 {
src/styles/components/_ContentMenu.scss
+7
View File
@@ -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;
}
}
src/styles/components/_File.scss
+36 -13
View File
@@ -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 {
src/styles/components/_MoverMenu.scss
+1
View File
@@ -15,6 +15,7 @@
@media (max-width: $desktop-breakpoint) {
width: 100%;
height: 100%;
z-index: 2;
}
}
src/styles/components/_QuickAccess.scss
+10 -1
View File
@@ -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;
}
src/styles/components/_Sharemenu.scss
+1
View File
@@ -22,6 +22,7 @@
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}
}
src/styles/components/_Spacer.scss
+6
View File
@@ -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;
}
src/styles/components/_Uploader.scss
+3
View File
@@ -74,6 +74,9 @@
border-bottom: 1px solid #dadce0;
position: relative;
@media (max-width: $desktop-breakpoint) {
min-height: 50px;
}
}
.CircularProgressbar {