Updated iconview settings and abstraction (#51)

Author: andersevenrud

src/adapters/ui/iconview.js

@@ -85,6 +85,7 @@ export class DesktopIconView extends EventEmitter {
     this.core = core;
     this.$root = null;
     this.iconview = null;
+    this.root = 'home:/.desktop';
   }
 
   destroy() {
@@ -112,24 +113,37 @@ export class DesktopIconView extends EventEmitter {
     this.$root.style.right = `${rect.right}px`;
   }
 
-  render() {
+  _render(root) {
+    const oldRoot = this.root;
+    if (root) {
+      this.root = root;
+    }
+
     if (this.$root) {
+      if (this.root !== oldRoot) {
+        this.iconview.reload();
+      }
+
+      return false;
+    }
+
+    return true;
+  }
+
+  render(root) {
+    if (!this._render(root)) {
       return;
     }
 
     this.$root = document.createElement('div');
     this.$root.className = 'osjs-desktop-iconview';
     this.core.$root.appendChild(this.$root);
 
-    const root = 'home:/.desktop'; // FIXME
     const {droppable} = this.core.make('osjs/dnd');
     const {icon: fileIcon} = this.core.make('osjs/fs');
     const {icon: themeIcon} = this.core.make('osjs/theme');
     const {copy, readdir, unlink} = this.core.make('osjs/vfs');
     const error = err => console.error(err);
-    const reload = () => readdir(root)
-      .then(entries => entries.filter(e => e.filename !== '..'))
-      .then(entries => this.iconview.setEntries(entries));
 
     this.iconview = app({
       selected: -1,
@@ -161,26 +175,33 @@ export class DesktopIconView extends EventEmitter {
         // TODO
       },
 
-      addEntry: entry => {
+      addEntry: entry => (state, actions) => {
         const dest = `${root}/${entry.filename}`;
 
         copy(entry, dest)
-          .then(reload)
+          .then(() => actions.reload())
           .catch(error);
 
         return {selected: -1};
       },
 
-      removeEntry: entry => {
+      removeEntry: entry => (state, actions) => {
         unlink(entry)
-          .then(reload)
+          .then(() => actions.reload())
           .catch(error);
 
         return {selected: -1};
+      },
+
+      reload: () => (state, actions) => {
+        readdir(root)
+          .then(entries => entries.filter(e => e.filename !== '..'))
+          .then(entries => actions.setEntries(entries));
       }
+
     }, view(fileIcon, themeIcon, droppable), this.$root);
 
-    reload();
+    this.iconview.reload();
   }
 
   createFileContextMenu(ev, entry) {

src/config.js

@@ -176,7 +176,8 @@ export const defaultConfiguration = {
         style: 'cover'
       },
       iconview: {
-        enabled: false
+        enabled: false,
+        path: 'home:/.desktop'
       }
     }
   },

src/desktop.js

@@ -480,9 +480,7 @@ export default class Desktop extends EventEmitter {
     this.applyTheme(newSettings.theme);
     this.applyIcons(newSettings.icons);
 
-    // TODO
-    //this.applyIconView(newSettings.iconview.enabled);
-    this.applyIconView(true);
+    this.applyIconView(newSettings.iconview);
 
     this.core.emit('osjs/desktop:applySettings');
 
@@ -527,13 +525,13 @@ export default class Desktop extends EventEmitter {
   /**
    * Adds or removes the icon view
    */
-  applyIconView(enable) {
+  applyIconView(settings) {
     if (!this.iconview) {
       return;
     }
 
-    if (enable) {
-      this.iconview.render();
+    if (settings.enabled) {
+      this.iconview.render(settings.path);
       this.iconview.resize(this.getRect());
     } else {
       this.iconview.destroy();

src/styles/_iconview.scss

@@ -47,7 +47,7 @@
   &__entry {
     $self: &;
 
-    display: inline-flex;
+    display: inline-block;
     position: relative;
     z-index: 1;
     text-align: center;