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

@@ -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(
+        groupButtons
-          'div',
-          { className: 'foot' },
-          buttons
-        )
       );
     }
   }]);
@@ -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',

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;

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

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 { input, title, description, active, value } = this.props;
-    let conditionalInput = input ? <input ref='input' /> : '';
+    let conditionalInput = input ? <input ref='input' value={value} /> : '';
 
     let buttons = this.props.buttons.map((button, i) => {
-      return <button className={button.className + ' btn'} key={i}
+      return (
-                     onClick={button.action.bind(this)}>
+        <button className={button.className + ' btn'} key={i}
-                      {button.text}
+                onClick={button.action.bind(this)}>
-            </button>;
+          {button.text}
+        </button>
+      )
     });
 
+    let groupButtons = [];
+
+    for (let i = 0; i < buttons.length; i++) {
+      if (i % 2 === 0) {
+        groupButtons.push(
+          <div className='foot'>
+            {buttons[i]}
+            {buttons[i+1]}
+          </div>
+        )
+      }
+    }
+
     let className = active ? 'dialog active' : 'dialog';
 
     return (
@@ -22,9 +37,7 @@ export default class Dialog extends Component {
 
         {conditionalInput}
 
-        <div className='foot'>
+        {groupButtons}
-          {buttons}
-        </div>
       </div>
     )
   }

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'
       }

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}));
       }
     },
     {

src/less/components/dialog.less

@@ -48,6 +48,8 @@
 
     justify-content: space-between;
 
+    margin-bottom: 1rem;
+
     button {
       flex: 1;