Browse Source

Sélecteur pour le thème d'icone

feature/profil_enr
William Petit 4 years ago
parent
commit
1c0a4e9f13

+ 29
- 9
js/components/desktop-app-item.jsx View File

2
 var Util = require('../util');
2
 var Util = require('../util');
3
 var LazyLoad = require('./mixins/lazy-load');
3
 var LazyLoad = require('./mixins/lazy-load');
4
 
4
 
5
+var LOADING_ICON = 'img/hourglass.svg';
6
+
5
 module.exports = React.createClass({
7
 module.exports = React.createClass({
6
 
8
 
7
   mixins: [LazyLoad],
9
   mixins: [LazyLoad],
8
 
10
 
9
   getInitialState: function() {
11
   getInitialState: function() {
10
-    return { icon: 'img/hourglass.svg', loading: false };
12
+    return { icon: LOADING_ICON, currentTheme: undefined };
11
   },
13
   },
12
 
14
 
13
   onInViewport: function() {
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
   render: function() {
38
   render: function() {
33
 
50
 
34
   },
51
   },
35
 
52
 
36
-  _findIcon: function(iconPath) {
53
+  _findIcon: function(iconPath, theme) {
37
 
54
 
38
     var self = this;
55
     var self = this;
39
     var DEFAULT_ICON = 'application-default-icon';
56
     var DEFAULT_ICON = 'application-default-icon';
40
-    var theme = null;
57
+
58
+    console.log('Search icon %s:%s', iconPath, theme);
41
 
59
 
42
     Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
60
     Util.DesktopApps.findIcon(iconPath || DEFAULT_ICON, theme)
43
       .then(function(iconPath) {
61
       .then(function(iconPath) {
47
         return iconPath;
65
         return iconPath;
48
       })
66
       })
49
       .then(function(iconPath) {
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 View File

1
 var React = require('react');
1
 var React = require('react');
2
 var Util = require('../util');
2
 var Util = require('../util');
3
 var DesktopAppItem = require('./desktop-app-item.jsx');
3
 var DesktopAppItem = require('./desktop-app-item.jsx');
4
+var IconThemeSelector = require('./icon-theme-selector.jsx');
4
 var path = require('path');
5
 var path = require('path');
6
+var debug = require('debug')('pitaya:desktop-app-list');
5
 
7
 
6
 module.exports = React.createClass({
8
 module.exports = React.createClass({
7
 
9
 
8
   getInitialState: function() {
10
   getInitialState: function() {
9
     return {
11
     return {
10
-      desktopFiles: []
12
+      desktopFiles: [],
13
+      selectedTheme: null
11
     };
14
     };
12
   },
15
   },
13
 
16
 
14
   componentDidMount: function() {
17
   componentDidMount: function() {
18
+
15
     // Load system desktop apps
19
     // Load system desktop apps
16
     var baseDirs = global.process.env.XDG_DATA_DIRS.split(':').map(function(baseDir){
20
     var baseDirs = global.process.env.XDG_DATA_DIRS.split(':').map(function(baseDir){
17
       return path.join(baseDir, 'applications');
21
       return path.join(baseDir, 'applications');
28
 
32
 
29
     var items = this.state.desktopFiles.map(function(desktopFile, i) {
33
     var items = this.state.desktopFiles.map(function(desktopFile, i) {
30
       var desktopEntry = desktopFile.content['Desktop Entry'];
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
     return (
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 View File

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 View File

30
     var el = React.findDOMNode(this);
30
     var el = React.findDOMNode(this);
31
 
31
 
32
     if(typeof this.onInViewport === 'function') {
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
     _onInViewport.call(this);
36
     _onInViewport.call(this);

+ 1
- 0
js/util/desktop-apps.js View File

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

+ 0
- 16
js/util/system.js View File

52
   });
52
   });
53
 };
53
 };
54
 
54
 
55
-
56
-var _globCache = {
57
-  statCache: {},
58
-  cache: {},
59
-  realpathCache: {},
60
-  symlinks: {}
61
-};
62
-
63
 exports.findFiles = function(pattern, opts) {
55
 exports.findFiles = function(pattern, opts) {
64
   return new Promise(function(resolve, reject) {
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
     glob(pattern, opts, function(err, files) {
57
     glob(pattern, opts, function(err, files) {
73
       if(err) return reject(err);
58
       if(err) return reject(err);
74
       return resolve(files);
59
       return resolve(files);
75
     });
60
     });
76
-
77
   });
61
   });
78
 };
62
 };
79
 
63
 

+ 2
- 1
package.json View File

28
     "ini": "^1.3.4",
28
     "ini": "^1.3.4",
29
     "minimist": "^1.1.3",
29
     "minimist": "^1.1.3",
30
     "node-jsx": "^0.13.3",
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 View File

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

Loading…
Cancel
Save