Improve dialogs, Add Skip button to Tour

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

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,45 +32547,77 @@ 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 () {
var listeners = [];
wrapper.classList.add('tour');
skip.addEventListener('touchstart', function () {
wrapper.classList.remove('tour');
localStorage.setItem('tourRan', 'true');
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
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('touchstart', listener);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator['return']) {
_iterator['return']();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
});
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;
_iteratorNormalCompletion2 = true;
_didIteratorError2 = false;
_iteratorError2 = undefined;
try {
var _loop = function () {
var item = _step.value;
var item = _step2.value;
var firstClass = item.className.slice(0, item.className.indexOf(' '));
var 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: item, listener: listener, ev: ev });
listeners.push({ item: item, listener: listener });
shown++;
@ -32586,30 +32628,29 @@ exports['default'] = function () {
wrapper.classList.remove('tour');
localStorage.setItem('tourRan', 'true');
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = 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 _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(_ev, _listener);
_item.removeEventListener('touchstart', _listener);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2['return']) {
_iterator2['return']();
if (!_iteratorNormalCompletion3 && _iterator3['return']) {
_iterator3['return']();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
@ -32618,20 +32659,20 @@ exports['default'] = function () {
});
};
for (_iterator = items[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
for (_iterator2 = items[Symbol.iterator](); !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
_loop();
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator['return']) {
_iterator['return']();
if (!_iteratorNormalCompletion2 && _iterator2['return']) {
_iterator2['return']();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}

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);

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 {