fix breadcrumb: Change breadcrumb style to arrow-like buttons
This commit is contained in:
Mahdi Dibaiee
parent
cb30112c40
commit
b3b2ddf4f8
@ -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)) },
|
||||
_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
|
||||
);
|
||||
});
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
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;
|
||||
|
||||
@ -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))}>
|
||||
<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>
|
||||
)
|
||||
});
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user