2015-10-03 17:30:27 +00:00
25 changed files with 274 additions and 124 deletions
--- a/build/icon/Icon-128.png
+++ b/build/icon/Icon-128.png
--- a/build/icon/Icon-16.png
+++ b/build/icon/Icon-16.png
--- a/build/icon/Icon-340.png
+++ b/build/icon/Icon-340.png
--- a/build/icon/Icon-48.png
+++ b/build/icon/Icon-48.png
--- a/build/icon/Icon-60.png
+++ b/build/icon/Icon-60.png
--- a/build/icon/Icon.png
+++ b/build/icon/Icon.png
--- a/build/img/Back.svg
+++ b/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>
--- a/build/main.js
+++ b/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)) },
-          _react2['default'].createElement(
-            'i',
-            null,
-            '/'
-          ),
+              { key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
              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)) },
-            _react2['default'].createElement(
-              'i',
-              null,
-              '/'
-            ),
+                { key: key, className: 'history', onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
                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',
-    value: function goUp() {
-      var current = store.getState().get('cwd');
-      var up = current.split('/').slice(0, -1).join('/');
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      var container = _react2['default'].findDOMNode(this.refs.container);
+      var currents = container.querySelectorAll('span:not(.history)');

-      if (up === current) return;
-
-      store.dispatch((0, _actionsChangedir2['default'])(up));
+      container.scrollLeft = currents[currents.length - 1].offsetLeft;
    }
  }]);

@ -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'
--- a/build/style.css
+++ b/build/style.css
@ -65,18 +65,11 @@
 .icon-cross svg * {
  fill: white;
 }
-.icon-up {
+.icon-back {
  display: block;
-  display: inline-block;
-  border: 11px solid transparent;
-  border-right-color: #63b0cd;
-  border-top-width: 8px;
-  border-bottom-width: 8px;
-  border-radius: 3px;
-  margin-right: 0.5rem;
-  position: relative;
-  top: 2px;
-  right: 0.5rem;
+  background: url(/img/Back.svg) no-repeat;
+  width: 15px;
+  height: 24px;
 }
 .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 {
-  white-space: nowrap;
+.breadcrumb div {
+  display: flex;
+  align-items: center;
 }
-.breadcrumb i {
-  margin: 0 2px;
+.breadcrumb span {
+  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;
--- a/design/userinterface.sketch
+++ b/design/userinterface.sketch
--- a/releases/hawk-1.0.0.zip
+++ b/releases/hawk-1.0.0.zip
--- a/src/icon/Icon-128.png
+++ b/src/icon/Icon-128.png
--- a/src/icon/Icon-16.png
+++ b/src/icon/Icon-16.png
--- a/src/icon/Icon-340.png
+++ b/src/icon/Icon-340.png
--- a/src/icon/Icon-48.png
+++ b/src/icon/Icon-48.png
--- a/src/icon/Icon-60.png
+++ b/src/icon/Icon-60.png
--- a/src/icon/Icon.png
+++ b/src/icon/Icon.png
--- a/src/img/Back.svg
+++ b/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>
--- a/src/js/components/breadcrumb.js
+++ b/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))}>
-          <i>/</i>{dir}
-        </span>
+          <span key={index} onClick={bind(changedir(path))} style={style}>{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))}>
-            <i>/</i>{dir}
-          </span>
+            <span key={key} className='history' onClick={bind(changedir(path))} style={style}>{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() {
-    let current = store.getState().get('cwd');
-    let up = current.split('/').slice(0, -1).join('/');
+  componentDidUpdate() {
+    let container = React.findDOMNode(this.refs.container);
+    let currents = container.querySelectorAll('span:not(.history)');

-    if (up === current) return;
-
-    store.dispatch(changedir(up));
+    container.scrollLeft = currents[currents.length - 1].offsetLeft;
  }
 }

 function props(state) {
  return {
    lwd: state.get('lwd'), // last working directory
-    cwd: state.get('cwd')
+    cwd: state.get('cwd'),
+    search: state.get('search')
  }
 }
--- a/src/js/components/navigation.js
+++ b/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'>
--- a/src/js/components/toolbar.js
+++ b/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', {
--- a/src/js/reducers/search.js
+++ b/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');
--- a/src/js/tour.js
+++ b/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'
--- a/src/less/components/breadcrumb.less
+++ b/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 {
-    white-space: nowrap;
+  div {
+    display: flex;
+
+    align-items: center;
  }

-  i {
-    margin: 0 2px;
+  span {
+    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 {
--- a/src/less/icons.less
+++ b/src/less/icons.less
@ -72,19 +72,9 @@
  }
 }

-.icon-up {
+.icon-back {
  .icon;
-  display: inline-block;
-
-  border: 11px solid transparent;
-  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;
+  background: url(/img/Back.svg) no-repeat;
+  width: 15px;
+  height: 24px;
 }