From 1a2d6209f9f0dba76c49cbd1d7ed3fe049d86375 Mon Sep 17 00:00:00 2001 From: Mahdi Dibaiee Date: Fri, 4 Sep 2015 15:32:03 +0430 Subject: [PATCH] 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 | 4 +- build/main.js | 122 +++++++++++++++++++++++++------ build/style.css | 11 ++- src/js/api/files.js | 21 +++++- src/js/components/directory.js | 1 + src/js/components/file-list.js | 4 +- src/js/components/file.js | 2 + src/js/reducers/cwd.js | 17 +++-- src/js/utils.js | 18 +++++ src/less/components/entries.less | 8 ++ src/less/styles/texts.less | 2 +- 11 files changed, 173 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 3036491..bc91bba 100644 --- a/README.md +++ b/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) diff --git a/build/main.js b/build/main.js index 9c8d980..863397a 100644 --- a/build/main.js +++ b/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"]); diff --git a/build/style.css b/build/style.css index 3281722..0a0ccec 100644 --- a/build/style.css +++ b/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; diff --git a/src/js/api/files.js b/src/js/api/files.js index dabf050..5a8ec3d 100644 --- a/src/js/api/files.js +++ b/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) { diff --git a/src/js/components/directory.js b/src/js/components/directory.js index ac7110e..c9e5b1c 100644 --- a/src/js/components/directory.js +++ b/src/js/components/directory.js @@ -15,6 +15,7 @@ export default class Directory extends Component { onContextMenu={this.contextMenu.bind(this)}>

{this.props.name}

+ {this.props.children} items ); } diff --git a/src/js/components/file-list.js b/src/js/components/file-list.js index 028c03c..5f2b6be 100644 --- a/src/js/components/file-list.js +++ b/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 ; + return ; } else { - return + return } }); diff --git a/src/js/components/file.js b/src/js/components/file.js index 413e9a3..30e2561 100644 --- a/src/js/components/file.js +++ b/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)}>

{this.props.name}

+ {humanSize(this.props.size)} ); } diff --git a/src/js/reducers/cwd.js b/src/js/reducers/cwd.js index ce85f1c..ae358b1 100644 --- a/src/js/reducers/cwd.js +++ b/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); +} diff --git a/src/js/utils.js b/src/js/utils.js index 3c36051..1349914 100644 --- a/src/js/utils.js +++ b/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; + } + } +} diff --git a/src/less/components/entries.less b/src/less/components/entries.less index 2314bae..9138148 100644 --- a/src/less/components/entries.less +++ b/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; } diff --git a/src/less/styles/texts.less b/src/less/styles/texts.less index 399113f..1040d8f 100644 --- a/src/less/styles/texts.less +++ b/src/less/styles/texts.less @@ -27,5 +27,5 @@ } .thin-small { - font-size: 1.4rem; + font-size: 1.5rem; }