diff --git a/css/style.css b/css/style.css
index 644074d..74b921a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -46,7 +46,7 @@ html, body {
.launcher {
display: flex;
flex-direction: column;
- background: url('../img/background.png');
+ background: url('../img/background.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
@@ -272,6 +272,7 @@ html, body {
.edit .profile-tree {
padding: 0 5px;
width: 100%;
+ height: 100%;
}
.edit .profile-tree ul {
diff --git a/img/background.png b/img/background.png
deleted file mode 100644
index 3178e5a..0000000
Binary files a/img/background.png and /dev/null differ
diff --git a/img/background.svg b/img/background.svg
new file mode 100644
index 0000000..2182c77
--- /dev/null
+++ b/img/background.svg
@@ -0,0 +1,3022 @@
+
+
+
+
diff --git a/src/components/common/app-icon.js b/src/components/common/app-icon.js
index f67770e..0e8b6d9 100644
--- a/src/components/common/app-icon.js
+++ b/src/components/common/app-icon.js
@@ -2,6 +2,7 @@ var React = require('react');
var Util = require('../../util');
var LazyLoad = require('../mixins/lazy-load');
var debug = Util.Debug('common:app-icon');
+var _ = require('lodash');
var LOADING_ICON = 'img/hourglass.svg';
var DEFAULT_ICON = 'img/default-icon.svg';
@@ -10,8 +11,14 @@ module.exports = React.createClass({
mixins: [LazyLoad],
+ componentWillMount: function() {
+ if(!this._findIconDebounced) {
+ this._findIconDebounced = _.debounce(this._findIcon, 250);
+ }
+ },
+
getInitialState: function() {
- return { icon: DEFAULT_ICON, currentTheme: '' };
+ return { icon: DEFAULT_ICON, iconPath: DEFAULT_ICON, currentTheme: '' };
},
onInViewport: function() {
@@ -20,16 +27,20 @@ module.exports = React.createClass({
updateIconIfInViewport: function() {
+ var currentIcon = this.state.icon;
+ var newIcon = this.props.icon;
var currentTheme = this.state.currentTheme;
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() {
- var icon = this.state.icon;
+ var icon = this.state.iconPath;
var style = {
backgroundImage: 'url('+icon+')'
@@ -59,12 +70,7 @@ module.exports = React.createClass({
Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
.then(function(iconPath) {
- if( !iconPath || /\.xpm$/.test(iconPath) ) {
- return Util.DesktopApps.findIcon(DEFAULT_ICON, theme);
- }
- return iconPath;
- })
- .then(function(iconPath) {
+ if(!iconPath) return DEFAULT_ICON;
return Util.System.exists(iconPath)
.then(function(exists) {
return exists ? iconPath : DEFAULT_ICON;
@@ -72,7 +78,8 @@ module.exports = React.createClass({
;
})
.then(function(iconPath) {
- self.setState({ icon: iconPath });
+ debug('Found icon %s', iconPath);
+ self.setState({ iconPath: iconPath });
})
;
diff --git a/src/components/edit/item-form.js b/src/components/edit/item-form.js
index 874b38e..6888680 100644
--- a/src/components/edit/item-form.js
+++ b/src/components/edit/item-form.js
@@ -1,4 +1,5 @@
var React = require('react');
+var _ = require('lodash');
var ItemForm = React.createClass({
diff --git a/src/components/edit/profile-tree.js b/src/components/edit/profile-tree.js
index 98f867e..17f7c47 100644
--- a/src/components/edit/profile-tree.js
+++ b/src/components/edit/profile-tree.js
@@ -2,6 +2,8 @@ var React = require('react');
var connect = require('react-redux').connect;
var actions = require('../../store/actions');
var TreeItem = require('./tree-item.js');
+var DropTarget = require('react-dnd').DropTarget;
+var _ = require('lodash');
var TreeNode = React.createClass({
@@ -53,7 +55,9 @@ var ProfileTree = React.createClass({
render: function() {
- return (
+ var connectDropTarget = this.props.connectDropTarget;
+
+ return connectDropTarget(
{this.renderTreeNode(this.props.profile)}
@@ -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)
+);
diff --git a/src/components/edit/tree-item.js b/src/components/edit/tree-item.js
index 4ac8af6..0d3c05a 100644
--- a/src/components/edit/tree-item.js
+++ b/src/components/edit/tree-item.js
@@ -10,8 +10,7 @@ var TreeItem = React.createClass({
render: function() {
var data = this.props.data;
- var appIcon = data.icon ? : null;
-
+
var connectDragSource = this.props.connectDragSource;
var connectDropTarget = this.props.connectDropTarget;
@@ -28,7 +27,7 @@ var TreeItem = React.createClass({
return connectDropTarget(connectDragSource(
- {appIcon}
+
{data.label}