Firefox OS Style header #9
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 796 B |
BIN
build/icon/Icon-340.png
Normal file
BIN
build/icon/Icon-340.png
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
16
build/img/Back.svg
Normal file
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
153
build/main.js
@ -30215,8 +30215,6 @@ var _actionsChangedir2 = _interopRequireDefault(_actionsChangedir);
|
||||
|
||||
var _store = require('store');
|
||||
|
||||
// TODO: Fix history not working when clicking on sdcard
|
||||
|
||||
var Breadcrumb = (function (_Component) {
|
||||
_inherits(Breadcrumb, _Component);
|
||||
|
||||
@ -30229,71 +30227,80 @@ var Breadcrumb = (function (_Component) {
|
||||
_createClass(Breadcrumb, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var directories = this.props.cwd.split('/').filter(function (a) {
|
||||
return a;
|
||||
});
|
||||
directories.unshift('sdcard');
|
||||
var _this = this;
|
||||
|
||||
var els = directories.map(function (dir, index, arr) {
|
||||
var path = arr.slice(1, index + 1).join('/');
|
||||
var els = [];
|
||||
|
||||
return _react2['default'].createElement(
|
||||
if (this.props.search) {
|
||||
console.log('search');
|
||||
els = [_react2['default'].createElement(
|
||||
'span',
|
||||
{ key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)) },
|
||||
_react2['default'].createElement(
|
||||
'i',
|
||||
null,
|
||||
'/'
|
||||
),
|
||||
dir
|
||||
);
|
||||
});
|
||||
{ key: '000' },
|
||||
'Search: ',
|
||||
this.props.search
|
||||
)];
|
||||
} else {
|
||||
(function () {
|
||||
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) {
|
||||
return a;
|
||||
});
|
||||
if (lastDirectories.length > directories.length - 1) {
|
||||
lastDirectories.splice(0, directories.length - 1);
|
||||
var sumLength = directories.length + lastDirectories.length;
|
||||
|
||||
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
|
||||
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: directories.length + index, className: 'history', onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)) },
|
||||
_react2['default'].createElement(
|
||||
'i',
|
||||
null,
|
||||
'/'
|
||||
),
|
||||
dir
|
||||
);
|
||||
});
|
||||
return _react2['default'].createElement(
|
||||
'span',
|
||||
{ key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
|
||||
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(
|
||||
'div',
|
||||
{ className: 'breadcrumb' },
|
||||
{ className: 'breadcrumb', ref: 'container' },
|
||||
_react2['default'].createElement(
|
||||
'div',
|
||||
null,
|
||||
_react2['default'].createElement('span', { onClick: this.goUp, className: 'icon-up' }),
|
||||
els
|
||||
)
|
||||
);
|
||||
}
|
||||
}, {
|
||||
key: 'goUp',
|
||||
value: function goUp() {
|
||||
var current = store.getState().get('cwd');
|
||||
var up = current.split('/').slice(0, -1).join('/');
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
var container = _react2['default'].findDOMNode(this.refs.container);
|
||||
var currents = container.querySelectorAll('span:not(.history)');
|
||||
|
||||
if (up === current) return;
|
||||
|
||||
store.dispatch((0, _actionsChangedir2['default'])(up));
|
||||
container.scrollLeft = currents[currents.length - 1].offsetLeft;
|
||||
}
|
||||
}]);
|
||||
|
||||
@ -30307,7 +30314,8 @@ exports['default'] = Breadcrumb;
|
||||
function props(state) {
|
||||
return {
|
||||
lwd: state.get('lwd'), // last working directory
|
||||
cwd: state.get('cwd')
|
||||
cwd: state.get('cwd'),
|
||||
search: state.get('search')
|
||||
};
|
||||
}
|
||||
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(
|
||||
'p',
|
||||
null,
|
||||
@ -31545,8 +31582,8 @@ var Toolbar = (function (_Component) {
|
||||
return _react2['default'].createElement(
|
||||
'div',
|
||||
{ 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-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-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' })
|
||||
@ -31567,6 +31604,16 @@ var Toolbar = (function (_Component) {
|
||||
var transform = 'translate(0, -100%)';
|
||||
_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',
|
||||
value: function newFile() {
|
||||
@ -32401,6 +32448,10 @@ exports['default'] = function (state, action) {
|
||||
return action.keywords;
|
||||
}
|
||||
|
||||
if (action.type === _actionsTypes.CHANGE_DIRECTORY || action.type === _actionsTypes.REFRESH) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
@ -32419,7 +32470,7 @@ function search(keywords) {
|
||||
// We don't want to show all the currently visible files from the
|
||||
// first iteration
|
||||
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;
|
||||
|
||||
var current = once ? [] : _store2['default'].getState().get('files');
|
||||
@ -32602,7 +32653,7 @@ var MESSAGES = {
|
||||
'icon-refresh': 'Refresh File List',
|
||||
'icon-select': 'Select files for batch actions',
|
||||
'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',
|
||||
'icon-search': 'Search your storage for a certain file',
|
||||
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
||||
|
||||
@ -65,18 +65,11 @@
|
||||
.icon-cross svg * {
|
||||
fill: white;
|
||||
}
|
||||
.icon-up {
|
||||
.icon-back {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
border: 11px solid transparent;
|
||||
border-right-color: #63b0cd;
|
||||
border-top-width: 8px;
|
||||
border-bottom-width: 8px;
|
||||
border-radius: 3px;
|
||||
margin-right: 0.5rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
right: 0.5rem;
|
||||
background: url(/img/Back.svg) no-repeat;
|
||||
width: 15px;
|
||||
height: 24px;
|
||||
}
|
||||
.regular-medium {
|
||||
font-weight: normal;
|
||||
@ -508,21 +501,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;
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 796 B |
BIN
src/icon/Icon-340.png
Normal file
BIN
src/icon/Icon-340.png
Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
16
src/img/Back.svg
Normal file
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 { bind } from 'store';
|
||||
|
||||
// TODO: Fix history not working when clicking on sdcard
|
||||
@connect(props)
|
||||
export default class Breadcrumb extends Component {
|
||||
render() {
|
||||
let directories = this.props.cwd.split('/').filter(a => a);
|
||||
directories.unshift('sdcard');
|
||||
let els = [];
|
||||
|
||||
let els = directories.map((dir, index, arr) => {
|
||||
let path = arr.slice(1, index + 1).join('/');
|
||||
if (this.props.search) {
|
||||
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 (
|
||||
<span key={index} onClick={bind(changedir(path))}>
|
||||
<i>/</i>{dir}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
let sumLength = directories.length + lastDirectories.length;
|
||||
|
||||
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
|
||||
els = els.concat(directories.map((dir, index, arr) => {
|
||||
let path = arr.slice(1, index + 1).join('/');
|
||||
let style = { zIndex: sumLength - index };
|
||||
|
||||
return (
|
||||
<span key={directories.length + index} className='history' onClick={bind(changedir(path))}>
|
||||
<i>/</i>{dir}
|
||||
</span>
|
||||
)
|
||||
});
|
||||
<span key={index} onClick={bind(changedir(path))} style={style}>{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 (
|
||||
<div className='breadcrumb'>
|
||||
<div className='breadcrumb' ref='container'>
|
||||
<div>
|
||||
<span onClick={this.goUp} className='icon-up'></span>
|
||||
{els}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
goUp() {
|
||||
let current = store.getState().get('cwd');
|
||||
let up = current.split('/').slice(0, -1).join('/');
|
||||
componentDidUpdate() {
|
||||
let container = React.findDOMNode(this.refs.container);
|
||||
let currents = container.querySelectorAll('span:not(.history)');
|
||||
|
||||
if (up === current) return;
|
||||
|
||||
store.dispatch(changedir(up));
|
||||
container.scrollLeft = currents[currents.length - 1].offsetLeft;
|
||||
}
|
||||
}
|
||||
|
||||
function props(state) {
|
||||
return {
|
||||
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>
|
||||
</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>
|
||||
<ul>
|
||||
<li className='coming-soon'>
|
||||
|
||||
@ -10,8 +10,8 @@ export default class Toolbar extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className='toolbar'>
|
||||
<button className='icon-back tour-item' onClick={this.goUp} />
|
||||
<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-select tour-item' onClick={bind(selectView('toggle'))} />
|
||||
<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}}));
|
||||
}
|
||||
|
||||
goUp() {
|
||||
let current = store.getState().get('cwd');
|
||||
let up = current.split('/').slice(0, -1).join('/');
|
||||
|
||||
if (up === current) return;
|
||||
|
||||
store.dispatch(changedir(up));
|
||||
}
|
||||
|
||||
newFile() {
|
||||
let cwd = store.getState().get('cwd');
|
||||
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 { reportError } from 'utils';
|
||||
import { listFiles } from 'actions/files-view';
|
||||
@ -12,6 +12,10 @@ export default function(state = '', action) {
|
||||
return action.keywords;
|
||||
}
|
||||
|
||||
if (action.type === CHANGE_DIRECTORY || action.type === REFRESH) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
@ -28,7 +32,7 @@ function search(keywords) {
|
||||
// We don't want to show all the currently visible files from the
|
||||
// first iteration
|
||||
let once = true;
|
||||
children('/', true).then(function showResults(files) {
|
||||
children('', true).then(function showResults(files) {
|
||||
if (!store.getState().get('search')) return;
|
||||
|
||||
let current = once ? [] : store.getState().get('files');
|
||||
|
||||
@ -3,7 +3,7 @@ const MESSAGES = {
|
||||
'icon-refresh': 'Refresh File List',
|
||||
'icon-select': 'Select files for batch actions',
|
||||
'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',
|
||||
'icon-search': 'Search your storage for a certain file',
|
||||
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -72,19 +72,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon-up {
|
||||
.icon-back {
|
||||
.icon;
|
||||
display: inline-block;
|
||||
|
||||
border: 11px solid transparent;
|
||||
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;
|
||||
background: url(/img/Back.svg) no-repeat;
|
||||
width: 15px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user