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

View File

@ -542,6 +542,7 @@ nav i {
.dialog .foot {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.dialog .foot button {
flex: 1;

View File

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

View File

@ -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}
onClick={button.action.bind(this)}>
{button.text}
</button>;
return (
<button className={button.className + ' btn'} key={i}
onClick={button.action.bind(this)}>
{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'>
{buttons}
</div>
{groupButtons}
</div>
)
}

View File

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

View File

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

View File

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