Base new layout

css/style.css

@@ -149,17 +149,30 @@ html, body {
 
 .edit .menu-bar {
   padding: 5px 10px;
+  display: flex;
+  flex-direction: row;
 }
 
 .edit .menu-bar button {
   margin-right: 3px;
 }
 
+.edit .left {
+  flex: 2;
+}
+
+.edit .main {
+  flex: 3;
+}
+
+.edit .right {
+  flex: 1;
+}
+
 .edit .workspace {
   display: flex;
   flex-direction: row;
   padding: 10px;
-  flex: 3;
 }
 
 .edit .left-menu {
@@ -169,6 +182,11 @@ html, body {
   overflow-y: auto;
 }
 
+.edit .workspace .left .apps-menu {
+  display: flex;
+  flex-direction: column;
+}
+
 .edit .item-form {
   display: flex;
   flex-direction: row;
@@ -188,11 +206,8 @@ html, body {
   padding: 0;
   height: 100%;
   margin: 10px 0 0 0;
-  padding: 0 10px 0 0;
+  overflow-y: auto;
-}
+  display: block;
-
-.edit .apps-list li.desktop-app {
-
 }
 
 .edit .desktop-app > .app-icon {
@@ -204,7 +219,6 @@ html, body {
 }
 
 .edit .profile-tree {
-  flex: 3;
   padding: 0 5px;
 }
 
@@ -228,7 +242,6 @@ html, body {
 }
 
 .edit .app-item-edit {
-  flex: 1;
   padding: 0 5px;
 }
 

js/components/edit/edit-view.js

@@ -21,17 +21,31 @@ var EditView = React.createClass({
 
     return (
       <div className="edit">
-        <div className="workspace">
+        <div className="menu-bar">
-          <div className="left-menu">
+          <div className="left">
             <ProfileMenu />
-            <IconThemeSelector onThemeSelected={this.handleThemeSelect} />
-            <DesktopAppList
-              theme={this.props.theme}
-              desktopApps={this.props.desktopApps}
-              onItemDropped={this.handleItemDrop} />
           </div>
-          <ProfileTree />
+          <div className="main">
-          <ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
+            <button className="btn btn-primary pull-right btn-sm" onClick={this.handleAddNewNode}>Ajouter un noeud</button>
+          </div>
+          <div className="right"></div>
+        </div>
+        <div className="workspace">
+          <div className="left">
+            <div className="apps-menu">
+              <IconThemeSelector onThemeSelected={this.handleThemeSelect} />
+              <DesktopAppList
+                theme={this.props.theme}
+                desktopApps={this.props.desktopApps}
+                onItemDropped={this.handleItemDrop} />
+            </div>
+          </div>
+          <div className="main">
+            <ProfileTree />
+          </div>
+          <div className="right">
+            <ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
+          </div>
         </div>
       </div>
     );

js/components/edit/profile-tree.js

@@ -55,7 +55,6 @@ var ProfileTree = React.createClass({
 
     return (
       <div className="profile-tree">
-        <button className="btn btn-primary pull-right btn-sm" onClick={this.handleAddNewNode}>Ajouter un noeud</button>
         {this.renderTreeNode(this.props.profile)}
       </div>
     );