fix breadcrumb: Change breadcrumb style to arrow-like buttons

This commit is contained in:
Mahdi Dibaiee 2015-09-27 18:40:13 +03:30
parent cb30112c40
commit b3b2ddf4f8
4 changed files with 99 additions and 40 deletions

View File

@ -30241,46 +30241,40 @@ var Breadcrumb = (function (_Component) {
)]; )];
} else { } else {
(function () { (function () {
els.unshift(_react2['default'].createElement('span', { onClick: _this.goUp, className: 'icon-up', key: '000' }));
var directories = _this.props.cwd.split('/').filter(function (a) { var directories = _this.props.cwd.split('/').filter(function (a) {
return a; return a;
}); });
var lastDirectories = _this.props.lwd.split('/').filter(function (a) {
return a;
});
directories.unshift('sdcard'); directories.unshift('sdcard');
var sumLength = directories.length + lastDirectories.length;
els = els.concat(directories.map(function (dir, index, arr) { els = els.concat(directories.map(function (dir, index, arr) {
var path = arr.slice(1, index + 1).join('/'); var path = arr.slice(1, index + 1).join('/');
var style = { zIndex: sumLength - index };
return _react2['default'].createElement( return _react2['default'].createElement(
'span', '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 dir
); );
})); }));
var lastDirectories = _this.props.lwd.split('/').filter(function (a) {
return a;
});
if (lastDirectories.length > directories.length - 1) { if (lastDirectories.length > directories.length - 1) {
lastDirectories.splice(0, directories.length - 1); lastDirectories.splice(0, directories.length - 1);
var _history = lastDirectories.map(function (dir, index, arr) { var _history = lastDirectories.map(function (dir, index, arr) {
var current = directories.slice(1).concat(arr.slice(0, index + 1)); var current = directories.slice(1).concat(arr.slice(0, index + 1));
var path = current.join('/').replace(/^\//, ''); // remove starting slash 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( return _react2['default'].createElement(
'span', '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 dir
); );
}); });
@ -30292,7 +30286,7 @@ var Breadcrumb = (function (_Component) {
return _react2['default'].createElement( return _react2['default'].createElement(
'div', 'div',
{ className: 'breadcrumb' }, { className: 'breadcrumb', ref: 'container' },
_react2['default'].createElement( _react2['default'].createElement(
'div', 'div',
null, null,
@ -30310,6 +30304,14 @@ var Breadcrumb = (function (_Component) {
store.dispatch((0, _actionsChangedir2['default'])(up)); 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; var _Breadcrumb = Breadcrumb;

View File

@ -509,21 +509,41 @@ nav i {
width: 100vw; width: 100vw;
height: 4.5rem; height: 4.5rem;
overflow-x: auto; overflow-x: auto;
padding: 8px;
box-sizing: border-box; box-sizing: border-box;
font-weight: 200; font-weight: 200;
font-size: 1.6rem; font-size: 1.6rem;
padding-right: 8px;
background: #f8f8f8; background: #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; 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 { .breadcrumb span.history {
color: #9b9b93; color: #9b9b93;

View File

@ -14,34 +14,33 @@ export default class Breadcrumb extends Component {
<span key='000'>Search: {this.props.search}</span> <span key='000'>Search: {this.props.search}</span>
] ]
} else { } else {
els.unshift(<span onClick={this.goUp} className='icon-up' key='000'></span>);
let directories = this.props.cwd.split('/').filter(a => a); let directories = this.props.cwd.split('/').filter(a => a);
let lastDirectories = this.props.lwd.split('/').filter(a => a);
directories.unshift('sdcard'); directories.unshift('sdcard');
let sumLength = directories.length + lastDirectories.length;
els = els.concat(directories.map((dir, index, arr) => { els = els.concat(directories.map((dir, index, arr) => {
let path = arr.slice(1, index + 1).join('/'); let path = arr.slice(1, index + 1).join('/');
let style = { zIndex: sumLength - index };
return ( 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) { if (lastDirectories.length > directories.length - 1) {
lastDirectories.splice(0, directories.length - 1); lastDirectories.splice(0, directories.length - 1);
let history = lastDirectories.map((dir, index, arr) => { let history = lastDirectories.map((dir, index, arr) => {
let current = directories.slice(1).concat(arr.slice(0, index + 1)); let current = directories.slice(1).concat(arr.slice(0, index + 1));
let path = current.join('/').replace(/^\//, ''); // remove starting slash let path = current.join('/').replace(/^\//, ''); // remove starting slash
let key = directories.length + index;
let style = { zIndex: arr.length - index};
console.log('history', dir)
return ( 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 ( return (
<div className='breadcrumb'> <div className='breadcrumb' ref='container'>
<div> <div>
{els} {els}
</div> </div>
@ -66,6 +65,13 @@ export default class Breadcrumb extends Component {
store.dispatch(changedir(up)); 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) { function props(state) {

View File

@ -8,12 +8,12 @@
overflow-x: auto; overflow-x: auto;
padding: 8px;
box-sizing: border-box; box-sizing: border-box;
.light-medium; .light-medium;
padding-right: 8px;
background: @light-gray; background: @light-gray;
border-bottom: 1px solid @dark-transparent; border-bottom: 1px solid @dark-transparent;
@ -22,12 +22,43 @@
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; 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 { span.history {