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

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

README.md

@@ -15,8 +15,8 @@ Please read the Features section below and issues to make sure your issue is not
 - [x] Show / Hide hidden files
 - [x] Show directories first
 - [x] Create new files and directories
-- [ ] File Size
-- [ ] Directory Child Count
+- [x] File Size
+- [x] Directory Child Count
 - [ ] File Preview
 - [ ] Filter Files
 - [ ] Different views (List, Icons, etc)

build/main.js

@@ -22462,9 +22462,47 @@ var getFile = _asyncToGenerator(function* () {
 
 exports.getFile = getFile;
 
-var children = _asyncToGenerator(function* (dir) {
+var children = _asyncToGenerator(function* (dir, gatherInfo) {
   var parent = yield getFile(dir);
-  return yield parent.getFilesAndDirectories();
+  var childs = yield parent.getFilesAndDirectories();
+
+  if (gatherInfo) {
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+      for (var _iterator = childs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var child = _step.value;
+
+        if ((0, _utils.type)(child) !== 'Directory') continue;
+
+        var subchildren = undefined;
+        try {
+          subchildren = yield child.getFilesAndDirectories();
+        } catch (e) {
+          subchildren = [];
+        }
+
+        child.children = subchildren.length;
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator['return']) {
+          _iterator['return']();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+  }
+
+  return childs;
 });
 
 exports.children = children;
@@ -22515,13 +22553,13 @@ var move = _asyncToGenerator(function* (file, newPath) {
     yield parent.createDirectory(newPath);
     var childs = yield target.getFilesAndDirectories();
 
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
+    var _iteratorNormalCompletion2 = true;
+    var _didIteratorError2 = false;
+    var _iteratorError2 = undefined;
 
     try {
-      for (var _iterator = childs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var child = _step.value;
+      for (var _iterator2 = childs[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+        var child = _step2.value;
 
         if ((0, _utils.type)(child) === 'File') {
           child.path = oldPath + '/';
@@ -22530,16 +22568,16 @@ var move = _asyncToGenerator(function* (file, newPath) {
         yield move(child, newPath + '/' + child.name);
       }
     } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
+      _didIteratorError2 = true;
+      _iteratorError2 = err;
     } finally {
       try {
-        if (!_iteratorNormalCompletion && _iterator['return']) {
-          _iterator['return']();
+        if (!_iteratorNormalCompletion2 && _iterator2['return']) {
+          _iterator2['return']();
         }
       } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
+        if (_didIteratorError2) {
+          throw _iteratorError2;
         }
       }
     }
@@ -22837,6 +22875,12 @@ var Directory = (function (_Component) {
           'p',
           null,
           this.props.name
+        ),
+        _react2['default'].createElement(
+          'span',
+          null,
+          this.props.children,
+          ' items'
         )
       );
     }
@@ -22949,9 +22993,9 @@ var FileList = (function (_Component) {
 
       var els = files.map(function (file, index) {
         if ((0, _utils.type)(file) === 'File') {
-          return _react2['default'].createElement(_file2['default'], { key: index, index: index, name: file.name });
+          return _react2['default'].createElement(_file2['default'], { key: index, index: index, name: file.name, size: file.size });
         } else {
-          return _react2['default'].createElement(_directory2['default'], { key: index, index: index, name: file.name });
+          return _react2['default'].createElement(_directory2['default'], { key: index, index: index, name: file.name, children: file.children });
         }
       });
 
@@ -23009,6 +23053,8 @@ var _store = require('store');
 
 var _store2 = _interopRequireDefault(_store);
 
+var _utils = require('utils');
+
 var MENU_TOP_SPACE = 20;
 
 var File = (function (_Component) {
@@ -23032,6 +23078,11 @@ var File = (function (_Component) {
           'p',
           null,
           this.props.name
+        ),
+        _react2['default'].createElement(
+          'span',
+          null,
+          (0, _utils.humanSize)(this.props.size)
         )
       );
     }
@@ -23059,7 +23110,7 @@ var File = (function (_Component) {
 exports['default'] = File;
 module.exports = exports['default'];
 
-},{"./menu":231,"actions/file":217,"actions/menu":220,"react":205,"store":"store"}],230:[function(require,module,exports){
+},{"./menu":231,"actions/file":217,"actions/menu":220,"react":205,"store":"store","utils":"utils"}],230:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {
@@ -23838,29 +23889,34 @@ var _store = require('store');
 
 var _store2 = _interopRequireDefault(_store);
 
+var _utils = require('utils');
+
 exports['default'] = function (state, action) {
   if (state === undefined) state = '';
 
   if (action.type === _actionsTypes.CHANGE_DIRECTORY) {
-    (0, _apiFiles.children)(action.dir).then(function (files) {
-      _store2['default'].dispatch((0, _actionsListFiles2['default'])(files));
-    });
+    changeTo(action.dir);
+
     return action.dir;
   }
 
   if (action.type === _actionsTypes.REFRESH || action.type === _actionsTypes.SETTINGS) {
-    (0, _apiFiles.children)(state).then(function (files) {
-      _store2['default'].dispatch((0, _actionsListFiles2['default'])(files));
-    });
+    changeTo(state);
+
     return state;
   }
 
   return state;
 };
 
+function changeTo(dir) {
+  (0, _apiFiles.children)(dir, true).then(function (files) {
+    _store2['default'].dispatch((0, _actionsListFiles2['default'])(files));
+  }, _utils.reportError);
+}
 module.exports = exports['default'];
 
-},{"actions/list-files":219,"actions/types":223,"api/files":224,"store":"store"}],241:[function(require,module,exports){
+},{"actions/list-files":219,"actions/types":223,"api/files":224,"store":"store","utils":"utils"}],241:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {
@@ -29063,6 +29119,7 @@ exports.type = type;
 exports.template = template;
 exports.getKey = getKey;
 exports.reportError = reportError;
+exports.humanSize = humanSize;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -29103,4 +29160,23 @@ function reportError(err) {
   _store2['default'].dispatch(action);
 }
 
+var sizes = {
+  'GB': Math.pow(2, 30),
+  'MB': Math.pow(2, 20),
+  'KB': Math.pow(2, 10),
+  'B': -1
+};
+
+function humanSize(size) {
+  console.log(size);
+  for (var key in sizes) {
+    var value = sizes[key];
+
+    console.log(value);
+    if (size > value) {
+      return Math.round(size / value) + key;
+    }
+  }
+}
+
 },{"actions/dialog":216,"store":"store"}]},{},[215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,"store","utils"]);

build/style.css

@@ -67,7 +67,7 @@
   font-weight: 100;
 }
 .thin-small {
-  font-size: 1.4rem;
+  font-size: 1.5rem;
 }
 .shadow-16 {
   box-shadow: 0 15px 24px 6px rgba(0, 0, 0, 0.2);
@@ -133,6 +133,15 @@ input[type="checkbox"]::before:checked {
   box-sizing: border-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+.file p,
+.directory p {
+  flex: 1 1;
+}
+.file > span,
+.directory > span {
+  font-weight: 100;
+  font-size: 1.5rem;
+}
 .file i,
 .directory i {
   margin-right: 1.4rem;

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;
 }