Improved desktop iconview (#51)

Author: andersevenrud

src/adapters/ui/iconview.js

@@ -45,17 +45,29 @@ const view = (fileIcon, themeIcon, droppable) => (state, actions) =>
         }
       });
     }
-  }, state.entries.map(entry => {
+  }, state.entries.map((entry, index) => {
     return h('div', {
-      class: 'osjs-desktop-iconview__entry',
-      oncontextmenu: ev => actions.openContextMenu({ev, entry}),
-      ondblclick: ev => actions.openEntry({ev, entry})
+      class: 'osjs-desktop-iconview__entry' + (
+        state.selected === index
+          ? ' osjs-desktop-iconview__entry--selected'
+          : ''
+      ),
+      oncontextmenu: ev => actions.openContextMenu({ev, entry, index}),
+      ondblclick: ev => actions.openEntry({ev, entry, index}),
+      onclick: ev => actions.selectEntry({ev, entry, index})
     }, [
-      h('img', {
-        src: themeIcon(fileIcon(entry).name)
-      }),
-      h('span', {
-      }, entry.filename)
+      h('div', {
+        class: 'osjs-desktop-iconview__entry__inner'
+      }, [
+        h('div', {
+          class: 'osjs-desktop-iconview__entry__icon'
+        }, h('img', {
+          src: themeIcon(fileIcon(entry).name)
+        })),
+        h('div', {
+          class: 'osjs-desktop-iconview__entry__label'
+        }, entry.filename)
+      ])
     ]);
   }));
 
@@ -90,6 +102,10 @@ export class DesktopIconView extends EventEmitter {
    * @param {object} rect Rectangle from desktop
    */
   resize(rect) {
+    if (!this.$root) {
+      return;
+    }
+
     this.$root.style.top = `${rect.top}px`;
     this.$root.style.left = `${rect.left}px`;
     this.$root.style.bottom = `${rect.bottom}px`;
@@ -116,6 +132,7 @@ export class DesktopIconView extends EventEmitter {
       .then(entries => this.iconview.setEntries(entries));
 
     this.iconview = app({
+      selected: -1,
       entries: []
     }, {
       setEntries: entries => ({entries}),
@@ -134,8 +151,12 @@ export class DesktopIconView extends EventEmitter {
         } else {
           this.core.open(entry);
         }
+
+        return {selected: -1};
       },
 
+      selectEntry: ({index}) => ({selected: index}),
+
       uploadEntries: files => {
         // TODO
       },
@@ -146,12 +167,16 @@ export class DesktopIconView extends EventEmitter {
         copy(entry, dest)
           .then(reload)
           .catch(error);
+
+        return {selected: -1};
       },
 
       removeEntry: entry => {
         unlink(entry)
           .then(reload)
           .catch(error);
+
+        return {selected: -1};
       }
     }, view(fileIcon, themeIcon, droppable), this.$root);
 

src/styles/_iconview.scss

@@ -32,28 +32,69 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 100%;
-  height: 100%;
+  bottom: 0;
+  left: 0;
 
   &__wrapper {
     position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
+    top: 1em;
+    left: 1em;
+    width: calc(100% - 2em);
+    height: calc(100% - 2em);
+    vertical-align: top;
   }
 
   &__entry {
-    width: 3em;
-    height: 3em;
-    display: inline-block;
-    margin: 1em;
+    $self: &;
 
-    & > span {
-      display: block;
-      overflow: hidden;
+    display: inline-flex;
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    overflow: hidden;
+    margin: 0.5em;
+    width: 5em;
+    height: 6.5em;
+
+    &__inner {
+      width: 100%;
+      min-height: 100%;
+    }
+
+    &__icon {
+      flex-grow: 1;
+      height: 4.5em;
+      width: 100%;
+      padding: 0.5em;
+      box-sizing: border-box;
+    }
+
+    &__label {
       height: 1em;
+      width: 100%;
+      box-sizing: border-box;
+      line-height: 1;
+      overflow: hidden;
       text-align: center;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
+
+    &--selected {
+      z-index: 2;
+      overflow: visible;
+
+      #{ $self }__icon {
+        background-color: rgba(0, 0, 200, 0.9);
+      }
+
+      #{ $self }__label {
+        padding: 0 0.5em 0.5em 0.5em;
+        background-color: rgba(0, 0, 200, 0.9);
+        color: #fff;
+        overflow: visible;
+        height: auto;
+      }
     }
   }
 }