From 740977ed791acbb433ce4c3655808171668a514f Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Tue, 13 Oct 2015 17:27:15 +0200
Subject: [PATCH] Base new layout

---
 css/style.css                      | 29 +++++++++++++++++++--------
 js/components/edit/edit-view.js    | 32 +++++++++++++++++++++---------
 js/components/edit/profile-tree.js |  1 -
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/css/style.css b/css/style.css
index a2cc2c4..17dccec 100644
--- a/css/style.css
+++ b/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;
-}
-
-.edit .apps-list li.desktop-app {
-
+  overflow-y: auto;
+  display: block;
 }
 
 .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;
 }
 
diff --git a/js/components/edit/edit-view.js b/js/components/edit/edit-view.js
index f7a89c7..e252aa3 100644
--- a/js/components/edit/edit-view.js
+++ b/js/components/edit/edit-view.js
@@ -21,17 +21,31 @@ var EditView = React.createClass({
 
     return (
       <div className="edit">
-        <div className="workspace">
-          <div className="left-menu">
+        <div className="menu-bar">
+          <div className="left">
             <ProfileMenu />
-            <IconThemeSelector onThemeSelected={this.handleThemeSelect} />
-            <DesktopAppList
-              theme={this.props.theme}
-              desktopApps={this.props.desktopApps}
-              onItemDropped={this.handleItemDrop} />
           </div>
-          <ProfileTree />
-          <ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
+          <div className="main">
+            <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>
     );
diff --git a/js/components/edit/profile-tree.js b/js/components/edit/profile-tree.js
index b785acf..98f867e 100644
--- a/js/components/edit/profile-tree.js
+++ b/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>
     );