feat files: Show File Size and Directory's sub items count

fix styles: make thin-small 15px instead of 14px (was too small)

src/js/api/files.js

@@ -26,9 +26,26 @@ export async function getFile(dir = '/') {
   return await parent.get(dir);
 }
 
-export async function children(dir) {
+export async function children(dir, gatherInfo) {
   let parent = await getFile(dir);
-  return await parent.getFilesAndDirectories();
+  let childs = await parent.getFilesAndDirectories();
+
+  if (gatherInfo) {
+    for (let child of childs) {
+      if (type(child) !== 'Directory') continue;
+
+      let subchildren;
+      try {
+        subchildren = await child.getFilesAndDirectories();
+      } catch(e) {
+        subchildren = [];
+      }
+
+      child.children = subchildren.length;
+    }
+  }
+
+  return childs;
 }
 
 export async function readFile(path) {

src/js/components/directory.js

@@ -15,6 +15,7 @@ export default class Directory extends Component {
            onContextMenu={this.contextMenu.bind(this)}>
         <i></i>
         <p>{this.props.name}</p>
+        <span>{this.props.children} items</span>
       </div>
     );
   }

src/js/components/file-list.js

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

src/js/components/file.js

@@ -3,6 +3,7 @@ import { show } from 'actions/menu';
 import { active } from 'actions/file';
 import { MENU_WIDTH } from './menu';
 import store from 'store';
+import { humanSize } from 'utils';
 
 const MENU_TOP_SPACE = 20;
 
@@ -17,6 +18,7 @@ export default class File extends Component {
            onContextMenu={this.contextMenu.bind(this)}>
         <i></i>
         <p>{this.props.name}</p>
+        <span>{humanSize(this.props.size)}</span>
       </div>
     );
   }

src/js/reducers/cwd.js

@@ -2,21 +2,26 @@ import { CHANGE_DIRECTORY, REFRESH, SETTINGS } from 'actions/types';
 import listFiles from 'actions/list-files';
 import { children } from 'api/files';
 import store from 'store';
+import { reportError } from 'utils';
 
 export default function(state = '', action) {
   if (action.type === CHANGE_DIRECTORY) {
-    children(action.dir).then(files => {
-      store.dispatch(listFiles(files));
-    });
+    changeTo(action.dir);
+
     return action.dir;
   }
 
   if (action.type === REFRESH || action.type === SETTINGS) {
-    children(state).then(files => {
-      store.dispatch(listFiles(files));
-    });
+    changeTo(state);
+
     return state;
   }
 
   return state;
 }
+
+function changeTo(dir) {
+  children(dir, true).then(files => {
+    store.dispatch(listFiles(files));
+  }, reportError);
+}

src/js/utils.js

@@ -29,3 +29,21 @@ export function reportError(err) {
   let action = show('errorDialog', {description: err.message});
   store.dispatch(action);
 }
+
+const sizes = {
+  'GB': Math.pow(2, 30),
+  'MB': Math.pow(2, 20),
+  'KB': Math.pow(2, 10),
+  'B': -1
+}
+export function humanSize(size) {
+  console.log(size);
+  for (let key in sizes) {
+    let value = sizes[key];
+
+    console.log(value);
+    if (size > value) {
+      return Math.round(size / value) + key;
+    }
+  }
+}

src/less/components/entries.less

@@ -12,6 +12,14 @@
 
   border-bottom: 1px solid @dark-separator;
 
+  p {
+    flex: 1 1;
+  }
+
+  > span {
+    .thin-small;
+  }
+
   i {
     margin-right: 1.4rem;
   }

src/less/styles/texts.less

@@ -27,5 +27,5 @@
 }
 
 .thin-small {
-  font-size: 1.4rem;
+  font-size: 1.5rem;
 }