Support for configuration and fix for /Volumes folders

Author: moimart

README.md

@@ -3,13 +3,26 @@ hyper-folder-icon
 
 # Custom MacOS folder icons shown in Hyper terminal Tabs
 
-- ICNS reading by https://github.com/moimart/node-apple-icns (modified version of https://github.com/moimart/node-apple-icns which I will try to merge with the author)
+# Features for MacOS:
+
+- Show icon of current folder if custom icon has been applied to the folder
+- Show Volume icon of the HD if the folder does not have a custom icon
+- Show Volume icon of additional Volumes if a custom icon has been applied to the Volume
+- Show App icon if inside of the .app folder
+- Show a default icon if no icon can be found
+
+## Optional Configuration keys
+
+tabIconSize: default 24 -> Integer (Note: This is a pixel value)
+tabIconAlpha: default 1.0 -> Float
+tabIconTopMargin: default -30 -> Integer (Note: This is a pixel value)
+tabIconLeftMargin: defatul 10 -> Integer (Note: This is a percentage value)
+
+## Notes
+
+- ICNS reading by https://github.com/moimart/node-apple-icns
 - Resource fork by https://github.com/mattsoulanille/ResourceForkJS
 - Default folder icon from mac
 
-## TODO
-
-1. Customizable defaultIcon
-2. Customizable size and position
 
 ![alt text](https://i.imgur.com/4y2Oj6D.png "Real world example")

iconfinder.js

@@ -29,9 +29,10 @@ class AbstractFile {
           this.type = APPFOLDER;
         } else {
           let mount = folder.split('/');
-
-          if (mount[1] === 'Volumes' && mount.length > 2) {
-            let _mount = '/' + p[1] + '/' + p[2] + '/.VolumeIcon.icns';
+          
+          if (mount[1] == 'Volumes' && mount.length > 2) {
+            let _mount = '/' + mount[1] + '/' + mount[2] + '/.VolumeIcon.icns';
+            console.log('read ' + _mount);
             if (fs.existsSync(_mount)) {
               this.mount = _mount;
               this.type = MOUNTVOLUME;

index.js

@@ -50,14 +50,33 @@ const localCwd = (cwd) => new Promise((resolve,reject) => {
 });
 
 exports.decorateConfig = (config) => {
+
+    let iconSize = (
+      Number.isInteger(config.tabIconSize)
+    ) ? config.tabIconSize : 24;
+
+    let opacity = Number.parseFloat(config.tabIconAlpha);
+    opacity = (opacity === NaN) ? 1.0 : opacity;
+
+    let leftMargin = (
+      Number.isInteger(config.tabIconLeftMargin)
+    ) ? config.tabIconLeftMargin : 10;
+
+    let topMargin = (
+      Number.isInteger(config.tabIconTopMargin)
+    ) ? config.tabIconTopMargin : -30;
+
     return Object.assign({}, config, {
         css: `
             ${config.css || ''}
             .folder_icon {
               display: inline-flex;
               float: left;
-              margin-top: -30px;
-              margin-left: 10%;
+              margin-top: ${topMargin}px;
+              margin-left: ${leftMargin}%;
+              width: ${iconSize}px;
+              height: ${iconSize}px;
+              opacity: ${opacity};
             }
         `
     });
@@ -88,8 +107,6 @@ exports.decorateTab = (Tab, { React }) => {
                 customChildren: React.createElement('div',{},
                   React.createElement('img', {
                     className: 'folder_icon',
-                    width: 24,
-                    height: 24,
                     src:"data:image/png;base64," + this.state.iconData
                   })
                 )
@@ -197,8 +214,6 @@ exports.decorateTabs = (Tabs, { React }) => {
           customChildren: React.createElement('div',{},
             React.createElement('img', {
               className: 'folder_icon',
-              width: 24,
-              height: 24,
               src:"data:image/png;base64," + this.state.iconData
             })
           )

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hyper-folder-icon",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Use folder icons in MacOS with Hyper",
   "main": "./index.js",
   "files": [