build/img/Back.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>Back</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Toolbar" sketch:type="MSArtboardGroup" transform="translate(-26.000000, -14.000000)" stroke="#63B0CD" fill="#63B0CD">
+            <g sketch:type="MSLayerGroup" id="Buttons">
+                <g transform="translate(26.000000, 7.000000)" sketch:type="MSShapeGroup">
+                    <path d="M7.57710348,12.9048675 C7.04180408,12.7876066 6.46141311,12.9389926 6.04498016,13.3554255 L-2.89216446,22.2925701 C-3.53902314,22.9394288 -3.5418885,23.9953224 -2.89240043,24.6448105 C-2.23838425,25.2988266 -1.18977849,25.2941929 -0.540160097,24.6445745 L7.22721202,16.8772024 L14.9945841,24.6445745 C15.6414428,25.2914332 16.6973364,25.2942985 17.3468245,24.6448105 C18.0008407,23.9907943 17.9962069,22.9421885 17.3465885,22.2925701 L8.40944389,13.3554255 C8.17328851,13.1192701 7.88261547,12.9689485 7.57710348,12.9048675 Z" id="Back" transform="translate(7.228579, 19.000000) rotate(-90.000000) translate(-7.228579, -19.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

build/main.js

@@ -30215,8 +30215,6 @@ var _actionsChangedir2 = _interopRequireDefault(_actionsChangedir);
 
 var _store = require('store');
 
