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)
This commit is contained in:
parent
43239b4a4c
commit
427cbca2dc
@ -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',
|
||||
|
@ -542,6 +542,7 @@ nav i {
|
||||
.dialog .foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.dialog .foot button {
|
||||
flex: 1;
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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 ? <input ref='input' /> : '';
|
||||
let { input, title, description, active, value } = this.props;
|
||||
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 (
|
||||
<button className={button.className + ' btn'} key={i}
|
||||
onClick={button.action.bind(this)}>
|
||||
{button.text}
|
||||
</button>;
|
||||
</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'>
|
||||
{buttons}
|
||||
</div>
|
||||
{groupButtons}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -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'
|
||||
}
|
||||
|
@ -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}));
|
||||
}
|
||||
},
|
||||
{
|
||||
|
@ -48,6 +48,8 @@
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user