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

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 {
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-
-  padding: 1.4rem;
-
-  width: 100%;
-  .light-big;
-
-  box-sizing: border-box;
+.list .file, .list .directory {
+  flex: 1 1 100%;
 
   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;