Meilleur agencement
This commit is contained in:
parent
740977ed79
commit
39399a5c08
|
@ -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;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
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 {
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
2
main.js
2
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,
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue