From 427cbca2dcb83bd9b81d4cd5bf52e9b0590fe43b Mon Sep 17 00:00:00 2001 From: Mahdi Dibaiee Date: Wed, 16 Sep 2015 14:54:16 +0430 Subject: [PATCH] Improve dialogs: - Clear dialogs after closing them - Rename dialog should be filled with File name intiially - Add a Cancel button to Create dialog (buttons grouped by twos) --- build/main.js | 55 ++++++++++++++++++++++++++------- build/style.css | 1 + src/js/api/files.js | 5 +-- src/js/components/dialog.js | 31 +++++++++++++------ src/js/dialogs.js | 24 ++++++++++++-- src/js/menus.js | 5 +-- src/less/components/dialog.less | 2 ++ 7 files changed, 96 insertions(+), 27 deletions(-) diff --git a/build/main.js b/build/main.js index 6739562..70b585b 100644 --- a/build/main.js +++ b/build/main.js @@ -30074,9 +30074,10 @@ var createDirectory = _asyncToGenerator(function* () { exports.createDirectory = createDirectory; var remove = _asyncToGenerator(function* (file, deep) { + var path = (0, _utils.normalize)(file); var parent = yield root(); - return parent[deep ? 'removeDeep' : 'remove'](file); + return parent[deep ? 'removeDeep' : 'remove'](path); }); exports.remove = remove; @@ -30093,7 +30094,7 @@ exports.move = move; var copy = _asyncToGenerator(function* (file, newPath) { var path = (0, _utils.normalize)(file.path || '').replace(/^\//, ''); - var oldPath = path + file.name; + var oldPath = (0, _utils.normalize)(path + file.name); newPath = (0, _utils.normalize)(newPath); @@ -30341,8 +30342,9 @@ var Dialog = (function (_Component) { var title = _props.title; var description = _props.description; var active = _props.active; + var value = _props.value; - var conditionalInput = input ? _react2['default'].createElement('input', { ref: 'input' }) : ''; + var conditionalInput = input ? _react2['default'].createElement('input', { ref: 'input', value: value }) : ''; var buttons = this.props.buttons.map(function (button, i) { return _react2['default'].createElement( @@ -30353,6 +30355,19 @@ var Dialog = (function (_Component) { ); }); + var groupButtons = []; + + for (var i = 0; i < buttons.length; i++) { + if (i % 2 === 0) { + groupButtons.push(_react2['default'].createElement( + 'div', + { className: 'foot' }, + buttons[i], + buttons[i + 1] + )); + } + } + var className = active ? 'dialog active' : 'dialog'; return _react2['default'].createElement( @@ -30369,11 +30384,7 @@ var Dialog = (function (_Component) { description ), conditionalInput, - _react2['default'].createElement( - 'div', - { className: 'foot' }, - buttons - ) + groupButtons ); } }]); @@ -31574,6 +31585,7 @@ exports['default'] = { this.props.dispatch(action); this.props.dispatch((0, _actionsDialog.hideAll)()); this.props.dispatch((0, _actionsFile.active)()); + input.value = ''; } }, { text: 'Directory', @@ -31586,6 +31598,14 @@ exports['default'] = { this.props.dispatch(action); this.props.dispatch((0, _actionsDialog.hideAll)()); this.props.dispatch((0, _actionsFile.active)()); + input.value = ''; + } + }, { + text: 'Cancel', + action: function action() { + var input = _react2['default'].findDOMNode(this.refs.input); + this.props.dispatch((0, _actionsDialog.hideAll)()); + input.value = ''; } }] }, @@ -31595,7 +31615,11 @@ exports['default'] = { input: true, buttons: [{ text: 'Cancel', - action: (0, _store.bind)((0, _actionsDialog.hideAll)()) + action: function action() { + var input = _react2['default'].findDOMNode(this.refs.input); + this.props.dispatch((0, _actionsDialog.hideAll)()); + input.value = ''; + } }, { text: 'Rename', action: function action() { @@ -31605,6 +31629,7 @@ exports['default'] = { this.props.dispatch((0, _actionsFile.rename)(activeFile, input.value)); this.props.dispatch((0, _actionsDialog.hideAll)()); this.props.dispatch((0, _actionsFile.active)()); + input.value = ''; }, className: 'success' }] @@ -31639,7 +31664,11 @@ exports['default'] = { input: true, buttons: [{ text: 'Cancel', - action: (0, _store.bind)((0, _actionsDialog.hideAll)()) + action: function action() { + var input = _react2['default'].findDOMNode(this.refs.input); + this.props.dispatch((0, _actionsDialog.hideAll)()); + input.value = ''; + } }, { text: 'Search', action: function action() { @@ -31648,6 +31677,7 @@ exports['default'] = { var action = (0, _actionsFilesView.search)(input.value); this.props.dispatch(action); this.props.dispatch((0, _actionsDialog.hideAll)()); + input.value = ''; }, className: 'success' }] @@ -31712,10 +31742,11 @@ var entryMenu = { action: function action() { var files = _store2['default'].getState().get('files'); var active = _store2['default'].getState().get('activeFile'); - var description = 'Enter the new name for ' + active[0].name; + var name = active[0].name; + var description = 'Enter the new name for ' + name; _store2['default'].dispatch((0, _actionsMenu.hideAll)()); - _store2['default'].dispatch((0, _actionsDialog.show)('renameDialog', { description: description })); + _store2['default'].dispatch((0, _actionsDialog.show)('renameDialog', { description: description, value: name })); } }, { name: 'Delete', diff --git a/build/style.css b/build/style.css index 91ecdb2..2a60b3e 100644 --- a/build/style.css +++ b/build/style.css @@ -542,6 +542,7 @@ nav i { .dialog .foot { display: flex; justify-content: space-between; + margin-bottom: 1rem; } .dialog .foot button { flex: 1; diff --git a/src/js/api/files.js b/src/js/api/files.js index fe5c80a..06946c7 100644 --- a/src/js/api/files.js +++ b/src/js/api/files.js @@ -102,9 +102,10 @@ export async function createDirectory(...args) { } export async function remove(file, deep) { + let path = normalize(file); let parent = await root(); - return parent[deep ? 'removeDeep' : 'remove'](file); + return parent[deep ? 'removeDeep' : 'remove'](path); } export async function move(file, newPath) { @@ -117,7 +118,7 @@ export async function move(file, newPath) { export async function copy(file, newPath) { let path = normalize(file.path || '').replace(/^\//, ''); - let oldPath = path + file.name; + let oldPath = normalize(path + file.name); newPath = normalize(newPath); diff --git a/src/js/components/dialog.js b/src/js/components/dialog.js index 719e35a..1c80ccc 100644 --- a/src/js/components/dialog.js +++ b/src/js/components/dialog.js @@ -3,16 +3,31 @@ import { template } from 'utils'; export default class Dialog extends Component { render() { - let { input, title, description, active } = this.props; - let conditionalInput = input ? : ''; + let { input, title, description, active, value } = this.props; + let conditionalInput = input ? : ''; let buttons = this.props.buttons.map((button, i) => { - return ; + return ( + + ) }); + let groupButtons = []; + + for (let i = 0; i < buttons.length; i++) { + if (i % 2 === 0) { + groupButtons.push( +
+ {buttons[i]} + {buttons[i+1]} +
+ ) + } + } + let className = active ? 'dialog active' : 'dialog'; return ( @@ -22,9 +37,7 @@ export default class Dialog extends Component { {conditionalInput} -
- {buttons} -
+ {groupButtons} ) } diff --git a/src/js/dialogs.js b/src/js/dialogs.js index e98efe9..a233019 100644 --- a/src/js/dialogs.js +++ b/src/js/dialogs.js @@ -21,6 +21,7 @@ export default { this.props.dispatch(action); this.props.dispatch(hideAll()); this.props.dispatch(active()); + input.value = ''; } }, { @@ -34,6 +35,15 @@ export default { this.props.dispatch(action); this.props.dispatch(hideAll()); this.props.dispatch(active()); + input.value = ''; + } + }, + { + text: 'Cancel', + action() { + let input = React.findDOMNode(this.refs.input); + this.props.dispatch(hideAll()); + input.value = ''; } } ] @@ -45,7 +55,11 @@ export default { buttons: [ { text: 'Cancel', - action: bind(hideAll()) + action() { + let input = React.findDOMNode(this.refs.input); + this.props.dispatch(hideAll()); + input.value = ''; + } }, { text: 'Rename', @@ -56,6 +70,7 @@ export default { this.props.dispatch(rename(activeFile, input.value)) this.props.dispatch(hideAll()); this.props.dispatch(active()); + input.value = ''; }, className: 'success' } @@ -95,7 +110,11 @@ export default { buttons: [ { text: 'Cancel', - action: bind(hideAll()) + action() { + let input = React.findDOMNode(this.refs.input); + this.props.dispatch(hideAll()); + input.value = ''; + } }, { text: 'Search', @@ -105,6 +124,7 @@ export default { let action = search(input.value); this.props.dispatch(action); this.props.dispatch(hideAll()); + input.value = ''; }, className: 'success' } diff --git a/src/js/menus.js b/src/js/menus.js index 19248b2..3c7bac2 100644 --- a/src/js/menus.js +++ b/src/js/menus.js @@ -11,10 +11,11 @@ const entryMenu = { action() { let files = store.getState().get('files'); let active = store.getState().get('activeFile'); - const description = `Enter the new name for ${active[0].name}`; + let name = active[0].name; + const description = `Enter the new name for ${name}`; store.dispatch(hideAll()); - store.dispatch(show('renameDialog', {description})); + store.dispatch(show('renameDialog', {description, value: name})); } }, { diff --git a/src/less/components/dialog.less b/src/less/components/dialog.less index 9548601..803de6f 100644 --- a/src/less/components/dialog.less +++ b/src/less/components/dialog.less @@ -48,6 +48,8 @@ justify-content: space-between; + margin-bottom: 1rem; + button { flex: 1;