fix breadcrumb: Change breadcrumb style to arrow-like buttons

build/main.js

@@ -30241,46 +30241,40 @@ var Breadcrumb = (function (_Component) {
         )];
       } else {
         (function () {
-          els.unshift(_react2['default'].createElement('span', { onClick: _this.goUp, className: 'icon-up', key: '000' }));
-
           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 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
               );
             });
@@ -30292,7 +30286,7 @@ var Breadcrumb = (function (_Component) {
 
       return _react2['default'].createElement(
         'div',
-        { className: 'breadcrumb' },
+        { className: 'breadcrumb', ref: 'container' },
         _react2['default'].createElement(
           'div',
           null,
@@ -30310,6 +30304,14 @@ var Breadcrumb = (function (_Component) {
 
       store.dispatch((0, _actionsChangedir2['default'])(up));
     }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      var container = _react2['default'].findDOMNode(this.refs.container);
+      var currents = container.querySelectorAll('span:not(.history)');
+
+      container.scrollLeft = currents[currents.length - 1].offsetLeft;
+    }
   }]);
 
   var _Breadcrumb = Breadcrumb;

build/style.css

@@ -509,21 +509,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/js/components/breadcrumb.js

@@ -14,34 +14,33 @@ export default class Breadcrumb extends Component {
         <span key='000'>Search: {this.props.search}</span>
       ]
     } else {
-      els.unshift(<span onClick={this.goUp} className='icon-up' key='000'></span>);
-
-
       let directories = this.props.cwd.split('/').filter(a => a);
+      let lastDirectories = this.props.lwd.split('/').filter(a => a);
       directories.unshift('sdcard');
 
+      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>
           )
         });
 
@@ -50,7 +49,7 @@ export default class Breadcrumb extends Component {
     }
 
     return (
-      <div className='breadcrumb'>
+      <div className='breadcrumb' ref='container'>
         <div>
           {els}
         </div>
@@ -66,6 +65,13 @@ export default class Breadcrumb extends Component {
 
     store.dispatch(changedir(up));
   }
+
+  componentDidUpdate() {
+    let container = React.findDOMNode(this.refs.container);
+    let currents = container.querySelectorAll('span:not(.history)');
+
+    container.scrollLeft = currents[currents.length - 1].offsetLeft;
+  }
 }
 
 function props(state) {

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 {