thereadme/Hawk
1
0
Fork 0
Code Issues 6 Pull Requests Projects Releases 1 Wiki Activity

Improve dialogs, Add Skip button to Tour

Browse Source
This commit is contained in:
Mahdi Dibaiee 2015-09-16 15:43:40 +04:30
parent ce00cb25dc
commit b2b71b5d10
13 changed files with 159 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
build/main.js
View File

@ -30116,7 +30116,8 @@ var copy = _asyncToGenerator(function* (file, newPath) {
if ((0, _utils.type)(child) === 'File') {
Object.defineProperty(child, 'path', {
value: oldPath + '/',
enumerable: true
enumerable: true,
configurable: true
});
}
@ -30344,7 +30345,7 @@ var Dialog = (function (_Component) {
var active = _props.active;
var value = _props.value;
var conditionalInput = input ? _react2['default'].createElement('input', { ref: 'input', value: value }) : '';
var conditionalInput = input ? _react2['default'].createElement('input', { ref: 'input', defaultValue: value }) : '';
var buttons = this.props.buttons.map(function (button, i) {
return _react2['default'].createElement(
@ -30361,7 +30362,7 @@ var Dialog = (function (_Component) {
if (i % 2 === 0) {
groupButtons.push(_react2['default'].createElement(
'div',
{ className: 'foot' },
{ className: 'foot', key: i / 2 },
buttons[i],
buttons[i + 1]
));
@ -30565,9 +30566,9 @@ var FileList = (function (_Component) {
var els = files.map(function (file, index) {
var selected = activeFile.indexOf(file) > -1;
if ((0, _utils.type)(file) === 'File') {
return _react2['default'].createElement(_file2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, size: file.size });
return _react2['default'].createElement(_file2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, size: file.size, type: file.type });
} else {
return _react2['default'].createElement(_directory2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, children: file.children });
return _react2['default'].createElement(_directory2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, children: file.children, type: file.type });
}
});
@ -30667,8 +30668,6 @@ var File = (function (_Component) {
label = _react2['default'].createElement('label', { htmlFor: checkId });
}
console.log(this.props.type);
var clickHandler = this.props.selectView ? this.select.bind(this) : this.open.bind(this);
return _react2['default'].createElement(
@ -30694,6 +30693,8 @@ var File = (function (_Component) {
}, {
key: 'open',
value: function open(e) {
e.preventDefault();
e.stopPropagation();
var file = _store2['default'].getState().get('files')[this.props.index];
var name = file.type === 'application/pdf' ? 'view' : 'open';
@ -30892,6 +30893,7 @@ var MENU_TOP_SPACE = 20;
exports['default'] = {
contextMenu: function contextMenu(e) {
e.preventDefault();
e.stopPropagation();
var file = store.getState().get('files')[this.props.index];
var rect = _react2['default'].findDOMNode(this.refs.container).getBoundingClientRect();
@ -30914,7 +30916,10 @@ exports['default'] = {
store.dispatch((0, _actionsFile.active)([file]));
},
select: function select() {
select: function select(e) {
e.preventDefault();
e.stopPropagation();
var current = (store.getState().get('activeFile') || []).slice(0);
var file = store.getState().get('files')[this.props.index];
@ -31326,6 +31331,11 @@ var Root = (function (_Component) {
'div',
{ className: 'tour-dialog' },
'Hello! Tap each highlighted button to get an understanding of how they work.'
),
_react2['default'].createElement(
'button',
{ id: 'skip-tour' },
'Skip'
)
);
}
@ -32537,89 +32547,40 @@ exports['default'] = function () {
var tourRan = localStorage.getItem('tourRan');
var wrapper = document.querySelector('#wrapper');
var tour = document.querySelector('.tour-dialog');
var skip = document.querySelector('#skip-tour');
var timeout = undefined;
var shown = 0;
if (!tourRan) {
var _iteratorNormalCompletion;
var _iteratorNormalCompletion2;
var _didIteratorError;
var _didIteratorError2;
var _iteratorError;
var _iteratorError2;
var _iterator, _step;
var _iterator2, _step2;
(function () {
wrapper.classList.add('tour');
var items = [].concat(_toConsumableArray(document.querySelectorAll('.tour-item'))).sort(function (a, b) {
return +a.dataset.index - +b.dataset.index;
});
var listeners = [];
_iteratorNormalCompletion = true;
_didIteratorError = false;
_iteratorError = undefined;
wrapper.classList.add('tour');
try {
var _loop = function () {
var item = _step.value;
var firstClass = item.className.slice(0, item.className.indexOf(' '));
var ev = firstClass === 'drawer' ? 'touchstart' : 'click';
item.addEventListener(ev, function listener(e) {
e.preventDefault();
e.stopPropagation();
clearTimeout(timeout);
listeners.push({ item: item, listener: listener, ev: ev });
shown++;
tour.innerHTML = MESSAGES[firstClass];
timeout = setTimeout(function () {
if (shown >= items.length) {
skip.addEventListener('touchstart', function () {
wrapper.classList.remove('tour');
localStorage.setItem('tourRan', 'true');
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator2 = listeners[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _step2$value = _step2.value;
var _item = _step2$value.item;
var _listener = _step2$value.listener;
var _ev = _step2$value.ev;
for (var _iterator = listeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var _step$value = _step.value;
var item = _step$value.item;
var listener = _step$value.listener;
_item.removeEventListener(_ev, _listener);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2['return']) {
_iterator2['return']();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
}
}, DIALOG_HIDE_DELAY);
});
};
for (_iterator = items[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
_loop();
item.removeEventListener('touchstart', listener);
}
} catch (err) {
_didIteratorError = true;
@ -32635,6 +32596,86 @@ exports['default'] = function () {
}
}
}
});
var items = [].concat(_toConsumableArray(document.querySelectorAll('.tour-item'))).sort(function (a, b) {
return +a.dataset.index - +b.dataset.index;
});
_iteratorNormalCompletion2 = true;
_didIteratorError2 = false;
_iteratorError2 = undefined;
try {
var _loop = function () {
var item = _step2.value;
var firstClass = item.className.slice(0, item.className.indexOf(' '));
item.addEventListener('touchstart', function listener(e) {
e.preventDefault();
e.stopPropagation();
clearTimeout(timeout);
listeners.push({ item: item, listener: listener });
shown++;
tour.innerHTML = MESSAGES[firstClass];
timeout = setTimeout(function () {
if (shown >= items.length) {
wrapper.classList.remove('tour');
localStorage.setItem('tourRan', 'true');
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = listeners[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var _step3$value = _step3.value;
var _item = _step3$value.item;
var _listener = _step3$value.listener;
_item.removeEventListener('touchstart', _listener);
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3['return']) {
_iterator3['return']();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
}
}, DIALOG_HIDE_DELAY);
});
};
for (_iterator2 = items[Symbol.iterator](); !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
_loop();
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2['return']) {
_iterator2['return']();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
})();
}
};

5
build/polyfill.js
View File

@ -29,7 +29,6 @@ function shimDirectory(directory) {
directory.toString = function() { return '[object Directory]' };
directory.getFilesAndDirectories = function getFilesAndDirectories() {
var current = (this.path || '') + this.name;
console.log('gettingFilesAndDirectories of', this);
var children = [];
return new Promise(function(resolve, reject) {
@ -50,7 +49,9 @@ function shimDirectory(directory) {
type: this.result.type
});
Object.defineProperty(file, 'path', {
value: parts.slice(0, -1).join('/') + '/'
value: parts.slice(0, -1).join('/') + '/',
configurable: true,
enumerable: true
});
children.push(file);

16
build/style.css
View File

@ -209,7 +209,21 @@ input:checked + label::after {
transform: translate(-50%, -50%);
z-index: 5;
}
.tour-dialog {
.tour #skip-tour {
font-size: 2rem;
display: block;
padding: 0.5rem 5rem;
margin: 1rem auto;
background: #b8e986;
position: fixed;
left: 50%;
top: 65%;
transform: translate(-50%, -50%);
box-shadow: 0 15px 24px 6px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.tour-dialog,
#skip-tour {
display: none;
}
@keyframes pulse {

BIN
releases/hawk-1.0.0.zip
View File

Binary file not shown.

3
src/js/api/files.js
View File

@ -133,7 +133,8 @@ export async function copy(file, newPath) {
if (type(child) === 'File') {
Object.defineProperty(child, 'path', {
value: oldPath + '/',
enumerable: true
enumerable: true,
configurable: true
});
}

4
src/js/components/dialog.js
View File

@ -4,7 +4,7 @@ import { template } from 'utils';
export default class Dialog extends Component {
render() {
let { input, title, description, active, value } = this.props;
let conditionalInput = input ? <input ref='input' value={value} /> : '';
let conditionalInput = input ? <input ref='input' defaultValue={value} /> : '';
let buttons = this.props.buttons.map((button, i) => {
return (
@ -20,7 +20,7 @@ export default class Dialog extends Component {
for (let i = 0; i < buttons.length; i++) {
if (i % 2 === 0) {
groupButtons.push(
<div className='foot'>
<div className='foot' key={i / 2}>
{buttons[i]}
{buttons[i+1]}
</div>

4
src/js/components/file-list.js
View File

@ -21,9 +21,9 @@ export default class FileList extends Component {
let els = files.map((file, index) => {
let selected = activeFile.indexOf(file) > -1;
if (type(file) === 'File') {
return <File selectView={selectView} selected={selected} key={index} index={index} name={file.name} size={file.size} />;
return <File selectView={selectView} selected={selected} key={index} index={index} name={file.name} size={file.size} type={file.type} />;
} else {
return <Directory selectView={selectView} selected={selected} key={index} index={index} name={file.name} children={file.children} />
return <Directory selectView={selectView} selected={selected} key={index} index={index} name={file.name} children={file.children} type={file.type} />
}
});

4
src/js/components/file.js
View File

@ -18,8 +18,6 @@ export default class File extends Component {
label = <label htmlFor={checkId}></label>;
}
console.log(this.props.type);
let clickHandler = this.props.selectView ? this.select.bind(this)
: this.open.bind(this);
@ -39,6 +37,8 @@ export default class File extends Component {
}
open(e) {
e.preventDefault();
e.stopPropagation();
let file = store.getState().get('files')[this.props.index];
let name = file.type === 'application/pdf' ? 'view' : 'open';

6
src/js/components/mixins/entry.js
View File

@ -8,6 +8,7 @@ const MENU_TOP_SPACE = 20;
export default {
contextMenu(e) {
e.preventDefault();
e.stopPropagation();
let file = store.getState().get('files')[this.props.index];
let rect = React.findDOMNode(this.refs.container).getBoundingClientRect();
@ -27,7 +28,10 @@ export default {
store.dispatch(active([file]));
},
select() {
select(e) {
e.preventDefault();
e.stopPropagation();
let current = (store.getState().get('activeFile') || []).slice(0);
let file = store.getState().get('files')[this.props.index];

1
src/js/components/root.js
View File

@ -55,6 +55,7 @@ export default class Root extends Component {
<div className='tour-dialog'>
Hello! Tap each highlighted button to get an understanding of how they work.
</div>
<button id='skip-tour'>Skip</button>
</div>
);
}

23
src/js/tour.js
View File

@ -15,30 +15,39 @@ export default function() {
let tourRan = localStorage.getItem('tourRan');
let wrapper = document.querySelector('#wrapper');
let tour = document.querySelector('.tour-dialog');
let skip = document.querySelector('#skip-tour');
let timeout;
let shown = 0;
if (!tourRan) {
let listeners = [];
wrapper.classList.add('tour');
skip.addEventListener('touchstart', () => {
wrapper.classList.remove('tour');
localStorage.setItem('tourRan', 'true');
for (let {item, listener} of listeners) {
item.removeEventListener('touchstart', listener);
}
})
let items = [...document.querySelectorAll('.tour-item')].sort((a, b) => {
return (+a.dataset.index) - (+b.dataset.index);
});
let listeners = [];
for (let item of items) {
let firstClass = item.className.slice(0, item.className.indexOf(' '));
let ev = firstClass === 'drawer' ? 'touchstart' : 'click';
item.addEventListener(ev, function listener(e) {
item.addEventListener('touchstart', function listener(e) {
e.preventDefault();
e.stopPropagation();
clearTimeout(timeout);
listeners.push({item, listener, ev});
listeners.push({item, listener});
shown++;
@ -49,8 +58,8 @@ export default function() {
wrapper.classList.remove('tour');
localStorage.setItem('tourRan', 'true');
for (let {item, listener, ev} of listeners) {
item.removeEventListener(ev, listener);
for (let {item, listener} of listeners) {
item.removeEventListener('touchstart', listener);
}
}
}, DIALOG_HIDE_DELAY);

25
src/less/styles/tour.less
View File

@ -108,9 +108,32 @@
z-index: 5;
}
#skip-tour {
font-size: 2rem;
display: block;
padding: 0.5rem 5rem;
margin: 1rem auto;
.btn.success;
position: fixed;
left: 50%;
top: 65%;
transform: translate(-50%, -50%);
.shadow-16;
z-index: 1;
}
}
.tour-dialog {
.tour-dialog, #skip-tour {
display: none;
}

5
src/polyfill.js
View File

@ -29,7 +29,6 @@ function shimDirectory(directory) {
directory.toString = function() { return '[object Directory]' };
directory.getFilesAndDirectories = function getFilesAndDirectories() {
var current = (this.path || '') + this.name;
console.log('gettingFilesAndDirectories of', this);
var children = [];
return new Promise(function(resolve, reject) {
@ -50,7 +49,9 @@ function shimDirectory(directory) {
type: this.result.type
});
Object.defineProperty(file, 'path', {
value: parts.slice(0, -1).join('/') + '/'
value: parts.slice(0, -1).join('/') + '/',
configurable: true,
enumerable: true
});
children.push(file);