Meilleur agencement

This commit is contained in:
William Petit 2015-10-13 20:44:55 +02:00
parent 740977ed79
commit 39399a5c08
6 changed files with 71 additions and 16 deletions

View File

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

View File

@ -19,7 +19,7 @@
"_key": "item_1444480285022_2" "_key": "item_1444480285022_2"
}, },
{ {
"label": "Level 2-2", "label": "Level 2-3",
"icon": "chromium-browser", "icon": "chromium-browser",
"items": [ "items": [
{ {
@ -36,7 +36,15 @@
"label": "Atom", "label": "Atom",
"icon": "atom", "icon": "atom",
"exec": "/usr/share/atom/atom %U", "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" "_key": "item_1444480285022_5"

View File

@ -26,14 +26,18 @@ var EditView = React.createClass({
<ProfileMenu /> <ProfileMenu />
</div> </div>
<div className="main"> <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>
<div className="right"></div> <div className="right"></div>
</div> </div>
<div className="workspace"> <div className="workspace">
<div className="left"> <div className="left">
<div className="apps-menu"> <div className="apps-menu">
<b className="title">Thème</b>
<IconThemeSelector onThemeSelected={this.handleThemeSelect} /> <IconThemeSelector onThemeSelected={this.handleThemeSelect} />
<b className="title">Applications</b>
<DesktopAppList <DesktopAppList
theme={this.props.theme} theme={this.props.theme}
desktopApps={this.props.desktopApps} desktopApps={this.props.desktopApps}
@ -41,9 +45,11 @@ var EditView = React.createClass({
</div> </div>
</div> </div>
<div className="main"> <div className="main">
<b className="title">Arbre de profil</b>
<ProfileTree /> <ProfileTree />
</div> </div>
<div className="right"> <div className="right">
<b className="title">Édition</b>
<ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} /> <ItemForm item={this.props.selectedItem} onItemChange={this.handleItemChange} />
</div> </div>
</div> </div>

View File

@ -17,7 +17,8 @@ var ItemForm = React.createClass({
this.setState({ this.setState({
label: props.item.label, label: props.item.label,
icon: props.item.icon, 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"> <div className="item-form">
<form> <form>
<div className="form-group"> <div className="form-group">
<label>Label</label>
<input type="text" className="form-control" <input type="text" className="form-control"
placeholder="Label" placeholder="Label"
value={state.label} value={state.label}
onChange={this.handleChange.bind(this, 'label')} /> onChange={this.handleChange.bind(this, 'label')} />
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Icon</label>
<input type="text" className="form-control" <input type="text" className="form-control"
placeholder="Icon" placeholder="Icône"
value={state.icon} value={state.icon}
onChange={this.handleChange.bind(this, 'icon')} /> onChange={this.handleChange.bind(this, 'icon')} />
</div> </div>
<div className="form-group"> <div className="form-group">
<label>Exec</label>
<input type="text" className="form-control" <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')} /> onChange={this.handleChange.bind(this, 'exec')} />
</div> </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> </form>
</div> </div>
); );

View File

@ -6,7 +6,7 @@ exports.seq = function(items, generator) {
var p = Promise.resolve(); var p = Promise.resolve();
for(var i = 0, len = items.length; i < len; ++i) { 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) { 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);
});
};

View File

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