feat files: Show File Size and Directory's sub items count
fix styles: make thin-small 15px instead of 14px (was too small)
This commit is contained in:
parent
13564f5448
commit
1a2d6209f9
@ -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 / Hide hidden files
|
||||||
- [x] Show directories first
|
- [x] Show directories first
|
||||||
- [x] Create new files and directories
|
- [x] Create new files and directories
|
||||||
- [ ] File Size
|
- [x] File Size
|
||||||
- [ ] Directory Child Count
|
- [x] Directory Child Count
|
||||||
- [ ] File Preview
|
- [ ] File Preview
|
||||||
- [ ] Filter Files
|
- [ ] Filter Files
|
||||||
- [ ] Different views (List, Icons, etc)
|
- [ ] Different views (List, Icons, etc)
|
||||||
|
122
build/main.js
122
build/main.js
@ -22462,9 +22462,47 @@ var getFile = _asyncToGenerator(function* () {
|
|||||||
|
|
||||||
exports.getFile = getFile;
|
exports.getFile = getFile;
|
||||||
|
|
||||||
var children = _asyncToGenerator(function* (dir) {
|
var children = _asyncToGenerator(function* (dir, gatherInfo) {
|
||||||
var parent = yield getFile(dir);
|
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;
|
exports.children = children;
|
||||||
@ -22515,13 +22553,13 @@ var move = _asyncToGenerator(function* (file, newPath) {
|
|||||||
yield parent.createDirectory(newPath);
|
yield parent.createDirectory(newPath);
|
||||||
var childs = yield target.getFilesAndDirectories();
|
var childs = yield target.getFilesAndDirectories();
|
||||||
|
|
||||||
var _iteratorNormalCompletion = true;
|
var _iteratorNormalCompletion2 = true;
|
||||||
var _didIteratorError = false;
|
var _didIteratorError2 = false;
|
||||||
var _iteratorError = undefined;
|
var _iteratorError2 = undefined;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
for (var _iterator = childs[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
for (var _iterator2 = childs[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
|
||||||
var child = _step.value;
|
var child = _step2.value;
|
||||||
|
|
||||||
if ((0, _utils.type)(child) === 'File') {
|
if ((0, _utils.type)(child) === 'File') {
|
||||||
child.path = oldPath + '/';
|
child.path = oldPath + '/';
|
||||||
@ -22530,16 +22568,16 @@ var move = _asyncToGenerator(function* (file, newPath) {
|
|||||||
yield move(child, newPath + '/' + child.name);
|
yield move(child, newPath + '/' + child.name);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
_didIteratorError = true;
|
_didIteratorError2 = true;
|
||||||
_iteratorError = err;
|
_iteratorError2 = err;
|
||||||
} finally {
|
} finally {
|
||||||
try {
|
try {
|
||||||
if (!_iteratorNormalCompletion && _iterator['return']) {
|
if (!_iteratorNormalCompletion2 && _iterator2['return']) {
|
||||||
_iterator['return']();
|
_iterator2['return']();
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
if (_didIteratorError) {
|
if (_didIteratorError2) {
|
||||||
throw _iteratorError;
|
throw _iteratorError2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -22837,6 +22875,12 @@ var Directory = (function (_Component) {
|
|||||||
'p',
|
'p',
|
||||||
null,
|
null,
|
||||||
this.props.name
|
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) {
|
var els = files.map(function (file, index) {
|
||||||
if ((0, _utils.type)(file) === 'File') {
|
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 {
|
} 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 _store2 = _interopRequireDefault(_store);
|
||||||
|
|
||||||
|
var _utils = require('utils');
|
||||||
|
|
||||||
var MENU_TOP_SPACE = 20;
|
var MENU_TOP_SPACE = 20;
|
||||||
|
|
||||||
var File = (function (_Component) {
|
var File = (function (_Component) {
|
||||||
@ -23032,6 +23078,11 @@ var File = (function (_Component) {
|
|||||||
'p',
|
'p',
|
||||||
null,
|
null,
|
||||||
this.props.name
|
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;
|
exports['default'] = File;
|
||||||
module.exports = exports['default'];
|
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';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, '__esModule', {
|
Object.defineProperty(exports, '__esModule', {
|
||||||
@ -23838,29 +23889,34 @@ var _store = require('store');
|
|||||||
|
|
||||||
var _store2 = _interopRequireDefault(_store);
|
var _store2 = _interopRequireDefault(_store);
|
||||||
|
|
||||||
|
var _utils = require('utils');
|
||||||
|
|
||||||
exports['default'] = function (state, action) {
|
exports['default'] = function (state, action) {
|
||||||
if (state === undefined) state = '';
|
if (state === undefined) state = '';
|
||||||
|
|
||||||
if (action.type === _actionsTypes.CHANGE_DIRECTORY) {
|
if (action.type === _actionsTypes.CHANGE_DIRECTORY) {
|
||||||
(0, _apiFiles.children)(action.dir).then(function (files) {
|
changeTo(action.dir);
|
||||||
_store2['default'].dispatch((0, _actionsListFiles2['default'])(files));
|
|
||||||
});
|
|
||||||
return action.dir;
|
return action.dir;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action.type === _actionsTypes.REFRESH || action.type === _actionsTypes.SETTINGS) {
|
if (action.type === _actionsTypes.REFRESH || action.type === _actionsTypes.SETTINGS) {
|
||||||
(0, _apiFiles.children)(state).then(function (files) {
|
changeTo(state);
|
||||||
_store2['default'].dispatch((0, _actionsListFiles2['default'])(files));
|
|
||||||
});
|
|
||||||
return state;
|
return 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'];
|
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';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, '__esModule', {
|
Object.defineProperty(exports, '__esModule', {
|
||||||
@ -29063,6 +29119,7 @@ exports.type = type;
|
|||||||
exports.template = template;
|
exports.template = template;
|
||||||
exports.getKey = getKey;
|
exports.getKey = getKey;
|
||||||
exports.reportError = reportError;
|
exports.reportError = reportError;
|
||||||
|
exports.humanSize = humanSize;
|
||||||
|
|
||||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||||
|
|
||||||
@ -29103,4 +29160,23 @@ function reportError(err) {
|
|||||||
_store2['default'].dispatch(action);
|
_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"]);
|
},{"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"]);
|
||||||
|
@ -67,7 +67,7 @@
|
|||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
}
|
||||||
.thin-small {
|
.thin-small {
|
||||||
font-size: 1.4rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
.shadow-16 {
|
.shadow-16 {
|
||||||
box-shadow: 0 15px 24px 6px rgba(0, 0, 0, 0.2);
|
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;
|
box-sizing: border-box;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
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,
|
.file i,
|
||||||
.directory i {
|
.directory i {
|
||||||
margin-right: 1.4rem;
|
margin-right: 1.4rem;
|
||||||
|
@ -26,9 +26,26 @@ export async function getFile(dir = '/') {
|
|||||||
return await parent.get(dir);
|
return await parent.get(dir);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function children(dir) {
|
export async function children(dir, gatherInfo) {
|
||||||
let parent = await getFile(dir);
|
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) {
|
export async function readFile(path) {
|
||||||
|
@ -15,6 +15,7 @@ export default class Directory extends Component {
|
|||||||
onContextMenu={this.contextMenu.bind(this)}>
|
onContextMenu={this.contextMenu.bind(this)}>
|
||||||
<i></i>
|
<i></i>
|
||||||
<p>{this.props.name}</p>
|
<p>{this.props.name}</p>
|
||||||
|
<span>{this.props.children} items</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -32,9 +32,9 @@ export default class FileList extends Component {
|
|||||||
|
|
||||||
let els = files.map((file, index) => {
|
let els = files.map((file, index) => {
|
||||||
if (type(file) === 'File') {
|
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 {
|
} else {
|
||||||
return <Directory key={index} index={index} name={file.name} />
|
return <Directory key={index} index={index} name={file.name} children={file.children} />
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -3,6 +3,7 @@ import { show } from 'actions/menu';
|
|||||||
import { active } from 'actions/file';
|
import { active } from 'actions/file';
|
||||||
import { MENU_WIDTH } from './menu';
|
import { MENU_WIDTH } from './menu';
|
||||||
import store from 'store';
|
import store from 'store';
|
||||||
|
import { humanSize } from 'utils';
|
||||||
|
|
||||||
const MENU_TOP_SPACE = 20;
|
const MENU_TOP_SPACE = 20;
|
||||||
|
|
||||||
@ -17,6 +18,7 @@ export default class File extends Component {
|
|||||||
onContextMenu={this.contextMenu.bind(this)}>
|
onContextMenu={this.contextMenu.bind(this)}>
|
||||||
<i></i>
|
<i></i>
|
||||||
<p>{this.props.name}</p>
|
<p>{this.props.name}</p>
|
||||||
|
<span>{humanSize(this.props.size)}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -2,21 +2,26 @@ import { CHANGE_DIRECTORY, REFRESH, SETTINGS } from 'actions/types';
|
|||||||
import listFiles from 'actions/list-files';
|
import listFiles from 'actions/list-files';
|
||||||
import { children } from 'api/files';
|
import { children } from 'api/files';
|
||||||
import store from 'store';
|
import store from 'store';
|
||||||
|
import { reportError } from 'utils';
|
||||||
|
|
||||||
export default function(state = '', action) {
|
export default function(state = '', action) {
|
||||||
if (action.type === CHANGE_DIRECTORY) {
|
if (action.type === CHANGE_DIRECTORY) {
|
||||||
children(action.dir).then(files => {
|
changeTo(action.dir);
|
||||||
store.dispatch(listFiles(files));
|
|
||||||
});
|
|
||||||
return action.dir;
|
return action.dir;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (action.type === REFRESH || action.type === SETTINGS) {
|
if (action.type === REFRESH || action.type === SETTINGS) {
|
||||||
children(state).then(files => {
|
changeTo(state);
|
||||||
store.dispatch(listFiles(files));
|
|
||||||
});
|
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changeTo(dir) {
|
||||||
|
children(dir, true).then(files => {
|
||||||
|
store.dispatch(listFiles(files));
|
||||||
|
}, reportError);
|
||||||
|
}
|
||||||
|
@ -29,3 +29,21 @@ export function reportError(err) {
|
|||||||
let action = show('errorDialog', {description: err.message});
|
let action = show('errorDialog', {description: err.message});
|
||||||
store.dispatch(action);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -12,6 +12,14 @@
|
|||||||
|
|
||||||
border-bottom: 1px solid @dark-separator;
|
border-bottom: 1px solid @dark-separator;
|
||||||
|
|
||||||
|
p {
|
||||||
|
flex: 1 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
> span {
|
||||||
|
.thin-small;
|
||||||
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: 1.4rem;
|
margin-right: 1.4rem;
|
||||||
}
|
}
|
||||||
|
@ -27,5 +27,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.thin-small {
|
.thin-small {
|
||||||
font-size: 1.4rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user