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

css/style.css

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

src/components/common/app-icon.js

@@ -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) ) {
+        if(!iconPath) return DEFAULT_ICON;
-          return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
-        }
-        return iconPath;
-      })
-      .then(function(iconPath) {
         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 });
       })
     ;
 

src/components/edit/item-form.js

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

src/components/edit/profile-tree.js

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

src/components/edit/tree-item.js

@@ -10,7 +10,6 @@ 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>

src/store/middlewares/logger.js

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

test/desktop.js

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