-// TODO: Fix history not working when clicking on sdcard
-
 var Breadcrumb = (function (_Component) {
   _inherits(Breadcrumb, _Component);
 
@@ -30229,71 +30227,80 @@ var Breadcrumb = (function (_Component) {
   _createClass(Breadcrumb, [{
     key: 'render',
     value: function render() {
-      var directories = this.props.cwd.split('/').filter(function (a) {
+      var _this = this;
+
+      var els = [];
+
+      if (this.props.search) {
+        console.log('search');
+        els = [_react2['default'].createElement(
+          'span',
+          { key: '000' },
+          'Search: ',
+          this.props.search
+        )];
+      } else {
+        (function () {
+          var directories = _this.props.cwd.split('/').filter(function (a) {
+            return a;
+          });
+          var lastDirectories = _this.props.lwd.split('/').filter(function (a) {
             return a;
           });
           directories.unshift('sdcard');
 
-      var els = directories.map(function (dir, index, arr) {
+          var sumLength = directories.length + lastDirectories.length;
+
+          els = els.concat(directories.map(function (dir, index, arr) {
             var path = arr.slice(1, index + 1).join('/');
+            var style = { zIndex: sumLength - index };
 
             return _react2['default'].createElement(
               'span',
-          { key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)) },
+              { key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
-          _react2['default'].createElement(
-            'i',
-            null,
-            '/'
-          ),
               dir
             );
-      });
+          }));
 
-      var lastDirectories = this.props.lwd.split('/').filter(function (a) {
-        return a;
-      });
           if (lastDirectories.length > directories.length - 1) {
             lastDirectories.splice(0, directories.length - 1);
 
             var _history = lastDirectories.map(function (dir, index, arr) {
               var current = directories.slice(1).concat(arr.slice(0, index + 1));
               var path = current.join('/').replace(/^\//, ''); // remove starting slash
+              var key = directories.length + index;
+              var style = { zIndex: arr.length - index };
+              console.log('history', dir);
 
               return _react2['default'].createElement(
                 'span',
-            { key: directories.length + index, className: 'history', onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)) },
+                { key: key, className: 'history', onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
-            _react2['default'].createElement(
-              'i',
-              null,
-              '/'
-            ),
                 dir
               );
             });
 
             els = els.concat(_history);
           }
+        })();
+      }
 
       return _react2['default'].createElement(
         'div',
-        { className: 'breadcrumb' },
+        { className: 'breadcrumb', ref: 'container' },
         _react2['default'].createElement(
           'div',
           null,
-          _react2['default'].createElement('span', { onClick: this.goUp, className: 'icon-up' }),
           els
         )
       );
     }
   }, {
-    key: 'goUp',
+    key: 'componentDidUpdate',
-    value: function goUp() {
+    value: function componentDidUpdate() {
-      var current = store.getState().get('cwd');
+      var container = _react2['default'].findDOMNode(this.refs.container);
-      var up = current.split('/').slice(0, -1).join('/');
+      var currents = container.querySelectorAll('span:not(.history)');
 
-      if (up === current) return;
+      container.scrollLeft = currents[currents.length - 1].offsetLeft;
-
-      store.dispatch((0, _actionsChangedir2['default'])(up));
     }
   }]);
 
@@ -30307,7 +30314,8 @@ exports['default'] = Breadcrumb;
 function props(state) {
   return {
     lwd: state.get('lwd'), // last working directory
-    cwd: state.get('cwd')
+    cwd: state.get('cwd'),
+    search: state.get('search')
   };
 }
 module.exports = exports['default'];
@@ -31081,6 +31089,35 @@ var Navigation = (function (_Component) {
             )
           )
         ),
+        _react2['default'].createElement(
+          'p',
+          null,
+          'View'
+        ),
+        _react2['default'].createElement(
+          'ul',
+          null,
+          _react2['default'].createElement(
+            'li',
+            null,
+            _react2['default'].createElement('input', { id: 'view-list', name: 'view', 'data-value': 'list', type: 'radio', defaultChecked: settings.filter === 'list' }),
+            _react2['default'].createElement(
+              'label',
+              { htmlFor: 'view-list' },
+              'List'
+            )
+          ),
+          _react2['default'].createElement(
+            'li',
+            null,
+            _react2['default'].createElement('input', { id: 'view-grid', name: 'view', 'data-value': 'grid', type: 'radio', defaultChecked: settings.filter === 'grid' }),
+            _react2['default'].createElement(
+              'label',
+              { htmlFor: 'view-grid' },
+              'Grid'
+            )
+          )
+        ),
         _react2['default'].createElement(
           'p',
           null,
@@ -31545,8 +31582,8 @@ var Toolbar = (function (_Component) {
       return _react2['default'].createElement(
         'div',
         { className: 'toolbar' },
+        _react2['default'].createElement('button', { className: 'icon-back tour-item', onClick: this.goUp }),
         _react2['default'].createElement('button', { className: 'icon-plus tour-item', onClick: this.newFile }),
-        _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' })
@@ -31567,6 +31604,16 @@ var Toolbar = (function (_Component) {
       var transform = 'translate(0, -100%)';
       _store2['default'].dispatch((0, _actionsMenu.show)('moreMenu', { style: { left: left, top: top, transform: transform } }));
     }
+  }, {
+    key: 'goUp',
+    value: function goUp() {
+      var current = _store2['default'].getState().get('cwd');
+      var up = current.split('/').slice(0, -1).join('/');
+
+      if (up === current) return;
+
+      _store2['default'].dispatch(changedir(up));
+    }
   }, {
     key: 'newFile',
     value: function newFile() {
@@ -32401,6 +32448,10 @@ exports['default'] = function (state, action) {
     return action.keywords;
   }
 
+  if (action.type === _actionsTypes.CHANGE_DIRECTORY || action.type === _actionsTypes.REFRESH) {
+    return '';
+  }
+
   return state;
 };
 
@@ -32419,7 +32470,7 @@ function search(keywords) {
   // We don't want to show all the currently visible files from the
   // first iteration
   var once = true;
-  (0, _apiFiles.children)('/', true).then(function showResults(files) {
+  (0, _apiFiles.children)('', true).then(function showResults(files) {
     if (!_store2['default'].getState().get('search')) return;
 
     var current = once ? [] : _store2['default'].getState().get('files');
@@ -32602,7 +32653,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',
+  'icon-back': 'Navigate to top directory',
   '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

@@ -65,18 +65,11 @@
 .icon-cross svg * {
   fill: white;
 }
-.icon-up {
+.icon-back {
   display: block;
-  display: inline-block;
+  background: url(/img/Back.svg) no-repeat;
-  border: 11px solid transparent;
+  width: 15px;
-  border-right-color: #63b0cd;
+  height: 24px;
-  border-top-width: 8px;
-  border-bottom-width: 8px;
-  border-radius: 3px;
-  margin-right: 0.5rem;
-  position: relative;
-  top: 2px;
-  right: 0.5rem;
 }
 .regular-medium {
   font-weight: normal;
@@ -508,21 +501,41 @@ nav i {
   width: 100vw;
   height: 4.5rem;
   overflow-x: auto;
-  padding: 8px;
   box-sizing: border-box;
   font-weight: 200;
   font-size: 1.6rem;
+  padding-right: 8px;
   background: #f8f8f8;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
 }
-.breadcrumb span {
+.breadcrumb div {
-  white-space: nowrap;
+  display: flex;
+  align-items: center;
 }
-.breadcrumb i {
+.breadcrumb span {
-  margin: 0 2px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 4.5rem;
+  white-space: nowrap;
+  padding: 0 5px 0 30px;
+  background: #f0f0f0;
+  filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2));
+}
+.breadcrumb span:first-of-type {
+  padding-left: 10px;
+}
+.breadcrumb span::after {
+  position: absolute;
+  right: -46px;
+  top: 0;
+  content: '';
+  display: block;
+  border: 23px solid transparent;
+  border-left-color: #f0f0f0;
 }
 .breadcrumb span.history {
   color: #9b9b93;

src/img/Back.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>Back</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Toolbar" sketch:type="MSArtboardGroup" transform="translate(-26.000000, -14.000000)" stroke="#63B0CD" fill="#63B0CD">
+            <g sketch:type="MSLayerGroup" id="Buttons">
+                <g transform="translate(26.000000, 7.000000)" sketch:type="MSShapeGroup">
+                    <path d="M7.57710348,12.9048675 C7.04180408,12.7876066 6.46141311,12.9389926 6.04498016,13.3554255 L-2.89216446,22.2925701 C-3.53902314,22.9394288 -3.5418885,23.9953224 -2.89240043,24.6448105 C-2.23838425,25.2988266 -1.18977849,25.2941929 -0.540160097,24.6445745 L7.22721202,16.8772024 L14.9945841,24.6445745 C15.6414428,25.2914332 16.6973364,25.2942985 17.3468245,24.6448105 C18.0008407,23.9907943 17.9962069,22.9421885 17.3465885,22.2925701 L8.40944389,13.3554255 C8.17328851,13.1192701 7.88261547,12.9689485 7.57710348,12.9048675 Z" id="Back" transform="translate(7.228579, 19.000000) rotate(-90.000000) translate(-7.228579, -19.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/js/components/breadcrumb.js

@@ -3,64 +3,72 @@ import { connect } from 'react-redux';
 import changedir from 'actions/changedir';
 import { bind } from 'store';
 
-// TODO: Fix history not working when clicking on sdcard
 @connect(props)
 export default class Breadcrumb extends Component {
   render() {
+    let els = [];
+
+    if (this.props.search) {
+      console.log('search');
+      els = [
+        <span key='000'>Search: {this.props.search}</span>
+      ]
+    } else {
       let directories = this.props.cwd.split('/').filter(a => a);
+      let lastDirectories = this.props.lwd.split('/').filter(a => a);
       directories.unshift('sdcard');
 
-    let els = directories.map((dir, index, arr) => {
+      let sumLength = directories.length + lastDirectories.length;
+
+      els = els.concat(directories.map((dir, index, arr) => {
         let path = arr.slice(1, index + 1).join('/');
+        let style = { zIndex: sumLength - index };
 
         return (
-        <span key={index} onClick={bind(changedir(path))}>
+          <span key={index} onClick={bind(changedir(path))} style={style}>{dir}</span>
-          <i>/</i>{dir}
-        </span>
         );
-    });
+      }));
 
-    let lastDirectories = this.props.lwd.split('/').filter(a => a);
       if (lastDirectories.length > directories.length - 1) {
         lastDirectories.splice(0, directories.length - 1);
 
         let history = lastDirectories.map((dir, index, arr) => {
           let current = directories.slice(1).concat(arr.slice(0, index + 1));
           let path = current.join('/').replace(/^\//, ''); // remove starting slash
+          let key = directories.length + index;
+          let style = { zIndex: arr.length - index};
+          console.log('history', dir)
 
           return (
-          <span key={directories.length + index} className='history' onClick={bind(changedir(path))}>
+            <span key={key} className='history' onClick={bind(changedir(path))} style={style}>{dir}</span>
-            <i>/</i>{dir}
-          </span>
           )
         });
 
         els = els.concat(history);
       }
+    }
 
     return (
-      <div className='breadcrumb'>
+      <div className='breadcrumb' ref='container'>
         <div>
-          <span onClick={this.goUp} className='icon-up'></span>
           {els}
         </div>
       </div>
     );
   }
 
-  goUp() {
+  componentDidUpdate() {
-    let current = store.getState().get('cwd');
+    let container = React.findDOMNode(this.refs.container);
-    let up = current.split('/').slice(0, -1).join('/');
+    let currents = container.querySelectorAll('span:not(.history)');
 
-    if (up === current) return;
+    container.scrollLeft = currents[currents.length - 1].offsetLeft;
-
-    store.dispatch(changedir(up));
   }
 }
 
 function props(state) {
   return {
     lwd: state.get('lwd'), // last working directory
-    cwd: state.get('cwd')
+    cwd: state.get('cwd'),
+    search: state.get('search')
   }
 }

src/js/components/navigation.js

@@ -40,6 +40,18 @@ export default class Navigation extends Component {
           </li>
         </ul>
 
+        <p>View</p>
+        <ul>
+          <li>
+            <input id='view-list' name='view' data-value='list' type='radio' defaultChecked={settings.filter === 'list'} />
+            <label htmlFor='view-list'>List</label>
+          </li>
+          <li>
+            <input id='view-grid' name='view' data-value='grid' type='radio' defaultChecked={settings.filter === 'grid'} />
+            <label htmlFor='view-grid'>Grid</label>
+          </li>
+        </ul>
+
         <p>Tools</p>
         <ul>
           <li className='coming-soon'>

src/js/components/toolbar.js

@@ -10,8 +10,8 @@ export default class Toolbar extends Component {
   render() {
     return (
       <div className='toolbar'>
+        <button className='icon-back tour-item' onClick={this.goUp} />
         <button className='icon-plus tour-item' onClick={this.newFile} />
-        <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' />
@@ -30,6 +30,15 @@ export default class Toolbar extends Component {
     store.dispatch(showMenu('moreMenu', {style: {left, top, transform}}));
   }
 
+  goUp() {
+    let current = store.getState().get('cwd');
+    let up = current.split('/').slice(0, -1).join('/');
+
+    if (up === current) return;
+
+    store.dispatch(changedir(up));
+  }
+
   newFile() {
     let cwd = store.getState().get('cwd');
     let action = showDialog('createDialog', {

src/js/reducers/search.js

@@ -1,4 +1,4 @@
-import { SEARCH } from 'actions/types';
+import { SEARCH, CHANGE_DIRECTORY, REFRESH } from 'actions/types';
 import store from 'store';
 import { reportError } from 'utils';
 import { listFiles } from 'actions/files-view';
@@ -12,6 +12,10 @@ export default function(state = '', action) {
     return action.keywords;
   }
 
+  if (action.type === CHANGE_DIRECTORY || action.type === REFRESH) {
+    return '';
+  }
+
   return state;
 }
 
@@ -28,7 +32,7 @@ function search(keywords) {
   // We don't want to show all the currently visible files from the
   // first iteration
   let once = true;
-  children('/', true).then(function showResults(files) {
+  children('', true).then(function showResults(files) {
     if (!store.getState().get('search')) return;
 
     let current = once ? [] : store.getState().get('files');

src/js/tour.js

@@ -3,7 +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',
+  'icon-back': 'Navigate to top directory',
   '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/breadcrumb.less

@@ -8,12 +8,12 @@
 
   overflow-x: auto;
 
-  padding: 8px;
-
   box-sizing: border-box;
 
   .light-medium;
 
+  padding-right: 8px;
+
   background: @light-gray;
 
   border-bottom: 1px solid @dark-transparent;
@@ -22,12 +22,43 @@
   overflow-y: hidden;
   white-space: nowrap;
 
-  span {
+  div {
-    white-space: nowrap;
+    display: flex;
+
+    align-items: center;
   }
 
-  i {
+  span {
-    margin: 0 2px;
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    height: 4.5rem;
+
+    white-space: nowrap;
+
+    padding: 0 5px 0 30px;
+    background: @gray;
+
+    filter: drop-shadow(1px 0 0 @dark-transparent);
+
+    &:first-of-type {
+      padding-left: 10px;
+    }
+
+    &::after {
+      position: absolute;
+      right: -46px;
+      top: 0;
+
+      content: '';
+
+      display: block;
+
+      border: 23px solid transparent;
+      border-left-color: @gray;
+    }
   }
 
   span.history {

src/less/icons.less

@@ -72,19 +72,9 @@
   }
 }
 
-.icon-up {
+.icon-back {
   .icon;
-  display: inline-block;
+  background: url(/img/Back.svg) no-repeat;
-
+  width: 15px;
-  border: 11px solid transparent;
+  height: 24px;
-  border-right-color: @blue;
-  border-top-width: 8px;
-  border-bottom-width: 8px;
-  border-radius: 3px;
-
-  margin-right: 0.5rem;
-
-  position: relative;
-  top: 2px;
-  right: 0.5rem;
 }