Improve dialogs, Add Skip button to Tour

src/js/api/files.js

@@ -133,7 +133,8 @@ export async function copy(file, newPath) {
       if (type(child) === 'File') {
         Object.defineProperty(child, 'path', {
           value: oldPath + '/',
-          enumerable: true
+          enumerable: true,
+          configurable: true
         });
       }
 

src/js/components/dialog.js

@@ -4,7 +4,7 @@ import { template } from 'utils';
 export default class Dialog extends Component {
   render() {
     let { input, title, description, active, value } = this.props;
-    let conditionalInput = input ? <input ref='input' value={value} /> : '';
+    let conditionalInput = input ? <input ref='input' defaultValue={value} /> : '';
 
     let buttons = this.props.buttons.map((button, i) => {
       return (
@@ -20,7 +20,7 @@ export default class Dialog extends Component {
     for (let i = 0; i < buttons.length; i++) {
       if (i % 2 === 0) {
         groupButtons.push(
-          <div className='foot'>
+          <div className='foot' key={i / 2}>
             {buttons[i]}
             {buttons[i+1]}
           </div>

src/js/components/file-list.js

@@ -21,9 +21,9 @@ export default class FileList extends Component {
     let els = files.map((file, index) => {
       let selected = activeFile.indexOf(file) > -1;
       if (type(file) === 'File') {
-        return <File selectView={selectView} selected={selected} key={index} index={index} name={file.name} size={file.size} />;
+        return <File selectView={selectView} selected={selected} key={index} index={index} name={file.name} size={file.size} type={file.type} />;
       } else {
-        return <Directory selectView={selectView} selected={selected} key={index} index={index} name={file.name} children={file.children} />
+        return <Directory selectView={selectView} selected={selected} key={index} index={index} name={file.name} children={file.children} type={file.type} />
       }
     });
 

src/js/components/file.js

@@ -18,8 +18,6 @@ export default class File extends Component {
       label = <label htmlFor={checkId}></label>;
     }
 
-    console.log(this.props.type);
-
     let clickHandler = this.props.selectView ? this.select.bind(this)
                                              : this.open.bind(this);
 
@@ -39,6 +37,8 @@ export default class File extends Component {
   }
 
   open(e) {
+    e.preventDefault();
+    e.stopPropagation();
     let file = store.getState().get('files')[this.props.index];
 
     let name = file.type === 'application/pdf' ? 'view' : 'open';

src/js/components/mixins/entry.js

@@ -8,6 +8,7 @@ const MENU_TOP_SPACE = 20;
 export default {
   contextMenu(e) {
     e.preventDefault();
+    e.stopPropagation();
 
     let file = store.getState().get('files')[this.props.index];
     let rect = React.findDOMNode(this.refs.container).getBoundingClientRect();
@@ -27,7 +28,10 @@ export default {
     store.dispatch(active([file]));
   },
 
-  select() {
+  select(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
     let current = (store.getState().get('activeFile') || []).slice(0);
     let file = store.getState().get('files')[this.props.index];
 

src/js/components/root.js

@@ -55,6 +55,7 @@ export default class Root extends Component {
         <div className='tour-dialog'>
           Hello! Tap each highlighted button to get an understanding of how they work.
         </div>
+        <button id='skip-tour'>Skip</button>
       </div>
     );
   }

src/js/tour.js

@@ -15,30 +15,39 @@ export default function() {
   let tourRan = localStorage.getItem('tourRan');
   let wrapper = document.querySelector('#wrapper');
   let tour = document.querySelector('.tour-dialog');
+  let skip = document.querySelector('#skip-tour');
 
   let timeout;
   let shown = 0;
 
   if (!tourRan) {
+    let listeners = [];
+
     wrapper.classList.add('tour');
 
+    skip.addEventListener('touchstart', () => {
+      wrapper.classList.remove('tour');
+      localStorage.setItem('tourRan', 'true');
+
+      for (let {item, listener} of listeners) {
+        item.removeEventListener('touchstart', listener);
+      }
+    })
+
     let items = [...document.querySelectorAll('.tour-item')].sort((a, b) => {
       return (+a.dataset.index) - (+b.dataset.index);
     });
 
-    let listeners = [];
-
     for (let item of items) {
 
       let firstClass = item.className.slice(0, item.className.indexOf(' '));
-      let ev = firstClass === 'drawer' ? 'touchstart' : 'click';
 
-      item.addEventListener(ev, function listener(e) {
+      item.addEventListener('touchstart', function listener(e) {
         e.preventDefault();
         e.stopPropagation();
 
         clearTimeout(timeout);
-        listeners.push({item, listener, ev});
+        listeners.push({item, listener});
 
         shown++;
 
@@ -49,8 +58,8 @@ export default function() {
             wrapper.classList.remove('tour');
             localStorage.setItem('tourRan', 'true');
 
-            for (let {item, listener, ev} of listeners) {
-              item.removeEventListener(ev, listener);
+            for (let {item, listener} of listeners) {
+              item.removeEventListener('touchstart', listener);
             }
           }
         }, DIALOG_HIDE_DELAY);