103 lines
3.0 KiB
JavaScript
103 lines
3.0 KiB
JavaScript
var React = require('react');
|
|
var connect = require('react-redux').connect;
|
|
var ProfileTree = require('./profile-tree.js');
|
|
var DesktopAppList = require('./desktop-app-list.js');
|
|
var ItemForm = require('./item-form.js');
|
|
var IconThemeSelector = require('./icon-theme-selector.js');
|
|
var ProfileMenu = require('./profile-menu.js');
|
|
|
|
var actions = require('../../store/actions');
|
|
var DragDropContext = require('react-dnd').DragDropContext;
|
|
var HTML5Backend = require('react-dnd/modules/backends/HTML5');
|
|
|
|
var EditView = React.createClass({
|
|
|
|
componentDidMount: function() {
|
|
this.props.dispatch(actions.edit.loadDesktopApps());
|
|
},
|
|
|
|
render: function() {
|
|
|
|
return (
|
|
<div className="edit">
|
|
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
|
|
<div className="menu-bar">
|
|
<div className="left">
|
|
<ProfileMenu />
|
|
</div>
|
|
<div className="main">
|
|
<div className="full-width">
|
|
<button className="btn btn-primary pull-right btn-sm" onClick={this.handleAddNewNode}>Ajouter un noeud</button>
|
|
</div>
|
|
</div>
|
|
<div className="right"></div>
|
|
</div>
|
|
<div className="workspace">
|
|
<div className="left">
|
|
<div className="apps-menu">
|
|
<b className="title">Thème</b>
|
|
<IconThemeSelector onThemeSelected={this.handleThemeSelect} />
|
|
<b className="title">Applications</b>
|
|
<DesktopAppList
|
|
theme={this.props.theme}
|
|
desktopApps={this.props.desktopApps}
|
|
onItemDropped={this.handleItemDrop} />
|
|
</div>
|
|
</div>
|
|
<div className="main">
|
|
<b className="title">Arbre de profil</b>
|
|
<ProfileTree />
|
|
</div>
|
|
<div className="right">
|
|
<b className="title">Édition</b>
|
|
<ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
},
|
|
|
|
handleItemDrop: function(desktopEntry, targetItem) {
|
|
|
|
var newProfileItem = {
|
|
label: desktopEntry.Name,
|
|
icon: desktopEntry.Icon,
|
|
exec: desktopEntry.Exec
|
|
};
|
|
|
|
this.props.dispatch(actions.edit.addProfileItem(newProfileItem, targetItem));
|
|
|
|
},
|
|
|
|
handleThemeSelect: function(theme) {
|
|
this.props.dispatch(actions.edit.useIconTheme(theme));
|
|
},
|
|
|
|
handleItemChange: function(item, key, value) {
|
|
this.props.dispatch(actions.edit.updateProfileItem(item, key, value));
|
|
},
|
|
|
|
handleAddNewNode: function() {
|
|
var newItem = {
|
|
label: 'Nouveau noeud',
|
|
icon: '',
|
|
exec: '',
|
|
background: ''
|
|
};
|
|
this.props.dispatch(actions.edit.addProfileItem(newItem, this.props.profile));
|
|
}
|
|
|
|
});
|
|
|
|
function select(state) {
|
|
return {
|
|
desktopApps: state.desktopApps,
|
|
profile: state.profile,
|
|
theme: state.theme,
|
|
selectedItem: state.selectedItem
|
|
};
|
|
}
|
|
|
|
module.exports = DragDropContext(HTML5Backend)(connect(select)(EditView));
|