feat view: Enable toggle view button to toggle between grid and list views

build/main.js

@@ -31,8 +31,10 @@ function drainQueue() {
         currentQueue = queue;
         queue = [];
         while (++queueIndex < len) {
+            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'

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;

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,

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'),

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 (
-      <div className='file-list' ref='container'>
+      <div className={className} ref='container'>
         {els}
       </div>
     );
@@ -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'
   }
 }
 

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 (
       <div className='toolbar'>
         <button className='icon-plus tour-item' onClick={this.newFile} />
-        <button className='icon-view coming-soon' onClick={bind(toggleView())} />
+        <button className='icon-view tour-item' onClick={this.toggleView} />
         <button className='icon-refresh tour-item' onClick={bind(refresh())} />
         <button className='icon-select tour-item' onClick={bind(selectView('toggle'))} />
         <button className='icon-more tour-item' onClick={this.showMore.bind(this)} ref='more' />
@@ -36,4 +37,11 @@ export default class Toolbar extends Component {
     });
     store.dispatch(action);
   }
+
+  toggleView() {
+    let current = store.getState().get('settings').view;
+    let value = current === 'list' ? 'grid' : 'list';
+
+    store.dispatch(settings({view: value}));
+  }
 }

src/js/reducers/settings.js

@@ -3,7 +3,8 @@ import omit from 'lodash/object/omit';
 
 const DEFAULT = {
   showHiddenFiles: false,
-  showDirectoriesFirst: true
+  showDirectoriesFirst: true,
+  view: 'list'
 }
 
 export default function(state = DEFAULT, action) {

src/js/tour.js

@@ -3,6 +3,7 @@ const 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'

src/less/components/entries.less

@@ -1,25 +1,11 @@
-.file, .directory {
+.list .file, .list .directory {
-  display: flex;
+  flex: 1 1 100%;
-  flex-flow: row;
-  align-items: center;
-
-  padding: 1.4rem;
-
-  width: 100%;
-  .light-big;
-
-  box-sizing: border-box;
 
   border-bottom: 1px solid @dark-separator;
 
   p {
-    flex: 1 1;
-
-    max-width: ~'calc(100% - 9rem)';
-
-    text-overflow: ellipsis;
-
     word-wrap: break-word;
+    word-break: break-all;
   }
 
   > span {
@@ -33,6 +19,45 @@
   }
 }
 
+.grid .file, .grid .directory {
+  flex: 1 0 30%;
+
+  max-width: 30%;
+
+  padding: 1.4rem 0.5rem;
+
+  flex-direction: column;
+
+  p {
+    max-height: 1.5em;
+    max-width: 100%;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  span {
+    display: none;
+  }
+}
+
+.file, .directory {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+
+  padding: 1.4rem;
+
+  .light-big;
+
+  box-sizing: border-box;
+
+  p {
+    flex: 1 1;
+  }
+}
+
 .directory i {
   .icon-directory;
 }

src/less/components/file-list.less

@@ -1,4 +1,10 @@
 .file-list {
+  display: flex;
+  flex-flow: row wrap;
+
+  justify-content: space-around;
+  align-content: flex-start;
+
   height: ~'calc(100vh - 14.5rem)';
 
   overflow-x: hidden;