Firefox OS Style header #9
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 796 B |
BIN
build/icon/Icon-340.png
Normal file
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
16
build/img/Back.svg
Normal file
@ -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>
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
153
build/main.js
@ -30215,8 +30215,6 @@ var _actionsChangedir2 = _interopRequireDefault(_actionsChangedir);
|
|||||||
|
|
||||||
var _store = require('store');
|
var _store = require('store');
|
||||||
|
|
||||||
// TODO: Fix history not working when clicking on sdcard
|
|
||||||
|
|
||||||
var Breadcrumb = (function (_Component) {
|
var Breadcrumb = (function (_Component) {
|
||||||
_inherits(Breadcrumb, _Component);
|
_inherits(Breadcrumb, _Component);
|
||||||
|
|
||||||
@ -30229,71 +30227,80 @@ var Breadcrumb = (function (_Component) {
|
|||||||
_createClass(Breadcrumb, [{
|
_createClass(Breadcrumb, [{
|
||||||
key: 'render',
|
key: 'render',
|
||||||
value: function render() {
|
value: function render() {
|
||||||
var directories = this.props.cwd.split('/').filter(function (a) {
|
var _this = this;
|
||||||
return a;
|
|
||||||
});
|
|
||||||
directories.unshift('sdcard');
|
|
||||||
|
|
||||||
var els = directories.map(function (dir, index, arr) {
|
var els = [];
|
||||||
var path = arr.slice(1, index + 1).join('/');
|
|
||||||
|
|
||||||
return _react2['default'].createElement(
|
if (this.props.search) {
|
||||||
|
console.log('search');
|
||||||
|
els = [_react2['default'].createElement(
|
||||||
'span',
|
'span',
|
||||||
{ key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)) },
|
{ key: '000' },
|
||||||
_react2['default'].createElement(
|
'Search: ',
|
||||||
'i',
|
this.props.search
|
||||||
null,
|
)];
|
||||||
'/'
|
} else {
|
||||||
),
|
(function () {
|
||||||
dir
|
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 lastDirectories = this.props.lwd.split('/').filter(function (a) {
|
var sumLength = directories.length + lastDirectories.length;
|
||||||
return a;
|
|
||||||
});
|
|
||||||
if (lastDirectories.length > directories.length - 1) {
|
|
||||||
lastDirectories.splice(0, directories.length - 1);
|
|
||||||
|
|
||||||
var _history = lastDirectories.map(function (dir, index, arr) {
|
els = els.concat(directories.map(function (dir, index, arr) {
|
||||||
var current = directories.slice(1).concat(arr.slice(0, index + 1));
|
var path = arr.slice(1, index + 1).join('/');
|
||||||
var path = current.join('/').replace(/^\//, ''); // remove starting slash
|
var style = { zIndex: sumLength - index };
|
||||||
|
|
||||||
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: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
|
||||||
_react2['default'].createElement(
|
dir
|
||||||
'i',
|
);
|
||||||
null,
|
}));
|
||||||
'/'
|
|
||||||
),
|
|
||||||
dir
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
els = els.concat(_history);
|
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: key, className: 'history', onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
|
||||||
|
dir
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
els = els.concat(_history);
|
||||||
|
}
|
||||||
|
})();
|
||||||
}
|
}
|
||||||
|
|
||||||
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,
|
||||||
_react2['default'].createElement('span', { onClick: this.goUp, className: 'icon-up' }),
|
|
||||||
els
|
els
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
key: 'goUp',
|
key: 'componentDidUpdate',
|
||||||
value: function goUp() {
|
value: function componentDidUpdate() {
|
||||||
var current = store.getState().get('cwd');
|
var container = _react2['default'].findDOMNode(this.refs.container);
|
||||||
var up = current.split('/').slice(0, -1).join('/');
|
var currents = container.querySelectorAll('span:not(.history)');
|
||||||
|
|
||||||
if (up === current) return;
|
container.scrollLeft = currents[currents.length - 1].offsetLeft;
|
||||||
|
|
||||||
store.dispatch((0, _actionsChangedir2['default'])(up));
|
|
||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
@ -30307,7 +30314,8 @@ exports['default'] = Breadcrumb;
|
|||||||
function props(state) {
|
function props(state) {
|
||||||
return {
|
return {
|
||||||
lwd: state.get('lwd'), // last working directory
|
lwd: state.get('lwd'), // last working directory
|
||||||
cwd: state.get('cwd')
|
cwd: state.get('cwd'),
|
||||||
|
search: state.get('search')
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
module.exports = exports['default'];
|
module.exports = exports['default'];
|
||||||
@ -31081,6 +31089,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(
|
_react2['default'].createElement(
|
||||||
'p',
|
'p',
|
||||||
null,
|
null,
|
||||||
@ -31545,8 +31582,8 @@ var Toolbar = (function (_Component) {
|
|||||||
return _react2['default'].createElement(
|
return _react2['default'].createElement(
|
||||||
'div',
|
'div',
|
||||||
{ className: 'toolbar' },
|
{ 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-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-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-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' })
|
_react2['default'].createElement('button', { className: 'icon-more tour-item', onClick: this.showMore.bind(this), ref: 'more' })
|
||||||
@ -31567,6 +31604,16 @@ var Toolbar = (function (_Component) {
|
|||||||
var transform = 'translate(0, -100%)';
|
var transform = 'translate(0, -100%)';
|
||||||
_store2['default'].dispatch((0, _actionsMenu.show)('moreMenu', { style: { left: left, top: top, transform: transform } }));
|
_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',
|
key: 'newFile',
|
||||||
value: function newFile() {
|
value: function newFile() {
|
||||||
@ -32401,6 +32448,10 @@ exports['default'] = function (state, action) {
|
|||||||
return action.keywords;
|
return action.keywords;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (action.type === _actionsTypes.CHANGE_DIRECTORY || action.type === _actionsTypes.REFRESH) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
return state;
|
return state;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -32419,7 +32470,7 @@ function search(keywords) {
|
|||||||
// We don't want to show all the currently visible files from the
|
// We don't want to show all the currently visible files from the
|
||||||
// first iteration
|
// first iteration
|
||||||
var once = true;
|
var once = true;
|
||||||
(0, _apiFiles.children)('/', true).then(function showResults(files) {
|
(0, _apiFiles.children)('', true).then(function showResults(files) {
|
||||||
if (!_store2['default'].getState().get('search')) return;
|
if (!_store2['default'].getState().get('search')) return;
|
||||||
|
|
||||||
var current = once ? [] : _store2['default'].getState().get('files');
|
var current = once ? [] : _store2['default'].getState().get('files');
|
||||||
@ -32602,7 +32653,7 @@ var MESSAGES = {
|
|||||||
'icon-refresh': 'Refresh File List',
|
'icon-refresh': 'Refresh File List',
|
||||||
'icon-select': 'Select files for batch actions',
|
'icon-select': 'Select files for batch actions',
|
||||||
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
|
'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',
|
'drawer': 'Extra options, tools and links are here',
|
||||||
'icon-search': 'Search your storage for a certain file',
|
'icon-search': 'Search your storage for a certain file',
|
||||||
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
||||||
|
@ -65,18 +65,11 @@
|
|||||||
.icon-cross svg * {
|
.icon-cross svg * {
|
||||||
fill: white;
|
fill: white;
|
||||||
}
|
}
|
||||||
.icon-up {
|
.icon-back {
|
||||||
display: block;
|
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 {
|
.regular-medium {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@ -508,21 +501,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;
|
||||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 796 B |
BIN
src/icon/Icon-340.png
Normal file
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
16
src/img/Back.svg
Normal file
@ -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>
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@ -3,64 +3,72 @@ import { connect } from 'react-redux';
|
|||||||
import changedir from 'actions/changedir';
|
import changedir from 'actions/changedir';
|
||||||
import { bind } from 'store';
|
import { bind } from 'store';
|
||||||
|
|
||||||
// TODO: Fix history not working when clicking on sdcard
|
|
||||||
@connect(props)
|
@connect(props)
|
||||||
export default class Breadcrumb extends Component {
|
export default class Breadcrumb extends Component {
|
||||||
render() {
|
render() {
|
||||||
let directories = this.props.cwd.split('/').filter(a => a);
|
let els = [];
|
||||||
directories.unshift('sdcard');
|
|
||||||
|
|
||||||
let els = directories.map((dir, index, arr) => {
|
if (this.props.search) {
|
||||||
let path = arr.slice(1, index + 1).join('/');
|
console.log('search');
|
||||||
|
els = [
|
||||||
|
<span key='000'>Search: {this.props.search}</span>
|
||||||
|
]
|
||||||
|
} else {
|
||||||
|
let directories = this.props.cwd.split('/').filter(a => a);
|
||||||
|
let lastDirectories = this.props.lwd.split('/').filter(a => a);
|
||||||
|
directories.unshift('sdcard');
|
||||||
|
|
||||||
return (
|
let sumLength = directories.length + lastDirectories.length;
|
||||||
<span key={index} onClick={bind(changedir(path))}>
|
|
||||||
<i>/</i>{dir}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
let lastDirectories = this.props.lwd.split('/').filter(a => a);
|
els = els.concat(directories.map((dir, index, arr) => {
|
||||||
if (lastDirectories.length > directories.length - 1) {
|
let path = arr.slice(1, index + 1).join('/');
|
||||||
lastDirectories.splice(0, directories.length - 1);
|
let style = { zIndex: sumLength - index };
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span key={directories.length + index} className='history' onClick={bind(changedir(path))}>
|
<span key={index} onClick={bind(changedir(path))} style={style}>{dir}</span>
|
||||||
<i>/</i>{dir}
|
);
|
||||||
</span>
|
}));
|
||||||
)
|
|
||||||
});
|
|
||||||
|
|
||||||
els = els.concat(history);
|
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={key} className='history' onClick={bind(changedir(path))} style={style}>{dir}</span>
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
els = els.concat(history);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='breadcrumb'>
|
<div className='breadcrumb' ref='container'>
|
||||||
<div>
|
<div>
|
||||||
<span onClick={this.goUp} className='icon-up'></span>
|
|
||||||
{els}
|
{els}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
goUp() {
|
componentDidUpdate() {
|
||||||
let current = store.getState().get('cwd');
|
let container = React.findDOMNode(this.refs.container);
|
||||||
let up = current.split('/').slice(0, -1).join('/');
|
let currents = container.querySelectorAll('span:not(.history)');
|
||||||
|
|
||||||
if (up === current) return;
|
container.scrollLeft = currents[currents.length - 1].offsetLeft;
|
||||||
|
|
||||||
store.dispatch(changedir(up));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function props(state) {
|
function props(state) {
|
||||||
return {
|
return {
|
||||||
lwd: state.get('lwd'), // last working directory
|
lwd: state.get('lwd'), // last working directory
|
||||||
cwd: state.get('cwd')
|
cwd: state.get('cwd'),
|
||||||
|
search: state.get('search')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -40,6 +40,18 @@ export default class Navigation extends Component {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
<p>Tools</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li className='coming-soon'>
|
<li className='coming-soon'>
|
||||||
|
@ -10,8 +10,8 @@ export default class Toolbar extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className='toolbar'>
|
<div className='toolbar'>
|
||||||
|
<button className='icon-back tour-item' onClick={this.goUp} />
|
||||||
<button className='icon-plus tour-item' onClick={this.newFile} />
|
<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-refresh tour-item' onClick={bind(refresh())} />
|
||||||
<button className='icon-select tour-item' onClick={bind(selectView('toggle'))} />
|
<button className='icon-select tour-item' onClick={bind(selectView('toggle'))} />
|
||||||
<button className='icon-more tour-item' onClick={this.showMore.bind(this)} ref='more' />
|
<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}}));
|
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() {
|
newFile() {
|
||||||
let cwd = store.getState().get('cwd');
|
let cwd = store.getState().get('cwd');
|
||||||
let action = showDialog('createDialog', {
|
let action = showDialog('createDialog', {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { SEARCH } from 'actions/types';
|
import { SEARCH, CHANGE_DIRECTORY, REFRESH } from 'actions/types';
|
||||||
import store from 'store';
|
import store from 'store';
|
||||||
import { reportError } from 'utils';
|
import { reportError } from 'utils';
|
||||||
import { listFiles } from 'actions/files-view';
|
import { listFiles } from 'actions/files-view';
|
||||||
@ -12,6 +12,10 @@ export default function(state = '', action) {
|
|||||||
return action.keywords;
|
return action.keywords;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (action.type === CHANGE_DIRECTORY || action.type === REFRESH) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -28,7 +32,7 @@ function search(keywords) {
|
|||||||
// We don't want to show all the currently visible files from the
|
// We don't want to show all the currently visible files from the
|
||||||
// first iteration
|
// first iteration
|
||||||
let once = true;
|
let once = true;
|
||||||
children('/', true).then(function showResults(files) {
|
children('', true).then(function showResults(files) {
|
||||||
if (!store.getState().get('search')) return;
|
if (!store.getState().get('search')) return;
|
||||||
|
|
||||||
let current = once ? [] : store.getState().get('files');
|
let current = once ? [] : store.getState().get('files');
|
||||||
|
@ -3,7 +3,7 @@ const MESSAGES = {
|
|||||||
'icon-refresh': 'Refresh File List',
|
'icon-refresh': 'Refresh File List',
|
||||||
'icon-select': 'Select files for batch actions',
|
'icon-select': 'Select files for batch actions',
|
||||||
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
|
'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',
|
'drawer': 'Extra options, tools and links are here',
|
||||||
'icon-search': 'Search your storage for a certain file',
|
'icon-search': 'Search your storage for a certain file',
|
||||||
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
||||||
|
@ -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 {
|
||||||
|
@ -72,19 +72,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-up {
|
.icon-back {
|
||||||
.icon;
|
.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;
|
|
||||||
}
|
}
|
||||||
|