diff --git a/build/main.js b/build/main.js index b6b22cf..0d9dc03 100644 --- a/build/main.js +++ b/build/main.js @@ -31,7 +31,9 @@ function drainQueue() { currentQueue = queue; queue = []; while (++queueIndex < len) { - currentQueue[queueIndex].run(); + if (currentQueue) { + currentQueue[queueIndex].run(); + } } queueIndex = -1; len = queue.length; @@ -83,7 +85,6 @@ process.binding = function (name) { throw new Error('process.binding is not supported'); }; -// TODO(shtylman) process.cwd = function () { return '/' }; process.chdir = function (dir) { throw new Error('process.chdir is not supported'); @@ -29679,9 +29680,6 @@ Object.defineProperty(exports, '__esModule', { }); exports.listFiles = listFiles; exports.refresh = refresh; -exports.toggle = toggle; -exports.details = details; -exports.list = list; exports.selectView = selectView; exports.search = search; @@ -29706,27 +29704,6 @@ function refresh() { }; } -function toggle() { - return { - type: _actionsTypes.FILES_VIEW, - view: 'toggle' - }; -} - -function details() { - return { - type: _actionsTypes.FILES_VIEW, - view: 'details' - }; -} - -function list() { - return { - type: _actionsTypes.FILES_VIEW, - view: 'list' - }; -} - function selectView() { var active = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0]; @@ -29915,7 +29892,6 @@ var TYPES = { CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'), LIST_FILES: Symbol('LIST_FILES'), - FILES_VIEW: Symbol('FILES_VIEW'), SELECT_VIEW: Symbol('SELECT_VIEW'), NAVIGATION: Symbol('NAVIGATION'), @@ -30538,6 +30514,7 @@ var FileList = (function (_Component) { var files = _props.files; var selectView = _props.selectView; var activeFile = _props.activeFile; + var view = _props.view; activeFile = activeFile || []; var settings = _store2['default'].getState().get('settings'); @@ -30551,9 +30528,11 @@ var FileList = (function (_Component) { } }); + var className = 'file-list ' + view; + return _react2['default'].createElement( 'div', - { className: 'file-list', ref: 'container' }, + { className: className, ref: 'container' }, els ); } @@ -30585,7 +30564,8 @@ function props(state) { return { files: state.get('files'), selectView: state.get('selectView'), - activeFile: state.get('activeFile') + activeFile: state.get('activeFile'), + view: state.get('settings').view || 'list' }; } @@ -31443,6 +31423,10 @@ var _actionsDialog = require('actions/dialog'); var _actionsMenu = require('actions/menu'); +var _actionsSettings = require('actions/settings'); + +var _actionsSettings2 = _interopRequireDefault(_actionsSettings); + var _store = require('store'); var _store2 = _interopRequireDefault(_store); @@ -31465,7 +31449,7 @@ var Toolbar = (function (_Component) { 'div', { className: 'toolbar' }, _react2['default'].createElement('button', { className: 'icon-plus tour-item', onClick: this.newFile }), - _react2['default'].createElement('button', { className: 'icon-view coming-soon', onClick: (0, _store.bind)((0, _actionsFilesView.toggle)()) }), + _react2['default'].createElement('button', { className: 'icon-view tour-item', onClick: this.toggleView }), _react2['default'].createElement('button', { className: 'icon-refresh tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.refresh)()) }), _react2['default'].createElement('button', { className: 'icon-select tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.selectView)('toggle')) }), _react2['default'].createElement('button', { className: 'icon-more tour-item', onClick: this.showMore.bind(this), ref: 'more' }) @@ -31495,6 +31479,14 @@ var Toolbar = (function (_Component) { }); _store2['default'].dispatch(action); } + }, { + key: 'toggleView', + value: function toggleView() { + var current = _store2['default'].getState().get('settings').view; + var value = current === 'list' ? 'grid' : 'list'; + + _store2['default'].dispatch((0, _actionsSettings2['default'])({ view: value })); + } }]); return Toolbar; @@ -31503,7 +31495,7 @@ var Toolbar = (function (_Component) { exports['default'] = Toolbar; module.exports = exports['default']; -},{"./menu":235,"actions/dialog":218,"actions/files-view":220,"actions/menu":221,"react":207,"store":"store"}],241:[function(require,module,exports){ +},{"./menu":235,"actions/dialog":218,"actions/files-view":220,"actions/menu":221,"actions/settings":224,"react":207,"store":"store"}],241:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, '__esModule', { @@ -32332,7 +32324,8 @@ var _lodashObjectOmit2 = _interopRequireDefault(_lodashObjectOmit); var DEFAULT = { showHiddenFiles: false, - showDirectoriesFirst: true + showDirectoriesFirst: true, + view: 'list' }; exports['default'] = function (state, action) { @@ -32454,6 +32447,7 @@ var MESSAGES = { 'icon-refresh': 'Refresh File List', 'icon-select': 'Select files for batch actions', 'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …', + 'icon-view': 'Toggle between List and Grid view', 'drawer': 'Extra options, tools and links are here', 'icon-search': 'Search your storage for a certain file', 'swipe-instruction': 'Swipe from left to right to go to parent folder' diff --git a/build/style.css b/build/style.css index 374a77c..f7c4b17 100644 --- a/build/style.css +++ b/build/style.css @@ -260,34 +260,58 @@ button.coming-soon::after { opacity: 0.8; transform: translate(-50%, -50%) rotate(-45deg); } +.list .file, +.list .directory { + flex: 1 1 100%; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.list .file p, +.list .directory p { + word-wrap: break-word; + word-break: break-all; +} +.list .file > span, +.list .directory > span { + font-weight: 100; + font-size: 1.5rem; + margin-left: 1rem; +} +.list .file i, +.list .directory i { + margin-right: 1.4rem; +} +.grid .file, +.grid .directory { + flex: 1 0 30%; + max-width: 30%; + padding: 1.4rem 0.5rem; + flex-direction: column; +} +.grid .file p, +.grid .directory p { + max-height: 1.5em; + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.grid .file span, +.grid .directory span { + display: none; +} .file, .directory { display: flex; flex-flow: row; align-items: center; padding: 1.4rem; - width: 100%; font-weight: 200; font-size: 1.8rem; box-sizing: border-box; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .file p, .directory p { flex: 1 1; - max-width: calc(100% - 9rem); - text-overflow: ellipsis; - word-wrap: break-word; -} -.file > span, -.directory > span { - font-weight: 100; - font-size: 1.5rem; - margin-left: 1rem; -} -.file i, -.directory i { - margin-right: 1.4rem; } .directory i { display: block; @@ -469,6 +493,10 @@ nav i { color: #9b9b93; } .file-list { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + align-content: flex-start; height: calc(100vh - 14.5rem); overflow-x: hidden; overflow-y: auto; diff --git a/src/js/actions/files-view.js b/src/js/actions/files-view.js index b3e6af9..3057742 100644 --- a/src/js/actions/files-view.js +++ b/src/js/actions/files-view.js @@ -1,4 +1,4 @@ -import { LIST_FILES, FILES_VIEW, SELECT_VIEW, REFRESH, SEARCH } from 'actions/types'; +import { LIST_FILES, VIEW, SELECT_VIEW, REFRESH, SEARCH } from 'actions/types'; import store from 'store'; export function listFiles(files) { @@ -14,27 +14,6 @@ export function refresh() { } } -export function toggle() { - return { - type: FILES_VIEW, - view: 'toggle' - } -} - -export function details() { - return { - type: FILES_VIEW, - view: 'details' - } -} - -export function list() { - return { - type: FILES_VIEW, - view: 'list' - } -} - export function selectView(active = true) { return { type: SELECT_VIEW, diff --git a/src/js/actions/types.js b/src/js/actions/types.js index a5523ad..9d7259e 100644 --- a/src/js/actions/types.js +++ b/src/js/actions/types.js @@ -2,7 +2,6 @@ const TYPES = { CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'), LIST_FILES: Symbol('LIST_FILES'), - FILES_VIEW: Symbol('FILES_VIEW'), SELECT_VIEW: Symbol('SELECT_VIEW'), NAVIGATION: Symbol('NAVIGATION'), diff --git a/src/js/components/file-list.js b/src/js/components/file-list.js index 48369f5..2cf95b0 100644 --- a/src/js/components/file-list.js +++ b/src/js/components/file-list.js @@ -14,7 +14,7 @@ export default class FileList extends Component { } render() { - let { files, selectView, activeFile } = this.props; + let { files, selectView, activeFile, view } = this.props; activeFile = activeFile || []; let settings = store.getState().get('settings'); @@ -27,8 +27,10 @@ export default class FileList extends Component { } }); + let className= `file-list ${view}`; + return ( -
+
{els}
); @@ -53,7 +55,8 @@ function props(state) { return { files: state.get('files'), selectView: state.get('selectView'), - activeFile: state.get('activeFile') + activeFile: state.get('activeFile'), + view: state.get('settings').view || 'list' } } diff --git a/src/js/components/toolbar.js b/src/js/components/toolbar.js index f21cacb..1ab3541 100644 --- a/src/js/components/toolbar.js +++ b/src/js/components/toolbar.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; -import { toggle as toggleView, refresh, selectView } from 'actions/files-view'; +import { refresh, selectView } from 'actions/files-view'; import { show as showDialog } from 'actions/dialog'; import { show as showMenu } from 'actions/menu'; +import settings from 'actions/settings'; import store, { bind } from 'store'; import { MENU_WIDTH } from './menu'; @@ -10,7 +11,7 @@ export default class Toolbar extends Component { return (