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') { if ((0, _utils.type)(child) === 'File') {
Object.defineProperty(child, 'path', { Object.defineProperty(child, 'path', {
value: oldPath + '/', value: oldPath + '/',
enumerable: true enumerable: true,
configurable: true
}); });
} }
@ -30344,7 +30345,7 @@ var Dialog = (function (_Component) {
var active = _props.active; var active = _props.active;
var value = _props.value; 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) { var buttons = this.props.buttons.map(function (button, i) {
return _react2['default'].createElement( return _react2['default'].createElement(
@ -30361,7 +30362,7 @@ var Dialog = (function (_Component) {
if (i % 2 === 0) { if (i % 2 === 0) {
groupButtons.push(_react2['default'].createElement( groupButtons.push(_react2['default'].createElement(
'div', 'div',
{ className: 'foot' }, { className: 'foot', key: i / 2 },
buttons[i], buttons[i],
buttons[i + 1] buttons[i + 1]
)); ));
@ -30565,9 +30566,9 @@ var FileList = (function (_Component) {
var els = files.map(function (file, index) { var els = files.map(function (file, index) {
var selected = activeFile.indexOf(file) > -1; var selected = activeFile.indexOf(file) > -1;
if ((0, _utils.type)(file) === 'File') { 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 { } 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 }); 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); var clickHandler = this.props.selectView ? this.select.bind(this) : this.open.bind(this);
return _react2['default'].createElement( return _react2['default'].createElement(
@ -30694,6 +30693,8 @@ var File = (function (_Component) {
}, { }, {
key: 'open', key: 'open',
value: function open(e) { value: function open(e) {
e.preventDefault();
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';
@ -30892,6 +30893,7 @@ var MENU_TOP_SPACE = 20;
exports['default'] = { exports['default'] = {
contextMenu: function contextMenu(e) { contextMenu: function contextMenu(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
var file = store.getState().get('files')[this.props.index]; var file = store.getState().get('files')[this.props.index];
var rect = _react2['default'].findDOMNode(this.refs.container).getBoundingClientRect(); var rect = _react2['default'].findDOMNode(this.refs.container).getBoundingClientRect();
@ -30914,7 +30916,10 @@ exports['default'] = {
store.dispatch((0, _actionsFile.active)([file])); 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 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];
@ -31326,6 +31331,11 @@ var Root = (function (_Component) {
'div', 'div',
{ className: 'tour-dialog' }, { className: 'tour-dialog' },
'Hello! Tap each highlighted button to get an understanding of how they work.' '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 tourRan = localStorage.getItem('tourRan');
var wrapper = document.querySelector('#wrapper'); var wrapper = document.querySelector('#wrapper');
var tour = document.querySelector('.tour-dialog'); var tour = document.querySelector('.tour-dialog');
var skip = document.querySelector('#skip-tour');
var timeout = undefined; var timeout = undefined;
var shown = 0; var shown = 0;
if (!tourRan) { if (!tourRan) {
var _iteratorNormalCompletion; var _iteratorNormalCompletion2;
var _didIteratorError; var _didIteratorError2;
var _iteratorError; var _iteratorError2;
var _iterator, _step; var _iterator2, _step2;
(function () { (function () {
var listeners = [];
wrapper.classList.add('tour'); 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) { var items = [].concat(_toConsumableArray(document.querySelectorAll('.tour-item'))).sort(function (a, b) {
return +a.dataset.index - +b.dataset.index; return +a.dataset.index - +b.dataset.index;
}); });
var listeners = []; _iteratorNormalCompletion2 = true;
_didIteratorError2 = false;
_iteratorNormalCompletion = true; _iteratorError2 = undefined;
_didIteratorError = false;
_iteratorError = undefined;
try { try {
var _loop = function () { var _loop = function () {
var item = _step.value; var item = _step2.value;
var firstClass = item.className.slice(0, item.className.indexOf(' ')); 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.preventDefault();
e.stopPropagation(); e.stopPropagation();
clearTimeout(timeout); clearTimeout(timeout);
listeners.push({ item: item, listener: listener, ev: ev }); listeners.push({ item: item, listener: listener });
shown++; shown++;
@ -32586,30 +32628,29 @@ exports['default'] = function () {
wrapper.classList.remove('tour'); wrapper.classList.remove('tour');
localStorage.setItem('tourRan', 'true'); localStorage.setItem('tourRan', 'true');
var _iteratorNormalCompletion2 = true; var _iteratorNormalCompletion3 = true;
var _didIteratorError2 = false; var _didIteratorError3 = false;
var _iteratorError2 = undefined; var _iteratorError3 = undefined;
try { try {
for (var _iterator2 = listeners[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { for (var _iterator3 = listeners[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var _step2$value = _step2.value; var _step3$value = _step3.value;
var _item = _step2$value.item; var _item = _step3$value.item;
var _listener = _step2$value.listener; var _listener = _step3$value.listener;
var _ev = _step2$value.ev;
_item.removeEventListener(_ev, _listener); _item.removeEventListener('touchstart', _listener);
} }
} catch (err) { } catch (err) {
_didIteratorError2 = true; _didIteratorError3 = true;
_iteratorError2 = err; _iteratorError3 = err;
} finally { } finally {
try { try {
if (!_iteratorNormalCompletion2 && _iterator2['return']) { if (!_iteratorNormalCompletion3 && _iterator3['return']) {
_iterator2['return'](); _iterator3['return']();
} }
} finally { } finally {
if (_didIteratorError2) { if (_didIteratorError3) {
throw _iteratorError2; 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(); _loop();
} }
} catch (err) { } catch (err) {
_didIteratorError = true; _didIteratorError2 = true;
_iteratorError = err; _iteratorError2 = err;
} finally { } finally {
try { try {
if (!_iteratorNormalCompletion && _iterator['return']) { if (!_iteratorNormalCompletion2 && _iterator2['return']) {
_iterator['return'](); _iterator2['return']();
} }
} finally { } finally {
if (_didIteratorError) { if (_didIteratorError2) {
throw _iteratorError; throw _iteratorError2;
} }
} }
} }

View File

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

View File

@ -209,7 +209,21 @@ input:checked + label::after {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 5; 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; display: none;
} }
@keyframes pulse { @keyframes pulse {

Binary file not shown.

View File

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

View File

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

View File

@ -21,9 +21,9 @@ export default class FileList extends Component {
let els = files.map((file, index) => { let els = files.map((file, index) => {
let selected = activeFile.indexOf(file) > -1; let selected = activeFile.indexOf(file) > -1;
if (type(file) === 'File') { 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 { } 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} />
} }
}); });

View File

@ -18,8 +18,6 @@ export default class File extends Component {
label = <label htmlFor={checkId}></label>; label = <label htmlFor={checkId}></label>;
} }
console.log(this.props.type);
let clickHandler = this.props.selectView ? this.select.bind(this) let clickHandler = this.props.selectView ? this.select.bind(this)
: this.open.bind(this); : this.open.bind(this);
@ -39,6 +37,8 @@ export default class File extends Component {
} }
open(e) { open(e) {
e.preventDefault();
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

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

View File

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

View File

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

View File

@ -108,9 +108,32 @@
z-index: 5; 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; display: none;
} }

View File

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