Fix long-tapping on items in directories with a lot of items emitting open action on item

Try to reduce the time between selecting files and visual feedback

src/js/components/directory.js

@@ -14,7 +14,7 @@ export default class Directory extends Component {
 
     let input, label;
     if (this.props.selectView) {
-      input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly />;
+      input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly ref='check' />;
       label = <label htmlFor={checkId}></label>;
     }
 
@@ -37,6 +37,8 @@ export default class Directory extends Component {
   }
 
   peek() {
+    if (document.querySelector('#file-menu.active')) return;
+
     let file = store.getState().get('files')[this.props.index];
 
     store.dispatch(changedir(file.path.replace(/^\//, '') + file.name));

src/js/components/file.js

@@ -14,7 +14,7 @@ export default class File extends Component {
 
     let input, label;
     if (this.props.selectView) {
-      input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly />;
+      input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly ref='check' />;
       label = <label htmlFor={checkId}></label>;
     }
 
@@ -37,8 +37,8 @@ export default class File extends Component {
   }
 
   open(e) {
-    e.preventDefault();
-    e.stopPropagation();
+    if (document.querySelector('#file-menu.active')) return;
+
     let file = store.getState().get('files')[this.props.index];
 
     let name = file.type === 'application/pdf' ? 'view' : 'open';

src/js/components/mixins/entry.js

@@ -17,7 +17,7 @@ export default {
     let left = window.innerWidth / 2 - MENU_WIDTH / 2,
         top  = y + height / 2 + MENU_TOP_SPACE;
 
-    let dialogHeight = document.getElementById('fileMenu').offsetHeight;
+    let dialogHeight = document.getElementById('file-menu').offsetHeight;
 
     let diff = window.innerHeight - (dialogHeight + top);
     if (diff <= 0) {
@@ -29,16 +29,19 @@ export default {
   },
 
   select(e) {
-    e.preventDefault();
-    e.stopPropagation();
+    if (document.querySelector('#file-menu.active')) return;
 
     let current = (store.getState().get('activeFile') || []).slice(0);
     let file = store.getState().get('files')[this.props.index];
 
+    let check = React.findDOMNode(this.refs.check);
+
     if (current.indexOf(file) > -1) {
       current.splice(current.indexOf(file), 1);
+      check.checked = false;
     } else {
       current.push(file)
+      check.checked = true;
     }
     store.dispatch(active(current));
   }

src/js/components/root.js

@@ -39,8 +39,8 @@ export default class Root extends Component {
         <FileList />
         <Toolbar />
 
-        <FileMenu id='fileMenu' />
-        <MoreMenu id='moreMenu' />
+        <FileMenu id='file-menu' />
+        <MoreMenu id='more-menu' />
 
         <RenameDialog />
         <DeleteDialog />

src/js/utils.js

@@ -39,14 +39,14 @@ const sizes = {
   'GB': Math.pow(2, 30),
   'MB': Math.pow(2, 20),
   'KB': Math.pow(2, 10),
-  'B': 0
+  'B': -1
 }
 export function humanSize(size) {
   for (let key in sizes) {
     let value = sizes[key];
 
     if (size >= value) {
-      return Math.round(size / value) + key;
+      return Math.abs(Math.round(size / value)) + key;
     }
   }
 }