Merge branch 'develop' into feature/debian-package

This commit is contained in:
wpetit 2015-10-20 13:15:57 +02:00
commit 73ed7ef4e2
9 changed files with 3088 additions and 22 deletions

View File

@ -46,7 +46,7 @@ html, body {
.launcher { .launcher {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: url('../img/background.png'); background: url('../img/background.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@ -272,6 +272,7 @@ html, body {
.edit .profile-tree { .edit .profile-tree {
padding: 0 5px; padding: 0 5px;
width: 100%; width: 100%;
height: 100%;
} }
.edit .profile-tree ul { .edit .profile-tree ul {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

3022
img/background.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 582 KiB

View File

@ -2,6 +2,7 @@ var React = require('react');
var Util = require('../../util'); var Util = require('../../util');
var LazyLoad = require('../mixins/lazy-load'); var LazyLoad = require('../mixins/lazy-load');
var debug = Util.Debug('common:app-icon'); var debug = Util.Debug('common:app-icon');
var _ = require('lodash');
var LOADING_ICON = 'img/hourglass.svg'; var LOADING_ICON = 'img/hourglass.svg';
var DEFAULT_ICON = 'img/default-icon.svg'; var DEFAULT_ICON = 'img/default-icon.svg';
@ -10,8 +11,14 @@ module.exports = React.createClass({
mixins: [LazyLoad], mixins: [LazyLoad],
componentWillMount: function() {
if(!this._findIconDebounced) {
this._findIconDebounced = _.debounce(this._findIcon, 250);
}
},
getInitialState: function() { getInitialState: function() {
return { icon: DEFAULT_ICON, currentTheme: '' }; return { icon: DEFAULT_ICON, iconPath: DEFAULT_ICON, currentTheme: '' };
}, },
onInViewport: function() { onInViewport: function() {
@ -20,16 +27,20 @@ module.exports = React.createClass({
updateIconIfInViewport: function() { updateIconIfInViewport: function() {
var currentIcon = this.state.icon;
var newIcon = this.props.icon;
var currentTheme = this.state.currentTheme; var currentTheme = this.state.currentTheme;
var newTheme = this.props.theme; var newTheme = this.props.theme;
if( !this.isInViewport() || newTheme === currentTheme ) return; var shouldUpdate = this.isInViewport() &&
( (newTheme && newTheme !== currentTheme) || (newIcon && newIcon !== currentIcon) )
;
this.setState({ icon: LOADING_ICON, currentTheme: newTheme }); if( !shouldUpdate ) return;
var desktopEntry = this.props.desktopEntry; this.setState({ icon: newIcon, iconPath: LOADING_ICON, currentTheme: newTheme });
this._findIcon(this.props.icon, newTheme); this._findIconDebounced(newIcon, newTheme);
}, },
@ -39,7 +50,7 @@ module.exports = React.createClass({
render: function() { render: function() {
var icon = this.state.icon; var icon = this.state.iconPath;
var style = { var style = {
backgroundImage: 'url('+icon+')' backgroundImage: 'url('+icon+')'
@ -59,12 +70,7 @@ module.exports = React.createClass({
Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme) Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
.then(function(iconPath) { .then(function(iconPath) {
if( !iconPath || /\.xpm$/.test(iconPath) ) { if(!iconPath) return DEFAULT_ICON;
return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
}
return iconPath;
})
.then(function(iconPath) {
return Util.System.exists(iconPath) return Util.System.exists(iconPath)
.then(function(exists) { .then(function(exists) {
return exists ? iconPath : DEFAULT_ICON; return exists ? iconPath : DEFAULT_ICON;
@ -72,7 +78,8 @@ module.exports = React.createClass({
; ;
}) })
.then(function(iconPath) { .then(function(iconPath) {
self.setState({ icon: iconPath }); debug('Found icon %s', iconPath);
self.setState({ iconPath: iconPath });
}) })
; ;

View File

@ -1,4 +1,5 @@
var React = require('react'); var React = require('react');
var _ = require('lodash');
var ItemForm = React.createClass({ var ItemForm = React.createClass({

View File

@ -2,6 +2,8 @@ var React = require('react');
var connect = require('react-redux').connect; var connect = require('react-redux').connect;
var actions = require('../../store/actions'); var actions = require('../../store/actions');
var TreeItem = require('./tree-item.js'); var TreeItem = require('./tree-item.js');
var DropTarget = require('react-dnd').DropTarget;
var _ = require('lodash');
var TreeNode = React.createClass({ var TreeNode = React.createClass({
@ -53,7 +55,9 @@ var ProfileTree = React.createClass({
render: function() { render: function() {
return ( var connectDropTarget = this.props.connectDropTarget;
return connectDropTarget(
<div className="profile-tree"> <div className="profile-tree">
{this.renderTreeNode(this.props.profile)} {this.renderTreeNode(this.props.profile)}
</div> </div>
@ -93,4 +97,36 @@ function select(state) {
}; };
} }
module.exports = connect(select)(ProfileTree); var dropTargetSpec = {
drop: function(props, monitor, component) {
if(!monitor.didDrop()) {
return props.profile;
}
},
canDrop: function(props, monitor) {
var draggedItem = monitor.getItem();
return !_.isEqual(draggedItem, props.data);
}
};
function dragSourceCollect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
};
}
function dropTargetCollect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop()
};
}
module.exports = connect(select)(
DropTarget(['ITEM', 'NEW_ITEM'], dropTargetSpec, dropTargetCollect)(ProfileTree)
);

View File

@ -10,8 +10,7 @@ var TreeItem = React.createClass({
render: function() { render: function() {
var data = this.props.data; var data = this.props.data;
var appIcon = data.icon ? <AppIcon icon={data.icon} theme={this.props.theme} /> : null;
var connectDragSource = this.props.connectDragSource; var connectDragSource = this.props.connectDragSource;
var connectDropTarget = this.props.connectDropTarget; var connectDropTarget = this.props.connectDropTarget;
@ -28,7 +27,7 @@ var TreeItem = React.createClass({
return connectDropTarget(connectDragSource( return connectDropTarget(connectDragSource(
<div className={classes} style={style} onClick={this.handleClick}> <div className={classes} style={style} onClick={this.handleClick}>
{appIcon} <AppIcon icon={data.icon} theme={this.props.theme} />
<span className="app-label">{data.label}</span> <span className="app-label">{data.label}</span>
<button type="button" className="close pull-right" onClick={this.handleRemoveClick}> <button type="button" className="close pull-right" onClick={this.handleRemoveClick}>
<span>&times;</span> <span>&times;</span>

View File

@ -4,9 +4,9 @@ module.exports = function loggerMiddleware(store) {
return function(next) { return function(next) {
return function(action) { return function(action) {
debug('Action %j', action); debug('Action %j', action);
debug('Store current state %j', store.getState()); //debug('Store current state %j', store.getState());
next(action); next(action);
debug('Store new state %j', store.getState()); //debug('Store new state %j', store.getState());
if(action.error) { if(action.error) {
console.error(action.error.stack || action.error); console.error(action.error.stack || action.error);
} }

View File

@ -1,4 +1,4 @@
var DesktopApps = require('../js/util/desktop-apps'); var DesktopApps = require('../src/util/desktop-apps');
var DesktopSuite = exports.DesktopSuite = {}; var DesktopSuite = exports.DesktopSuite = {};