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;
|
exports.createDirectory = createDirectory;
|
||||||
|
|
||||||
var remove = _asyncToGenerator(function* (file, deep) {
|
var remove = _asyncToGenerator(function* (file, deep) {
|
||||||
|
var path = (0, _utils.normalize)(file);
|
||||||
var parent = yield root();
|
var parent = yield root();
|
||||||
|
|
||||||
return parent[deep ? 'removeDeep' : 'remove'](file);
|
return parent[deep ? 'removeDeep' : 'remove'](path);
|
||||||
});
|
});
|
||||||
|
|
||||||
exports.remove = remove;
|
exports.remove = remove;
|
||||||
@ -30093,7 +30094,7 @@ exports.move = move;
|
|||||||
|
|
||||||
var copy = _asyncToGenerator(function* (file, newPath) {
|
var copy = _asyncToGenerator(function* (file, newPath) {
|
||||||
var path = (0, _utils.normalize)(file.path || '').replace(/^\//, '');
|
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);
|
newPath = (0, _utils.normalize)(newPath);
|
||||||
|
|
||||||
@ -30341,8 +30342,9 @@ var Dialog = (function (_Component) {
|
|||||||
var title = _props.title;
|
var title = _props.title;
|
||||||
var description = _props.description;
|
var description = _props.description;
|
||||||
var active = _props.active;
|
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) {
|
var buttons = this.props.buttons.map(function (button, i) {
|
||||||
return _react2['default'].createElement(
|
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';
|
var className = active ? 'dialog active' : 'dialog';
|
||||||
|
|
||||||
return _react2['default'].createElement(
|
return _react2['default'].createElement(
|
||||||
@ -30369,11 +30384,7 @@ var Dialog = (function (_Component) {
|
|||||||
description
|
description
|
||||||
),
|
),
|
||||||
conditionalInput,
|
conditionalInput,
|
||||||
_react2['default'].createElement(
|
groupButtons
|
||||||
'div',
|
|
||||||
{ className: 'foot' },
|
|
||||||
buttons
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
@ -31574,6 +31585,7 @@ exports['default'] = {
|
|||||||
this.props.dispatch(action);
|
this.props.dispatch(action);
|
||||||
this.props.dispatch((0, _actionsDialog.hideAll)());
|
this.props.dispatch((0, _actionsDialog.hideAll)());
|
||||||
this.props.dispatch((0, _actionsFile.active)());
|
this.props.dispatch((0, _actionsFile.active)());
|
||||||
|
input.value = '';
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
text: 'Directory',
|
text: 'Directory',
|
||||||
@ -31586,6 +31598,14 @@ exports['default'] = {
|
|||||||
this.props.dispatch(action);
|
this.props.dispatch(action);
|
||||||
this.props.dispatch((0, _actionsDialog.hideAll)());
|
this.props.dispatch((0, _actionsDialog.hideAll)());
|
||||||
this.props.dispatch((0, _actionsFile.active)());
|
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,
|
input: true,
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Cancel',
|
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',
|
text: 'Rename',
|
||||||
action: function action() {
|
action: function action() {
|
||||||
@ -31605,6 +31629,7 @@ exports['default'] = {
|
|||||||
this.props.dispatch((0, _actionsFile.rename)(activeFile, input.value));
|
this.props.dispatch((0, _actionsFile.rename)(activeFile, input.value));
|
||||||
this.props.dispatch((0, _actionsDialog.hideAll)());
|
this.props.dispatch((0, _actionsDialog.hideAll)());
|
||||||
this.props.dispatch((0, _actionsFile.active)());
|
this.props.dispatch((0, _actionsFile.active)());
|
||||||
|
input.value = '';
|
||||||
},
|
},
|
||||||
className: 'success'
|
className: 'success'
|
||||||
}]
|
}]
|
||||||
@ -31639,7 +31664,11 @@ exports['default'] = {
|
|||||||
input: true,
|
input: true,
|
||||||
buttons: [{
|
buttons: [{
|
||||||
text: 'Cancel',
|
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',
|
text: 'Search',
|
||||||
action: function action() {
|
action: function action() {
|
||||||
@ -31648,6 +31677,7 @@ exports['default'] = {
|
|||||||
var action = (0, _actionsFilesView.search)(input.value);
|
var action = (0, _actionsFilesView.search)(input.value);
|
||||||
this.props.dispatch(action);
|
this.props.dispatch(action);
|
||||||
this.props.dispatch((0, _actionsDialog.hideAll)());
|
this.props.dispatch((0, _actionsDialog.hideAll)());
|
||||||
|
input.value = '';
|
||||||
},
|
},
|
||||||
className: 'success'
|
className: 'success'
|
||||||
}]
|
}]
|
||||||
@ -31712,10 +31742,11 @@ var entryMenu = {
|
|||||||
action: function action() {
|
action: function action() {
|
||||||
var files = _store2['default'].getState().get('files');
|
var files = _store2['default'].getState().get('files');
|
||||||
var active = _store2['default'].getState().get('activeFile');
|
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, _actionsMenu.hideAll)());
|
||||||
_store2['default'].dispatch((0, _actionsDialog.show)('renameDialog', { description: description }));
|
_store2['default'].dispatch((0, _actionsDialog.show)('renameDialog', { description: description, value: name }));
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
name: 'Delete',
|
name: 'Delete',
|
||||||
|
@ -542,6 +542,7 @@ nav i {
|
|||||||
.dialog .foot {
|
.dialog .foot {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
.dialog .foot button {
|
.dialog .foot button {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@ -102,9 +102,10 @@ export async function createDirectory(...args) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function remove(file, deep) {
|
export async function remove(file, deep) {
|
||||||
|
let path = normalize(file);
|
||||||
let parent = await root();
|
let parent = await root();
|
||||||
|
|
||||||
return parent[deep ? 'removeDeep' : 'remove'](file);
|
return parent[deep ? 'removeDeep' : 'remove'](path);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function move(file, newPath) {
|
export async function move(file, newPath) {
|
||||||
@ -117,7 +118,7 @@ export async function move(file, newPath) {
|
|||||||
|
|
||||||
export async function copy(file, newPath) {
|
export async function copy(file, newPath) {
|
||||||
let path = normalize(file.path || '').replace(/^\//, '');
|
let path = normalize(file.path || '').replace(/^\//, '');
|
||||||
let oldPath = path + file.name;
|
let oldPath = normalize(path + file.name);
|
||||||
|
|
||||||
newPath = normalize(newPath);
|
newPath = normalize(newPath);
|
||||||
|
|
||||||
|
@ -3,16 +3,31 @@ import { template } from 'utils';
|
|||||||
|
|
||||||
export default class Dialog extends Component {
|
export default class Dialog extends Component {
|
||||||
render() {
|
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) => {
|
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)}>
|
onClick={button.action.bind(this)}>
|
||||||
{button.text}
|
{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';
|
let className = active ? 'dialog active' : 'dialog';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -22,9 +37,7 @@ export default class Dialog extends Component {
|
|||||||
|
|
||||||
{conditionalInput}
|
{conditionalInput}
|
||||||
|
|
||||||
<div className='foot'>
|
{groupButtons}
|
||||||
{buttons}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -21,6 +21,7 @@ export default {
|
|||||||
this.props.dispatch(action);
|
this.props.dispatch(action);
|
||||||
this.props.dispatch(hideAll());
|
this.props.dispatch(hideAll());
|
||||||
this.props.dispatch(active());
|
this.props.dispatch(active());
|
||||||
|
input.value = '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -34,6 +35,15 @@ export default {
|
|||||||
this.props.dispatch(action);
|
this.props.dispatch(action);
|
||||||
this.props.dispatch(hideAll());
|
this.props.dispatch(hideAll());
|
||||||
this.props.dispatch(active());
|
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: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Cancel',
|
text: 'Cancel',
|
||||||
action: bind(hideAll())
|
action() {
|
||||||
|
let input = React.findDOMNode(this.refs.input);
|
||||||
|
this.props.dispatch(hideAll());
|
||||||
|
input.value = '';
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Rename',
|
text: 'Rename',
|
||||||
@ -56,6 +70,7 @@ export default {
|
|||||||
this.props.dispatch(rename(activeFile, input.value))
|
this.props.dispatch(rename(activeFile, input.value))
|
||||||
this.props.dispatch(hideAll());
|
this.props.dispatch(hideAll());
|
||||||
this.props.dispatch(active());
|
this.props.dispatch(active());
|
||||||
|
input.value = '';
|
||||||
},
|
},
|
||||||
className: 'success'
|
className: 'success'
|
||||||
}
|
}
|
||||||
@ -95,7 +110,11 @@ export default {
|
|||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'Cancel',
|
text: 'Cancel',
|
||||||
action: bind(hideAll())
|
action() {
|
||||||
|
let input = React.findDOMNode(this.refs.input);
|
||||||
|
this.props.dispatch(hideAll());
|
||||||
|
input.value = '';
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Search',
|
text: 'Search',
|
||||||
@ -105,6 +124,7 @@ export default {
|
|||||||
let action = search(input.value);
|
let action = search(input.value);
|
||||||
this.props.dispatch(action);
|
this.props.dispatch(action);
|
||||||
this.props.dispatch(hideAll());
|
this.props.dispatch(hideAll());
|
||||||
|
input.value = '';
|
||||||
},
|
},
|
||||||
className: 'success'
|
className: 'success'
|
||||||
}
|
}
|
||||||
|
@ -11,10 +11,11 @@ const entryMenu = {
|
|||||||
action() {
|
action() {
|
||||||
let files = store.getState().get('files');
|
let files = store.getState().get('files');
|
||||||
let active = store.getState().get('activeFile');
|
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(hideAll());
|
||||||
store.dispatch(show('renameDialog', {description}));
|
store.dispatch(show('renameDialog', {description, value: name}));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -48,6 +48,8 @@
|
|||||||
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user