feat back: replaced toolbar's "Toggle View" button with "Back" - resolve #6

Views are now listed in navigation drawer as a radio-button group

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

@@ -30294,16 +30294,6 @@ var Breadcrumb = (function (_Component) {
         )
       );
     }
-  }, {
-    key: 'goUp',
-    value: function goUp() {
-      var current = store.getState().get('cwd');
-      var up = current.split('/').slice(0, -1).join('/');
-
-      if (up === current) return;
-
-      store.dispatch((0, _actionsChangedir2['default'])(up));
-    }
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
@@ -31087,6 +31077,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,
@@ -31551,8 +31570,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' })
@@ -31573,6 +31592,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() {
@@ -32612,7 +32641,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

@@ -59,18 +59,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;

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

@@ -57,15 +57,6 @@ export default class Breadcrumb extends Component {
     );
   }
 
-  goUp() {
-    let current = store.getState().get('cwd');
-    let up = current.split('/').slice(0, -1).join('/');
-
-    if (up === current) return;
-
-    store.dispatch(changedir(up));
-  }
-
   componentDidUpdate() {
     let container = React.findDOMNode(this.refs.container);
     let currents = container.querySelectorAll('span:not(.history)');

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/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/icons.less

@@ -66,19 +66,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;
 }