Fix long-tapping on items in directories with a lot of items emitting open action on item

Try to reduce the time between selecting files and visual feedback
This commit is contained in:
Mahdi Dibaiee 2015-09-16 19:10:00 +04:30
parent d0c8c91250
commit 31a873d2bb
6 changed files with 32 additions and 22 deletions

View File

@ -30447,7 +30447,7 @@ var Directory = (function (_Component) {
var input = undefined, var input = undefined,
label = undefined; label = undefined;
if (this.props.selectView) { if (this.props.selectView) {
input = _react2['default'].createElement('input', { type: 'checkbox', id: checkId, checked: this.props.selected, readOnly: true }); input = _react2['default'].createElement('input', { type: 'checkbox', id: checkId, checked: this.props.selected, readOnly: true, ref: 'check' });
label = _react2['default'].createElement('label', { htmlFor: checkId }); label = _react2['default'].createElement('label', { htmlFor: checkId });
} }
@ -30476,6 +30476,8 @@ var Directory = (function (_Component) {
}, { }, {
key: 'peek', key: 'peek',
value: function peek() { value: function peek() {
if (document.querySelector('#file-menu.active')) return;
var file = _store2['default'].getState().get('files')[this.props.index]; var file = _store2['default'].getState().get('files')[this.props.index];
_store2['default'].dispatch((0, _actionsChangedir2['default'])(file.path.replace(/^\//, '') + file.name)); _store2['default'].dispatch((0, _actionsChangedir2['default'])(file.path.replace(/^\//, '') + file.name));
@ -30664,7 +30666,7 @@ var File = (function (_Component) {
var input = undefined, var input = undefined,
label = undefined; label = undefined;
if (this.props.selectView) { if (this.props.selectView) {
input = _react2['default'].createElement('input', { type: 'checkbox', id: checkId, checked: this.props.selected, readOnly: true }); input = _react2['default'].createElement('input', { type: 'checkbox', id: checkId, checked: this.props.selected, readOnly: true, ref: 'check' });
label = _react2['default'].createElement('label', { htmlFor: checkId }); label = _react2['default'].createElement('label', { htmlFor: checkId });
} }
@ -30693,8 +30695,8 @@ var File = (function (_Component) {
}, { }, {
key: 'open', key: 'open',
value: function open(e) { value: function open(e) {
e.preventDefault(); if (document.querySelector('#file-menu.active')) return;
e.stopPropagation();
var file = _store2['default'].getState().get('files')[this.props.index]; var file = _store2['default'].getState().get('files')[this.props.index];
var name = file.type === 'application/pdf' ? 'view' : 'open'; var name = file.type === 'application/pdf' ? 'view' : 'open';
@ -30905,7 +30907,7 @@ exports['default'] = {
var left = window.innerWidth / 2 - _componentsMenu.MENU_WIDTH / 2, var left = window.innerWidth / 2 - _componentsMenu.MENU_WIDTH / 2,
top = y + height / 2 + MENU_TOP_SPACE; top = y + height / 2 + MENU_TOP_SPACE;
var dialogHeight = document.getElementById('fileMenu').offsetHeight; var dialogHeight = document.getElementById('file-menu').offsetHeight;
var diff = window.innerHeight - (dialogHeight + top); var diff = window.innerHeight - (dialogHeight + top);
if (diff <= 0) { if (diff <= 0) {
@ -30917,16 +30919,19 @@ exports['default'] = {
}, },
select: function select(e) { select: function select(e) {
e.preventDefault(); if (document.querySelector('#file-menu.active')) return;
e.stopPropagation();
var current = (store.getState().get('activeFile') || []).slice(0); var current = (store.getState().get('activeFile') || []).slice(0);
var file = store.getState().get('files')[this.props.index]; var file = store.getState().get('files')[this.props.index];
var check = _react2['default'].findDOMNode(this.refs.check);
if (current.indexOf(file) > -1) { if (current.indexOf(file) > -1) {
current.splice(current.indexOf(file), 1); current.splice(current.indexOf(file), 1);
check.checked = false;
} else { } else {
current.push(file); current.push(file);
check.checked = true;
} }
store.dispatch((0, _actionsFile.active)(current)); store.dispatch((0, _actionsFile.active)(current));
} }
@ -31318,8 +31323,8 @@ var Root = (function (_Component) {
_react2['default'].createElement(_componentsNavigation2['default'], null), _react2['default'].createElement(_componentsNavigation2['default'], null),
_react2['default'].createElement(_componentsFileList2['default'], null), _react2['default'].createElement(_componentsFileList2['default'], null),
_react2['default'].createElement(_componentsToolbar2['default'], null), _react2['default'].createElement(_componentsToolbar2['default'], null),
_react2['default'].createElement(FileMenu, { id: 'fileMenu' }), _react2['default'].createElement(FileMenu, { id: 'file-menu' }),
_react2['default'].createElement(MoreMenu, { id: 'moreMenu' }), _react2['default'].createElement(MoreMenu, { id: 'more-menu' }),
_react2['default'].createElement(RenameDialog, null), _react2['default'].createElement(RenameDialog, null),
_react2['default'].createElement(DeleteDialog, null), _react2['default'].createElement(DeleteDialog, null),
_react2['default'].createElement(ErrorDialog, null), _react2['default'].createElement(ErrorDialog, null),
@ -32750,8 +32755,8 @@ function humanSize(size) {
for (var key in sizes) { for (var key in sizes) {
var value = sizes[key]; var value = sizes[key];
if (size > value) { if (size >= value) {
return Math.round(size / value) + key; return Math.abs(Math.round(size / value)) + key;
} }
} }
} }

View File

@ -14,7 +14,7 @@ export default class Directory extends Component {
let input, label; let input, label;
if (this.props.selectView) { if (this.props.selectView) {
input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly />; input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly ref='check' />;
label = <label htmlFor={checkId}></label>; label = <label htmlFor={checkId}></label>;
} }
@ -37,6 +37,8 @@ export default class Directory extends Component {
} }
peek() { peek() {
if (document.querySelector('#file-menu.active')) return;
let file = store.getState().get('files')[this.props.index]; let file = store.getState().get('files')[this.props.index];
store.dispatch(changedir(file.path.replace(/^\//, '') + file.name)); store.dispatch(changedir(file.path.replace(/^\//, '') + file.name));

View File

@ -14,7 +14,7 @@ export default class File extends Component {
let input, label; let input, label;
if (this.props.selectView) { if (this.props.selectView) {
input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly />; input = <input type='checkbox' id={checkId} checked={this.props.selected} readOnly ref='check' />;
label = <label htmlFor={checkId}></label>; label = <label htmlFor={checkId}></label>;
} }
@ -37,8 +37,8 @@ export default class File extends Component {
} }
open(e) { open(e) {
e.preventDefault(); if (document.querySelector('#file-menu.active')) return;
e.stopPropagation();
let file = store.getState().get('files')[this.props.index]; let file = store.getState().get('files')[this.props.index];
let name = file.type === 'application/pdf' ? 'view' : 'open'; let name = file.type === 'application/pdf' ? 'view' : 'open';

View File

@ -17,7 +17,7 @@ export default {
let left = window.innerWidth / 2 - MENU_WIDTH / 2, let left = window.innerWidth / 2 - MENU_WIDTH / 2,
top = y + height / 2 + MENU_TOP_SPACE; top = y + height / 2 + MENU_TOP_SPACE;
let dialogHeight = document.getElementById('fileMenu').offsetHeight; let dialogHeight = document.getElementById('file-menu').offsetHeight;
let diff = window.innerHeight - (dialogHeight + top); let diff = window.innerHeight - (dialogHeight + top);
if (diff <= 0) { if (diff <= 0) {
@ -29,16 +29,19 @@ export default {
}, },
select(e) { select(e) {
e.preventDefault(); if (document.querySelector('#file-menu.active')) return;
e.stopPropagation();
let current = (store.getState().get('activeFile') || []).slice(0); let current = (store.getState().get('activeFile') || []).slice(0);
let file = store.getState().get('files')[this.props.index]; let file = store.getState().get('files')[this.props.index];
let check = React.findDOMNode(this.refs.check);
if (current.indexOf(file) > -1) { if (current.indexOf(file) > -1) {
current.splice(current.indexOf(file), 1); current.splice(current.indexOf(file), 1);
check.checked = false;
} else { } else {
current.push(file) current.push(file)
check.checked = true;
} }
store.dispatch(active(current)); store.dispatch(active(current));
} }

View File

@ -39,8 +39,8 @@ export default class Root extends Component {
<FileList /> <FileList />
<Toolbar /> <Toolbar />
<FileMenu id='fileMenu' /> <FileMenu id='file-menu' />
<MoreMenu id='moreMenu' /> <MoreMenu id='more-menu' />
<RenameDialog /> <RenameDialog />
<DeleteDialog /> <DeleteDialog />

View File

@ -39,14 +39,14 @@ const sizes = {
'GB': Math.pow(2, 30), 'GB': Math.pow(2, 30),
'MB': Math.pow(2, 20), 'MB': Math.pow(2, 20),
'KB': Math.pow(2, 10), 'KB': Math.pow(2, 10),
'B': 0 'B': -1
} }
export function humanSize(size) { export function humanSize(size) {
for (let key in sizes) { for (let key in sizes) {
let value = sizes[key]; let value = sizes[key];
if (size >= value) { if (size >= value) {
return Math.round(size / value) + key; return Math.abs(Math.round(size / value)) + key;
} }
} }
} }