Possibilité d'ajouter un item à la racine de l'arbre

This commit is contained in:
wpetit 2015-10-19 09:02:10 +02:00
parent 8478519d20
commit 3d3a93ab26
7 changed files with 58 additions and 21 deletions

View File

@ -272,6 +272,7 @@ html, body {
.edit .profile-tree {
padding: 0 5px;
width: 100%;
height: 100%;
}
.edit .profile-tree ul {

View File

@ -11,7 +11,7 @@ module.exports = React.createClass({
mixins: [LazyLoad],
getInitialState: function() {
return { icon: DEFAULT_ICON, currentTheme: '' };
return { icon: DEFAULT_ICON, iconPath: DEFAULT_ICON, currentTheme: '' };
},
onInViewport: function() {
@ -20,16 +20,20 @@ module.exports = React.createClass({
updateIconIfInViewport: function() {
var currentIcon = this.state.icon;
var newIcon = this.props.icon;
var currentTheme = this.state.currentTheme;
var newTheme = this.props.theme;
if( !this.isInViewport() || newTheme === currentTheme ) return;
var shouldUpdate = this.isInViewport() &&
( (newTheme && newTheme !== currentTheme) || (newIcon && newIcon !== currentIcon) )
;
this.setState({ icon: LOADING_ICON, currentTheme: newTheme });
if( !shouldUpdate ) return;
var desktopEntry = this.props.desktopEntry;
this.setState({ icon: newIcon, iconPath: LOADING_ICON, currentTheme: newTheme });
this._findIcon(this.props.icon, newTheme);
this._findIcon(newIcon, newTheme);
},
@ -39,7 +43,7 @@ module.exports = React.createClass({
render: function() {
var icon = this.state.icon;
var icon = this.state.iconPath;
var style = {
backgroundImage: 'url('+icon+')'
@ -59,12 +63,7 @@ module.exports = React.createClass({
Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
.then(function(iconPath) {
if( !iconPath || /\.xpm$/.test(iconPath) ) {
return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
}
return iconPath;
})
.then(function(iconPath) {
if(!iconPath) return DEFAULT_ICON;
return Util.System.exists(iconPath)
.then(function(exists) {
return exists ? iconPath : DEFAULT_ICON;
@ -72,7 +71,8 @@ module.exports = React.createClass({
;
})
.then(function(iconPath) {
self.setState({ icon: iconPath });
debug('Found icon %s', iconPath);
self.setState({ iconPath: iconPath });
})
;

View File

@ -1,4 +1,5 @@
var React = require('react');
var _ = require('lodash');
var ItemForm = React.createClass({

View File

@ -2,6 +2,8 @@ var React = require('react');
var connect = require('react-redux').connect;
var actions = require('../../store/actions');
var TreeItem = require('./tree-item.js');
var DropTarget = require('react-dnd').DropTarget;
var _ = require('lodash');
var TreeNode = React.createClass({
@ -53,7 +55,9 @@ var ProfileTree = React.createClass({
render: function() {
return (
var connectDropTarget = this.props.connectDropTarget;
return connectDropTarget(
<div className="profile-tree">
{this.renderTreeNode(this.props.profile)}
</div>
@ -93,4 +97,36 @@ function select(state) {
};
}
module.exports = connect(select)(ProfileTree);
var dropTargetSpec = {
drop: function(props, monitor, component) {
if(!monitor.didDrop()) {
return props.profile;
}
},
canDrop: function(props, monitor) {
var draggedItem = monitor.getItem();
return !_.isEqual(draggedItem, props.data);
}
};
function dragSourceCollect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
};
}
function dropTargetCollect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop()
};
}
module.exports = connect(select)(
DropTarget(['ITEM', 'NEW_ITEM'], dropTargetSpec, dropTargetCollect)(ProfileTree)
);

View File

@ -10,8 +10,7 @@ var TreeItem = React.createClass({
render: function() {
var data = this.props.data;
var appIcon = data.icon ? <AppIcon icon={data.icon} theme={this.props.theme} /> : null;
var connectDragSource = this.props.connectDragSource;
var connectDropTarget = this.props.connectDropTarget;
@ -28,7 +27,7 @@ var TreeItem = React.createClass({
return connectDropTarget(connectDragSource(
<div className={classes} style={style} onClick={this.handleClick}>
{appIcon}
<AppIcon icon={data.icon} theme={this.props.theme} />
<span className="app-label">{data.label}</span>
<button type="button" className="close pull-right" onClick={this.handleRemoveClick}>
<span>&times;</span>

View File

@ -4,9 +4,9 @@ module.exports = function loggerMiddleware(store) {
return function(next) {
return function(action) {
debug('Action %j', action);
debug('Store current state %j', store.getState());
//debug('Store current state %j', store.getState());
next(action);
debug('Store new state %j', store.getState());
//debug('Store new state %j', store.getState());
if(action.error) {
console.error(action.error.stack || action.error);
}

View File

@ -1,4 +1,4 @@
var DesktopApps = require('../js/util/desktop-apps');
var DesktopApps = require('../src/util/desktop-apps');
var DesktopSuite = exports.DesktopSuite = {};