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