Ver código fonte

Sélecteur pour le thème d'icone

feature/profil_enr
William Petit 4 anos atrás
pai
commit
1c0a4e9f13

+ 29
- 9
js/components/desktop-app-item.jsx Ver arquivo

@@ -2,20 +2,37 @@ var React = require('react');
2 2
 var Util = require('../util');
3 3
 var LazyLoad = require('./mixins/lazy-load');
4 4
 
5
+var LOADING_ICON = 'img/hourglass.svg';
6
+
5 7
 module.exports = React.createClass({
6 8
 
7 9
   mixins: [LazyLoad],
8 10
 
9 11
   getInitialState: function() {
10
-    return { icon: 'img/hourglass.svg', loading: false };
12
+    return { icon: LOADING_ICON, currentTheme: undefined };
11 13
   },
12 14
 
13 15
   onInViewport: function() {
14
-    if(!this.state.loading) {
15
-      this.setState({ loading: true });
16
-      var desktopEntry = this.props.desktopEntry;
17
-      this._findIcon(desktopEntry.Icon);
18
-    }
16
+    this.updateIconIfInViewport();
17
+  },
18
+
19
+  updateIconIfInViewport: function() {
20
+
21
+    var currentTheme = this.state.currentTheme;
22
+    var newTheme = this.props.theme;
23
+
24
+    if( !this.isInViewport() || newTheme === currentTheme ) return;
25
+
26
+    this.setState({ icon: LOADING_ICON, currentTheme: newTheme });
27
+
28
+    var desktopEntry = this.props.desktopEntry;
29
+
30
+    this._findIcon(desktopEntry.Icon, newTheme);
31
+
32
+  },
33
+
34
+  componentDidUpdate: function() {
35
+    this.updateIconIfInViewport();
19 36
   },
20 37
 
21 38
   render: function() {
@@ -33,11 +50,12 @@ module.exports = React.createClass({
33 50
 
34 51
   },
35 52
 
36
-  _findIcon: function(iconPath) {
53
+  _findIcon: function(iconPath, theme) {
37 54
 
38 55
     var self = this;
39 56
     var DEFAULT_ICON = 'application-default-icon';
40
-    var theme = null;
57
+
58
+    console.log('Search icon %s:%s', iconPath, theme);
41 59
 
42 60
     Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
43 61
       .then(function(iconPath) {
@@ -47,7 +65,9 @@ module.exports = React.createClass({
47 65
         return iconPath;
48 66
       })
49 67
       .then(function(iconPath) {
50
-        self.setState({ icon: iconPath });
68
+        global.window.requestAnimationFrame(function() {
69
+          self.setState({ icon: iconPath });
70
+        });
51 71
       })
52 72
     ;
53 73
 

+ 18
- 6
js/components/desktop-app-list.jsx Ver arquivo

@@ -1,17 +1,21 @@
1 1
 var React = require('react');
2 2
 var Util = require('../util');
3 3
 var DesktopAppItem = require('./desktop-app-item.jsx');
4
+var IconThemeSelector = require('./icon-theme-selector.jsx');
4 5
 var path = require('path');
6
+var debug = require('debug')('pitaya:desktop-app-list');
5 7
 
6 8
 module.exports = React.createClass({
7 9
 
8 10
   getInitialState: function() {
9 11
     return {
10
-      desktopFiles: []
12
+      desktopFiles: [],
13
+      selectedTheme: null
11 14
     };
12 15
   },
13 16
 
14 17
   componentDidMount: function() {
18
+
15 19
     // Load system desktop apps
16 20
     var baseDirs = global.process.env.XDG_DATA_DIRS.split(':').map(function(baseDir){
17 21
       return path.join(baseDir, 'applications');
@@ -28,15 +32,23 @@ module.exports = React.createClass({
28 32
 
29 33
     var items = this.state.desktopFiles.map(function(desktopFile, i) {
30 34
       var desktopEntry = desktopFile.content['Desktop Entry'];
31
-      return <DesktopAppItem key={desktopFile.path} desktopEntry={desktopEntry} />;
32
-    });
35
+      return <DesktopAppItem theme={this.state.selectedTheme} key={desktopFile.path} desktopEntry={desktopEntry} />;
36
+    }.bind(this));
33 37
 
34 38
     return (
35
-      <ul className="desktop-apps">
36
-        {items}
37
-      </ul>
39
+      <div>
40
+        <IconThemeSelector onThemeSelected={this.onThemeSelected} />
41
+        <ul className="desktop-apps">
42
+          {items}
43
+        </ul>
44
+      </div>
38 45
     );
39 46
 
47
+  },
48
+
49
+  onThemeSelected: function(theme) {
50
+    console.log('Selected theme %s', theme);
51
+    this.setState({ selectedTheme: theme });
40 52
   }
41 53
 
42 54
 });

+ 45
- 0
js/components/icon-theme-selector.jsx Ver arquivo

@@ -0,0 +1,45 @@
1
+var React = require('react');
2
+var Util = require('../util');
3
+
4
+module.exports = React.createClass({
5
+
6
+  propsType: {
7
+    onThemeSelected: React.PropTypes.func.isRequired,
8
+  },
9
+
10
+  getInitialState: function() {
11
+    return { selectedTheme: null, availableThemes: [] };
12
+  },
13
+
14
+  componentDidMount: function() {
15
+    Util.DesktopApps.findIconThemes()
16
+      .then(function(themes) {
17
+        this.setState({ availableThemes: themes });
18
+      }.bind(this))
19
+    ;
20
+  },
21
+
22
+  onChange: function(evt) {
23
+    var selectedTheme = evt.target.value;
24
+    this.setState({ selectedTheme: selectedTheme });
25
+    this.props.onThemeSelected(selectedTheme);
26
+  },
27
+
28
+  render: function() {
29
+
30
+    var selectedTheme = this.state.selectedTheme;
31
+    var options = this.state.availableThemes.map(function(theme) {
32
+      return (
33
+        <option key={theme} value={theme}>{theme}</option>
34
+      );
35
+    });
36
+
37
+    return (
38
+      <select value={selectedTheme} onChange={this.onChange}>
39
+        {options}
40
+      </select>
41
+    );
42
+
43
+  }
44
+
45
+});

+ 1
- 1
js/components/mixins/lazy-load.js Ver arquivo

@@ -30,7 +30,7 @@ module.exports = {
30 30
     var el = React.findDOMNode(this);
31 31
 
32 32
     if(typeof this.onInViewport === 'function') {
33
-      el.parentNode.addEventListener('scroll', debounce(_onInViewport.bind(this), 250));
33
+      window.document.addEventListener('scroll', debounce(_onInViewport.bind(this), 250), true);
34 34
     }
35 35
 
36 36
     _onInViewport.call(this);

+ 1
- 0
js/util/desktop-apps.js Ver arquivo

@@ -79,6 +79,7 @@ exports.findIcon = function(iconName, themeName, size, themeIgnore) {
79 79
 
80 80
   themeIgnore = themeIgnore || [];
81 81
   if(themeIgnore.indexOf(themeIgnore) !== -1) {
82
+    debug('Theme %s already processed, ignoring...', themeName);
82 83
     return Promise.resolve(null);
83 84
   }
84 85
   themeIgnore.push(themeName);

+ 0
- 16
js/util/system.js Ver arquivo

@@ -52,28 +52,12 @@ exports.runApp = function(execPath) {
52 52
   });
53 53
 };
54 54
 
55
-
56
-var _globCache = {
57
-  statCache: {},
58
-  cache: {},
59
-  realpathCache: {},
60
-  symlinks: {}
61
-};
62
-
63 55
 exports.findFiles = function(pattern, opts) {
64 56
   return new Promise(function(resolve, reject) {
65
-
66
-    opts = opts || {};
67
-    opts.cache = _globCache.cache;
68
-    opts.statCache = _globCache.statCache;
69
-    opts.realpathCache = _globCache.realpathCache;
70
-    opts.symlinks = _globCache.symlinks;
71
-
72 57
     glob(pattern, opts, function(err, files) {
73 58
       if(err) return reject(err);
74 59
       return resolve(files);
75 60
     });
76
-
77 61
   });
78 62
 };
79 63
 

+ 2
- 1
package.json Ver arquivo

@@ -28,6 +28,7 @@
28 28
     "ini": "^1.3.4",
29 29
     "minimist": "^1.1.3",
30 30
     "node-jsx": "^0.13.3",
31
-    "react": "^0.13.3"
31
+    "react": "^0.13.3",
32
+    "react-dnd": "^1.1.5"
32 33
   }
33 34
 }

+ 1
- 1
test/desktop.js Ver arquivo

@@ -21,7 +21,7 @@ DesktopSuite.findIconThemes = function(test) {
21 21
 
22 22
 DesktopSuite.findIcon = function(test) {
23 23
 
24
-  DesktopApps.findIcon('atom')
24
+  DesktopApps.findIcon('phpmyadmin')
25 25
     .then(function(iconPath) {
26 26
       console.log('findIcon', iconPath);
27 27
       test.done();

Carregando…
Cancelar
Salvar