Meilleur agencement

css/style.css

@@ -20,6 +20,10 @@ html, body {
   border: 1px solid #ddd;
 }
 
+.full-width {
+  width: 100%;
+}
+
 /* Launcher View */
 
 .launcher {
@@ -147,6 +151,10 @@ html, body {
   flex-direction: column;
 }
 
+.edit .title {
+  margin-top: 5px;
+}
+
 .edit .menu-bar {
   padding: 5px 10px;
   display: flex;
@@ -158,23 +166,32 @@ html, body {
 }
 
 .edit .left {
-  flex: 2;
+  flex: 1;
+  display: flex;
 }
 
 .edit .main {
   flex: 3;
+  display: flex;
 }
 
 .edit .right {
   flex: 1;
+  display: flex;
 }
 
 .edit .workspace {
   display: flex;
   flex-direction: row;
   padding: 10px;
+  flex: 1;
 }
 
+.edit .workspace .main {
+  flex-direction: column;
+}
+
+
 .edit .left-menu {
   display: flex;
   flex-direction: column;
@@ -187,6 +204,10 @@ html, body {
   flex-direction: column;
 }
 
+.edit .workspace .right {
+  flex-direction: column;
+}
+
 .edit .item-form {
   display: flex;
   flex-direction: row;
@@ -197,6 +218,11 @@ html, body {
   width: 100%;
 }
 
+.edit .apps-list {
+  overflow: auto;
+  margin-top: 5px;
+}
+
 .edit .apps-list .icon-theme-selector > select {
   width: 100%;
 }
@@ -205,21 +231,25 @@ html, body {
   list-style: none;
   padding: 0;
   height: 100%;
-  margin: 10px 0 0 0;
-  overflow-y: auto;
   display: block;
+  margin-right: 5px;
 }
 
 .edit .desktop-app > .app-icon {
-  height: 35px;
+  height: 20px;
-  width: 35px;
+  width: auto;
   display: inline-block;
   vertical-align: middle;
   margin-right: 10px;
 }
 
+.edit .desktop-app.list-group-item {
+  padding: 5px 10px;
+}
+
 .edit .profile-tree {
   padding: 0 5px;
+  width: 100%;
 }
 
 .edit .profile-tree ul {

default-profile.json

@@ -19,7 +19,7 @@
           "_key": "item_1444480285022_2"
         },
         {
-          "label": "Level 2-2",
+          "label": "Level 2-3",
           "icon": "chromium-browser",
           "items": [
             {
@@ -36,7 +36,15 @@
                   "label": "Atom",
                   "icon": "atom",
                   "exec": "/usr/share/atom/atom %U",
-                  "_key": "item_1444480288996_7"
+                  "_key": "item_1444480288996_7",
+                  "items": []
+                },
+                {
+                  "label": "Firefox Developer Edition Web Browser",
+                  "icon": "firefox",
+                  "exec": "firefox %u",
+                  "_key": "item_1444761351301_2",
+                  "selected": true
                 }
               ],
               "_key": "item_1444480285022_5"
@@ -49,4 +57,4 @@
     }
   ],
   "_key": "item_1444480285021_0"
-}
+}

js/components/edit/edit-view.js

@@ -26,14 +26,18 @@ var EditView = React.createClass({
             <ProfileMenu />
           </div>
           <div className="main">
-            <button className="btn btn-primary pull-right btn-sm" onClick={this.handleAddNewNode}>Ajouter un noeud</button>
+            <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}
@@ -41,9 +45,11 @@ var EditView = React.createClass({
             </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>

js/components/edit/item-form.js

@@ -17,7 +17,8 @@ var ItemForm = React.createClass({
       this.setState({
         label: props.item.label,
         icon: props.item.icon,
-        exec: props.item.exec
+        exec: props.item.exec,
+        background: props.item.background
       });
     }
 
@@ -31,25 +32,27 @@ var ItemForm = React.createClass({
       <div className="item-form">
         <form>
           <div className="form-group">
-            <label>Label</label>
             <input type="text" className="form-control"
               placeholder="Label"
               value={state.label}
               onChange={this.handleChange.bind(this, 'label')} />
           </div>
           <div className="form-group">
-            <label>Icon</label>
             <input type="text" className="form-control"
-              placeholder="Icon"
+              placeholder="Icône"
               value={state.icon}
               onChange={this.handleChange.bind(this, 'icon')} />
           </div>
           <div className="form-group">
-            <label>Exec</label>
             <input type="text" className="form-control"
-              placeholder="Exec" value={state.exec}
+              placeholder="Chemin d'exécution" value={state.exec}
               onChange={this.handleChange.bind(this, 'exec')} />
           </div>
+          <div className="form-group">
+            <input type="text" className="form-control"
+              placeholder="Fond d'écran" value={state.background}
+              onChange={this.handleChange.bind(this, 'background')} />
+          </div>
         </form>
       </div>
     );

js/util/promises.js

@@ -6,7 +6,7 @@ exports.seq = function(items, generator) {
   var p = Promise.resolve();
 
   for(var i = 0, len = items.length; i < len; ++i) {
-    p = p.then(generateNextHandler(items[i], i === 0));
+    p = p.then(generateNextHandler(items[i], i === 0))
   }
 
   return p.then(function(lastResult) {
@@ -23,3 +23,9 @@ exports.seq = function(items, generator) {
   }
 
 };
+
+exports.delay = function(delay) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, delay);
+  });
+};

main.js

@@ -1,5 +1,6 @@
 var app = require('app');  // Module to control application life.
 var BrowserWindow = require('browser-window');  // Module to create native browser window.
+var Menu = require('menu');
 var isDev = process.env.NODE_ENV === 'development';
 var constants = require('./'+(isDev ? 'js': 'js-compiled')+'/util/const');
 
@@ -23,6 +24,7 @@ app.on('ready', function() {
     frame: !asDesktop,
     width: asDesktop ? size.width : undefined,
     height: asDesktop ? size.height : undefined,
+    'auto-hide-menu-bar': true,
     x: asDesktop ? 0 : undefined,
     y: asDesktop ? 0 : undefined,
   });