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:
Mahdi Dibaiee 2015-09-16 14:54:16 +04:30
parent 43239b4a4c
commit 427cbca2dc
7 changed files with 96 additions and 27 deletions

View File

@ -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',

View File

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

View File

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

View File

@ -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>
) )
} }

View File

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

View File

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

View File

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