feat: update dependencies & add temp update check

package.json

@@ -1,7 +1,7 @@
 {
     "name": "colorpicker",
     "productName": "colorpicker",
-    "version": "2.0.4",
+    "version": "2.0.5",
     "description": "Colorpicker is a little Electron app that can show colors with hex/rgb code, and generate shading for your color.",
     "main": "src/main.js",
     "scripts": {
@@ -15,7 +15,7 @@
         "release-window": "electron-builder --publish=never --config colorpicker-build.json --win nsis portable",
         "nightly": "electron-builder --publish=never --config colorpicker-build-nightly.json",
         "nightly-linux": "electron-builder --publish=never --config colorpicker-build-nightly.json --linux deb appImage",
-        "rebuild": "npm rebuild --runtime=electron --target=8.2.1 --disturl=https://atom.io/download/electron --abi=76"
+        "rebuild": "npm rebuild --runtime=electron --target=9.4.4 --disturl=https://atom.io/download/electron --abi=80"
     },
     "repository": "https://github.com/toinane/colorpicker",
     "keywords": [
@@ -29,22 +29,22 @@
         "crea-that"
     ],
     "dependencies": {
-        "electron-json-storage": "^4.1.8",
+        "electron-json-storage": "^4.4.0",
         "request": "^2.88.2",
         "robotjs": "git+https://github.com/Toinane/robotjs",
-        "sortablejs": "^1.10.2",
-        "tippy.js": "^6.1.1"
+        "sortablejs": "^1.13.0",
+        "tippy.js": "^6.3.1"
     },
     "optionalDependencies": {
+        "iohook": "^0.9.0",
         "osx-mouse": "git+https://github.com/Toinane/osx-mouse",
-        "win-mouse": "git+https://github.com/Toinane/win-mouse",
-        "iohook": "^0.6.5"
+        "win-mouse": "git+https://github.com/Toinane/win-mouse"
     },
     "devDependencies": {
-        "electron": "8.5.2",
-        "electron-builder": "22.4.1",
+        "electron": "9.4.4",
+        "electron-builder": "22.10.5",
         "minimist": "^1.2.5",
-        "standard": "14.3.3"
+        "standard": "16.0.3"
     },
     "author": {
         "name": "Toinane",
@@ -56,7 +56,7 @@
     "license": "GPL-3.0",
     "iohook": {
         "targets": [
-            "electron-76"
+            "electron-80"
         ],
         "platforms": [
             "linux"

src/browsers/colorpicker.js

@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, nativeImage } = require("electron");
 
 module.exports = (dirname, storage, util) => {
     const { touchbar } = util;
@@ -12,7 +12,7 @@ module.exports = (dirname, storage, util) => {
      * @return {void} [new Colorpicker]
      */
     let init = (force, color) => {
-        const size = storage.get('size');
+        const size = storage.get("size");
         if (win === null || win === undefined || force)
             createWindow(size.width, size.height);
         else win.show();
@@ -25,7 +25,7 @@ module.exports = (dirname, storage, util) => {
      * @return {void}
      */
     let createWindow = (width, height) => {
-        const pos = storage.get('pos');
+        const pos = storage.get("pos");
         let options = {
             frame: false,
             autoHideMenuBar: true,
@@ -34,10 +34,10 @@ module.exports = (dirname, storage, util) => {
             minWidth: 440,
             minHeight: 150,
             transparent: true,
-            icon: `${dirname}/build/icon.png`,
+            icon: nativeImage.createFromPath(`${dirname}/build/icon.png`),
             webPreferences: {
-                nodeIntegration: true
-            }
+                nodeIntegration: true,
+            },
         };
         if (pos) {
             options.x = pos.x;
@@ -49,7 +49,7 @@ module.exports = (dirname, storage, util) => {
 
         if (touchbar) win.setTouchBar(touchbar);
 
-        win.on('closed', () => {
+        win.on("closed", () => {
             win = undefined;
             let totalWin = BrowserWindow.getAllWindows();
             for (let wins of totalWin) wins.close();
@@ -63,25 +63,27 @@ module.exports = (dirname, storage, util) => {
      * @param  {BrowserWindow} win [current window]
      * @return {void}
      */
-    let windowEvents = win => {
+    let windowEvents = (win) => {
         let timing;
 
-        win.on('focus', event => win.webContents.send('hasLooseFocus', false));
-        win.on('blur', event => win.webContents.send('hasLooseFocus', true));
+        win.on("focus", (event) =>
+            win.webContents.send("hasLooseFocus", false)
+        );
+        win.on("blur", (event) => win.webContents.send("hasLooseFocus", true));
 
-        win.on('resize', event => {
+        win.on("resize", (event) => {
             const size = win.getBounds();
             clearTimeout(timing);
             timing = setTimeout(
                 () =>
                     storage.add({
-                        size: { width: size.width, height: size.height }
+                        size: { width: size.width, height: size.height },
                     }),
                 300
             );
         });
 
-        win.on('move', event => {
+        win.on("move", (event) => {
             const pos = win.getBounds();
             clearTimeout(timing);
             timing = setTimeout(
@@ -95,6 +97,6 @@ module.exports = (dirname, storage, util) => {
 
     return {
         init: init,
-        getWindow: getWindow
+        getWindow: getWindow,
     };
 };

src/browsers/colorsbook.js

@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, nativeImage } = require("electron");
 
 module.exports = (dirname, storage) => {
     let win;
@@ -25,26 +25,28 @@ module.exports = (dirname, storage) => {
             height: 400,
             minHeight: 285,
             minWidth: 360,
-            icon: `${dirname}/build/icon.png`,
+            icon: nativeImage.createFromPath(`${dirname}/build/icon.png`),
             webPreferences: {
-                nodeIntegration: true
-            }
+                nodeIntegration: true,
+            },
         });
 
         win.loadURL(`file://${dirname}/views/colorsbook.html`);
 
-        win.on('closed', () => {
+        win.on("closed", () => {
             win = undefined;
         });
 
-        win.on('focus', event => win.webContents.send('hasLooseFocus', false));
-        win.on('blur', event => win.webContents.send('hasLooseFocus', true));
+        win.on("focus", (event) =>
+            win.webContents.send("hasLooseFocus", false)
+        );
+        win.on("blur", (event) => win.webContents.send("hasLooseFocus", true));
     };
 
     let getWindow = () => win;
 
     return {
         init: init,
-        getWindow: getWindow
+        getWindow: getWindow,
     };
 };

src/browsers/index.js

@@ -1,10 +1,10 @@
-'use strict'
+"use strict";
 
 module.exports = (dirname, storage, util) => ({
-  colorpicker: require('./colorpicker')(dirname, storage, util),
-  colorsbook: require('./colorsbook')(dirname, storage, util),
-  picker: require('./picker')(dirname, storage, util),
-  preview: require('./preview')(dirname, storage, util),
-  settings: require('./settings')(dirname, storage, util),
-  support: require('./support')(dirname, storage, util)
-})
+    colorpicker: require("./colorpicker")(dirname, storage, util),
+    colorsbook: require("./colorsbook")(dirname, storage, util),
+    picker: require("./picker")(dirname, storage, util),
+    preview: require("./preview")(dirname, storage, util),
+    settings: require("./settings")(dirname, storage, util),
+    support: require("./support")(dirname, storage, util),
+});

src/browsers/picker.js

@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, nativeImage } = require("electron");
 
 module.exports = (dirname, storage) => {
     let win;
@@ -22,14 +22,14 @@ module.exports = (dirname, storage) => {
             resizable: false,
             focusable: true,
             hasShadow: false,
-            icon: `${dirname}/build/icon.png`,
+            icon: nativeImage.createFromPath(`${dirname}/build/icon.png`),
             webPreferences: {
-                nodeIntegration: true
-            }
+                nodeIntegration: true,
+            },
         });
 
         win.loadURL(`file://${dirname}/views/picker.html`);
-        win.on('closed', () => {
+        win.on("closed", () => {
             win = undefined;
         });
     };
@@ -38,6 +38,6 @@ module.exports = (dirname, storage) => {
 
     return {
         init: init,
-        getWindow: getWindow
+        getWindow: getWindow,
     };
 };

src/browsers/preview.js

@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, nativeImage } = require("electron");
 
 module.exports = (dirname, storage) => {
     let win;
@@ -27,16 +27,16 @@ module.exports = (dirname, storage) => {
             height: 300,
             resizable: false,
             fullscreenable: false,
-            icon: `${dirname}/build/icon.png`,
+            icon: nativeImage.createFromPath(`${dirname}/build/icon.png`),
             webPreferences: {
-                nodeIntegration: true
-            }
+                nodeIntegration: true,
+            },
         };
 
         win = new BrowserWindow(options);
         win.loadURL(`file://${dirname}/views/preview.html`);
 
-        win.on('closed', () => {
+        win.on("closed", () => {
             win = undefined;
         });
     };
@@ -45,6 +45,6 @@ module.exports = (dirname, storage) => {
 
     return {
         init: init,
-        getWindow: getWindow
+        getWindow: getWindow,
     };
 };

src/browsers/settings.js

@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
 
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, nativeImage } = require("electron");
 
 module.exports = (dirname, storage) => {
     let win;
@@ -28,16 +28,16 @@ module.exports = (dirname, storage) => {
             minWidth: 460,
             minHeight: 340,
             fullscreenable: false,
-            icon: `${dirname}/build/icon.png`,
+            icon: nativeImage.createFromPath(`${dirname}/build/icon.png`),
             webPreferences: {
-                nodeIntegration: true
-            }
+                nodeIntegration: true,
+            },
         };
 
         win = new BrowserWindow(options);
         win.loadURL(`file://${dirname}/views/settings.html`);
 
-        win.on('closed', () => {
+        win.on("closed", () => {
             win = undefined;
         });
     };
@@ -46,6 +46,6 @@ module.exports = (dirname, storage) => {
 
     return {
         init: init,
-        getWindow: getWindow
+        getWindow: getWindow,
     };
 };

src/browsers/support.js

@@ -1,41 +1,41 @@
-'use strict'
+"use strict";
 
-const {BrowserWindow} = require('electron')
+const { BrowserWindow } = require("electron");
 
 module.exports = (dirname, storage) => {
-  let win
+    let win;
 
-  let init = () => {
-    if (win === null || win === undefined) {
-      createWindow()
-    }
-  }
+    let init = () => {
+        if (win === null || win === undefined) {
+            createWindow();
+        }
+    };
 
-  let createWindow = () => {
-    const {screen} = require('electron')
-    const {width, height} = screen.getPrimaryDisplay().workAreaSize
-    win = new BrowserWindow({
-      frame: false,
-      autoHideMenuBar: true,
-      width: width,
-      height: height,
-      transparent: true,
-      alwaysOnTop: true,
-      resizable: false,
-      movable: false,
-      hasShadow: false
-    })
+    let createWindow = () => {
+        const { screen } = require("electron");
+        const { width, height } = screen.getPrimaryDisplay().workAreaSize;
+        win = new BrowserWindow({
+            frame: false,
+            autoHideMenuBar: true,
+            width: width,
+            height: height,
+            transparent: true,
+            alwaysOnTop: true,
+            resizable: false,
+            movable: false,
+            hasShadow: false,
+        });
 
-    win.loadURL(`file://${dirname}/views/support.html`)
-    win.on('closed', () => {
-      win = undefined
-    })
-  }
+        win.loadURL(`file://${dirname}/views/support.html`);
+        win.on("closed", () => {
+            win = undefined;
+        });
+    };
 
-  let getWindow = () => win
+    let getWindow = () => win;
 
-  return {
-    init: init,
-    getWindow: getWindow
-  }
-}
+    return {
+        init: init,
+        getWindow: getWindow,
+    };
+};

src/checkUpdate.js

@@ -0,0 +1,34 @@
+"use strict";
+
+const { app, dialog, shell } = require("electron");
+const request = require("request");
+
+module.exports = {
+    searchNewUpdate: () => {
+        const options = {
+            url: "https://colorpicker.fr/release.json",
+            method: "GET",
+            headers: {
+                "content-type": "application/json",
+                "user-agent": `colorpicker-${app.getVersion()}`,
+            },
+        };
+
+        request(options, (err, res, body) => {
+            let update = JSON.parse(body);
+            if (update.release > app.getVersion()) {
+                dialog
+                    .showMessageBox(null, {
+                        message: "A new update of Colorpicker is available",
+                        type: "info",
+                        buttons: ["Show Update", "Ignore"],
+                    })
+                    .then((result) => {
+                        if (result.response == 0) {
+                            shell.openExternal("https://colorpicker.fr/latest");
+                        }
+                    });
+            }
+        });
+    },
+};

src/events/colorpicker.js

@@ -1,77 +1,83 @@
-'use strict'
+"use strict";
 
-const {ipcMain, BrowserWindow, app} = require('electron')
+const { ipcMain, BrowserWindow, app } = require("electron");
 
 module.exports = (storage, browsers, eventEmitter) => {
-  const {colorpicker, settings, picker, colorsbook} = browsers
-  let win, opacity, shading
+    const { colorpicker, settings, picker, colorsbook } = browsers;
+    let win, opacity, shading;
 
-  eventEmitter.on('changeColor', color => {
-    win.webContents.send('changeColor', color)
-  })
+    eventEmitter.on("changeColor", (color) => {
+        win.webContents.send("changeColor", color);
+    });
 
-  ipcMain.on('init-colorpicker', event => {
-    win = colorpicker.getWindow()
-    let config = {
-      color: storage.get('lastColor') ? storage.get('lastColor') : '#00AEEF',
-      posButton: storage.get('buttonsPosition'),
-      typeButton:  storage.get('buttonsType'),
-      tools: storage.get('tools'),
-      colorfullApp: storage.get('colorfullApp'),
-      history: storage.get('history')
-    }
+    ipcMain.on("init-colorpicker", (event) => {
+        win = colorpicker.getWindow();
+        let config = {
+            color: storage.get("lastColor")
+                ? storage.get("lastColor")
+                : "#00AEEF",
+            posButton: storage.get("buttonsPosition"),
+            typeButton: storage.get("buttonsType"),
+            tools: storage.get("tools"),
+            colorfullApp: storage.get("colorfullApp"),
+            history: storage.get("history"),
+        };
 
-    event.sender.send('init', config)
-  })
+        event.sender.send("init", config);
+    });
 
-  ipcMain.on('changeLastColor', (event, color) => {
-    storage.add({'lastColor': color})
-  })
+    ipcMain.on("changeLastColor", (event, color) => {
+        storage.add({ lastColor: color });
+    });
 
-  ipcMain.on('saveColor', (event, color) => {
-    let colorsbook = storage.get('colors', 'colorsbook')
-    colorsbook[Object.getOwnPropertyNames(colorsbook)[Object.values(colorsbook).length - 1]].push(color)
-    storage.add({colors: colorsbook}, 'colorsbook')
-  })
+    ipcMain.on("saveColor", (event, color) => {
+        let colorsbook = storage.get("colors", "colorsbook");
+        colorsbook[
+            Object.getOwnPropertyNames(colorsbook)[
+                Object.values(colorsbook).length - 1
+            ]
+        ].push(color);
+        storage.add({ colors: colorsbook }, "colorsbook");
+    });
 
-  ipcMain.on('changeHistory', (event, array) => {
-    storage.add({'history': array})
-    eventEmitter.emit('updateHistory', array)
-  })
+    ipcMain.on("changeHistory", (event, array) => {
+        storage.add({ history: array });
+        eventEmitter.emit("updateHistory", array);
+    });
 
-  ipcMain.on('opacityActive', (event, bool) => {
-    opacity = bool
-    let size = win.getSize()
-    if (!opacity && shading) return win.setMinimumSize(440, 220)
-    if (!opacity) return win.setMinimumSize(440, 150)
-    if (size[1] < 180 && !shading) win.setSize(size[0], 180, true)
-    if (size[1] < 255 && shading) win.setSize(size[0], 255, true)
-    if (!shading) win.setMinimumSize(440, 180)
-    else win.setMinimumSize(440, 255)
-  })
+    ipcMain.on("opacityActive", (event, bool) => {
+        opacity = bool;
+        let size = win.getSize();
+        if (!opacity && shading) return win.setMinimumSize(440, 220);
+        if (!opacity) return win.setMinimumSize(440, 150);
+        if (size[1] < 180 && !shading) win.setSize(size[0], 180, true);
+        if (size[1] < 255 && shading) win.setSize(size[0], 255, true);
+        if (!shading) win.setMinimumSize(440, 180);
+        else win.setMinimumSize(440, 255);
+    });
 
-  ipcMain.on('shadingActive', (event, bool) => {
-    shading = bool
-    let size = win.getSize()
-    if (!shading && !opacity) return win.setMinimumSize(440, 150)
-    if (!shading && opacity) return win.setMinimumSize(440, 180)
-    if (size[1] < 220 && !opacity) win.setSize(size[0], 220, true)
-    if (size[1] < 255 && opacity) win.setSize(size[0], 255, true)
-    if (!opacity) win.setMinimumSize(440, 220)
-    else win.setMinimumSize(440, 255)
-  })
+    ipcMain.on("shadingActive", (event, bool) => {
+        shading = bool;
+        let size = win.getSize();
+        if (!shading && !opacity) return win.setMinimumSize(440, 150);
+        if (!shading && opacity) return win.setMinimumSize(440, 180);
+        if (size[1] < 220 && !opacity) win.setSize(size[0], 220, true);
+        if (size[1] < 255 && opacity) win.setSize(size[0], 255, true);
+        if (!opacity) win.setMinimumSize(440, 220);
+        else win.setMinimumSize(440, 255);
+    });
 
-  ipcMain.on('minimize-colorpicker', event => win.minimize())
-  ipcMain.on('maximize-colorpicker', event => {
-    if (win.isMaximized()) return win.unmaximize()
-    else return win.maximize()
-  })
-  ipcMain.on('close-colorpicker', event => win.close())
-  ipcMain.on('setOnTop', (event, bool) => win.setAlwaysOnTop(bool))
-  ipcMain.on('launchPicker', event => picker.init())
-  eventEmitter.on('launchPicker', event => picker.init())
-  ipcMain.on('launchColorsbook', event => colorsbook.init())
-  eventEmitter.on('launchColorsbook', event => colorsbook.init())
-  ipcMain.on('showPreferences', event => settings.init())
-  eventEmitter.on('showPreferences', event => settings.init())
-}
+    ipcMain.on("minimize-colorpicker", (event) => win.minimize());
+    ipcMain.on("maximize-colorpicker", (event) => {
+        if (win.isMaximized()) return win.unmaximize();
+        else return win.maximize();
+    });
+    ipcMain.on("close-colorpicker", (event) => win.close());
+    ipcMain.on("setOnTop", (event, bool) => win.setAlwaysOnTop(bool));
+    ipcMain.on("launchPicker", (event) => picker.init());
+    eventEmitter.on("launchPicker", (event) => picker.init());
+    ipcMain.on("launchColorsbook", (event) => colorsbook.init());
+    eventEmitter.on("launchColorsbook", (event) => colorsbook.init());
+    ipcMain.on("showPreferences", (event) => settings.init());
+    eventEmitter.on("showPreferences", (event) => settings.init());
+};

src/events/colorsbook.js

@@ -1,29 +1,33 @@
-'use strict'
+"use strict";
 
-const {ipcMain, BrowserWindow, app} = require('electron')
+const { ipcMain, BrowserWindow, app } = require("electron");
 
 module.exports = (storage, browsers) => {
-  const {colorpicker, settings, colorsbook} = browsers
-  let win
+    const { colorpicker, settings, colorsbook } = browsers;
+    let win;
 
-  ipcMain.on('init-colorsbook', event => {
-    win = colorsbook.getWindow()
-    let config = {}
-    config.posButton = storage.get('buttonsPosition')
-    config.typeButton = storage.get('buttonsType')
-    config.colors = storage.get('colors', 'colorsbook')
+    ipcMain.on("init-colorsbook", (event) => {
+        win = colorsbook.getWindow();
+        let config = {};
+        config.posButton = storage.get("buttonsPosition");
+        config.typeButton = storage.get("buttonsType");
+        config.colors = storage.get("colors", "colorsbook");
 
-    event.sender.send('init', config)
-  })
+        event.sender.send("init", config);
+    });
 
-  ipcMain.on('minimize-colorsbook', event => win.minimize())
-  ipcMain.on('maximize-colorsbook', (event, bool) => {
-    if (bool) return win.maximize()
-    return win.unmaximize()
-  })
-  ipcMain.on('close-colorsbook', event => win.close())
+    ipcMain.on("minimize-colorsbook", (event) => win.minimize());
+    ipcMain.on("maximize-colorsbook", (event, bool) => {
+        if (bool) return win.maximize();
+        return win.unmaximize();
+    });
+    ipcMain.on("close-colorsbook", (event) => win.close());
 
-  ipcMain.on('save-colorsbook', (event, colorsbook) => storage.add({colors: colorsbook}, 'colorsbook'))
+    ipcMain.on("save-colorsbook", (event, colorsbook) =>
+        storage.add({ colors: colorsbook }, "colorsbook")
+    );
 
-  ipcMain.on('colorsbook-change-color', (event, color) => colorpicker.getWindow().webContents.send('previewColor', color) )
-}
+    ipcMain.on("colorsbook-change-color", (event, color) =>
+        colorpicker.getWindow().webContents.send("previewColor", color)
+    );
+};

src/events/index.js

@@ -1,9 +1,9 @@
-'use strict'
+"use strict";
 
 module.exports = (storage, browsers, eventEmitter) => ({
-  colorpicker: require('./colorpicker')(storage, browsers, eventEmitter),
-  colorsbook: require('./colorsbook')(storage, browsers, eventEmitter),
-  picker: require('./picker')(storage, browsers, eventEmitter),
-  preview: require('./preview')(storage, browsers, eventEmitter),
-  settings: require('./settings')(storage, browsers, eventEmitter)
-})
+    colorpicker: require("./colorpicker")(storage, browsers, eventEmitter),
+    colorsbook: require("./colorsbook")(storage, browsers, eventEmitter),
+    picker: require("./picker")(storage, browsers, eventEmitter),
+    preview: require("./preview")(storage, browsers, eventEmitter),
+    settings: require("./settings")(storage, browsers, eventEmitter),
+});

src/events/picker.js

@@ -1,80 +1,45 @@
-'use strict';
+"use strict";
 
-const { ipcMain } = require('electron');
-const robot = require('robotjs');
+const { ipcMain } = require("electron");
+const robot = require("robotjs");
 
 let size, mouse, mouseEvent, color;
 
 module.exports = (storage, browsers) => {
     const { picker, colorpicker } = browsers;
 
-    let closePicker = newColor => {
-        if (typeof newColor !== 'string') newColor = color;
+    let closePicker = (newColor) => {
+        if (typeof newColor !== "string") newColor = color;
         if (picker.getWindow()) {
-            colorpicker.getWindow().webContents.send('changeColor', newColor);
+            colorpicker.getWindow().webContents.send("changeColor", newColor);
             colorpicker.getWindow().focus();
-            ipcMain.removeListener('closePicker', closePicker);
-            ipcMain.removeListener('pickerRequested', event => {});
+            ipcMain.removeListener("closePicker", closePicker);
+            ipcMain.removeListener("pickerRequested", (event) => {});
             picker.getWindow().close();
         }
     };
 
     const linuxSupport = () => {
-        const ioHook = require('iohook');
+        const ioHook = require("iohook");
 
         ioHook.start();
 
-        ioHook.on('mousemove', event => {
-            if(!picker.getWindow()) return
-            let realtime = storage.get('realtime', 'picker')
-            let {x, y} = event;
-            let color = '#' + robot.getPixelColor(parseInt(x), parseInt(y))
-            picker.getWindow().setPosition(parseInt(x) - 50, parseInt(y) - 50)
-            picker.getWindow().webContents.send('updatePicker', color)
-            if (realtime) colorpicker.getWindow().webContents.send('previewColor', color)
-        })
-
-        ioHook.on('mouseup', event => {
-            if(!picker.getWindow()) return
-            if(event.button == 2) return closePicker();
-            let {x, y} = event;
-            closePicker('#' + robot.getPixelColor(parseInt(x), parseInt(y)))
-        })
-
-        let pos = robot.getMousePos();
-        picker
-            .getWindow()
-            .setPosition(parseInt(pos.x) - 50, parseInt(pos.y) - 50);
-
-        picker
-            .getWindow()
-            .webContents.send(
-                'updatePicker',
-                robot.getPixelColor(pos.x, pos.y)
-            );
-
-        ipcMain.on('closePicker', closePicker);
-    }
-
-    ipcMain.on('pickerRequested', event => {
-        let realtime = storage.get('realtime', 'picker');
-        if (process.platform !== 'darwin' && process.platform !== 'win32') return linuxSupport();
-        if (process.platform === 'darwin') mouseEvent = require('osx-mouse')();
-        if (process.platform === 'win32') mouseEvent = require('win-mouse')();
-        color = storage.get('lastColor');
-
-        picker.getWindow().on('close', () => mouseEvent.destroy());
-
-        mouseEvent.on('move', (x, y) => {
-            let color = '#' + robot.getPixelColor(parseInt(x), parseInt(y));
+        ioHook.on("mousemove", (event) => {
+            if (!picker.getWindow()) return;
+            let realtime = storage.get("realtime", "picker");
+            let { x, y } = event;
+            let color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));
             picker.getWindow().setPosition(parseInt(x) - 50, parseInt(y) - 50);
-            picker.getWindow().webContents.send('updatePicker', color);
+            picker.getWindow().webContents.send("updatePicker", color);
             if (realtime)
-                colorpicker.getWindow().webContents.send('previewColor', color);
+                colorpicker.getWindow().webContents.send("previewColor", color);
         });
 
-        mouseEvent.on('left-up', (x, y) => {
-            closePicker('#' + robot.getPixelColor(parseInt(x), parseInt(y)));
+        ioHook.on("mouseup", (event) => {
+            if (!picker.getWindow()) return;
+            if (event.button == 2) return closePicker();
+            let { x, y } = event;
+            closePicker("#" + robot.getPixelColor(parseInt(x), parseInt(y)));
         });
 
         let pos = robot.getMousePos();
@@ -85,11 +50,48 @@ module.exports = (storage, browsers) => {
         picker
             .getWindow()
             .webContents.send(
-                'updatePicker',
+                "updatePicker",
                 robot.getPixelColor(pos.x, pos.y)
             );
 
-        ipcMain.on('closePicker', closePicker);
-        mouseEvent.on('right-up', closePicker);
+        ipcMain.on("closePicker", closePicker);
+    };
+
+    ipcMain.on("pickerRequested", (event) => {
+        let realtime = storage.get("realtime", "picker");
+        if (process.platform !== "darwin" && process.platform !== "win32")
+            return linuxSupport();
+        if (process.platform === "darwin") mouseEvent = require("osx-mouse")();
+        if (process.platform === "win32") mouseEvent = require("win-mouse")();
+        color = storage.get("lastColor");
+
+        picker.getWindow().on("close", () => mouseEvent.destroy());
+
+        mouseEvent.on("move", (x, y) => {
+            let color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));
+            picker.getWindow().setPosition(parseInt(x) - 50, parseInt(y) - 50);
+            picker.getWindow().webContents.send("updatePicker", color);
+            if (realtime)
+                colorpicker.getWindow().webContents.send("previewColor", color);
+        });
+
+        mouseEvent.on("left-up", (x, y) => {
+            closePicker("#" + robot.getPixelColor(parseInt(x), parseInt(y)));
+        });
+
+        let pos = robot.getMousePos();
+        picker
+            .getWindow()
+            .setPosition(parseInt(pos.x) - 50, parseInt(pos.y) - 50);
+
+        picker
+            .getWindow()
+            .webContents.send(
+                "updatePicker",
+                robot.getPixelColor(pos.x, pos.y)
+            );
+
+        ipcMain.on("closePicker", closePicker);
+        mouseEvent.on("right-up", closePicker);
     });
 };

src/events/preview.js

@@ -1,11 +1,9 @@
-'use strict'
+"use strict";
 
-  const {ipcMain, BrowserWindow, app} = require('electron')
+const { ipcMain, BrowserWindow, app } = require("electron");
 
 module.exports = (storage, browsers) => {
-  const {colorpicker, picker, colorsbook} = browsers
+    const { colorpicker, picker, colorsbook } = browsers;
 
-  ipcMain.on('init-preview', event => {
-
-  })
-}
+    ipcMain.on("init-preview", (event) => {});
+};

src/events/settings.js

@@ -1,88 +1,103 @@
-'use strict'
+"use strict";
 
-const {ipcMain, BrowserWindow, app, Notification, shell} = require('electron')
-const request = require('request')
+const {
+    ipcMain,
+    BrowserWindow,
+    app,
+    Notification,
+    shell,
+} = require("electron");
+const request = require("request");
 
 module.exports = (storage, browsers) => {
-  const {colorpicker, picker, colorsbook} = browsers
+    const { colorpicker, picker, colorsbook } = browsers;
 
-  ipcMain.on('init-settings', event => {
-    let config = {
-      versions: {
-        colorpicker: app.getVersion(),
-        node: process.versions.node,
-        electron: process.versions.electron,
-        v8: process.versions.v8,
-        chrome: process.versions.chrome
-      },
-      posButton: storage.get('buttonsPosition'),
-      typeButton:  storage.get('buttonsType'),
-      tools: storage.get('tools'),
-      realtime: storage.get('realtime', 'picker'),
-      colorfullApp: storage.get('colorfullApp')
+    ipcMain.on("init-settings", (event) => {
+        let config = {
+            versions: {
+                colorpicker: app.getVersion(),
+                node: process.versions.node,
+                electron: process.versions.electron,
+                v8: process.versions.v8,
+                chrome: process.versions.chrome,
+            },
+            posButton: storage.get("buttonsPosition"),
+            typeButton: storage.get("buttonsType"),
+            tools: storage.get("tools"),
+            realtime: storage.get("realtime", "picker"),
+            colorfullApp: storage.get("colorfullApp"),
+        };
+
+        event.sender.send("init", config);
+        event.sender.send("export", storage.get("colors", "colorsbook"));
+        updateApp(event);
+    });
+
+    ipcMain.on("set-position", (event, position) => {
+        storage.add({ buttonsPosition: position });
+        colorpicker.getWindow().webContents.send("changePosition", position);
+    });
+
+    ipcMain.on("set-type-icon", (event, type) => {
+        storage.add({ buttonsType: type });
+        colorpicker.getWindow().webContents.send("changeTypeIcons", type);
+    });
+
+    ipcMain.on("set-colorfull-app", (event, bool) => {
+        storage.add({ colorfullApp: bool });
+        colorpicker.getWindow().webContents.send("changeColorfullApp", bool);
+    });
+
+    ipcMain.on("set-realtime", (event, bool) =>
+        storage.add({ realtime: bool }, "picker")
+    );
+
+    ipcMain.on("changeTools", (event, tools) => {
+        storage.add({ tools: tools });
+        colorpicker.getWindow().webContents.send("changeTools", tools);
+    });
+
+    ipcMain.on("resetPreferences", () => {
+        storage.reset();
+        app.relaunch({ args: process.argv.slice(1).concat(["--reset"]) });
+        app.exit(0);
+    });
+
+    function updateApp(event) {
+        const options = {
+            url: "https://crea-th.at/p/colorpicker/release.json",
+            method: "GET",
+            headers: {
+                "content-type": "application/json",
+                "user-agent": `colorpicker-${app.getVersion()}`,
+            },
+        };
+        let message =
+            '<i class="fa fa-ban"></i> Can\'t connect to server, check manually <span data-link="https://colorpicker.crea-th.at">here</span>';
+        request(options, (err, res, body) => {
+            if (err) return event.sender.send("update", message);
+            let update = JSON.parse(body);
+            if (update === undefined || update === null)
+                return event.sender.send("update", message);
+            if (update.release <= app.getVersion())
+                return event.sender.send(
+                    "update",
+                    '<i class="fa fa-check"></i> You\'re up to date :)!'
+                );
+            else {
+                let notification = new Notification({
+                    title: "New update available",
+                    subtitle: update.release + " release is available!",
+                });
+                notification.show();
+                notification.on("click", () => {
+                    shell.openExternal("https://colorpicker.crea-th.at");
+                });
+                return event.sender.send(
+                    "update",
+                    `<i class="fa fa-exclamation-triangle"></i> New update available <span data-link="${update.link}">here</span>`
+                );
+            }
+        });
     }
-
-    event.sender.send('init', config)
-    event.sender.send('export', storage.get('colors', 'colorsbook'))
-    updateApp(event);
-  })
-
-  ipcMain.on('set-position', (event, position) => {
-    storage.add({buttonsPosition: position})
-    colorpicker.getWindow().webContents.send('changePosition', position)
-  })
-
-  ipcMain.on('set-type-icon', (event, type) => {
-    storage.add({buttonsType: type})
-    colorpicker.getWindow().webContents.send('changeTypeIcons', type)
-  })
-
-  ipcMain.on('set-colorfull-app', (event, bool) => {
-    storage.add({colorfullApp: bool})
-    colorpicker.getWindow().webContents.send('changeColorfullApp', bool)
-  })
-
-  ipcMain.on('set-realtime', (event, bool) => storage.add({realtime: bool}, 'picker'))
-
-  ipcMain.on('changeTools', (event, tools) => {
-    storage.add({tools: tools})
-    colorpicker.getWindow().webContents.send('changeTools', tools)
-  })
-
-  ipcMain.on('resetPreferences', () => {
-    storage.reset()
-    app.relaunch({args: process.argv.slice(1).concat(['--reset'])})
-    app.exit(0)
-  })
-
-  function updateApp(event) {
-    const options = {
-      url: 'https://crea-th.at/p/colorpicker/release.json',
-      method: 'GET',
-      headers: {
-        'content-type': 'application/json',
-        'user-agent': `colorpicker-${app.getVersion()}`
-      }
-    }
-    let message = '<i class="fa fa-ban"></i> Can\'t connect to server, check manually <span data-link="https://colorpicker.crea-th.at">here</span>'
-    request(options, (err, res, body) => {
-      if (err) return event.sender.send('update', message)
-      let update = JSON.parse(body)
-      if (update === undefined || update === null) return event.sender.send('update', message)
-      if (update.release <= app.getVersion()) return event.sender.send('update', '<i class="fa fa-check"></i> You\'re up to date :)!')
-      else {
-        let notification = new Notification({
-          title: 'New update available',
-          subtitle: update.release + ' release is available!'
-        })
-        notification.show()
-        notification.on('click', () => {
-          shell.openExternal('https://colorpicker.crea-th.at')
-        })
-        return event.sender.send('update', `<i class="fa fa-exclamation-triangle"></i> New update available <span data-link="${update.link}">here</span>`)
-      }
-    })
-  }
-
-
-}
+};

src/main.js

@@ -1,114 +1,218 @@
-'use strict'
+"use strict";
 
-let eventEmitter = require('events')
-eventEmitter = new eventEmitter()
+let eventEmitter = require("events");
+eventEmitter = new eventEmitter();
 
-const {app, Tray, Menu} = require('electron')
-const storage = require('./storage')
-const touchbar = require('./touchbar')(__dirname, eventEmitter)
-const browsers = require('./browsers')(__dirname, storage, {touchbar, eventEmitter})
-const {colorpicker, colorsbook, picker, settings} = browsers
+const { app, Tray, Menu } = require("electron");
+const storage = require("./storage");
+const touchbar = require("./touchbar")(__dirname, eventEmitter);
+const { searchNewUpdate } = require("./checkUpdate");
+const browsers = require("./browsers")(__dirname, storage, {
+    touchbar,
+    eventEmitter,
+});
+const { colorpicker, colorsbook, picker, settings } = browsers;
 
 // @TODO remove when electron@9.0.0
-app.allowRendererProcessReuse = true
+app.allowRendererProcessReuse = true;
 
-require('./events')(storage, browsers, eventEmitter)
+require("./events")(storage, browsers, eventEmitter);
 
-if (process.platform === 'linux') {
-  app.commandLine.appendSwitch('enable-transparent-visuals')
-  app.disableHardwareAcceleration()
+if (process.platform === "linux") {
+    app.commandLine.appendSwitch("enable-transparent-visuals");
+    app.disableHardwareAcceleration();
 }
 
-let tray
+let tray;
 
 let createTray = () => {
-  if (tray) return
-  if (process.platform === 'darwin') tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`)
-  if (process.platform === 'win32') tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`) // color here
-  if (process.platform === 'linux') tray = new Tray(`${__dirname}/ressources/tray-white@3x.png`)
-  if (process.platform === 'darwin') tray.setPressedImage(`${__dirname}/ressources/tray-white@3x.png`)
-  tray.on('click', event => colorpicker.init())
-}
+    if (tray) return;
+    if (process.platform === "darwin")
+        tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`);
+    if (process.platform === "win32")
+        tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`); // color here
+    if (process.platform === "linux")
+        tray = new Tray(`${__dirname}/ressources/tray-white@3x.png`);
+    if (process.platform === "darwin")
+        tray.setPressedImage(`${__dirname}/ressources/tray-white@3x.png`);
+    tray.on("click", (event) => colorpicker.init());
+};
 
 /**
-* [setMenu - set new app menu]
-* @return {void}
-*/
+ * [setMenu - set new app menu]
+ * @return {void}
+ */
 let setMenu = () => {
-  let template = [
-    {
-      label: 'Colorpicker',
-      submenu: [
-        { label: 'About Colorpicker', 'accelerator': 'Shift+CmdOrCtrl+A', click: () => settings.init() },
-        { label: `Version ${app.getVersion()}`, enabled: false },
-        { type: 'separator' },
-        { label: 'Preferences', accelerator: 'CmdOrCtrl+,', click: () => settings.init() },
-        { type: 'separator' },
-        { label: 'Hide Colorpicker', accelerator: 'CmdOrCtrl+H', role: 'minimize' },
+    let template = [
         {
-          label: 'Developer',
-          submenu: [
-            { label: 'Toggle Devtools', accelerator: 'CmdOrCtrl+Alt+I', role: 'toggledevtools' },
-            { label: 'Reload Window', accelerator: 'CmdOrCtrl+R', role: 'reload' }
-          ]
+            label: "Colorpicker",
+            submenu: [
+                {
+                    label: "About Colorpicker",
+                    accelerator: "Shift+CmdOrCtrl+A",
+                    click: () => settings.init(),
+                },
+                { label: `Version ${app.getVersion()}`, enabled: false },
+                { type: "separator" },
+                {
+                    label: "Preferences",
+                    accelerator: "CmdOrCtrl+,",
+                    click: () => settings.init(),
+                },
+                { type: "separator" },
+                {
+                    label: "Hide Colorpicker",
+                    accelerator: "CmdOrCtrl+H",
+                    role: "minimize",
+                },
+                {
+                    label: "Developer",
+                    submenu: [
+                        {
+                            label: "Toggle Devtools",
+                            accelerator: "CmdOrCtrl+Alt+I",
+                            role: "toggledevtools",
+                        },
+                        {
+                            label: "Reload Window",
+                            accelerator: "CmdOrCtrl+R",
+                            role: "reload",
+                        },
+                    ],
+                },
+                { type: "separator" },
+                {
+                    label: "Quit",
+                    accelerator: "CmdOrCtrl+Q",
+                    click: () => app.quit(),
+                },
+            ],
         },
-        { type: 'separator' },
-        { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => app.quit() }
-      ]
-    }, {
-      label: 'Edit', role: 'editMenu'
-    }, {
-      label: 'View',
-      submenu: [
-        { label: 'Show Colorpicker', accelerator: 'Shift+CmdOrCtrl+C', click: () => colorpicker.init() },
-        { label: 'Show ColorsBook', accelerator: 'Shift+CmdOrCtrl+B', click: () => colorsbook.init() },
-        { type: 'separator' },
-        { label: 'Save Color', accelerator: 'CmdOrCtrl+S', click: () => colorpicker.getWindow().webContents.send('shortSave') },
-        { type: 'separator' },
-        { label: 'Copy Hex Color', accelerator: 'CmdOrCtrl+W', click: () => colorpicker.getWindow().webContents.send('shortCopyHex') },
-        { label: 'Copy RGB(a) Color', accelerator: 'Shift+CmdOrCtrl+W', click: () => colorpicker.getWindow().webContents.send('shortCopyRGB') },
-        { type: 'separator' },
-        { label: 'set Negative Color', accelerator: 'CmdOrCtrl+N', click: () => colorpicker.getWindow().webContents.send('shortNegative') }
-      ]
-    }, {
-      label: 'Tools',
-      submenu: [
-        { label: 'Pin to Foreground', accelerator: 'CmdOrCtrl+F', click: () => colorpicker.getWindow().webContents.send('shortPin') },
-        { type: 'separator' },
-        { label: 'Pick Color', accelerator: 'CmdOrCtrl+P', click: () => picker.init() },
-        { label: 'Get Clipboard\'s Colors', accelerator: 'Shift+CmdOrCtrl+V', click: () => colorpicker.getWindow().webContents.send('shortApply') },
-        { label: 'Toggle Shading', accelerator: 'CmdOrCtrl+T', click: () => colorpicker.getWindow().webContents.send('shortShading') },
-        { label: 'Toggle Opacity', accelerator: 'CmdOrCtrl+O', click: () => colorpicker.getWindow().webContents.send('shortOpacity') },
-        { label: 'Set Random Color', accelerator: 'CmdOrCtrl+M', click: () => colorpicker.getWindow().webContents.send('shortRandom') }
-      ]
+        {
+            label: "Edit",
+            role: "editMenu",
+        },
+        {
+            label: "View",
+            submenu: [
+                {
+                    label: "Show Colorpicker",
+                    accelerator: "Shift+CmdOrCtrl+C",
+                    click: () => colorpicker.init(),
+                },
+                {
+                    label: "Show ColorsBook",
+                    accelerator: "Shift+CmdOrCtrl+B",
+                    click: () => colorsbook.init(),
+                },
+                { type: "separator" },
+                {
+                    label: "Save Color",
+                    accelerator: "CmdOrCtrl+S",
+                    click: () =>
+                        colorpicker.getWindow().webContents.send("shortSave"),
+                },
+                { type: "separator" },
+                {
+                    label: "Copy Hex Color",
+                    accelerator: "CmdOrCtrl+W",
+                    click: () =>
+                        colorpicker
+                            .getWindow()
+                            .webContents.send("shortCopyHex"),
+                },
+                {
+                    label: "Copy RGB(a) Color",
+                    accelerator: "Shift+CmdOrCtrl+W",
+                    click: () =>
+                        colorpicker
+                            .getWindow()
+                            .webContents.send("shortCopyRGB"),
+                },
+                { type: "separator" },
+                {
+                    label: "set Negative Color",
+                    accelerator: "CmdOrCtrl+N",
+                    click: () =>
+                        colorpicker
+                            .getWindow()
+                            .webContents.send("shortNegative"),
+                },
+            ],
+        },
+        {
+            label: "Tools",
+            submenu: [
+                {
+                    label: "Pin to Foreground",
+                    accelerator: "CmdOrCtrl+F",
+                    click: () =>
+                        colorpicker.getWindow().webContents.send("shortPin"),
+                },
+                { type: "separator" },
+                {
+                    label: "Pick Color",
+                    accelerator: "CmdOrCtrl+P",
+                    click: () => picker.init(),
+                },
+                {
+                    label: "Get Clipboard's Colors",
+                    accelerator: "Shift+CmdOrCtrl+V",
+                    click: () =>
+                        colorpicker.getWindow().webContents.send("shortApply"),
+                },
+                {
+                    label: "Toggle Shading",
+                    accelerator: "CmdOrCtrl+T",
+                    click: () =>
+                        colorpicker
+                            .getWindow()
+                            .webContents.send("shortShading"),
+                },
+                {
+                    label: "Toggle Opacity",
+                    accelerator: "CmdOrCtrl+O",
+                    click: () =>
+                        colorpicker
+                            .getWindow()
+                            .webContents.send("shortOpacity"),
+                },
+                {
+                    label: "Set Random Color",
+                    accelerator: "CmdOrCtrl+M",
+                    click: () =>
+                        colorpicker.getWindow().webContents.send("shortRandom"),
+                },
+            ],
+        },
+    ];
+    Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+};
+
+/**
+ * [App ready - On app ready]
+ */
+app.on("ready", () => {
+    storage.init().then(() => {
+        // createTray();
+        setMenu();
+        colorpicker.init();
+        searchNewUpdate();
+    });
+});
+
+/**
+ * [App activate - On app icon clicked]
+ */
+app.on("activate", () => {
+    colorpicker.init();
+});
+
+/**
+ * [App window-all-closed - quit app on all window closed ]
+ */
+app.on("window-all-closed", () => {
+    if (process.platform !== "darwin") {
+        app.quit();
     }
-  ]
-  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
-}
-
-/**
-* [App ready - On app ready]
-*/
-app.on('ready', () => {
-  storage.init().then(() => {
-    createTray()
-    setMenu()
-    colorpicker.init()
-  })
-})
-
-/**
-* [App activate - On app icon clicked]
-*/
-app.on('activate', () => {
-  colorpicker.init()
-})
-
-/**
-* [App window-all-closed - quit app on all window closed ]
-*/
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
+});

src/storage.js

@@ -1,57 +1,58 @@
-'use strict'
+"use strict";
 
-const electronStorage = require('electron-json-storage')
-const {dialog} = require('electron')
+const electronStorage = require("electron-json-storage");
+const { dialog } = require("electron");
 
-let storage, template, defaultStorage
+let storage, template, defaultStorage;
 
 /**
  * [init - init storage]
  * @return {Promise} [promise when initialized]
  */
-let init = () => (
-  new Promise((resolve, reject) => (
-    electronStorage.has('colorpicker', (err, exist) => {
-      if (err) throw err
-      if (exist) resolve(fetch())
-      else {
-        storage = defaultStorage
-        resolve(save())
-      }
-    })
-  ))
-)
+let init = () =>
+    new Promise((resolve, reject) =>
+        electronStorage.has("colorpicker", (err, exist) => {
+            if (err) throw err;
+            if (exist) resolve(fetch());
+            else {
+                storage = defaultStorage;
+                resolve(save());
+            }
+        })
+    );
 
 /**
  * [fetch - fetch storage]
  * @return {Promise} [promise when fetched]
  */
-let fetch = () => (
-  new Promise((resolve, reject) => {
-    electronStorage.get('colorpicker', (err, data) => {
-      if (err) {
-        dialog.showErrorBox('loading storage file error', err)
-        storage = defaultStorage
-        resolve(false)
-      }
-      storage = defaultStorage;
-      for (let key in defaultStorage.colorpicker) {
-        if (!data.colorpicker) return;
-        if (!data.colorpicker.hasOwnProperty(key)) data.colorpicker[key] = defaultStorage.colorpicker[key]
-      }
-      for (let key in defaultStorage.picker) {
-        if (!data.picker) return;
-        if (!data.picker.hasOwnProperty(key)) data.picker[key] = defaultStorage.picker[key]
-      }
-      for (let key in defaultStorage.colorsbook) {
-        if (!data.colorsbook) return;
-        if (!data.colorsbook.hasOwnProperty(key)) data.colorsbook[key] = defaultStorage.colorsbook[key]
-      }
-      storage = data
-      resolve(true)
-    })
-  })
-)
+let fetch = () =>
+    new Promise((resolve, reject) => {
+        electronStorage.get("colorpicker", (err, data) => {
+            if (err) {
+                dialog.showErrorBox("loading storage file error", err);
+                storage = defaultStorage;
+                resolve(false);
+            }
+            storage = defaultStorage;
+            for (let key in defaultStorage.colorpicker) {
+                if (!data.colorpicker) return;
+                if (!data.colorpicker.hasOwnProperty(key))
+                    data.colorpicker[key] = defaultStorage.colorpicker[key];
+            }
+            for (let key in defaultStorage.picker) {
+                if (!data.picker) return;
+                if (!data.picker.hasOwnProperty(key))
+                    data.picker[key] = defaultStorage.picker[key];
+            }
+            for (let key in defaultStorage.colorsbook) {
+                if (!data.colorsbook) return;
+                if (!data.colorsbook.hasOwnProperty(key))
+                    data.colorsbook[key] = defaultStorage.colorsbook[key];
+            }
+            storage = data;
+            resolve(true);
+        });
+    });
 
 /**
  * [get - return settings of target browser]
@@ -60,132 +61,137 @@ let fetch = () => (
  * @return {string|Object}  [settings string or object]
  */
 let get = (el, name) => {
-  if (!name) name = 'colorpicker'
-  return (storage[name][el] !== null || storage[name][el] !== undefined) ? storage[name][el] : {}
-}
+    if (!name) name = "colorpicker";
+    return storage[name][el] !== null || storage[name][el] !== undefined
+        ? storage[name][el]
+        : {};
+};
 
 /**
  * [add - add object settings to storage]
  * @param {Object} payload [object setting to add & save]
  * @param {string} name    [name of the target browser]
  */
-let add = (payload, name) => (
-  new Promise((resolve, reject) => {
-    console.log('save payload:', payload)
-    if (!name) name = 'colorpicker'
-    Object.assign(storage[name], payload)
-    resolve(save())
-  })
-)
+let add = (payload, name) =>
+    new Promise((resolve, reject) => {
+        if (!name) name = "colorpicker";
+        Object.assign(storage[name], payload);
+        resolve(save());
+    });
 
 /**
  * [save - save current storage]
  * @return {Promise} [promise when saved]
  */
-let save = () => (
-  new Promise((resolve, reject) => {
-    electronStorage.set('colorpicker', storage, (err, data) => {
-      if (err) throw err
-      resolve(true)
-    })
-  })
-)
+let save = () =>
+    new Promise((resolve, reject) => {
+        electronStorage.set("colorpicker", storage, (err, data) => {
+            if (err) throw err;
+            resolve(true);
+        });
+    });
 
 /**
  * [reset - reset storage to default]
  */
 let reset = () => {
-  electronStorage.remove('colorpicker')
-  storage = defaultStorage
-  save()
-}
+    electronStorage.remove("colorpicker");
+    storage = defaultStorage;
+    save();
+};
 
 /**
  * [platform - get actual platfom]
  * @return {string} [actual platform]
  */
 let platform = () => {
-  switch (process.platform) {
-    case 'darwin': return 'darwin'
-    case 'win32': return 'windows'
-    case 'linux': return 'linux'
-    case 'freebsd': return 'linux'
-    case 'sunos': return 'linux'
-    default: return 'darwin'
-  }
-}
+    switch (process.platform) {
+        case "darwin":
+            return "darwin";
+        case "win32":
+            return "windows";
+        case "linux":
+            return "linux";
+        case "freebsd":
+            return "linux";
+        case "sunos":
+            return "linux";
+        default:
+            return "darwin";
+    }
+};
 
 /**
  * [template - default settings for each platform]
  * @type {Object}
  */
 template = {
-  windows: {
-    buttonsPosition: 'right',
-    buttonsType: 'windows'
-  },
-  darwin: {
-    buttonsPosition: 'left',
-    buttonsType: 'osx'
-  },
-  linux: {
-    buttonsPosition: 'right',
-    buttonsType: 'linux'
-  }
-}
+    windows: {
+        buttonsPosition: "right",
+        buttonsType: "windows",
+    },
+    darwin: {
+        buttonsPosition: "left",
+        buttonsType: "osx",
+    },
+    linux: {
+        buttonsPosition: "right",
+        buttonsType: "linux",
+    },
+};
 
 /**
  * [defaultStorage - default storage]
  * @type {Object}
  */
 defaultStorage = {
-  colorpicker: {
-    tools: ['top', 'picker', 'tags', 'shade', 'opacity', 'settings'],
-    size: { width: 440, height: 150 },
-    buttonsPosition: template[platform()].buttonsPosition,
-    buttonsType: template[platform()].buttonsType,
-    lastColor: '#00AEEF',
-    history: [],
-    colorfullApp: false
-  },
-  colorsbook: {
-    colors: {
-      'flat': [
-        '#2196F3',
-        '#00BCD4',
-        '#4CAF50',
-        '#8BC34A',
-        '#FFEB3B',
-        '#FF9800',
-        '#FF5722',
-        '#F44336',
-        '#673AB7',
-        '#3F51B5',
-        '#607D8B'
-      ],
-      'pastel': [
-        '#7E93C8',
-        '#8FC1E2',
-        '#AFBBE3',
-        '#EFCAC4',
-        '#E19494',
-        '#F8AF85',
-        '#F9C48C',
-        '#C2BB9B',
-        '#B0D9CD',
-        '#6B8790',
-        '#AC94C9'
-      ]
-    }
-  },
-  picker: {
-    realTime: true
-  }
-}
+    colorpicker: {
+        tools: ["top", "picker", "tags", "shade", "opacity", "settings"],
+        size: { width: 440, height: 150 },
+        buttonsPosition: template[platform()].buttonsPosition,
+        buttonsType: template[platform()].buttonsType,
+        lastColor: "#00AEEF",
+        history: [],
+        colorfullApp: false,
+    },
+    colorsbook: {
+        colors: {
+            flat: [
+                "#2196F3",
+                "#00BCD4",
+                "#4CAF50",
+                "#8BC34A",
+                "#FFEB3B",
+                "#FF9800",
+                "#FF5722",
+                "#F44336",
+                "#673AB7",
+                "#3F51B5",
+                "#607D8B",
+            ],
+            pastel: [
+                "#7E93C8",
+                "#8FC1E2",
+                "#AFBBE3",
+                "#EFCAC4",
+                "#E19494",
+                "#F8AF85",
+                "#F9C48C",
+                "#C2BB9B",
+                "#B0D9CD",
+                "#6B8790",
+                "#AC94C9",
+            ],
+        },
+    },
+    picker: {
+        realTime: true,
+    },
+};
 
 module.exports = {
-  init: init,
-  get: get,
-  add: add,
-  reset: reset
-}
+    init: init,
+    get: get,
+    add: add,
+    reset: reset,
+};

src/touchbar.js

@@ -1,28 +1,33 @@
-'use strict'
+"use strict";
 
-const {TouchBar} = require('electron')
-const {TouchBarColorPicker, TouchBarButton} = TouchBar;
+const { TouchBar } = require("electron");
+const { TouchBarColorPicker, TouchBarButton } = TouchBar;
 
 module.exports = (dirname, eventEmitter) => {
-  let colorpicker = new TouchBarColorPicker({
-    change: color => eventEmitter.emit('changeColor', color)
-  })
-  let eyedropper = new TouchBarButton({
-    icon: `${dirname}/ressources/eyedropper-touchbar.png`,
-    click: () => eventEmitter.emit('launchPicker')
-  })
-  let colorsbook = new TouchBarButton({
-    icon: `${dirname}/ressources/colorsbook-touchbar.png`,
-    click: () => eventEmitter.emit('launchColorsbook')
-  })
-  let settings = new TouchBarButton({
-    icon: `${dirname}/ressources/settings-touchbar.png`,
-    click: () => eventEmitter.emit('showPreferences')
-  })
+    let colorpicker = new TouchBarColorPicker({
+        change: (color) => eventEmitter.emit("changeColor", color),
+    });
+    let eyedropper = new TouchBarButton({
+        icon: `${dirname}/ressources/eyedropper-touchbar.png`,
+        click: () => eventEmitter.emit("launchPicker"),
+    });
+    let colorsbook = new TouchBarButton({
+        icon: `${dirname}/ressources/colorsbook-touchbar.png`,
+        click: () => eventEmitter.emit("launchColorsbook"),
+    });
+    let settings = new TouchBarButton({
+        icon: `${dirname}/ressources/settings-touchbar.png`,
+        click: () => eventEmitter.emit("showPreferences"),
+    });
 
-  let touchbar = new TouchBar([colorpicker, eyedropper, colorsbook, settings])
+    let touchbar = new TouchBar([
+        colorpicker,
+        eyedropper,
+        colorsbook,
+        settings,
+    ]);
 
-  let get = () => touchbar
+    let get = () => touchbar;
 
-  return touchbar
-}
+    return touchbar;
+};

src/views/colorpicker.html

@@ -1,58 +1,58 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<title>Colorpicker</title>
-		<meta charset="utf-8" />
-		<link rel="stylesheet" href="css/app-buttons.css" />
-		<link rel="stylesheet" href="css/colorpicker.css" />
-		<link rel="stylesheet" href="css/fontawesome-all.min.css" />
-		<script defer src="js/color.class.js"></script>
-		<script defer src="js/colorpicker.class.js"></script>
-		<script defer src="js/colorpicker.events.js"></script>
-		<script defer src="js/util.class.js"></script>
-	</head>
-	<body>
-		<div class="toolbar">
-			<ul id="app_buttons">
-				<li id="close"><i></i></li>
-				<li id="minimize"><i></i></li>
-				<li id="maximize"><i></i></li>
-			</ul>
-			<ul id="tools"></ul>
-		</div>
-		<header>
-      <div class="tints"></div>
-			<div class="naturals"></div>
-      <div class="shades"></div>
-		</header>
-		<section class="main">
-			<aside class="sliders">
-				<div class="red_bar">
-					<input type="range" min="0" max="255" value="0" />
-					<progress min="0" max="255" value="0" />
-				</div>
-				<div class="green_bar">
-					<input type="range" min="0" max="255" value="0" />
-					<progress min="0" max="255" value="0" />
-				</div>
-				<div class="blue_bar">
-					<input type="range" min="0" max="255" value="0" />
-					<progress min="0" max="255" value="0" />
-				</div>
-				<div class="alpha_bar">
-					<input type="range" min="0" max="255" value="0" />
-					<progress min="0" max="255" value="0" />
-				</div>
-			</aside>
-			<aside class="inputs">
-				<input type="number" id="red_value" maxlength="3" />
-				<input type="number" id="green_value" maxlength="3" />
-				<input type="number" id="blue_value" maxlength="3" />
-				<input type="text" id="alpha_value" maxlength="4" />
-			</aside>
-			<aside class="value">
-				<input type="text" id="hex_value" maxlength="7"/>
-			</aside>
-		</section>
-   </body>
+    <head>
+        <title>Colorpicker</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="css/app-buttons.css" />
+        <link rel="stylesheet" href="css/colorpicker.css" />
+        <link rel="stylesheet" href="css/fontawesome-all.min.css" />
+        <script defer src="js/color.class.js"></script>
+        <script defer src="js/colorpicker.class.js"></script>
+        <script defer src="js/colorpicker.events.js"></script>
+        <script defer src="js/util.class.js"></script>
+    </head>
+    <body>
+        <div class="toolbar">
+            <ul id="app_buttons">
+                <li id="close"><i></i></li>
+                <li id="minimize"><i></i></li>
+                <li id="maximize"><i></i></li>
+            </ul>
+            <ul id="tools"></ul>
+        </div>
+        <header>
+            <div class="tints"></div>
+            <div class="naturals"></div>
+            <div class="shades"></div>
+        </header>
+        <section class="main">
+            <aside class="sliders">
+                <div class="red_bar">
+                    <input type="range" min="0" max="255" value="0" />
+                    <progress min="0" max="255" value="0" />
+                </div>
+                <div class="green_bar">
+                    <input type="range" min="0" max="255" value="0" />
+                    <progress min="0" max="255" value="0" />
+                </div>
+                <div class="blue_bar">
+                    <input type="range" min="0" max="255" value="0" />
+                    <progress min="0" max="255" value="0" />
+                </div>
+                <div class="alpha_bar">
+                    <input type="range" min="0" max="255" value="0" />
+                    <progress min="0" max="255" value="0" />
+                </div>
+            </aside>
+            <aside class="inputs">
+                <input type="number" id="red_value" maxlength="3" />
+                <input type="number" id="green_value" maxlength="3" />
+                <input type="number" id="blue_value" maxlength="3" />
+                <input type="text" id="alpha_value" maxlength="4" />
+            </aside>
+            <aside class="value">
+                <input type="text" id="hex_value" maxlength="7" />
+            </aside>
+        </section>
+    </body>
 </html>

src/views/colorsbook.html

@@ -1,34 +1,34 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Colorsbook</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="css/app-buttons.css" />
-    <link rel="stylesheet" href="css/colorsbook.css" />
-    <link rel="stylesheet" href="css/fontawesome-all.min.css" />
-    <script defer src="js/colorsbook.js"></script>
-    <script defer src="js/util.class.js"></script>
-  </head>
-  <body>
-    <div class="toolbar">
-      <ul id="app_buttons">
-        <li id="close"><i></i></li>
-        <li id="minimize"><i></i></li>
-        <li id="maximize"><i></i></li>
-      </ul>
-      <ul id="tools"></ul>
-    </div>
-    <section id="main">
-      <section id="categories-wrapper">
-        <section id="categories"></section>
-      </section>
-      <section id="colors"></section>
-      <aside id="popup_category">
-        <input type="text" placeholder="name" maxlength="12">
-      </aside>
-      <aside id="popup_color">
-        <input type="text" placeholder="#FFFFFF" maxlength="7">
-      </aside>
-    </section>
-  </body>
+    <head>
+        <title>Colorsbook</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="css/app-buttons.css" />
+        <link rel="stylesheet" href="css/colorsbook.css" />
+        <link rel="stylesheet" href="css/fontawesome-all.min.css" />
+        <script defer src="js/colorsbook.js"></script>
+        <script defer src="js/util.class.js"></script>
+    </head>
+    <body>
+        <div class="toolbar">
+            <ul id="app_buttons">
+                <li id="close"><i></i></li>
+                <li id="minimize"><i></i></li>
+                <li id="maximize"><i></i></li>
+            </ul>
+            <ul id="tools"></ul>
+        </div>
+        <section id="main">
+            <section id="categories-wrapper">
+                <section id="categories"></section>
+            </section>
+            <section id="colors"></section>
+            <aside id="popup_category">
+                <input type="text" placeholder="name" maxlength="12" />
+            </aside>
+            <aside id="popup_color">
+                <input type="text" placeholder="#FFFFFF" maxlength="7" />
+            </aside>
+        </section>
+    </body>
 </html>

src/views/css/app-buttons.css

@@ -1,189 +1,210 @@
-@font-face{
-  font-family: 'Lato';
-  src: url('fonts/Lato-Regular.ttf');
+@font-face {
+    font-family: "Lato";
+    src: url("fonts/Lato-Regular.ttf");
 }
 
-html, body{
-  height: 100%;
+html,
+body {
+    height: 100%;
 }
 
-body, p, h1, h2, input{
-   margin: 0;
-   font-family: 'Lato', sans-serif;
+body,
+p,
+h1,
+h2,
+input {
+    margin: 0;
+    font-family: "Lato", sans-serif;
 }
 
-a{
-  color: inherit;
-  text-decoration: none;
+a {
+    color: inherit;
+    text-decoration: none;
 }
 
 /**
  * TOOLBAR
  */
-.toolbar{
-  margin: 3px;
-  padding: 5px 5px 7px 5px;
-  position: relative;
-  display: flex;
-  z-index: 10000;
-  box-sizing: border-box;
-  -webkit-app-region: drag;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  transition: border-bottom 0.4s;
+.toolbar {
+    margin: 3px;
+    padding: 5px 5px 7px 5px;
+    position: relative;
+    display: flex;
+    z-index: 10000;
+    box-sizing: border-box;
+    -webkit-app-region: drag;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    transition: border-bottom 0.4s;
 }
-.darkMode .toolbar{
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+.darkMode .toolbar {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.toolbar.setRight{
-  flex-direction: row-reverse;
-  justify-content: space-between;
+.toolbar.setRight {
+    flex-direction: row-reverse;
+    justify-content: space-between;
 }
-  .toolbar ul{
-    margin: 0; padding: 0;
+.toolbar ul {
+    margin: 0;
+    padding: 0;
     margin-right: 15px;
     display: flex;
-  }
+}
 
-  .toolbar.setRight ul{
+.toolbar.setRight ul {
     margin-right: 0;
-  }
-  #app_buttons{
+}
+#app_buttons {
     transition: opacity 0.4s;
-  }
-  .toolbar.setRight #app_buttons{
+}
+.toolbar.setRight #app_buttons {
     flex-direction: row-reverse;
-  }
+}
 
-    .toolbar li{
-      -webkit-app-region: no-drag;
-      cursor: pointer;
-      transition: color 0.2s;
-      list-style: none;
-      margin: 0 5px 0 5px;
-      font-size: 0.9em;
-      position: relative;
-      top: 3px;
-    }
-    .toolbar #app_buttons.darwin li{
-      margin: 0 4px 3px 4px;
-    }
+.toolbar li {
+    -webkit-app-region: no-drag;
+    cursor: pointer;
+    transition: color 0.2s;
+    list-style: none;
+    margin: 0 5px 0 5px;
+    font-size: 0.9em;
+    position: relative;
+    top: 3px;
+}
+.toolbar #app_buttons.darwin li {
+    margin: 0 4px 3px 4px;
+}
 
-      .blured .darwin #minimize, .blured .darwin #maximize, .blured .darwin #close{
-        color: #DDDDDD;
-      }
+.blured .darwin #minimize,
+.blured .darwin #maximize,
+.blured .darwin #close {
+    color: #dddddd;
+}
 
-      /* Minimize Button */
-      /* Minimize position for Windows & Linux */
-      #app_buttons.windows #minimize, #app_buttons.linux #minimize{
-        order: 3;
-      }
-      #minimize{
-        color: rgba(0, 0, 0, 0.35);
-      }
-      .blured #minimize{
-        color: rgba(0, 0, 0, 0.2);
-      }
-      .darwin #minimize{
-        color: #FEBF3C;
-      }
-      .windows #minimize{
-        font-size: 0.9em;
-        position: relative;
-        top: 1px;
-      }
-      .linux #minimize{
-        font-size: 0.6em;
-        position: relative;
-        padding: 4px 1px;
-      }
+/* Minimize Button */
+/* Minimize position for Windows & Linux */
+#app_buttons.windows #minimize,
+#app_buttons.linux #minimize {
+    order: 3;
+}
+#minimize {
+    color: rgba(0, 0, 0, 0.35);
+}
+.blured #minimize {
+    color: rgba(0, 0, 0, 0.2);
+}
+.darwin #minimize {
+    color: #febf3c;
+}
+.windows #minimize {
+    font-size: 0.9em;
+    position: relative;
+    top: 1px;
+}
+.linux #minimize {
+    font-size: 0.6em;
+    position: relative;
+    padding: 4px 1px;
+}
 
-      #minimize:hover{
-        color: #FEB219;
-      }
-      .windows #minimize:hover, .linux #minimize:hover{
-        color: rgba(0, 0, 0, 0.5);
-      }
+#minimize:hover {
+    color: #feb219;
+}
+.windows #minimize:hover,
+.linux #minimize:hover {
+    color: rgba(0, 0, 0, 0.5);
+}
 
-      .darkMode .windows #minimize, .darkMode .linux #minimize{
-        color: rgba(255, 255, 255, 0.4);
-      }
-      .blured .darkMode .windows #minimize, .blured .darkMode .linux #minimize{
-        color: rgba(255, 255, 255, 0.2);
-      }
-      .darkMode .windows #minimize:hover, .darkMode .linux #minimize:hover{
-        color: rgba(255, 255, 255, 0.6);
-      }
+.darkMode .windows #minimize,
+.darkMode .linux #minimize {
+    color: rgba(255, 255, 255, 0.4);
+}
+.blured .darkMode .windows #minimize,
+.blured .darkMode .linux #minimize {
+    color: rgba(255, 255, 255, 0.2);
+}
+.darkMode .windows #minimize:hover,
+.darkMode .linux #minimize:hover {
+    color: rgba(255, 255, 255, 0.6);
+}
 
-      /* Maximize button */
-      #maximize{
-        color: rgba(0, 0, 0, 0.35);
-      }
-      .blured #maximize{
-        color: rgba(0, 0, 0, 0.2);
-      }
-      .darwin #maximize{
-        color: #35CC48;
-      }
-      .windows #maximize{
-        font-size: 0.9em;
-        position: relative;
-        top: 2px;
-      }
-      .linux #maximize{
-        transform: rotate(45deg);
-        font-size: 0.7em;
-        padding: 3px;
-      }
+/* Maximize button */
+#maximize {
+    color: rgba(0, 0, 0, 0.35);
+}
+.blured #maximize {
+    color: rgba(0, 0, 0, 0.2);
+}
+.darwin #maximize {
+    color: #35cc48;
+}
+.windows #maximize {
+    font-size: 0.9em;
+    position: relative;
+    top: 2px;
+}
+.linux #maximize {
+    transform: rotate(45deg);
+    font-size: 0.7em;
+    padding: 3px;
+}
 
-      #maximize:hover{
-        color: #32C544;
-      }
-      .windows #maximize:hover, .linux #maximize:hover{
-        color: rgba(0, 0, 0, 0.5);
-      }
+#maximize:hover {
+    color: #32c544;
+}
+.windows #maximize:hover,
+.linux #maximize:hover {
+    color: rgba(0, 0, 0, 0.5);
+}
 
-      .darkMode .windows #maximize, .darkMode .linux #maximize{
-        color: rgba(255, 255, 255, 0.4);
-      }
-      .blured .darkMode .windows #maximize, .blured .darkMode .linux #maximize{
-        color: rgba(255, 255, 255, 0.2);
-      }
-      .darkMode .windows #maximize:hover, .darkMode .linux #maximize:hover{
-        color: rgba(255, 255, 255, 0.6);
-      }
+.darkMode .windows #maximize,
+.darkMode .linux #maximize {
+    color: rgba(255, 255, 255, 0.4);
+}
+.blured .darkMode .windows #maximize,
+.blured .darkMode .linux #maximize {
+    color: rgba(255, 255, 255, 0.2);
+}
+.darkMode .windows #maximize:hover,
+.darkMode .linux #maximize:hover {
+    color: rgba(255, 255, 255, 0.6);
+}
 
-      /* Close button */
-      #close{
-        color: rgba(0, 0, 0, 0.35);
-      }
-      .blured #close, .blured .linux #close{
-        color: rgba(0, 0, 0, 0.2);
-      }
-      .darwin #close{
-        color: #FC635C;
-      }
-      .linux #close{
-        font-size: 1.1em;
-        color: #CF555E;
-      }
+/* Close button */
+#close {
+    color: rgba(0, 0, 0, 0.35);
+}
+.blured #close,
+.blured .linux #close {
+    color: rgba(0, 0, 0, 0.2);
+}
+.darwin #close {
+    color: #fc635c;
+}
+.linux #close {
+    font-size: 1.1em;
+    color: #cf555e;
+}
 
-      #close:hover{
-        color: #FC4B43;
-      }
-      .linux #close:hover, .blured .linux #close:hover, .blured .darkMode .linux #close:hover{
-        color: #DA767D;
-      }
-      .windows #close:hover{
-        color: rgba(0, 0, 0, 0.5);
-      }
+#close:hover {
+    color: #fc4b43;
+}
+.linux #close:hover,
+.blured .linux #close:hover,
+.blured .darkMode .linux #close:hover {
+    color: #da767d;
+}
+.windows #close:hover {
+    color: rgba(0, 0, 0, 0.5);
+}
 
-      .darkMode .windows #close{
-        color: rgba(255, 255, 255, 0.4);
-      }
-      .blured .darkMode .windows #close, .blured .darkMode .linux #close{
-        color: rgba(255, 255, 255, 0.2);
-      }
-      .darkMode .windows #close:hover{
-        color: rgba(255, 255, 255, 0.6);
-      }
+.darkMode .windows #close {
+    color: rgba(255, 255, 255, 0.4);
+}
+.blured .darkMode .windows #close,
+.blured .darkMode .linux #close {
+    color: rgba(255, 255, 255, 0.2);
+}
+.darkMode .windows #close:hover {
+    color: rgba(255, 255, 255, 0.6);
+}

src/views/css/colorpicker.css

@@ -1,43 +1,52 @@
-@font-face{
-  font-family: 'Lato';
-  src: url('fonts/Lato-Regular.ttf');
+@font-face {
+    font-family: "Lato";
+    src: url("fonts/Lato-Regular.ttf");
 }
 
-html, body{
-  height: 100%;
+html,
+body {
+    height: 100%;
 }
 
-body, p, h1, h2, input{
-   margin: 0;
-   font-family: 'Lato', sans-serif;
+body,
+p,
+h1,
+h2,
+input {
+    margin: 0;
+    font-family: "Lato", sans-serif;
 }
-body{
- overflow: hidden;
+body {
+    overflow: hidden;
 }
-a{
-  color: inherit;
-  text-decoration: none;
+a {
+    color: inherit;
+    text-decoration: none;
 }
 
 /* CLEAN OPTION */
-.clean .toolbar, .clean.darkMode .toolbar{
-  border-bottom: 1px solid rgba(0, 0, 0, 0);
+.clean .toolbar,
+.clean.darkMode .toolbar {
+    border-bottom: 1px solid rgba(0, 0, 0, 0);
 }
-.clean .toolbar p:not(#clean_button), .clean #app_buttons{
-  opacity: 0.1;
+.clean .toolbar p:not(#clean_button),
+.clean #app_buttons {
+    opacity: 0.1;
 }
 
-.clean .inputs, .clean .value, .clean .sliders{
-  opacity: 0;
+.clean .inputs,
+.clean .value,
+.clean .sliders {
+    opacity: 0;
 }
 
 #tools {
-  font-size: 0.9em;
-  margin-top: 1px;
-  margin-bottom: 1px;
+    font-size: 0.9em;
+    margin-top: 1px;
+    margin-bottom: 1px;
 }
-  #tools p{
-    color: rgba(0, 0, 0, 0.30);
+#tools p {
+    color: rgba(0, 0, 0, 0.3);
     font-weight: bold;
     padding: 0 6px 0 5px;
     width: 17px;
@@ -45,191 +54,227 @@ a{
     -webkit-app-region: no-drag;
     cursor: pointer;
     transition: 0.3s;
-  }
-  .darkMode #tools p{
-    color: rgba(255, 255, 255, 0.50);
-  }
-  #tools p:hover{ color: rgba(0, 0, 0, 0.45); }
-  .darkMode #tools p:hover{ color: rgba(255, 255, 255, 0.60); }
+}
+.darkMode #tools p {
+    color: rgba(255, 255, 255, 0.5);
+}
+#tools p:hover {
+    color: rgba(0, 0, 0, 0.45);
+}
+.darkMode #tools p:hover {
+    color: rgba(255, 255, 255, 0.6);
+}
 
-  #tools p.active{ color: rgba(0, 0, 0, 0.60); }
-  .darkMode #tools p.active{ color: rgba(255, 255, 255, 0.85); }
+#tools p.active {
+    color: rgba(0, 0, 0, 0.6);
+}
+.darkMode #tools p.active {
+    color: rgba(255, 255, 255, 0.85);
+}
 
-  #tools::selection, #tools p::selection, #tools li::selection, #tools div::selection{
+#tools::selection,
+#tools p::selection,
+#tools li::selection,
+#tools div::selection {
     background: rgba(0, 0, 0, 0);
-  }
-
+}
 
 /**
  * HEADER CSS
  */
-header{
-  position: absolute;
-  z-index: 100;
-  width: 100%;
-  top: -10px;
-  visibility: hidden;
-  opacity: 0;
-  transition: 0.6s;
+header {
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    top: -10px;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.6s;
 }
-header.shading{
-  visibility: visible;
-  opacity: 1;
-  top: 34px;
+header.shading {
+    visibility: visible;
+    opacity: 1;
+    top: 34px;
 }
-header .shades, header .tints, header .naturals{
-  display: flex;
+header .shades,
+header .tints,
+header .naturals {
+    display: flex;
 }
-header .shades aside, header .tints aside, header .naturals aside{
-  flex: 1 100%;
-  height: 10vmin;
-  cursor: pointer;
+header .shades aside,
+header .tints aside,
+header .naturals aside {
+    flex: 1 100%;
+    height: 10vmin;
+    cursor: pointer;
 }
 
-
-
 /**
  * MAIN COLORPICKER CSS
  */
-.main{
-   position: absolute;
-   bottom: 0; left: 0;
-   padding-top: 15px;
-   padding-bottom: 3px;
-   padding-left: 10px;
-   width: 100%;
-   text-align: center;
-   display: flex;
-   align-items: flex-end;
-   overflow: hidden;
-   box-sizing: border-box;
+.main {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding-top: 15px;
+    padding-bottom: 3px;
+    padding-left: 10px;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    align-items: flex-end;
+    overflow: hidden;
+    box-sizing: border-box;
 }
 
-.sliders, .inputs{
-  position: relative;
-  bottom: -32px;
-  transition: 0.5s;
+.sliders,
+.inputs {
+    position: relative;
+    bottom: -32px;
+    transition: 0.5s;
 }
 
-.alpha_bar, #alpha_value{
-  position: relative;
-  transition: 0.5s;
-  bottom: -10px;
+.alpha_bar,
+#alpha_value {
+    position: relative;
+    transition: 0.5s;
+    bottom: -10px;
 }
-.opacity .sliders, .opacity .alpha_bar, .opacity .inputs, .opacity #alpha_value{
-  bottom: 0.5px;
+.opacity .sliders,
+.opacity .alpha_bar,
+.opacity .inputs,
+.opacity #alpha_value {
+    bottom: 0.5px;
 }
 
-.red_bar, .green_bar, .blue_bar, .alpha_bar{
-   position: relative;
-   width: 220px;
-   height: 20px;
-   padding: 6px 0;
+.red_bar,
+.green_bar,
+.blue_bar,
+.alpha_bar {
+    position: relative;
+    width: 220px;
+    height: 20px;
+    padding: 6px 0;
 }
 
 /* STYLING SLIDER */
-input[type=range]{
-   margin: 0;
-   padding: 3px 0;
-   -webkit-appearance: none;
-   outline: none;
-   background: none;
-   width: 100%;
-   box-sizing: border-box;
+input[type="range"] {
+    margin: 0;
+    padding: 3px 0;
+    -webkit-appearance: none;
+    outline: none;
+    background: none;
+    width: 100%;
+    box-sizing: border-box;
 }
-input[type=range]::-webkit-slider-thumb {
-   position: relative;
-   z-index: 100; bottom: 10px;
-   -webkit-appearance: none;
-   height: 22px; width: 22px;
-   border-radius: 50%;
-   background: #FFFFFF;
-   border-bottom: 2px solid #F3F3F3;
-   cursor: pointer;
+input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    z-index: 100;
+    bottom: 10px;
+    -webkit-appearance: none;
+    height: 22px;
+    width: 22px;
+    border-radius: 50%;
+    background: #ffffff;
+    border-bottom: 2px solid #f3f3f3;
+    cursor: pointer;
 }
 
 progress[value]::-webkit-progress-bar {
-   position: absolute;
-   width: 99%;
-   top: 5px; left: 1px;
-   background-color: rgba(255, 255, 255, 0.9);
-   border-radius: 6px;
-   height: 10px;
+    position: absolute;
+    width: 99%;
+    top: 5px;
+    left: 1px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 6px;
+    height: 10px;
 }
 progress[value]::-webkit-progress-value {
-  border-radius: 6px;
-  height: 10px;
+    border-radius: 6px;
+    height: 10px;
 }
-.red_bar progress[value]::-webkit-progress-value { background: rgb(255, 87, 57); }
-.green_bar progress[value]::-webkit-progress-value { background: rgb(105, 195, 59); }
-.blue_bar progress[value]::-webkit-progress-value { background: rgb(65, 165, 225); }
-.alpha_bar progress[value]::-webkit-progress-value { background: rgba(0, 0, 0, 0.5); }
-progress{
-   -webkit-appearance: none;
-   appearance: none;
+.red_bar progress[value]::-webkit-progress-value {
+    background: rgb(255, 87, 57);
+}
+.green_bar progress[value]::-webkit-progress-value {
+    background: rgb(105, 195, 59);
+}
+.blue_bar progress[value]::-webkit-progress-value {
+    background: rgb(65, 165, 225);
+}
+.alpha_bar progress[value]::-webkit-progress-value {
+    background: rgba(0, 0, 0, 0.5);
+}
+progress {
+    -webkit-appearance: none;
+    appearance: none;
 }
 
 /* INPUTS STYLE */
-.inputs{
-
+.inputs {
 }
-   .inputs input{
-      display: block;
-      margin-bottom: 8px;
-      margin-left: 10px;
-   }
-
-   .inputs input[type=number]::-webkit-inner-spin-button,
-   .inputs input[type=number]::-webkit-outer-spin-button {
-       -webkit-appearance: none;
-       -moz-appearance: none;
-       appearance: none;
-       margin: 0;
-   }
-
-   .inputs input[type="number"], input[type="text"]{
-      width: 40px;
-      text-align: center;
-      background: rgba(0, 0, 0, 0.08);
-      color: rgba(0, 0, 0, 0.5);
-      border: none;
-      padding: 2px;
-      font-size: 1.05em;
-      font-weight: bold;
-      outline: none;
-      transition: 0.3s;
-   }
-   .darkMode .inputs input[type="number"], .darkMode input[type="text"], .darkMode .value p{
-      background: rgba(255, 255, 255, 0.08);
-      color: rgba(255, 255, 255, 0.8);
-   }
-
-   .value{
-      margin-bottom: 9px;
-      margin-left: 10px;
-      transition: opacity 0.4s;
-   }
-   .value input{
-      display: block;
-      width: 105px;
-   }
-
-#contextMenu{
-  display: none;
-  position: absolute;
-  top: 0; left: 0;
-  z-index: 3000;
-  padding: 10px;
-  background: rgba(0, 0, 0, 0.4);
+.inputs input {
+    display: block;
+    margin-bottom: 8px;
+    margin-left: 10px;
 }
-.darkMode #contextMenu{
-  background: rgba(255, 255, 255, 0.4);
+
+.inputs input[type="number"]::-webkit-inner-spin-button,
+.inputs input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
 }
-  #contextMenu li{
+
+.inputs input[type="number"],
+input[type="text"] {
+    width: 40px;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.08);
+    color: rgba(0, 0, 0, 0.5);
+    border: none;
+    padding: 2px;
+    font-size: 1.05em;
+    font-weight: bold;
+    outline: none;
+    transition: 0.3s;
+}
+.darkMode .inputs input[type="number"],
+.darkMode input[type="text"],
+.darkMode .value p {
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.value {
+    margin-bottom: 9px;
+    margin-left: 10px;
+    transition: opacity 0.4s;
+}
+.value input {
+    display: block;
+    width: 105px;
+}
+
+#contextMenu {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3000;
+    padding: 10px;
+    background: rgba(0, 0, 0, 0.4);
+}
+.darkMode #contextMenu {
+    background: rgba(255, 255, 255, 0.4);
+}
+#contextMenu li {
     list-style: none;
     padding: 3px 2px;
-  }
-  #contextMenu .separator{
-    padding: 0; margin: 4px 0;
+}
+#contextMenu .separator {
+    padding: 0;
+    margin: 4px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.5);
-  }
+}

src/views/css/colorsbook.css

@@ -1,65 +1,64 @@
-@font-face{
-  font-family: 'Lato';
-  src: url('fonts/Lato-Regular.ttf');
+@font-face {
+    font-family: "Lato";
+    src: url("fonts/Lato-Regular.ttf");
 }
 
-*{
-   font-family: 'Lato', sans-serif;
+* {
+    font-family: "Lato", sans-serif;
 }
 
-*::-webkit-scrollbar-track
-{
-	border-radius: 14px;
-	background: rgba(0, 0, 0, 0);
-  border: 3px solid #484D56;
+*::-webkit-scrollbar-track {
+    border-radius: 14px;
+    background: rgba(0, 0, 0, 0);
+    border: 3px solid #484d56;
 }
 
-*::-webkit-scrollbar
-{
-	width: 14px;
-  margin: 5px 0;
-  border-radius: 10px;
-	background: #42454D;
+*::-webkit-scrollbar {
+    width: 14px;
+    margin: 5px 0;
+    border-radius: 10px;
+    background: #42454d;
 }
 
-*::-webkit-scrollbar-thumb
-{
-  width: 14px;
-  background-clip: padding-box;
-	border-radius: 10px;
-	background-color: #2C3035;
-  border: 3px solid #484D56;
+*::-webkit-scrollbar-thumb {
+    width: 14px;
+    background-clip: padding-box;
+    border-radius: 10px;
+    background-color: #2c3035;
+    border: 3px solid #484d56;
 }
 
-body{
-  background: #484D56;
-  margin: 0; padding: 0;
-  overflow: hidden;
+body {
+    background: #484d56;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 }
 
-.toolbar{
-  position: absolute;
-  left: 0; top: 0;
-  width: 100%;
+.toolbar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
 }
 
-#main{
-  display: flex;
-  margin-top: 32px;
-  height: calc(100vh - 32px);
-  box-sizing: border-box;
+#main {
+    display: flex;
+    margin-top: 32px;
+    height: calc(100vh - 32px);
+    box-sizing: border-box;
 }
 
-  #categories-wrapper{
+#categories-wrapper {
     background: rgba(0, 0, 0, 0.15);
     display: flex;
     align-items: center;
     flex-direction: column;
     flex: 0 0 72px;
     overflow: hidden;
-  }
+}
 
-  #categories{
+#categories {
     padding-top: 10px;
     padding-left: 13px;
     display: flex;
@@ -67,91 +66,98 @@ body{
     flex-direction: column;
     height: inherit;
     overflow-y: scroll;
-  }
-    #categories li{
-      background: rgba(0, 0, 0, 0.15);
-      margin: 5px 10px;
-      border-radius: 50px;
-      display: block;
-      list-style: none;
-      width: 60px;
-      height: 60px;
-      min-height: 60px;
-      padding: 4px;
-      box-sizing: border-box;
-      transition: 0.4s;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      text-align: center;
-      justify-content: center;
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 0.75em;
-    }
+}
+#categories li {
+    background: rgba(0, 0, 0, 0.15);
+    margin: 5px 10px;
+    border-radius: 50px;
+    display: block;
+    list-style: none;
+    width: 60px;
+    height: 60px;
+    min-height: 60px;
+    padding: 4px;
+    box-sizing: border-box;
+    transition: 0.4s;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.75em;
+}
 
-    #categories li.active, #categories li:hover{
-      border-radius: 18px;
-    }
+#categories li.active,
+#categories li:hover {
+    border-radius: 18px;
+}
 
-    #categories #new-categorie, #colors #new-color{
-      background: none;
-      box-sizing: border-box;
-      border: 2px dashed rgba(0, 0, 0, 0.2);
-      color: rgba(0, 0, 0, 0.2);
-    }
-    #categories #new-categorie:hover, #colors #new-color:hover{
-      border-radius: 50px;
-      border: 2px dashed rgba(0, 0, 0, 0.4);
-      color: rgba(0, 0, 0, 0.4);
-    }
+#categories #new-categorie,
+#colors #new-color {
+    background: none;
+    box-sizing: border-box;
+    border: 2px dashed rgba(0, 0, 0, 0.2);
+    color: rgba(0, 0, 0, 0.2);
+}
+#categories #new-categorie:hover,
+#colors #new-color:hover {
+    border-radius: 50px;
+    border: 2px dashed rgba(0, 0, 0, 0.4);
+    color: rgba(0, 0, 0, 0.4);
+}
 
-  #colors{
+#colors {
     padding: 5px 15px;
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
     justify-content: justify;
     overflow-y: auto;
-  }
-
-    #colors li{
-      margin: 5px;
-      border-radius: 50px;
-      display: block;
-      list-style: none;
-      width: 70px;
-      height: 70px;
-      cursor: pointer;
-    }
-
-    #colors #new-color{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: 0.4s;
-    }
-
-#popup_category, #popup_color  {
-  position: absolute;
-  top: 0; left: 0;
-  background: rgba(0, 0, 0, 0.8);
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  display: none;
-  justify-content: center;
-  align-items: center;
 }
-#popup_category.active, #popup_color.active {
-  display: flex;
+
+#colors li {
+    margin: 5px;
+    border-radius: 50px;
+    display: block;
+    list-style: none;
+    width: 70px;
+    height: 70px;
+    cursor: pointer;
 }
-#popup_category input, #popup_color input{
-  border: none;
-  padding: 5px 15px;
-  background: none;
-  color: #EFEFEF;
-  font-size: 1.3em;
-  display: block;
-  outline: none;
-  width: 140px;
+
+#colors #new-color {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.4s;
+}
+
+#popup_category,
+#popup_color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+#popup_category.active,
+#popup_color.active {
+    display: flex;
+}
+#popup_category input,
+#popup_color input {
+    border: none;
+    padding: 5px 15px;
+    background: none;
+    color: #efefef;
+    font-size: 1.3em;
+    display: block;
+    outline: none;
+    width: 140px;
 }

src/views/css/picker.css

@@ -1,17 +1,17 @@
-*{
-  margin: 0;
-  padding: 0;
+* {
+    margin: 0;
+    padding: 0;
 }
 
-body{
-  background: transparent;
-  cursor: crosshair;
-  overflow: hidden;
+body {
+    background: transparent;
+    cursor: crosshair;
+    overflow: hidden;
 }
 
-#picker{
-  width: 100px;
-  height: 100px;
-  border-radius: 120px;
-  box-sizing: border-box;
+#picker {
+    width: 100px;
+    height: 100px;
+    border-radius: 120px;
+    box-sizing: border-box;
 }

src/views/css/settings.css

@@ -1,46 +1,45 @@
-body, *{
-  margin: 0;
-  font-family: 'Lato', sans-serif;
+body,
+* {
+    margin: 0;
+    font-family: "Lato", sans-serif;
 }
 
-*::-webkit-scrollbar-track
-{
-	border-radius: 14px;
-	background: rgba(0, 0, 0, 0);
-  border: 3px solid #FFF;
+*::-webkit-scrollbar-track {
+    border-radius: 14px;
+    background: rgba(0, 0, 0, 0);
+    border: 3px solid #fff;
 }
 
-*::-webkit-scrollbar
-{
-	width: 14px;
-  margin: 5px 0;
-  border-radius: 10px;
-	background: #EEF2F6;
+*::-webkit-scrollbar {
+    width: 14px;
+    margin: 5px 0;
+    border-radius: 10px;
+    background: #eef2f6;
 }
 
-*::-webkit-scrollbar-thumb
-{
-  width: 14px;
-  background-clip: padding-box;
-	border-radius: 10px;
-	background-color: #CAD7E8;
-  border: 3px solid #FFF;
+*::-webkit-scrollbar-thumb {
+    width: 14px;
+    background-clip: padding-box;
+    border-radius: 10px;
+    background-color: #cad7e8;
+    border: 3px solid #fff;
 }
 
-html, body{
-  overflow: hidden;
-  height: 100%;
+html,
+body {
+    overflow: hidden;
+    height: 100%;
 }
 
-header{
-  display: flex;
-  justify-content: center;
-  padding-top: 10px;
-  background: #F1F4F8;
-  border-bottom: 1px solid #CFDAE8;
-  box-shadow: inset 0 -3px 20px -5px #CBD7E6;
+header {
+    display: flex;
+    justify-content: center;
+    padding-top: 10px;
+    background: #f1f4f8;
+    border-bottom: 1px solid #cfdae8;
+    box-shadow: inset 0 -3px 20px -5px #cbd7e6;
 }
-  header li{
+header li {
     width: 100px;
     margin: 0 10px;
     padding: 10px 0;
@@ -49,215 +48,226 @@ header{
     text-align: center;
     cursor: pointer;
     transition: 0.25s;
-  }
-  header li:hover img, header li.active img{
+}
+header li:hover img,
+header li.active img {
     margin-bottom: 4px;
     margin-top: 0;
-  }
-  header li.active{
+}
+header li.active {
     background: white;
-    box-shadow: 0 -3px 20px -5px #CBD7E6;
-  }
-    header li img{
-      transition: 0.3s;
-      margin-top: 4px;
-      width: 50%;
-    }
-    header li p{
-      margin: 2px 0;
-      font-size: 0.8em;
-      color: #2F3A4A;
-    }
+    box-shadow: 0 -3px 20px -5px #cbd7e6;
+}
+header li img {
+    transition: 0.3s;
+    margin-top: 4px;
+    width: 50%;
+}
+header li p {
+    margin: 2px 0;
+    font-size: 0.8em;
+    color: #2f3a4a;
+}
 
-.panel{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 109px);
-  bottom: 0; left: 0;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.3s;
+.panel {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 109px);
+    bottom: 0;
+    left: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
 }
-.panel.active{
-  visibility: visible;
-  overflow-y: auto;
-  overflow-x: hidden;
-  opacity: 1;
-  transition: opacity 1.3s;
+.panel.active {
+    visibility: visible;
+    overflow-y: auto;
+    overflow-x: hidden;
+    opacity: 1;
+    transition: opacity 1.3s;
 }
-  .panel h2{
-    color: #2BA0E0;
+.panel h2 {
+    color: #2ba0e0;
     padding-left: 20px;
     margin-top: 20px;
     margin-bottom: 2px;
     box-sizing: border-box;
     font-weight: normal;
     font-size: 1.3em;
-    border-bottom: 1px solid #8CCBEE;
+    border-bottom: 1px solid #8ccbee;
     margin-bottom: 20px;
-  }
-  .panel > p{
+}
+.panel > p {
     padding-left: 20px;
     color: #627893;
-  }
-  .panel > p span{
-    color: #8295AB;
-  }
+}
+.panel > p span {
+    color: #8295ab;
+}
 
-  .panel section{
+.panel section {
     margin-bottom: 30px;
-  }
+}
 
-  p.toggle{
+p.toggle {
     cursor: pointer;
-  }
-  p.toggle + p{
+}
+p.toggle + p {
     margin-top: 25px;
-  }
-  .toggle i{
+}
+.toggle i {
     position: relative;
     top: 3px;
     font-size: 1.4em;
-    color: #A6B3C4;
+    color: #a6b3c4;
     margin: 5px;
     transition: 0.3s;
-  }
-  .toggle.active i{
-    color: #2BA0E0;
-  }
-  .toggle i:before{
+}
+.toggle.active i {
+    color: #2ba0e0;
+}
+.toggle i:before {
     content: "\f204";
-  }
-  .toggle.active i:before {
+}
+.toggle.active i:before {
     content: "\f205";
-  }
+}
 
 /* GENERAL TAB */
 
-  #toolset{
+#toolset {
     margin-top: 10px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
-  }
-    #toolset .arrow{
-      color: #69DBBB;
-      font-size: 3em;
-    }
-    #allTools{
-      min-width: 52px; max-width: 52px;
-      height: 137px;
-      margin: 0 12px 0 10px;
-      padding: 6px;
-      border-radius: 10px;
-      border: 2px dashed #00798F;
-      background: #F6FEFC;
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-start;
-    }
-    #selectedTools{
-      display: flex;
-      margin-left: 12px;
-      border-top: 2px dashed #0A9182;
-      border-left: 2px dashed #0A9182;
-      border-bottom: 2px dashed #0A9182;
-      background: url('../../ressources/toolset.png') top 28px left 0 no-repeat, #90EAB8;
-      background-size: contain;
-      width: 350px; height: 137px;
-      border-radius: 6px 0 0 6px;
-      padding: 6px 0 6px 10px;
-    }
-      #toolset p{
-        background: #62DCAD;
-        width: 17px; height: 17px;
-        text-align: center;
-        cursor: move;
-        color: #0A9182;
-        padding: 2px;
-        border-radius: 3px;
-        margin: 0 4px;
-      }
-      #toolset #allTools p{
-        background: #BEEEEC;
-        margin: 2px;
-      }
-      #toolset .sortable-drag{
-        background: none !important;
-        opacity: 0.8;
-      }
-  #reset{
+}
+#toolset .arrow {
+    color: #69dbbb;
+    font-size: 3em;
+}
+#allTools {
+    min-width: 52px;
+    max-width: 52px;
+    height: 137px;
+    margin: 0 12px 0 10px;
+    padding: 6px;
+    border-radius: 10px;
+    border: 2px dashed #00798f;
+    background: #f6fefc;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+#selectedTools {
+    display: flex;
+    margin-left: 12px;
+    border-top: 2px dashed #0a9182;
+    border-left: 2px dashed #0a9182;
+    border-bottom: 2px dashed #0a9182;
+    background: url("../../ressources/toolset.png") top 28px left 0 no-repeat,
+        #90eab8;
+    background-size: contain;
+    width: 350px;
+    height: 137px;
+    border-radius: 6px 0 0 6px;
+    padding: 6px 0 6px 10px;
+}
+#toolset p {
+    background: #62dcad;
+    width: 17px;
+    height: 17px;
+    text-align: center;
+    cursor: move;
+    color: #0a9182;
+    padding: 2px;
+    border-radius: 3px;
+    margin: 0 4px;
+}
+#toolset #allTools p {
+    background: #beeeec;
+    margin: 2px;
+}
+#toolset .sortable-drag {
+    background: none !important;
+    opacity: 0.8;
+}
+#reset {
     display: inline-block;
     text-decoration: underline;
     margin-bottom: 20px;
-    color: #8D9CB0;
+    color: #8d9cb0;
     cursor: pointer;
     font-size: 0.9em;
     transition: 0.3s;
-  }
-  #reset:hover{
-    color: #FF5739;
-  }
+}
+#reset:hover {
+    color: #ff5739;
+}
 
 /* COLORPICKER TAB */
 
-  #position, #type-icons, #zoom-level{
+#position,
+#type-icons,
+#zoom-level {
     text-align: center;
     display: flex;
     justify-content: center;
-  }
-    #position li, #type-icons li, #zoom-level li{
-      cursor: pointer;
-      list-style: none;
-      width: 200px;
-      border: 1px solid #F2F6FA;
-      box-shadow: 2px 5px 10px 0 #E9EDF2;
-      color: #8991A3;
-      border-radius: 10px;
-      padding: 5px 10px;
-      margin: 10px;
-      text-align: center;
-      transition: 0.3s;
-    }
-    #position li:not(.active) img,
-    #type-icons li:not(.active) img,
-    #zoom-level li:not(.active) img{
-      opacity: 0.5;
-      transition: 0.3s;
-    }
-    #position li:not(.active):hover img,
-    #type-icons li:not(.active):hover img,
-    #zoom-level li:not(.active):hover img{
-      opacity: 0.7;
-      transition: 0.3s;
-    }
-    #position li.active, #type-icons li.active, #zoom-level li.active{
-      color: #2BA0E0;
-    }
-      #position img{
-        width: 100%;
-      }
-      #position li.active img{
-        filter: sepia(50%) hue-rotate(180deg) saturate(200%);
-      }
+}
+#position li,
+#type-icons li,
+#zoom-level li {
+    cursor: pointer;
+    list-style: none;
+    width: 200px;
+    border: 1px solid #f2f6fa;
+    box-shadow: 2px 5px 10px 0 #e9edf2;
+    color: #8991a3;
+    border-radius: 10px;
+    padding: 5px 10px;
+    margin: 10px;
+    text-align: center;
+    transition: 0.3s;
+}
+#position li:not(.active) img,
+#type-icons li:not(.active) img,
+#zoom-level li:not(.active) img {
+    opacity: 0.5;
+    transition: 0.3s;
+}
+#position li:not(.active):hover img,
+#type-icons li:not(.active):hover img,
+#zoom-level li:not(.active):hover img {
+    opacity: 0.7;
+    transition: 0.3s;
+}
+#position li.active,
+#type-icons li.active,
+#zoom-level li.active {
+    color: #2ba0e0;
+}
+#position img {
+    width: 100%;
+}
+#position li.active img {
+    filter: sepia(50%) hue-rotate(180deg) saturate(200%);
+}
 
-    #type-icons li{
-      width: 140px;
-    }
+#type-icons li {
+    width: 140px;
+}
 
-  #zoom-level{
+#zoom-level {
     flex-wrap: wrap;
-  }
-    #zoom-level li{
-      width: 130px;
-    }
-
+}
+#zoom-level li {
+    width: 130px;
+}
 
 /* ABOUT */
-#update span{
-  color: #3B8BD5;
-  cursor: pointer;
+#update span {
+    color: #3b8bd5;
+    cursor: pointer;
+}
+#update i {
+    font-size: 1em;
 }
-#update i{
-  font-size: 1em;
-}

src/views/js/color.class.js

@@ -1,369 +1,386 @@
-'use strict'
+"use strict";
 
-const {ipcRenderer, remote, clipboard} = require('electron')
+const { ipcRenderer, remote, clipboard } = require("electron");
 
 class Color {
-  constructor (r, g, b) {
-    this.alpha = 1
-    this.activeAlpha = false
-    this.setColor(r, g, b)
-  }
-
-  setColor (r, g, b) {
-    this.red = parseInt(r, 10)
-    this.green = parseInt(g, 10)
-    this.blue = parseInt(b, 10)
-    this.rgb = [r, g, b]
-    this.rgba = [r, g, b, this.alpha]
-    this.hex = this.getHexFromRGB(this.rgb)
-    this.hsl = this.getHSLFromRGB(this.rgb)
-    return true
-  }
-
-  setAlpha (alpha) {
-    this.alpha = alpha
-  }
-
-  setColorFromRGB (rgb) {
-    this.setColor(rgb[0], rgb[1], rgb[2], 1)
-    return true
-  }
-
-  setColorFromHex (hex) {
-    const rgb = this.getRGBFromHex(hex)
-    this.setColorFromRGB(rgb)
-    return true
-  }
-
-  setColorFromHSL (hsl) {
-    const rgb = this.getRGBFromHSL(hsl)
-    this.setColorFromRGB(rgb)
-    return true
-  }
-
-  getCSSFromRGB (rgb) {
-    return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`
-  }
-
-  getCSSFromRGBA (rgba) {
-    return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3].toFixed(2)})`
-  }
-
-  getRGBAFromRGB (rgb) { return rgb.concat([this.alpha]) }
-
-  getRGBFromRGBA (rgba) { return [rgba[0], rgba[1], rgba[2]] }
-
-  getHexFromRGB (rgb) {
-    let hex = [Number(rgb[0]).toString(16), Number(rgb[1]).toString(16), Number(rgb[2]).toString(16)]
-    for (let i = 0; i < 3; i++) {
-      if (hex[i] < 10 || hex[i].length === 1) hex[i] = '0' + hex[i]
-    }
-    return '#' + hex.join('').toUpperCase()
-  }
-
-  getRGBFromHex (hex) {
-    hex = hex.replace(/^#/, '')
-    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
-    let num = parseInt(hex, 16)
-    return [num >> 16, num >> 8 & 255, num & 255]
-  }
-
-  getRGBAFromHex (hex) {
-    return this.getRGBFromHex(hex).concat([this.alpha])
-  }
-
-  getHSLFromRGB (rgb) {
-    const r = rgb[0] / 255
-    const g = rgb[1] / 255
-    const b = rgb[2] / 255
-    let min = Math.min(r, g, b)
-    let max = Math.max(r, g, b)
-    let delta = max - min
-    let h, s, l
-
-    if (max === min) h = 0
-    else if (r === max) h = (g - b) / delta
-    else if (g === max) h = 2 + (b - r) / delta
-    else if (b === max) h = 4 + (r - g) / delta
-
-    h = Math.min(h * 60, 360)
-    if (h < 0) h += 360
-    l = (min + max) / 2
-
-    if (max === min) s = 0
-    else if (l <= 0.5) s = delta / (max + min)
-    else s = delta / (2 - max - min)
-
-    return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]
-  }
-
-  getRGBFromHSL (hsl) {
-    let h = hsl[0] / 360
-    let s = hsl[1] / 100
-    let l = hsl[2] / 100
-    let t1, t2, t3, rgb, val
-
-    if (s === 0) {
-      val = l * 255
-      return [val, val, val]
-    }
-    if (l < 0.5) t2 = l * (1 + s)
-    else t2 = l + s - l * s
-
-    t1 = 2 * l - t2
-    rgb = [0, 0, 0]
-
-    for (let i = 0; i < 3; i++) {
-      t3 = h + 1 / 3 * -(i - 1)
-      if (t3 < 0) t3++
-      if (t3 > 1) t3--
-      if (6 * t3 < 1) val = t1 + (t2 - t1) * 6 * t3
-      else if (2 * t3 < 1) val = t2
-      else if (3 * t3 < 2) val = t1 + (t2 - t1) * (2 / 3 - t3) * 6
-      else val = t1
-
-      rgb[i] = Math.round(val * 255)
-    }
-    return rgb
-  }
-
-  getHSLFromHex (hex) {
-    const rgb = this.getRGBFromHex(hex)
-    return this.getHSLFromRGB(rgb)
-  }
-
-  getHexFromHSL (hsl) {
-    const rgb = this.getRGBFromHSL(hsl)
-    return this.getHexFromRGB(rgb)
-  }
-
-  getRGBFromHSV (hsv) {
-    const h = hsv[0] / 60
-    const s = hsv[1] / 100
-    let v = hsv[2] / 100
-    const hi = Math.floor(h) % 6
-
-    const f = h - Math.floor(h)
-    let p = 255 * v * (1 - s)
-    let q = 255 * v * (1 - (s * f))
-    let t = 255 * v * (1 - (s * (1 - f)))
-    v *= 255
-
-    v = Math.round(v)
-    t = Math.round(t)
-    p = Math.round(p)
-    q = Math.round(q)
-
-    if (hi === 0) return [v, t, p]
-    else if (hi === 1) return [q, v, p]
-    else if (hi === 2) return [p, v, t]
-    else if (hi === 3) return [p, q, v]
-    else if (hi === 4) return [t, p, v]
-    else if (hi === 5) return [v, p, q]
-  }
-
-  getHSVFromRGB (rgb) {
-    const r = rgb[0]
-    const g = rgb[1]
-    const b = rgb[2]
-    const min = Math.min(r, g, b)
-    const max = Math.max(r, g, b)
-    const delta = max - min
-    let h
-    const s = max === 0 ? 0 : (delta / max * 1000) / 10
-    const v = ((max / 255) * 1000) / 10
-
-    if (max === min) h = 0
-    else if (r === max) h = (g - b) / delta
-    else if (g === max) h = 2 + ((b - r) / delta)
-    else if (b === max) h = 4 + ((r - g) / delta)
-    h = Math.min(h * 60, 360)
-    if (h < 0) h += 360
-
-    return [Math.round(h), Math.round(s), Math.round(v)]
-  }
-
-  isDarkColor (rgb) {
-    if (rgb) {
-      return Math.round((
-        parseInt(rgb[0], 10) * 299 +
-        parseInt(rgb[1], 10) * 587 +
-        parseInt(rgb[2], 10) * 114) / 1000
-      ) <= 140
-    }
-    return Math.round((
-      parseInt(this.red, 10) * 299 +
-      parseInt(this.green, 10) * 587 +
-      parseInt(this.blue, 10) * 114) / 1000
-    ) <= 140
-  }
-
-  setNegativeColor (rgb) {
-    if (!rgb) rgb = this.rgb
-    const negative = this.getNegativeColor(rgb)
-    this.setColorFromRGB(negative)
-    return negative
-  }
-
-  getNegativeColor (rgb) {
-    var negative = []
-    for (let i = 0; i < 3; i++) {
-      negative[i] = 255 - rgb[i]
-    }
-    return negative
-  }
-
-  setRedComplementary (rgb) {
-    this.setColorFromRGB(this.getRedComplementary(rgb))
-  }
-
-  getRedComplementary (rgb) {
-    if (!rgb) rgb = this.rgb
-    return [rgb[0], rgb[2], rgb[1]]
-  }
-
-  setGreenComplementary (rgb) {
-    this.setColorFromRGB(this.getGreenComplementary(rgb))
-  }
-
-  getGreenComplementary (rgb) {
-    if (!rgb) rgb = this.rgb
-    return [rgb[2], rgb[1], rgb[0]]
-  }
-
-  setBlueComplementary (rgb) {
-    this.setColorFromRGB(this.getBlueComplementary(rgb))
-  }
-
-  getBlueComplementary (rgb) {
-    if (!rgb) rgb = this.rgb
-    return [rgb[1], rgb[0], rgb[2]]
-  }
-
-  setGrayscale (rgb) {
-    const gray = this.getGrayscale(rgb)
-    this.setColorFromRGB(gray)
-    return gray
-  }
-
-  getGrayscale (rgb) {
-    var gray = parseInt(rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11, 10)
-    if (gray < 0) gray = 0
-    if (gray > 255) gray = 255
-    return [gray, gray, gray]
-  }
-
-  setLightnessFromHSL (light, hsl) {
-    const rgb = this.getLightnessFromHSL(light, hsl)
-    this.setColorFromRGB(rgb)
-    return rgb
-  }
-
-  getLightnessFromHSL (light, hsl) {
-    hsl = [hsl[0], hsl[1], (hsl[2] + light)]
-    let rgb = this.getRGBFromHSL(hsl)
-    for (let i = 0; i < rgb.length; i++) {
-      if (rgb[i] < 0) rgb[i] = 0
-      if (rgb[i] > 255) rgb[i] = 255
-    }
-    return rgb
-  }
-
-  setLightnessFromRGB (light, rgb) {
-    rgb = this.getLightnessFromRGB(light, rgb)
-    this.setColorFromRGB(rgb)
-    return rgb
-  }
-
-  getLightnessFromRGB (light, rgb) {
-    let hsl = this.getHSLFromRGB(rgb)
-    return this.getLightnessFromHSL(light, hsl)
-  }
-
-  setLightnessFromHex (light, hex) {
-    hex = this.getLightnessFromHex(light, hex)
-    this.setColorFromHex(hex)
-    return hex
-  }
-
-  getLightnessFromHex (light, hex) {
-    let hsl = this.getHSLFromHex(hex)
-    return this.getHexFromRGB(this.getLightnessFromHSL(light, hsl))
-  }
-
-  setChangeHueFromHSL (degrees, hsl) {
-    hsl = this.getChangeHueFromHSL(degrees, hsl)
-    this.setColorFromHSL(hsl)
-    return hsl
-  }
-
-  getChangeHueFromHSL (degrees, hsl) {
-    hsl[0] += degrees
-    if (hsl[0] > 360) hsl[0] -= 360
-    else if (hsl[0] < 0) hsl[0] += 360
-    return this.getRGBFromHSL(hsl)
-  }
-
-  setChangeHueFromRGB (degrees, rgb) {
-    rgb = this.getChangeHueFromRGB(degrees, rgb)
-    this.setColorFromRGB(rgb)
-    return rgb
-  }
-
-  getChangeHueFromRGB (degrees, rgb) {
-    const hsl = this.getHSLFromRGB(rgb)
-    hsl[0] += degrees
-    if (hsl[0] > 360) hsl[0] -= 360
-    else if (hsl[0] < 0) hsl[0] += 360
-    return this.getRGBFromHSL(hsl)
-  }
-
-  setChangeHueFromHex (degrees, hex) {
-    hex = this.getChangeHueFromHex(degrees, hex)
-    this.setColorFromHex(hex)
-    return hex
-  }
-
-  getChangeHueFromHex (degrees, hex) {
-    const hsl = this.getHSLFromHex(hex)
-    hsl[0] += degrees
-    if (hsl[0] > 360) hsl[0] -= 360
-    else if (hsl[0] < 0) hsl[0] += 360
-    return this.getHexFromHSL(hsl)
-  }
-
-  getNaturalFromRGB (percent, rgb) {
-    let hsv = this.getHSVFromRGB(rgb)
-    let h = hsv[0]
-    let s = hsv[1]
-    let v = hsv[2]
-
-    h += 0.8 * percent
-    if (h > 360) h -= 360
-    else if (h < 0) h += 360
-
-    if (hsv[0] > 240 || hsv[0] < 60) {
-      if (percent > 0) s -= 0.7 * percent
-      else s -= 0.7 * percent
-      if (s > 100) s = 100
-      else if (s < 0) s = 0
-
-      if (percent < 0) v += 0.4 * percent
-      else v += 0.3 * percent
-      if (v > 100) v = 100
-      else if (v < 0) v = 0
-    } else {
-      if (percent > 0) s += 0.7 * percent
-      else s += 0.7 * percent
-      if (s > 100) s = 100
-      else if (s < 0) s = 0
-
-      if (percent < 0) v -= 0.4 * percent
-      else v -= 0.3 * percent
-      if (v > 100) v = 100
-      else if (v < 0) v = 0
+    constructor(r, g, b) {
+        this.alpha = 1;
+        this.activeAlpha = false;
+        this.setColor(r, g, b);
     }
 
-    return this.getRGBFromHSV([h, s, v])
-  }
+    setColor(r, g, b) {
+        this.red = parseInt(r, 10);
+        this.green = parseInt(g, 10);
+        this.blue = parseInt(b, 10);
+        this.rgb = [r, g, b];
+        this.rgba = [r, g, b, this.alpha];
+        this.hex = this.getHexFromRGB(this.rgb);
+        this.hsl = this.getHSLFromRGB(this.rgb);
+        return true;
+    }
+
+    setAlpha(alpha) {
+        this.alpha = alpha;
+    }
+
+    setColorFromRGB(rgb) {
+        this.setColor(rgb[0], rgb[1], rgb[2], 1);
+        return true;
+    }
+
+    setColorFromHex(hex) {
+        const rgb = this.getRGBFromHex(hex);
+        this.setColorFromRGB(rgb);
+        return true;
+    }
+
+    setColorFromHSL(hsl) {
+        const rgb = this.getRGBFromHSL(hsl);
+        this.setColorFromRGB(rgb);
+        return true;
+    }
+
+    getCSSFromRGB(rgb) {
+        return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    }
+
+    getCSSFromRGBA(rgba) {
+        return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3].toFixed(
+            2
+        )})`;
+    }
+
+    getRGBAFromRGB(rgb) {
+        return rgb.concat([this.alpha]);
+    }
+
+    getRGBFromRGBA(rgba) {
+        return [rgba[0], rgba[1], rgba[2]];
+    }
+
+    getHexFromRGB(rgb) {
+        let hex = [
+            Number(rgb[0]).toString(16),
+            Number(rgb[1]).toString(16),
+            Number(rgb[2]).toString(16),
+        ];
+        for (let i = 0; i < 3; i++) {
+            if (hex[i] < 10 || hex[i].length === 1) hex[i] = "0" + hex[i];
+        }
+        return "#" + hex.join("").toUpperCase();
+    }
+
+    getRGBFromHex(hex) {
+        hex = hex.replace(/^#/, "");
+        if (hex.length === 3)
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        let num = parseInt(hex, 16);
+        return [num >> 16, (num >> 8) & 255, num & 255];
+    }
+
+    getRGBAFromHex(hex) {
+        return this.getRGBFromHex(hex).concat([this.alpha]);
+    }
+
+    getHSLFromRGB(rgb) {
+        const r = rgb[0] / 255;
+        const g = rgb[1] / 255;
+        const b = rgb[2] / 255;
+        let min = Math.min(r, g, b);
+        let max = Math.max(r, g, b);
+        let delta = max - min;
+        let h, s, l;
+
+        if (max === min) h = 0;
+        else if (r === max) h = (g - b) / delta;
+        else if (g === max) h = 2 + (b - r) / delta;
+        else if (b === max) h = 4 + (r - g) / delta;
+
+        h = Math.min(h * 60, 360);
+        if (h < 0) h += 360;
+        l = (min + max) / 2;
+
+        if (max === min) s = 0;
+        else if (l <= 0.5) s = delta / (max + min);
+        else s = delta / (2 - max - min);
+
+        return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+    }
+
+    getRGBFromHSL(hsl) {
+        let h = hsl[0] / 360;
+        let s = hsl[1] / 100;
+        let l = hsl[2] / 100;
+        let t1, t2, t3, rgb, val;
+
+        if (s === 0) {
+            val = l * 255;
+            return [val, val, val];
+        }
+        if (l < 0.5) t2 = l * (1 + s);
+        else t2 = l + s - l * s;
+
+        t1 = 2 * l - t2;
+        rgb = [0, 0, 0];
+
+        for (let i = 0; i < 3; i++) {
+            t3 = h + (1 / 3) * -(i - 1);
+            if (t3 < 0) t3++;
+            if (t3 > 1) t3--;
+            if (6 * t3 < 1) val = t1 + (t2 - t1) * 6 * t3;
+            else if (2 * t3 < 1) val = t2;
+            else if (3 * t3 < 2) val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+            else val = t1;
+
+            rgb[i] = Math.round(val * 255);
+        }
+        return rgb;
+    }
+
+    getHSLFromHex(hex) {
+        const rgb = this.getRGBFromHex(hex);
+        return this.getHSLFromRGB(rgb);
+    }
+
+    getHexFromHSL(hsl) {
+        const rgb = this.getRGBFromHSL(hsl);
+        return this.getHexFromRGB(rgb);
+    }
+
+    getRGBFromHSV(hsv) {
+        const h = hsv[0] / 60;
+        const s = hsv[1] / 100;
+        let v = hsv[2] / 100;
+        const hi = Math.floor(h) % 6;
+
+        const f = h - Math.floor(h);
+        let p = 255 * v * (1 - s);
+        let q = 255 * v * (1 - s * f);
+        let t = 255 * v * (1 - s * (1 - f));
+        v *= 255;
+
+        v = Math.round(v);
+        t = Math.round(t);
+        p = Math.round(p);
+        q = Math.round(q);
+
+        if (hi === 0) return [v, t, p];
+        else if (hi === 1) return [q, v, p];
+        else if (hi === 2) return [p, v, t];
+        else if (hi === 3) return [p, q, v];
+        else if (hi === 4) return [t, p, v];
+        else if (hi === 5) return [v, p, q];
+    }
+
+    getHSVFromRGB(rgb) {
+        const r = rgb[0];
+        const g = rgb[1];
+        const b = rgb[2];
+        const min = Math.min(r, g, b);
+        const max = Math.max(r, g, b);
+        const delta = max - min;
+        let h;
+        const s = max === 0 ? 0 : ((delta / max) * 1000) / 10;
+        const v = ((max / 255) * 1000) / 10;
+
+        if (max === min) h = 0;
+        else if (r === max) h = (g - b) / delta;
+        else if (g === max) h = 2 + (b - r) / delta;
+        else if (b === max) h = 4 + (r - g) / delta;
+        h = Math.min(h * 60, 360);
+        if (h < 0) h += 360;
+
+        return [Math.round(h), Math.round(s), Math.round(v)];
+    }
+
+    isDarkColor(rgb) {
+        if (rgb) {
+            return (
+                Math.round(
+                    (parseInt(rgb[0], 10) * 299 +
+                        parseInt(rgb[1], 10) * 587 +
+                        parseInt(rgb[2], 10) * 114) /
+                        1000
+                ) <= 140
+            );
+        }
+        return (
+            Math.round(
+                (parseInt(this.red, 10) * 299 +
+                    parseInt(this.green, 10) * 587 +
+                    parseInt(this.blue, 10) * 114) /
+                    1000
+            ) <= 140
+        );
+    }
+
+    setNegativeColor(rgb) {
+        if (!rgb) rgb = this.rgb;
+        const negative = this.getNegativeColor(rgb);
+        this.setColorFromRGB(negative);
+        return negative;
+    }
+
+    getNegativeColor(rgb) {
+        var negative = [];
+        for (let i = 0; i < 3; i++) {
+            negative[i] = 255 - rgb[i];
+        }
+        return negative;
+    }
+
+    setRedComplementary(rgb) {
+        this.setColorFromRGB(this.getRedComplementary(rgb));
+    }
+
+    getRedComplementary(rgb) {
+        if (!rgb) rgb = this.rgb;
+        return [rgb[0], rgb[2], rgb[1]];
+    }
+
+    setGreenComplementary(rgb) {
+        this.setColorFromRGB(this.getGreenComplementary(rgb));
+    }
+
+    getGreenComplementary(rgb) {
+        if (!rgb) rgb = this.rgb;
+        return [rgb[2], rgb[1], rgb[0]];
+    }
+
+    setBlueComplementary(rgb) {
+        this.setColorFromRGB(this.getBlueComplementary(rgb));
+    }
+
+    getBlueComplementary(rgb) {
+        if (!rgb) rgb = this.rgb;
+        return [rgb[1], rgb[0], rgb[2]];
+    }
+
+    setGrayscale(rgb) {
+        const gray = this.getGrayscale(rgb);
+        this.setColorFromRGB(gray);
+        return gray;
+    }
+
+    getGrayscale(rgb) {
+        var gray = parseInt(rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11, 10);
+        if (gray < 0) gray = 0;
+        if (gray > 255) gray = 255;
+        return [gray, gray, gray];
+    }
+
+    setLightnessFromHSL(light, hsl) {
+        const rgb = this.getLightnessFromHSL(light, hsl);
+        this.setColorFromRGB(rgb);
+        return rgb;
+    }
+
+    getLightnessFromHSL(light, hsl) {
+        hsl = [hsl[0], hsl[1], hsl[2] + light];
+        let rgb = this.getRGBFromHSL(hsl);
+        for (let i = 0; i < rgb.length; i++) {
+            if (rgb[i] < 0) rgb[i] = 0;
+            if (rgb[i] > 255) rgb[i] = 255;
+        }
+        return rgb;
+    }
+
+    setLightnessFromRGB(light, rgb) {
+        rgb = this.getLightnessFromRGB(light, rgb);
+        this.setColorFromRGB(rgb);
+        return rgb;
+    }
+
+    getLightnessFromRGB(light, rgb) {
+        let hsl = this.getHSLFromRGB(rgb);
+        return this.getLightnessFromHSL(light, hsl);
+    }
+
+    setLightnessFromHex(light, hex) {
+        hex = this.getLightnessFromHex(light, hex);
+        this.setColorFromHex(hex);
+        return hex;
+    }
+
+    getLightnessFromHex(light, hex) {
+        let hsl = this.getHSLFromHex(hex);
+        return this.getHexFromRGB(this.getLightnessFromHSL(light, hsl));
+    }
+
+    setChangeHueFromHSL(degrees, hsl) {
+        hsl = this.getChangeHueFromHSL(degrees, hsl);
+        this.setColorFromHSL(hsl);
+        return hsl;
+    }
+
+    getChangeHueFromHSL(degrees, hsl) {
+        hsl[0] += degrees;
+        if (hsl[0] > 360) hsl[0] -= 360;
+        else if (hsl[0] < 0) hsl[0] += 360;
+        return this.getRGBFromHSL(hsl);
+    }
+
+    setChangeHueFromRGB(degrees, rgb) {
+        rgb = this.getChangeHueFromRGB(degrees, rgb);
+        this.setColorFromRGB(rgb);
+        return rgb;
+    }
+
+    getChangeHueFromRGB(degrees, rgb) {
+        const hsl = this.getHSLFromRGB(rgb);
+        hsl[0] += degrees;
+        if (hsl[0] > 360) hsl[0] -= 360;
+        else if (hsl[0] < 0) hsl[0] += 360;
+        return this.getRGBFromHSL(hsl);
+    }
+
+    setChangeHueFromHex(degrees, hex) {
+        hex = this.getChangeHueFromHex(degrees, hex);
+        this.setColorFromHex(hex);
+        return hex;
+    }
+
+    getChangeHueFromHex(degrees, hex) {
+        const hsl = this.getHSLFromHex(hex);
+        hsl[0] += degrees;
+        if (hsl[0] > 360) hsl[0] -= 360;
+        else if (hsl[0] < 0) hsl[0] += 360;
+        return this.getHexFromHSL(hsl);
+    }
+
+    getNaturalFromRGB(percent, rgb) {
+        let hsv = this.getHSVFromRGB(rgb);
+        let h = hsv[0];
+        let s = hsv[1];
+        let v = hsv[2];
+
+        h += 0.8 * percent;
+        if (h > 360) h -= 360;
+        else if (h < 0) h += 360;
+
+        if (hsv[0] > 240 || hsv[0] < 60) {
+            if (percent > 0) s -= 0.7 * percent;
+            else s -= 0.7 * percent;
+            if (s > 100) s = 100;
+            else if (s < 0) s = 0;
+
+            if (percent < 0) v += 0.4 * percent;
+            else v += 0.3 * percent;
+            if (v > 100) v = 100;
+            else if (v < 0) v = 0;
+        } else {
+            if (percent > 0) s += 0.7 * percent;
+            else s += 0.7 * percent;
+            if (s > 100) s = 100;
+            else if (s < 0) s = 0;
+
+            if (percent < 0) v -= 0.4 * percent;
+            else v -= 0.3 * percent;
+            if (v > 100) v = 100;
+            else if (v < 0) v = 0;
+        }
+
+        return this.getRGBFromHSV([h, s, v]);
+    }
 }

src/views/js/colorpicker.class.js

@@ -1,153 +1,220 @@
-'use strict'
+"use strict";
 
 class Colorpicker extends Color {
-  constructor (config) {
-    super()
+    constructor(config) {
+        super();
 
-    this.timing
-    this.history = config.history || []
-    this.colorfullApp = config.colorfullApp
-    this.isShadingActive = false
+        this.timing;
+        this.history = config.history || [];
+        this.colorfullApp = config.colorfullApp;
+        this.isShadingActive = false;
 
-    this.body = document.querySelector('body')
-    this.hex_value = document.querySelector('#hex_value')
-    this.rgbhtml = {
-      red_progress: document.querySelector('.red_bar progress'),
-      red_input: document.querySelector('.red_bar input'),
-      red_range: document.querySelector('#red_value'),
-      green_progress: document.querySelector('.green_bar progress'),
-      green_input: document.querySelector('.green_bar input'),
-      green_range: document.querySelector('#green_value'),
-      blue_progress: document.querySelector('.blue_bar progress'),
-      blue_input: document.querySelector('.blue_bar input'),
-      blue_range: document.querySelector('#blue_value'),
-      alpha_range: document.querySelector('#alpha_value'),
-      alpha_progress: document.querySelector('.alpha_bar progress'),
-      alpha_input: document.querySelector('.alpha_bar input')
+        this.body = document.querySelector("body");
+        this.hex_value = document.querySelector("#hex_value");
+        this.rgbhtml = {
+            red_progress: document.querySelector(".red_bar progress"),
+            red_input: document.querySelector(".red_bar input"),
+            red_range: document.querySelector("#red_value"),
+            green_progress: document.querySelector(".green_bar progress"),
+            green_input: document.querySelector(".green_bar input"),
+            green_range: document.querySelector("#green_value"),
+            blue_progress: document.querySelector(".blue_bar progress"),
+            blue_input: document.querySelector(".blue_bar input"),
+            blue_range: document.querySelector("#blue_value"),
+            alpha_range: document.querySelector("#alpha_value"),
+            alpha_progress: document.querySelector(".alpha_bar progress"),
+            alpha_input: document.querySelector(".alpha_bar input"),
+        };
+
+        this.setNewColor(config.color, true);
     }
 
-    this.setNewColor(config.color, true)
-  }
-
-  setNewRGBColor (rgb) {
-    this.setNewColor(this.getHexFromRGB(rgb))
-  }
-
-  setNewAlphaColor (alpha) {
-    this.setAlpha(alpha)
-    this.setNewColor(this.hex)
-  }
-
-  setNegativeColor (rgb) {
-    if (!rgb) rgb = this.rgb
-    const negative = this.getNegativeColor(rgb)
-    this.setNewColor(this.getHexFromRGB(negative))
-    return negative
-  }
-
-  setNewColor (hex, dontSaveIt) {
-    if (!dontSaveIt) {
-      clearTimeout(this.timing)
-      this.timing = setTimeout(() => this.saveColor(hex), 300)
+    setNewRGBColor(rgb) {
+        this.setNewColor(this.getHexFromRGB(rgb));
     }
-    this.setColorFromHex(hex)
-    this.isDark = this.isDarkColor(this.rgb)
 
-    for (let i = 0, total = Object.keys(this.rgbhtml).length; i < total; i++) {
-      if (total - 2 <= i) this.rgbhtml[Object.keys(this.rgbhtml)[i]].value = this.rgba[Math.floor(i / 3)] * 255
-      else {
-        if (i === 9 && this.rgba[3].toString().length > 4) this.rgbhtml[Object.keys(this.rgbhtml)[i]].value = this.rgba[Math.floor(i / 3)].toFixed(2)
-        else this.rgbhtml[Object.keys(this.rgbhtml)[i]].value = this.rgba[Math.floor(i / 3)]
-      }
+    setNewAlphaColor(alpha) {
+        this.setAlpha(alpha);
+        this.setNewColor(this.hex);
     }
-    this.hex_value.value = this.hex
-    this.body.classList.toggle('darkMode', this.isDark)
-    this.body.style.background = this.getCSSFromRGBA(this.rgba)
-    if(this.isShadingActive) this.changeShading()
 
-    if (this.colorfullApp) {
-      if (this.isDark) {
-        document.querySelector('#close').style.color = this.getHexFromRGB(this.getLightnessFromRGB(20, this.getRedComplementary()))
-        document.querySelector('#minimize').style.color = this.getHexFromRGB(this.getLightnessFromRGB(20, this.getGreenComplementary()))
-        document.querySelector('#maximize').style.color = this.getHexFromRGB(this.getLightnessFromRGB(20, this.getBlueComplementary()))
-      } else {
-        document.querySelector('#close').style.color = this.getHexFromRGB(this.getLightnessFromRGB(-20, this.getRedComplementary()))
-        document.querySelector('#minimize').style.color = this.getHexFromRGB(this.getLightnessFromRGB(-20, this.getGreenComplementary()))
-        document.querySelector('#maximize').style.color = this.getHexFromRGB(this.getLightnessFromRGB(-20, this.getBlueComplementary()))
-      }
+    setNegativeColor(rgb) {
+        if (!rgb) rgb = this.rgb;
+        const negative = this.getNegativeColor(rgb);
+        this.setNewColor(this.getHexFromRGB(negative));
+        return negative;
     }
-  }
 
-  saveColor (hex) {
-    let newHistory = []
-    for (let i = 0; i < 9; i++) {
-      if (i === 0) newHistory[i] = hex
-      if(this.history.length > i) newHistory[i + 1] = this.history[i]
-    }
-    this.history = newHistory
-
-    ipcRenderer.send('changeLastColor', hex)
-    ipcRenderer.send('changeHistory', newHistory)
-  }
-
-  copyHex () { clipboard.writeText(this.hex) }
-
-  copyRGB () { clipboard.writeText(this.getCSSFromRGB(this.rgb)) }
-
-  copyRGBA () { clipboard.writeText(this.getCSSFromRGBA(this.rgba)) }
-
-  toggleOpacity () {
-    this.activeAlpha = document.querySelector('#opacity_button').classList.toggle('active')
-    document.querySelector('.main').classList.toggle('opacity', this.activeAlpha)
-    if (!this.activeAlpha) {
-      let restore = () => {
-        if (this.alpha >= 1) {
-          this.alpha = 1
-          return
+    setNewColor(hex, dontSaveIt) {
+        if (!dontSaveIt) {
+            clearTimeout(this.timing);
+            this.timing = setTimeout(() => this.saveColor(hex), 300);
         }
-        this.alpha = Math.round((this.alpha + 0.01) * 100) / 100
-        this.setNewColor(this.hex)
-        setTimeout(restore, 5)
-      }
-      restore()
-    }
-    return this.activeAlpha
-  }
+        this.setColorFromHex(hex);
+        this.isDark = this.isDarkColor(this.rgb);
 
-  changeShading () {
-    let shading = document.querySelectorAll('header .shades aside, header .tints aside, header .naturals aside')
-    for (let shade of shading) {
-      shade.removeEventListener('click', function () {
-        cp.setNewColor(this.attributes['data-color'].value)
-      })
-      shade.parentNode.removeChild(shade)
-    }
-    for (let shades = 1, light = -25, total = 22, html = ''; shades <= total; shades++) {
-      let hex = this.getLightnessFromHex(light, this.hex)
-      html += `<aside id="shade${shades}" data-color="${hex}" style="background: ${hex}"></aside>`
-      light += 2
-      if (total === shades) document.querySelector('.shades').innerHTML = html
+        for (
+            let i = 0, total = Object.keys(this.rgbhtml).length;
+            i < total;
+            i++
+        ) {
+            if (total - 2 <= i)
+                this.rgbhtml[Object.keys(this.rgbhtml)[i]].value =
+                    this.rgba[Math.floor(i / 3)] * 255;
+            else {
+                if (i === 9 && this.rgba[3].toString().length > 4)
+                    this.rgbhtml[
+                        Object.keys(this.rgbhtml)[i]
+                    ].value = this.rgba[Math.floor(i / 3)].toFixed(2);
+                else
+                    this.rgbhtml[
+                        Object.keys(this.rgbhtml)[i]
+                    ].value = this.rgba[Math.floor(i / 3)];
+            }
+        }
+        this.hex_value.value = this.hex;
+        this.body.classList.toggle("darkMode", this.isDark);
+        this.body.style.background = this.getCSSFromRGBA(this.rgba);
+        if (this.isShadingActive) this.changeShading();
+
+        if (this.colorfullApp) {
+            if (this.isDark) {
+                document.querySelector(
+                    "#close"
+                ).style.color = this.getHexFromRGB(
+                    this.getLightnessFromRGB(20, this.getRedComplementary())
+                );
+                document.querySelector(
+                    "#minimize"
+                ).style.color = this.getHexFromRGB(
+                    this.getLightnessFromRGB(20, this.getGreenComplementary())
+                );
+                document.querySelector(
+                    "#maximize"
+                ).style.color = this.getHexFromRGB(
+                    this.getLightnessFromRGB(20, this.getBlueComplementary())
+                );
+            } else {
+                document.querySelector(
+                    "#close"
+                ).style.color = this.getHexFromRGB(
+                    this.getLightnessFromRGB(-20, this.getRedComplementary())
+                );
+                document.querySelector(
+                    "#minimize"
+                ).style.color = this.getHexFromRGB(
+                    this.getLightnessFromRGB(-20, this.getGreenComplementary())
+                );
+                document.querySelector(
+                    "#maximize"
+                ).style.color = this.getHexFromRGB(
+                    this.getLightnessFromRGB(-20, this.getBlueComplementary())
+                );
+            }
+        }
     }
 
-    for (let tints = 1, degrees = -100, total = 22, html = ''; tints <= total; tints++) {
-      let hex = this.getChangeHueFromHex(degrees, this.hex)
-      html += `<aside id="tint${tints}" data-color="${hex}" style="background: ${hex}"></aside>`
-      degrees += 10
-      if (total === tints) document.querySelector('.tints').innerHTML = html
+    saveColor(hex) {
+        let newHistory = [];
+        for (let i = 0; i < 9; i++) {
+            if (i === 0) newHistory[i] = hex;
+            if (this.history.length > i) newHistory[i + 1] = this.history[i];
+        }
+        this.history = newHistory;
+
+        ipcRenderer.send("changeLastColor", hex);
+        ipcRenderer.send("changeHistory", newHistory);
     }
 
-    for (let naturals = 1, percent = -84, total = 22, html = ''; naturals <= total; naturals++) {
-      let hex = this.getHexFromRGB(this.getNaturalFromRGB(percent, this.rgb))
-      html += `<aside id="natural${naturals}" data-color="${hex}" style="background: ${hex}"></aside>`
-      percent += 8
-      if (total === naturals) document.querySelector('.naturals').innerHTML = html
+    copyHex() {
+        clipboard.writeText(this.hex);
     }
 
-    shading = document.querySelectorAll('header .shades aside, header .tints aside, header .naturals aside')
-    for (let shade of shading) {
-      shade.addEventListener('click', function () {
-        cp.setNewColor(this.attributes['data-color'].value)
-      })
+    copyRGB() {
+        clipboard.writeText(this.getCSSFromRGB(this.rgb));
+    }
+
+    copyRGBA() {
+        clipboard.writeText(this.getCSSFromRGBA(this.rgba));
+    }
+
+    toggleOpacity() {
+        this.activeAlpha = document
+            .querySelector("#opacity_button")
+            .classList.toggle("active");
+        document
+            .querySelector(".main")
+            .classList.toggle("opacity", this.activeAlpha);
+        if (!this.activeAlpha) {
+            let restore = () => {
+                if (this.alpha >= 1) {
+                    this.alpha = 1;
+                    return;
+                }
+                this.alpha = Math.round((this.alpha + 0.01) * 100) / 100;
+                this.setNewColor(this.hex);
+                setTimeout(restore, 5);
+            };
+            restore();
+        }
+        return this.activeAlpha;
+    }
+
+    changeShading() {
+        let shading = document.querySelectorAll(
+            "header .shades aside, header .tints aside, header .naturals aside"
+        );
+        for (let shade of shading) {
+            shade.removeEventListener("click", function () {
+                cp.setNewColor(this.attributes["data-color"].value);
+            });
+            shade.parentNode.removeChild(shade);
+        }
+        for (
+            let shades = 1, light = -25, total = 22, html = "";
+            shades <= total;
+            shades++
+        ) {
+            let hex = this.getLightnessFromHex(light, this.hex);
+            html += `<aside id="shade${shades}" data-color="${hex}" style="background: ${hex}"></aside>`;
+            light += 2;
+            if (total === shades)
+                document.querySelector(".shades").innerHTML = html;
+        }
+
+        for (
+            let tints = 1, degrees = -100, total = 22, html = "";
+            tints <= total;
+            tints++
+        ) {
+            let hex = this.getChangeHueFromHex(degrees, this.hex);
+            html += `<aside id="tint${tints}" data-color="${hex}" style="background: ${hex}"></aside>`;
+            degrees += 10;
+            if (total === tints)
+                document.querySelector(".tints").innerHTML = html;
+        }
+
+        for (
+            let naturals = 1, percent = -84, total = 22, html = "";
+            naturals <= total;
+            naturals++
+        ) {
+            let hex = this.getHexFromRGB(
+                this.getNaturalFromRGB(percent, this.rgb)
+            );
+            html += `<aside id="natural${naturals}" data-color="${hex}" style="background: ${hex}"></aside>`;
+            percent += 8;
+            if (total === naturals)
+                document.querySelector(".naturals").innerHTML = html;
+        }
+
+        shading = document.querySelectorAll(
+            "header .shades aside, header .tints aside, header .naturals aside"
+        );
+        for (let shade of shading) {
+            shade.addEventListener("click", function () {
+                cp.setNewColor(this.attributes["data-color"].value);
+            });
+        }
     }
-  }
 }

src/views/js/colorpicker.events.js

@@ -1,223 +1,255 @@
-'use strict'
+"use strict";
 
-let cp, cm
+let cp, cm;
 
-document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('init-colorpicker'), false)
+document.addEventListener(
+    "DOMContentLoaded",
+    () => ipcRenderer.send("init-colorpicker"),
+    false
+);
 
-ipcRenderer.on('init', (event, config) => {
-  cp = new Colorpicker({
-    color: config.color,
-    history: config.history,
-    colorfullApp: config.colorfullApp
-  })
-  cm = new ContextMenu()
-  if (config.posButton === 'right') document.querySelector('.toolbar').classList.add('setRight')
-  cm.initButtonsType(config.typeButton, 'colorpicker')
-  initTools(config.tools)
-  initToolsEvent()
-  initEvents()
-})
+ipcRenderer.on("init", (event, config) => {
+    cp = new Colorpicker({
+        color: config.color,
+        history: config.history,
+        colorfullApp: config.colorfullApp,
+    });
+    cm = new ContextMenu();
+    if (config.posButton === "right")
+        document.querySelector(".toolbar").classList.add("setRight");
+    cm.initButtonsType(config.typeButton, "colorpicker");
+    initTools(config.tools);
+    initToolsEvent();
+    initEvents();
+});
 
-ipcRenderer.on('changeColor', (event, color) => cp.setNewColor(color))
-ipcRenderer.on('previewColor', (event, color) => cp.setNewColor(color, true))
-ipcRenderer.on('changeColorfullApp', (event, bool) => cp.colorfullApp = bool)
-ipcRenderer.on('shortSave', () => ipcRenderer.send('saveColor', cp.hex))
-ipcRenderer.on('shortCopyHex', () => cp.copyHex())
-ipcRenderer.on('shortCopyRGB', () => cp.activeAlpha ? cp.copyRGBA() : cp.copyRGB())
-ipcRenderer.on('shortNegative', () => cp.setNegativeColor())
-ipcRenderer.on('shortPin', () => togglePin())
-ipcRenderer.on('shortShading', () => toggleShading())
-ipcRenderer.on('shortRandom', () => toggleRandom())
-ipcRenderer.on('shortOpacity', () => toggleOpacity())
-ipcRenderer.on('shortApply', () => applyColor())
+ipcRenderer.on("changeColor", (event, color) => cp.setNewColor(color));
+ipcRenderer.on("previewColor", (event, color) => cp.setNewColor(color, true));
+ipcRenderer.on("changeColorfullApp", (event, bool) => (cp.colorfullApp = bool));
+ipcRenderer.on("shortSave", () => ipcRenderer.send("saveColor", cp.hex));
+ipcRenderer.on("shortCopyHex", () => cp.copyHex());
+ipcRenderer.on("shortCopyRGB", () =>
+    cp.activeAlpha ? cp.copyRGBA() : cp.copyRGB()
+);
+ipcRenderer.on("shortNegative", () => cp.setNegativeColor());
+ipcRenderer.on("shortPin", () => togglePin());
+ipcRenderer.on("shortShading", () => toggleShading());
+ipcRenderer.on("shortRandom", () => toggleRandom());
+ipcRenderer.on("shortOpacity", () => toggleOpacity());
+ipcRenderer.on("shortApply", () => applyColor());
 
-ipcRenderer.on('hasLooseFocus', (event, looseFocus) => document.querySelector('html').classList.toggle('blured', looseFocus))
+ipcRenderer.on("hasLooseFocus", (event, looseFocus) =>
+    document.querySelector("html").classList.toggle("blured", looseFocus)
+);
 
-ipcRenderer.on('changePosition', (event, position) => {
-  if (position === 'right') document.querySelector('.toolbar').classList.add('setRight')
-  else document.querySelector('.toolbar').classList.remove('setRight')
-})
+ipcRenderer.on("changePosition", (event, position) => {
+    if (position === "right")
+        document.querySelector(".toolbar").classList.add("setRight");
+    else document.querySelector(".toolbar").classList.remove("setRight");
+});
 
-ipcRenderer.on('changeTypeIcons', (event, type) => cm.initButtonsType(type, 'colorpicker'))
-ipcRenderer.on('changeTools', (event, tools) => {
-  initTools(tools)
-  initToolsEvent()
-})
+ipcRenderer.on("changeTypeIcons", (event, type) =>
+    cm.initButtonsType(type, "colorpicker")
+);
+ipcRenderer.on("changeTools", (event, tools) => {
+    initTools(tools);
+    initToolsEvent();
+});
 
+function initTools(tools) {
+    let html = "";
+    let allTools = {
+        top: { title: "Pin to Foreground", icon: "fa-map-pin" },
+        picker: { title: "Pick Color", icon: "fa-eye-dropper" },
+        tags: { title: "Open Colorsbook", icon: "fa-bookmark" },
+        shade: { title: "Toggle Shading", icon: "fa-tint" },
+        random: { title: "Set Random Color", icon: "fa-random" },
+        opacity: { title: "Toggle Opacity", icon: "fa-sliders-h" },
+        clean: { title: "Focus Mode", icon: "fa-adjust" },
+        apply: { title: "Get Clipboard's Colors", icon: "fa-clone" },
+        settings: { title: "Open Settings", icon: "fa-cog" },
+    };
 
-function initTools (tools) {
-  let html = ''
-  let allTools = {
-    top: { title: 'Pin to Foreground', icon: 'fa-map-pin' },
-    picker: { title: 'Pick Color', icon: 'fa-eye-dropper' },
-    tags: { title: 'Open Colorsbook', icon: 'fa-bookmark' },
-    shade: { title: 'Toggle Shading', icon: 'fa-tint' },
-    random: { title: 'Set Random Color', icon: 'fa-random' },
-    opacity: { title: 'Toggle Opacity', icon: 'fa-sliders-h' },
-    clean: { title: 'Focus Mode', icon: 'fa-adjust' },
-    apply: { title: 'Get Clipboard\'s Colors', icon: 'fa-clone' },
-    settings: { title: 'Open Settings', icon: 'fa-cog' }
-  }
-
-  for (let tool of tools) {
-    html += `<p id="${tool}_button" title="${allTools[tool].title}"><i class="fas ${allTools[tool].icon}"></i></p>`
-  }
-
-  document.querySelector('#tools').innerHTML = html
+    for (let tool of tools) {
+        html += `<p id="${tool}_button" title="${allTools[tool].title}"><i class="fas ${allTools[tool].icon}"></i></p>`;
+    }
+
+    document.querySelector("#tools").innerHTML = html;
 }
 
-function changeLastColor (color) {
-  ipcRenderer.send('changeLastColor', color)
+function changeLastColor(color) {
+    ipcRenderer.send("changeLastColor", color);
 }
 
-function changebuttonsPosition (pos) {
-  ipcRenderer.send('buttonsPosition', pos)
+function changebuttonsPosition(pos) {
+    ipcRenderer.send("buttonsPosition", pos);
 }
 
-function changebuttonsType (type) {
-  ipcRenderer.send('buttonsType', type)
+function changebuttonsType(type) {
+    ipcRenderer.send("buttonsType", type);
 }
 
-function togglePin () {
-  let bool = document.querySelector('#top_button').classList.toggle('active')
-  ipcRenderer.send('setOnTop', bool)
+function togglePin() {
+    let bool = document.querySelector("#top_button").classList.toggle("active");
+    ipcRenderer.send("setOnTop", bool);
 }
 
-function toggleShading () {
-  let bool = document.querySelector('#shade_button').classList.toggle('active')
-  if (bool) cp.changeShading()
-  cp.isShadingActive = bool
-  ipcRenderer.send('shadingActive', bool)
-  document.querySelector('header').classList.toggle('shading')
+function toggleShading() {
+    let bool = document
+        .querySelector("#shade_button")
+        .classList.toggle("active");
+    if (bool) cp.changeShading();
+    cp.isShadingActive = bool;
+    ipcRenderer.send("shadingActive", bool);
+    document.querySelector("header").classList.toggle("shading");
 }
 
-function toggleRandom () {
-  const r = Math.floor(Math.random() * 255) + 0
-  const g = Math.floor(Math.random() * 255) + 0
-  const b = Math.floor(Math.random() * 255) + 0
-  cp.setNewRGBColor([r, g, b])
+function toggleRandom() {
+    const r = Math.floor(Math.random() * 255) + 0;
+    const g = Math.floor(Math.random() * 255) + 0;
+    const b = Math.floor(Math.random() * 255) + 0;
+    cp.setNewRGBColor([r, g, b]);
 }
 
-function toggleOpacity () {
-  let bool = cp.toggleOpacity()
-  ipcRenderer.send('opacityActive', bool)
+function toggleOpacity() {
+    let bool = cp.toggleOpacity();
+    ipcRenderer.send("opacityActive", bool);
 }
 
-function toggleClean () {
-  let bool = document.querySelector('#clean_button').classList.toggle('active')
-  document.querySelector('body').classList.toggle('clean')
+function toggleClean() {
+    let bool = document
+        .querySelector("#clean_button")
+        .classList.toggle("active");
+    document.querySelector("body").classList.toggle("clean");
 }
 
-function applyColor () {
-  const regex = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\d{1,3},\s*){2}\d{1,3}\)|rgba\((?:\d{1,3},\s*){3}\d*\.?\d+\))/ig
-  let content = clipboard.readText()
-  let colors = content.replace(/\n/g, ' ').match(regex)
-  colors = [...new Set(colors)]
-  for(let color of colors) {
-    if (color === colors[0]) cp.setNewColor(color)
-    else ipcRenderer.send('openNewColor', colors)
-  }
+function applyColor() {
+    const regex = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\d{1,3},\s*){2}\d{1,3}\)|rgba\((?:\d{1,3},\s*){3}\d*\.?\d+\))/gi;
+    let content = clipboard.readText();
+    let colors = content.replace(/\n/g, " ").match(regex);
+    colors = [...new Set(colors)];
+    for (let color of colors) {
+        if (color === colors[0]) cp.setNewColor(color);
+        else ipcRenderer.send("openNewColor", colors);
+    }
 }
 
-function initToolsEvent () {
-  if (document.querySelector('#top_button')) document.querySelector('#top_button').onclick = () => togglePin()
-  if (document.querySelector('#picker_button')) document.querySelector('#picker_button').onclick = () => ipcRenderer.send('launchPicker')
-  if (document.querySelector('#tags_button')) document.querySelector('#tags_button').onclick = () => ipcRenderer.send('launchColorsbook')
-  if (document.querySelector('#shade_button')) document.querySelector('#shade_button').onclick = () => toggleShading()
-  if (document.querySelector('#random_button')) document.querySelector('#random_button').onclick = () => toggleRandom()
-  if (document.querySelector('#opacity_button')) document.querySelector('#opacity_button').onclick = () => toggleOpacity()
-  if (document.querySelector('#clean_button')) document.querySelector('#clean_button').onclick = () => toggleClean()
-  if (document.querySelector('#apply_button')) document.querySelector('#apply_button').onclick = () => applyColor()
-  if (document.querySelector('#settings_button')) document.querySelector('#settings_button').onclick = () => ipcRenderer.send('showPreferences')
+function initToolsEvent() {
+    if (document.querySelector("#top_button"))
+        document.querySelector("#top_button").onclick = () => togglePin();
+    if (document.querySelector("#picker_button"))
+        document.querySelector("#picker_button").onclick = () =>
+            ipcRenderer.send("launchPicker");
+    if (document.querySelector("#tags_button"))
+        document.querySelector("#tags_button").onclick = () =>
+            ipcRenderer.send("launchColorsbook");
+    if (document.querySelector("#shade_button"))
+        document.querySelector("#shade_button").onclick = () => toggleShading();
+    if (document.querySelector("#random_button"))
+        document.querySelector("#random_button").onclick = () => toggleRandom();
+    if (document.querySelector("#opacity_button"))
+        document.querySelector("#opacity_button").onclick = () =>
+            toggleOpacity();
+    if (document.querySelector("#clean_button"))
+        document.querySelector("#clean_button").onclick = () => toggleClean();
+    if (document.querySelector("#apply_button"))
+        document.querySelector("#apply_button").onclick = () => applyColor();
+    if (document.querySelector("#settings_button"))
+        document.querySelector("#settings_button").onclick = () =>
+            ipcRenderer.send("showPreferences");
 }
 
-function initEvents () {
-  window.addEventListener('contextmenu', event => {
-    cm.openMenu('colorpickerMenu')
-  })
-
-  document.querySelector('.toolbar').addEventListener('dblclick', function(event) {
-    if (event.target !== this) return;
-    ipcRenderer.send(`maximize-colorpicker`)
-  })
-
-  document.querySelector('.red_bar input').oninput = function () {
-    const red = this.value
-    cp.setNewRGBColor([red, cp.green, cp.blue])
-  }
-
-  document.querySelector('.green_bar input').oninput = function () {
-    const green = this.value
-    cp.setNewRGBColor([cp.red, green, cp.blue])
-  }
-
-  document.querySelector('.blue_bar input').oninput = function () {
-    const blue = this.value
-    cp.setNewRGBColor([cp.red, cp.green, blue])
-  }
-
-  document.querySelector('.alpha_bar input').oninput = function () {
-    cp.setNewAlphaColor(this.value / 255)
-  }
-
-  document.querySelector('#red_value').oninput = function () {
-    let red = this.value
-    if (red > 255) red = 255
-    if (red < 0) red = 0
-    cp.setNewRGBColor([red, cp.green, cp.blue])
-  }
-
-  document.querySelector('#green_value').oninput = function () {
-    let green = this.value
-    if (green > 255) green = 255
-    if (green < 0) green = 0
-    cp.setNewRGBColor([cp.red, green, cp.blue])
-  }
-
-  document.querySelector('#blue_value').oninput = function () {
-    let blue = this.value
-    if (blue > 255) blue = 255
-    if (blue < 0) blue = 0
-    cp.setNewRGBColor([cp.red, cp.green, blue])
-  }
-
-  document.querySelector('#alpha_value').oninput = function () {
-    let alpha = this.value
-    if (alpha === '0.') return
-    if (alpha === '1.') return cp.setNewAlphaColor(1)
-    if (isNaN(alpha) || alpha.length > 4) return cp.setNewAlphaColor(0)
-    if (alpha > 1) alpha = 1
-    if (alpha < 0) alpha = 0
-    cp.setNewAlphaColor(alpha)
-  }
-
-  document.querySelector('#hex_value').oninput = function () {
-    let hex = this.value.replace('#', '')
-    if (hex.length !== 6) return
-    cp.setNewColor(hex)
-  }
-
-  let els = document.querySelectorAll('#red_value, #green_value, #blue_value, #hex_value')
-  for (let el of els) {
-    el.onfocus = function () {
-      this.onkeydown = e => changeHex(e)
-      this.onwheel = e => changeHex(e)
-
-      function changeHex (e) {
-        if (e.keyCode === 38 || e.deltaY < 0) {
-          e.preventDefault()
-          let red = (cp.red >= 255) ? 255 : cp.red + 1
-          let green = (cp.green >= 255) ? 255 : cp.green + 1
-          let blue = (cp.blue >= 255) ? 255 : cp.blue + 1
-          return cp.setNewRGBColor([red, green, blue])
-        } else if (e.keyCode === 40 || e.deltaY > 0) {
-          e.preventDefault()
-          let red = (cp.red <= 0) ? 0 : cp.red - 1
-          let green = (cp.green <= 0) ? 0 : cp.green - 1
-          let blue = (cp.blue <= 0) ? 0 : cp.blue - 1
-          return cp.setNewRGBColor([red, green, blue])
-        }
-      }
+function initEvents() {
+    window.addEventListener("contextmenu", (event) => {
+        cm.openMenu("colorpickerMenu");
+    });
+
+    document
+        .querySelector(".toolbar")
+        .addEventListener("dblclick", function (event) {
+            if (event.target !== this) return;
+            ipcRenderer.send(`maximize-colorpicker`);
+        });
+
+    document.querySelector(".red_bar input").oninput = function () {
+        const red = this.value;
+        cp.setNewRGBColor([red, cp.green, cp.blue]);
+    };
+
+    document.querySelector(".green_bar input").oninput = function () {
+        const green = this.value;
+        cp.setNewRGBColor([cp.red, green, cp.blue]);
+    };
+
+    document.querySelector(".blue_bar input").oninput = function () {
+        const blue = this.value;
+        cp.setNewRGBColor([cp.red, cp.green, blue]);
+    };
+
+    document.querySelector(".alpha_bar input").oninput = function () {
+        cp.setNewAlphaColor(this.value / 255);
+    };
+
+    document.querySelector("#red_value").oninput = function () {
+        let red = this.value;
+        if (red > 255) red = 255;
+        if (red < 0) red = 0;
+        cp.setNewRGBColor([red, cp.green, cp.blue]);
+    };
+
+    document.querySelector("#green_value").oninput = function () {
+        let green = this.value;
+        if (green > 255) green = 255;
+        if (green < 0) green = 0;
+        cp.setNewRGBColor([cp.red, green, cp.blue]);
+    };
+
+    document.querySelector("#blue_value").oninput = function () {
+        let blue = this.value;
+        if (blue > 255) blue = 255;
+        if (blue < 0) blue = 0;
+        cp.setNewRGBColor([cp.red, cp.green, blue]);
+    };
+
+    document.querySelector("#alpha_value").oninput = function () {
+        let alpha = this.value;
+        if (alpha === "0.") return;
+        if (alpha === "1.") return cp.setNewAlphaColor(1);
+        if (isNaN(alpha) || alpha.length > 4) return cp.setNewAlphaColor(0);
+        if (alpha > 1) alpha = 1;
+        if (alpha < 0) alpha = 0;
+        cp.setNewAlphaColor(alpha);
+    };
+
+    document.querySelector("#hex_value").oninput = function () {
+        let hex = this.value.replace("#", "");
+        if (hex.length !== 6) return;
+        cp.setNewColor(hex);
+    };
+
+    let els = document.querySelectorAll(
+        "#red_value, #green_value, #blue_value, #hex_value"
+    );
+    for (let el of els) {
+        el.onfocus = function () {
+            this.onkeydown = (e) => changeHex(e);
+            this.onwheel = (e) => changeHex(e);
+
+            function changeHex(e) {
+                if (e.keyCode === 38 || e.deltaY < 0) {
+                    e.preventDefault();
+                    let red = cp.red >= 255 ? 255 : cp.red + 1;
+                    let green = cp.green >= 255 ? 255 : cp.green + 1;
+                    let blue = cp.blue >= 255 ? 255 : cp.blue + 1;
+                    return cp.setNewRGBColor([red, green, blue]);
+                } else if (e.keyCode === 40 || e.deltaY > 0) {
+                    e.preventDefault();
+                    let red = cp.red <= 0 ? 0 : cp.red - 1;
+                    let green = cp.green <= 0 ? 0 : cp.green - 1;
+                    let blue = cp.blue <= 0 ? 0 : cp.blue - 1;
+                    return cp.setNewRGBColor([red, green, blue]);
+                }
+            }
+        };
     }
-  }
 }

src/views/js/colorsbook.js

@@ -1,145 +1,174 @@
-'use strict'
+"use strict";
 
-const {ipcRenderer, remote, clipboard} = require('electron')
-let cm
+const { ipcRenderer, remote, clipboard } = require("electron");
+let cm;
 
-let colorsbook = {}, categoryActive, categoryFocused, colorFocused;
+let colorsbook = {},
+    categoryActive,
+    categoryFocused,
+    colorFocused;
 
-document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('init-colorsbook'), false)
+document.addEventListener(
+    "DOMContentLoaded",
+    () => ipcRenderer.send("init-colorsbook"),
+    false
+);
 
-ipcRenderer.on('init', (event, config) => {
-  cm = new ContextMenu()
-  colorsbook = config.colors
-  if (config.posButton === 'right') document.querySelector('.toolbar').classList.add('setRight')
-  cm.initButtonsType(config.typeButton, 'colorsbook')
-  initColorsbook(colorsbook, 0)
-  initEvents()
-})
+ipcRenderer.on("init", (event, config) => {
+    cm = new ContextMenu();
+    colorsbook = config.colors;
+    if (config.posButton === "right")
+        document.querySelector(".toolbar").classList.add("setRight");
+    cm.initButtonsType(config.typeButton, "colorsbook");
+    initColorsbook(colorsbook, 0);
+    initEvents();
+});
 
-ipcRenderer.on('hasLooseFocus', (event, looseFocus) => document.querySelector('html').classList.toggle('blured', looseFocus))
-ipcRenderer.on('changeTypeIcons', (event, type) => cm.initButtonsType(type, 'colorsbook'))
-ipcRenderer.on('changePosition', (event, position) => {
-  if (position === 'right') document.querySelector('.toolbar').classList.add('setRight')
-  else document.querySelector('.toolbar').classList.remove('setRight')
-})
+ipcRenderer.on("hasLooseFocus", (event, looseFocus) =>
+    document.querySelector("html").classList.toggle("blured", looseFocus)
+);
+ipcRenderer.on("changeTypeIcons", (event, type) =>
+    cm.initButtonsType(type, "colorsbook")
+);
+ipcRenderer.on("changePosition", (event, position) => {
+    if (position === "right")
+        document.querySelector(".toolbar").classList.add("setRight");
+    else document.querySelector(".toolbar").classList.remove("setRight");
+});
 
-function initColorsbook (colorsbook, activeAt) {
-  let categories = ''
-  for (let category in colorsbook) {
-    if (category === activeAt || !categoryActive) {
-      categoryActive = category;
-      initColors(colorsbook[category])
-      categories += `<li title="${category}" class="active" style="background: ${colorsbook[category][0]}">${category}</li>`
+function initColorsbook(colorsbook, activeAt) {
+    let categories = "";
+    for (let category in colorsbook) {
+        if (category === activeAt || !categoryActive) {
+            categoryActive = category;
+            initColors(colorsbook[category]);
+            categories += `<li title="${category}" class="active" style="background: ${colorsbook[category][0]}">${category}</li>`;
+        } else
+            categories += `<li title="${category}" style="background: ${colorsbook[category][0]}">${category}</li>`;
     }
-    else categories += `<li title="${category}" style="background: ${colorsbook[category][0]}">${category}</li>`
-  }
-  categories += '<li id="new-categorie"><i class="fa fa-plus"></i></li>'
-  document.querySelector('#categories').innerHTML = categories
+    categories += '<li id="new-categorie"><i class="fa fa-plus"></i></li>';
+    document.querySelector("#categories").innerHTML = categories;
 }
 
-function initColors (colors) {
-  let list = ''
-  for (let color of colors) {
-    list += `<li class="color" title="${color}" style="background: ${color}"</li>`
-  }
-  list += '<li id="new-color"><i class="fa fa-plus"></i></li>'
-  document.querySelector('#colors').innerHTML = list
+function initColors(colors) {
+    let list = "";
+    for (let color of colors) {
+        list += `<li class="color" title="${color}" style="background: ${color}"</li>`;
+    }
+    list += '<li id="new-color"><i class="fa fa-plus"></i></li>';
+    document.querySelector("#colors").innerHTML = list;
 
-  for(let color of document.querySelectorAll('.color')) {
-    color.addEventListener('click', event => {
-      ipcRenderer.send('colorsbook-change-color', color.title)
-    })
-    color.addEventListener('contextmenu', function(event){
-      colorFocused = this.title;
-      cm.openMenu('colorMenu')
-    })
-  }
+    for (let color of document.querySelectorAll(".color")) {
+        color.addEventListener("click", (event) => {
+            ipcRenderer.send("colorsbook-change-color", color.title);
+        });
+        color.addEventListener("contextmenu", function (event) {
+            colorFocused = this.title;
+            cm.openMenu("colorMenu");
+        });
+    }
 
-  document.querySelector('#new-color').addEventListener('click', () => {
-    document.querySelector('#popup_color').classList.toggle('active')
-    document.querySelector('#popup_color input').focus()
-  })
+    document.querySelector("#new-color").addEventListener("click", () => {
+        document.querySelector("#popup_color").classList.toggle("active");
+        document.querySelector("#popup_color input").focus();
+    });
 }
 
-function addColor (color) {
-  if(!categoryActive) categoryActive = Object.values(colorsbook).length - 1
-  colorsbook[categoryActive].push(color);
-  initColorsbook(colorsbook, categoryActive)
-  initEvents()
-  saveColorsbook()
+function addColor(color) {
+    if (!categoryActive) categoryActive = Object.values(colorsbook).length - 1;
+    colorsbook[categoryActive].push(color);
+    initColorsbook(colorsbook, categoryActive);
+    initEvents();
+    saveColorsbook();
 }
 
-function deleteColor () {
-  let pos = colorsbook[categoryActive].indexOf(colorFocused);
-  colorsbook[categoryActive].splice(pos, 1);
-  initColorsbook(colorsbook, categoryActive)
-  initEvents()
-  saveColorsbook()
+function deleteColor() {
+    let pos = colorsbook[categoryActive].indexOf(colorFocused);
+    colorsbook[categoryActive].splice(pos, 1);
+    initColorsbook(colorsbook, categoryActive);
+    initEvents();
+    saveColorsbook();
 }
 
-function addCategory (name) {
-  colorsbook[name] = []
-  categoryActive = name;
-  initColorsbook(colorsbook, name)
-  initEvents()
-  saveColorsbook()
+function addCategory(name) {
+    colorsbook[name] = [];
+    categoryActive = name;
+    initColorsbook(colorsbook, name);
+    initEvents();
+    saveColorsbook();
 }
 
-function deleteCategory () {
-  delete colorsbook[categoryFocused]
-  categoryActive = false
-  initColorsbook(colorsbook)
-  initEvents()
-  saveColorsbook()
+function deleteCategory() {
+    delete colorsbook[categoryFocused];
+    categoryActive = false;
+    initColorsbook(colorsbook);
+    initEvents();
+    saveColorsbook();
 }
 
-function saveColorsbook () {
-  ipcRenderer.send('save-colorsbook', colorsbook)
+function saveColorsbook() {
+    ipcRenderer.send("save-colorsbook", colorsbook);
 }
 
-function initEvents () {
-  let categories = document.querySelectorAll('#categories li')
-  for (let category of categories) {
-    category.addEventListener('contextmenu', function(event){
-      categoryFocused = this.title;
-      cm.openMenu('categoryMenu')
-    })
-    category.addEventListener('click', function(event) {
-      if(this.id === 'new-categorie') {
-        document.querySelector('#popup_category').classList.toggle('active')
-        document.querySelector('#popup_category input').focus()
-      } else {
-        document.querySelector('#categories .active').classList.remove('active')
-        this.classList.add('active')
-        categoryActive = this.title;
-        initColors(colorsbook[this.title])
-      }
-    })
-  }
+function initEvents() {
+    let categories = document.querySelectorAll("#categories li");
+    for (let category of categories) {
+        category.addEventListener("contextmenu", function (event) {
+            categoryFocused = this.title;
+            cm.openMenu("categoryMenu");
+        });
+        category.addEventListener("click", function (event) {
+            if (this.id === "new-categorie") {
+                document
+                    .querySelector("#popup_category")
+                    .classList.toggle("active");
+                document.querySelector("#popup_category input").focus();
+            } else {
+                document
+                    .querySelector("#categories .active")
+                    .classList.remove("active");
+                this.classList.add("active");
+                categoryActive = this.title;
+                initColors(colorsbook[this.title]);
+            }
+        });
+    }
 }
 
-document.querySelector('#popup_category').addEventListener('click', function(event) {
-  if(event.target === this) { this.classList.toggle('active') }
-})
-document.querySelector('#popup_category input').addEventListener('keypress', function(event) {
-  if (event.key === 'Enter') {
-    let name = this.value
-    this.value = ''
-    addCategory(name);
-    this.parentNode.classList.toggle('active');
-  }
-})
+document
+    .querySelector("#popup_category")
+    .addEventListener("click", function (event) {
+        if (event.target === this) {
+            this.classList.toggle("active");
+        }
+    });
+document
+    .querySelector("#popup_category input")
+    .addEventListener("keypress", function (event) {
+        if (event.key === "Enter") {
+            let name = this.value;
+            this.value = "";
+            addCategory(name);
+            this.parentNode.classList.toggle("active");
+        }
+    });
 
-document.querySelector('#popup_color').addEventListener('click', function(event) {
-  if(event.target === this) { this.classList.toggle('active') }
-})
-document.querySelector('#popup_color input').addEventListener('keypress', function(event) {
-  if (event.key === 'Enter') {
-    const regex = /^([0-9a-fA-F]{3}|([0-9a-fA-F]{6}))$/g;
-    let color = this.value.replace('#', '')
-    if (!regex.test(color)) return;
-    this.value = ''
-    addColor('#' + color);
-    this.parentNode.classList.toggle('active');
-  }
-})
+document
+    .querySelector("#popup_color")
+    .addEventListener("click", function (event) {
+        if (event.target === this) {
+            this.classList.toggle("active");
+        }
+    });
+document
+    .querySelector("#popup_color input")
+    .addEventListener("keypress", function (event) {
+        if (event.key === "Enter") {
+            const regex = /^([0-9a-fA-F]{3}|([0-9a-fA-F]{6}))$/g;
+            let color = this.value.replace("#", "");
+            if (!regex.test(color)) return;
+            this.value = "";
+            addColor("#" + color);
+            this.parentNode.classList.toggle("active");
+        }
+    });

src/views/js/picker.js

@@ -1,12 +1,22 @@
-const {ipcRenderer} = require('electron')
+const { ipcRenderer } = require("electron");
 
-document.querySelector('#picker').style.border = `10px solid rgba(200, 200, 200, 0.3)`
+document.querySelector(
+    "#picker"
+).style.border = `10px solid rgba(200, 200, 200, 0.3)`;
 
-document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('pickerRequested'), false)
-document.addEventListener('keydown', event => {
-  if (event.key === 'Escape') ipcRenderer.send('closePicker')
-}, false)
+document.addEventListener(
+    "DOMContentLoaded",
+    () => ipcRenderer.send("pickerRequested"),
+    false
+);
+document.addEventListener(
+    "keydown",
+    (event) => {
+        if (event.key === "Escape") ipcRenderer.send("closePicker");
+    },
+    false
+);
 
-ipcRenderer.on('updatePicker', (event, color) => {
-  document.querySelector('#picker').style.border = `10px solid ${color}`
-})
+ipcRenderer.on("updatePicker", (event, color) => {
+    document.querySelector("#picker").style.border = `10px solid ${color}`;
+});

src/views/js/settings.js

@@ -1,145 +1,173 @@
-'use strict'
+"use strict";
 
-const {ipcRenderer, shell} = require('electron')
-let Sortable = require('sortablejs')
-let tippy = require('tippy.js')
+const { ipcRenderer, shell } = require("electron");
+let Sortable = require("sortablejs");
+let tippy = require("tippy.js");
 
-let tabActive = 'general';
+let tabActive = "general";
 
-ipcRenderer.send('init-settings');
+ipcRenderer.send("init-settings");
 
 /* TAB GENERAL */
 let options = {
-  dragClass: "sortable-drag",
-  group: "colorpicker",
-  animation: 180,
-  onEnd: event => updateTools(event)
-}
-Sortable.create(document.querySelector('#allTools'), options)
-Sortable.create(document.querySelector('#selectedTools'), options)
+    dragClass: "sortable-drag",
+    group: "colorpicker",
+    animation: 180,
+    onEnd: (event) => updateTools(event),
+};
+Sortable.create(document.querySelector("#allTools"), options);
+Sortable.create(document.querySelector("#selectedTools"), options);
 
-document.querySelector('#reset').addEventListener('click', () => {
-  const {dialog} = require('electron').remote
-  dialog.showMessageBox({
-    type: 'warning',
-    buttons: ['Oh no!', 'Reset it!'],
-    defaultId: 0,
-    message: 'Are you sure to reset your preferences? \n\n It will remove ALL your colors if you don\'t have an account!'
-  }, reset => {if (reset) ipcRenderer.send('resetPreferences')})
-})
+document.querySelector("#reset").addEventListener("click", () => {
+    const { dialog } = require("electron").remote;
+    dialog.showMessageBox(
+        {
+            type: "warning",
+            buttons: ["Oh no!", "Reset it!"],
+            defaultId: 0,
+            message:
+                "Are you sure to reset your preferences? \n\n It will remove ALL your colors if you don't have an account!",
+        },
+        (reset) => {
+            if (reset) ipcRenderer.send("resetPreferences");
+        }
+    );
+});
 
 /* TAB COLORPICKER */
-document.querySelector('#colorfull-app').addEventListener('click', function () {
-  let bool = this.classList.toggle('active')
-  ipcRenderer.send('set-colorfull-app', bool)
-})
+document.querySelector("#colorfull-app").addEventListener("click", function () {
+    let bool = this.classList.toggle("active");
+    ipcRenderer.send("set-colorfull-app", bool);
+});
 
-for (let el of document.querySelectorAll('#position li')) {
-  el.addEventListener('click', function () {
-    document.querySelector('#position .active').classList.remove('active')
-    this.classList.add('active')
-    ipcRenderer.send('set-position', this.getAttribute('data-position'))
-  })
+for (let el of document.querySelectorAll("#position li")) {
+    el.addEventListener("click", function () {
+        document.querySelector("#position .active").classList.remove("active");
+        this.classList.add("active");
+        ipcRenderer.send("set-position", this.getAttribute("data-position"));
+    });
 }
 
-for (let el of document.querySelectorAll('#type-icons li')) {
-  el.addEventListener('click', function () {
-    document.querySelector('#type-icons .active').classList.remove('active')
-    this.classList.add('active')
-    ipcRenderer.send('set-type-icon', this.getAttribute('data-type'))
-  })
+for (let el of document.querySelectorAll("#type-icons li")) {
+    el.addEventListener("click", function () {
+        document
+            .querySelector("#type-icons .active")
+            .classList.remove("active");
+        this.classList.add("active");
+        ipcRenderer.send("set-type-icon", this.getAttribute("data-type"));
+    });
 }
 
 /* TAB PICKER */
-document.querySelector('#picker-realtime').addEventListener('click', function () {
-  let bool = this.classList.toggle('active')
-  ipcRenderer.send('set-realtime', bool)
-})
+document
+    .querySelector("#picker-realtime")
+    .addEventListener("click", function () {
+        let bool = this.classList.toggle("active");
+        ipcRenderer.send("set-realtime", bool);
+    });
 
 /* TAB COLORSBOOK */
-ipcRenderer.on('export', (event, colorsbook) => {
-  //document.querySelector('#export').href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(colorsbook, null, 2))}`;
-})
+ipcRenderer.on("export", (event, colorsbook) => {
+    //document.querySelector('#export').href = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(colorsbook, null, 2))}`;
+});
 
 /* GLOBAL */
-document.addEventListener('DOMContentLoaded', () => ipcRenderer.send('init-settings'), false)
+document.addEventListener(
+    "DOMContentLoaded",
+    () => ipcRenderer.send("init-settings"),
+    false
+);
 
-for (let el of document.querySelectorAll('header li')) {
-  el.addEventListener('click', function (event) {
-    document.querySelector(`#${tabActive}-tab`).classList.remove('active')
-    if (document.querySelector('header li.active')) document.querySelector('header li.active').classList.remove('active')
-    this.classList.add('active')
-    tabActive = this.id
-    document.querySelector(`#${tabActive}-tab`).classList.add('active')
-  })
+for (let el of document.querySelectorAll("header li")) {
+    el.addEventListener("click", function (event) {
+        document.querySelector(`#${tabActive}-tab`).classList.remove("active");
+        if (document.querySelector("header li.active"))
+            document
+                .querySelector("header li.active")
+                .classList.remove("active");
+        this.classList.add("active");
+        tabActive = this.id;
+        document.querySelector(`#${tabActive}-tab`).classList.add("active");
+    });
 }
 
-ipcRenderer.on('init', (event, config) => {
-  initTools(config.tools)
-  document.querySelector('#colorpicker-version').innerHTML = config.versions.colorpicker
-  document.querySelector('#electron-version').innerHTML = config.versions.electron
-  document.querySelector('#node-version').innerHTML = process.versions.node
-  document.querySelector('#chrome-version').innerHTML = process.versions.chrome
-  document.querySelector('#v8-version').innerHTML = process.versions.v8
-  document.querySelector(`#position li[data-position="${config.posButton}"]`).classList.add('active')
-  document.querySelector(`#type-icons li[data-type="${config.typeButton}"]`).classList.add('active')
-  if (config.colorfullApp) document.querySelector('#colorfull-app').classList.add('active')
-  if (config.realtime) document.querySelector('#picker-realtime').classList.add('active')
-})
+ipcRenderer.on("init", (event, config) => {
+    initTools(config.tools);
+    document.querySelector("#colorpicker-version").innerHTML =
+        config.versions.colorpicker;
+    document.querySelector("#electron-version").innerHTML =
+        config.versions.electron;
+    document.querySelector("#node-version").innerHTML = process.versions.node;
+    document.querySelector("#chrome-version").innerHTML =
+        process.versions.chrome;
+    document.querySelector("#v8-version").innerHTML = process.versions.v8;
+    document
+        .querySelector(`#position li[data-position="${config.posButton}"]`)
+        .classList.add("active");
+    document
+        .querySelector(`#type-icons li[data-type="${config.typeButton}"]`)
+        .classList.add("active");
+    if (config.colorfullApp)
+        document.querySelector("#colorfull-app").classList.add("active");
+    if (config.realtime)
+        document.querySelector("#picker-realtime").classList.add("active");
+});
 
 function initTools(selectedTools) {
-  let htmlSelected = ''
-  let htmlAll = ''
-  let tools = {
-    top: { title: 'Pin to Foreground', icon: 'fa-map-pin' },
-    picker: { title: 'Pick Color', icon: 'fa-eye-dropper' },
-    tags: { title: 'Open Colorsbook', icon: 'fa-bookmark' },
-    shade: { title: 'Toggle Shading', icon: 'fa-tint' },
-    random: { title: 'Set Random Color', icon: 'fa-random' },
-    opacity: { title: 'Toggle Opacity', icon: 'fa-sliders-h' },
-    clean: { title: 'Focus Mode', icon: 'fa-adjust' },
-    apply: { title: 'Get Clipboard\'s Colors', icon: 'fa-clone' },
-    settings: { title: 'Open Settings', icon: 'fa-cog' }
-  }
+    let htmlSelected = "";
+    let htmlAll = "";
+    let tools = {
+        top: { title: "Pin to Foreground", icon: "fa-map-pin" },
+        picker: { title: "Pick Color", icon: "fa-eye-dropper" },
+        tags: { title: "Open Colorsbook", icon: "fa-bookmark" },
+        shade: { title: "Toggle Shading", icon: "fa-tint" },
+        random: { title: "Set Random Color", icon: "fa-random" },
+        opacity: { title: "Toggle Opacity", icon: "fa-sliders-h" },
+        clean: { title: "Focus Mode", icon: "fa-adjust" },
+        apply: { title: "Get Clipboard's Colors", icon: "fa-clone" },
+        settings: { title: "Open Settings", icon: "fa-cog" },
+    };
 
-  for (let tool of selectedTools) {
-    htmlSelected += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`
-  }
-  for (let tool in tools) {
-    if (selectedTools.indexOf(tool) === -1) {
-      htmlAll += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`
+    for (let tool of selectedTools) {
+        htmlSelected += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
+    }
+    for (let tool in tools) {
+        if (selectedTools.indexOf(tool) === -1) {
+            htmlAll += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
+        }
     }
-  }
 
-  document.querySelector('#allTools').innerHTML = htmlAll;
-  document.querySelector('#selectedTools').innerHTML = htmlSelected;
+    document.querySelector("#allTools").innerHTML = htmlAll;
+    document.querySelector("#selectedTools").innerHTML = htmlSelected;
 
-  // tippy('.tools', {
-  //   delay: 200,
-  //   distance: 15,
-  //   theme: 'transparent',
-  //   size: 'small'
-  // })
+    // tippy('.tools', {
+    //   delay: 200,
+    //   distance: 15,
+    //   theme: 'transparent',
+    //   size: 'small'
+    // })
 }
 
 function updateTools(event) {
-  let toSave = []
-  let tools = document.querySelectorAll('#selectedTools p')
-  for (let tool of tools) {
-    let id = tool.id.split('_')
-    toSave.push(id[0]);
-  }
-  ipcRenderer.send('changeTools', toSave)
+    let toSave = [];
+    let tools = document.querySelectorAll("#selectedTools p");
+    for (let tool of tools) {
+        let id = tool.id.split("_");
+        toSave.push(id[0]);
+    }
+    ipcRenderer.send("changeTools", toSave);
 }
 
-ipcRenderer.on('update', (event, message) => {
-  document.querySelector('#update').innerHTML = message
-  if (document.querySelector('#update span')) {
-    document.querySelector('#update span').addEventListener('click', function(event) {
-      shell.openExternal(this.getAttribute('data-link'))
-    })
-  }
-})
+ipcRenderer.on("update", (event, message) => {
+    document.querySelector("#update").innerHTML = message;
+    if (document.querySelector("#update span")) {
+        document
+            .querySelector("#update span")
+            .addEventListener("click", function (event) {
+                shell.openExternal(this.getAttribute("data-link"));
+            });
+    }
+});
 
 // document.querySelector('h1').addEventListener('click', () => {
 //   shell.openExternal('https://colorpicker.crea-th.at')

src/views/js/util.class.js

@@ -1,83 +1,136 @@
-'use strict'
+"use strict";
 
 class ContextMenu {
-  constructor () {
-    this.window = remote.getCurrentWindow()
-  }
-
-  openMenu (type) {
-    let menu
-    switch (type) {
-      case 'colorpickerMenu': menu = remote.Menu.buildFromTemplate(this.colorpickerMenu()); break
-      case 'colorMenu': menu = remote.Menu.buildFromTemplate(this.colorMenu()); break
-      case 'categoryMenu': menu = remote.Menu.buildFromTemplate(this.categoryMenu()); break
-    }
-    menu.popup(this.window)
-  }
-
-  colorpickerMenu () {
-    return [
-      { label: 'Pin to Foreground', accelerator: 'CmdOrCtrl+F', click: () => togglePin() },
-      { type: 'separator' },
-      { label: 'Save Color', accelerator: 'CmdOrCtrl+S', click: () => ipcRenderer.send('saveColor', cp.hex) },
-      { label: 'Copy Hex Code', accelerator: 'CmdOrCtrl+W', click: () => cp.copyHex() },
-      { label: 'Copy RGB Code', visible: !cp.activeAlpha, accelerator: 'Shift+CmdOrCtrl+W', click: () => cp.copyRGB() },
-      { label: 'Copy RGBA Code', visible: cp.activeAlpha, accelerator: 'Shift+CmdOrCtrl+W', click: () => cp.copyRGBA() },
-      { type: 'separator' },
-      { label: 'Pick Color', accelerator: 'CmdOrCtrl+P', click: () => picker.init() },
-      { label: 'Get Clipboard\'s Colors', accelerator: 'Shift+CmdOrCtrl+V', click: () => applyColor() },
-      { label: 'Toggle Shading', accelerator: 'CmdOrCtrl+T', click: () => toggleShading() },
-      { label: 'Toggle Opacity', accelerator: 'CmdOrCtrl+O', click: () => toggleOpacity() },
-      { type: 'separator' },
-      { label: 'Set Random Color', accelerator: 'CmdOrCtrl+M', click: () => toggleRandom() },
-      { label: 'set Negative Color', accelerator: 'CmdOrCtrl+N', click: () => cp.setNegativeColor() },
-      { type: 'separator' },
-      { label: 'Preferences', accelerator: 'CmdOrCtrl+,', click: () => ipcRenderer.send('showPreferences') }
-    ]
-  }
-
-  colorMenu () {
-    return [
-      { label: 'Delete', click: () => deleteColor() },
-    ]
-  }
-
-  categoryMenu () {
-    return [
-      { label: 'Delete', click: () => deleteCategory() },
-    ]
-  }
-
-  initButtonsType (type, name) {
-    const appButtons = document.querySelector('#app_buttons')
-    const minimize = document.querySelector('#minimize')
-    const maximize = document.querySelector('#maximize')
-    const close = document.querySelector('#close')
-    switch (type) {
-      case 'windows':
-        appButtons.classList = 'windows'
-        minimize.classList = 'fa fa-window-minimize'
-        maximize.classList = 'fa fa-square'
-        close.classList = 'fa fa-times'
-        break
-      case 'linux':
-        appButtons.classList = 'linux'
-        minimize.classList = 'fa fa-minus'
-        maximize.classList = 'fa fa-sort'
-        close.classList = 'fa fa-times-circle'
-        break
-      default:
-        appButtons.classList = 'darwin'
-        minimize.classList = 'fa fa-circle'
-        maximize.classList = 'fa fa-circle'
-        close.classList = 'fa fa-circle'
+    constructor() {
+        this.window = remote.getCurrentWindow();
     }
 
-    document.querySelector('#close').onclick = () => ipcRenderer.send(`close-${name}`)
-    document.querySelector('#minimize').onclick = () => ipcRenderer.send(`minimize-${name}`)
-    document.querySelector('#maximize').onclick = function () {
-      ipcRenderer.send(`maximize-${name}`)
+    openMenu(type) {
+        let menu;
+        switch (type) {
+            case "colorpickerMenu":
+                menu = remote.Menu.buildFromTemplate(this.colorpickerMenu());
+                break;
+            case "colorMenu":
+                menu = remote.Menu.buildFromTemplate(this.colorMenu());
+                break;
+            case "categoryMenu":
+                menu = remote.Menu.buildFromTemplate(this.categoryMenu());
+                break;
+        }
+        menu.popup(this.window);
     }
-  }
 
+    colorpickerMenu() {
+        return [
+            {
+                label: "Pin to Foreground",
+                accelerator: "CmdOrCtrl+F",
+                click: () => togglePin(),
+            },
+            { type: "separator" },
+            {
+                label: "Save Color",
+                accelerator: "CmdOrCtrl+S",
+                click: () => ipcRenderer.send("saveColor", cp.hex),
+            },
+            {
+                label: "Copy Hex Code",
+                accelerator: "CmdOrCtrl+W",
+                click: () => cp.copyHex(),
+            },
+            {
+                label: "Copy RGB Code",
+                visible: !cp.activeAlpha,
+                accelerator: "Shift+CmdOrCtrl+W",
+                click: () => cp.copyRGB(),
+            },
+            {
+                label: "Copy RGBA Code",
+                visible: cp.activeAlpha,
+                accelerator: "Shift+CmdOrCtrl+W",
+                click: () => cp.copyRGBA(),
+            },
+            { type: "separator" },
+            {
+                label: "Pick Color",
+                accelerator: "CmdOrCtrl+P",
+                click: () => picker.init(),
+            },
+            {
+                label: "Get Clipboard's Colors",
+                accelerator: "Shift+CmdOrCtrl+V",
+                click: () => applyColor(),
+            },
+            {
+                label: "Toggle Shading",
+                accelerator: "CmdOrCtrl+T",
+                click: () => toggleShading(),
+            },
+            {
+                label: "Toggle Opacity",
+                accelerator: "CmdOrCtrl+O",
+                click: () => toggleOpacity(),
+            },
+            { type: "separator" },
+            {
+                label: "Set Random Color",
+                accelerator: "CmdOrCtrl+M",
+                click: () => toggleRandom(),
+            },
+            {
+                label: "set Negative Color",
+                accelerator: "CmdOrCtrl+N",
+                click: () => cp.setNegativeColor(),
+            },
+            { type: "separator" },
+            {
+                label: "Preferences",
+                accelerator: "CmdOrCtrl+,",
+                click: () => ipcRenderer.send("showPreferences"),
+            },
+        ];
+    }
+
+    colorMenu() {
+        return [{ label: "Delete", click: () => deleteColor() }];
+    }
+
+    categoryMenu() {
+        return [{ label: "Delete", click: () => deleteCategory() }];
+    }
+
+    initButtonsType(type, name) {
+        const appButtons = document.querySelector("#app_buttons");
+        const minimize = document.querySelector("#minimize");
+        const maximize = document.querySelector("#maximize");
+        const close = document.querySelector("#close");
+        switch (type) {
+            case "windows":
+                appButtons.classList = "windows";
+                minimize.classList = "fa fa-window-minimize";
+                maximize.classList = "fa fa-square";
+                close.classList = "fa fa-times";
+                break;
+            case "linux":
+                appButtons.classList = "linux";
+                minimize.classList = "fa fa-minus";
+                maximize.classList = "fa fa-sort";
+                close.classList = "fa fa-times-circle";
+                break;
+            default:
+                appButtons.classList = "darwin";
+                minimize.classList = "fa fa-circle";
+                maximize.classList = "fa fa-circle";
+                close.classList = "fa fa-circle";
+        }
+
+        document.querySelector("#close").onclick = () =>
+            ipcRenderer.send(`close-${name}`);
+        document.querySelector("#minimize").onclick = () =>
+            ipcRenderer.send(`minimize-${name}`);
+        document.querySelector("#maximize").onclick = function () {
+            ipcRenderer.send(`maximize-${name}`);
+        };
+    }
 }

src/views/picker.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Picker</title>
-    <link rel="stylesheet" href="./css/picker.css" />
-    <script defer src="js/picker.js"></script>
-  </head>
-  <body>
-    <section id="picker"></section>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <title>Picker</title>
+        <link rel="stylesheet" href="./css/picker.css" />
+        <script defer src="js/picker.js"></script>
+    </head>
+    <body>
+        <section id="picker"></section>
+    </body>
 </html>

src/views/settings.html

@@ -1,101 +1,133 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Settings Colorpicker</title>
-    <link rel="stylesheet" href="./css/settings.css" />
-    <link rel="stylesheet" href="./css/fontawesome-all.min.css" />
-    <link rel="stylesheet" href="./css/tippy.css" />
-    <script defer src="./js/settings.js"></script>
-  </head>
-  <body>
-    <header>
-      <li id="general" class="active">
-        <img src="../ressources/general-icon.png" alt="General Settings">
-        <p>General</p>
-      </li>
-      <li id="colorpicker">
-        <img src="../ressources/colorpicker-icon.png" alt="Colorpicker Settings">
-        <p>Colorpicker</p>
-      </li>
-      <li id="picker">
-        <img src="../ressources/picker-icon.png" alt="Picker Settings">
-        <p>Picker</p>
-      </li>
-      <li id="colorsbook">
-        <img src="../ressources/colorsbook-icon.png" alt="Colorsbook Settings">
-        <p>Colorsbook</p>
-      </li>
-      <li id="about">
-        <img src="../ressources/about-icon.png" alt="About Settings">
-        <p>About</p>
-      </li>
-    </header>
-    <section class="panel active" id="general-tab">
-      <!-- <h2>Application</h2> -->
-      <!-- <p class="toggle" id="tray-icon"><i class="fa fa-toggle-off"></i> Show Tray icon</p> -->
-      <h2>Colorpicker Tools</h2>
-      <p>Change your toolset</p>
-      <section id="toolset">
-        <div id="allTools"></div>
-        <i class="arrow fa fa-exchange"></i>
-        <div id="selectedTools"></div>
-      </section>
-      <h2>Preferences</h2>
-      <p id="reset">Reset Colorpicker</p>
-    </section>
-    <section class="panel" id="colorpicker-tab">
-      <h2>Appearance</h2>
-      <p class="toggle" id="colorfull-app"><i class="fa fa-toggle-off"></i> Show complementary colors in OSX Icons</p>
-      <p>Change the position of app's icons</p>
-      <section id="position">
-        <li data-position="left">
-          <img src="../ressources/position-left.png" alt="Position Left" />
-          <p>Left position</p>
-        </li>
-        <li data-position="right">
-          <img src="../ressources/position-right.png" alt="Position Right" />
-          <p>Right position</p>
-        </li>
-      </section>
-      <p>Change the type of app's icons</p>
-      <section id="type-icons">
-        <li data-type="osx">
-          <img src="../ressources/osx-icons.png" alt="OSX Icons" />
-          <p>OSX Icons</p>
-        </li>
-        <li data-type="windows">
-          <img src="../ressources/windows-icons.png" alt="Windows Icons" />
-          <p>Windows Icons</p>
-        </li>
-        <li data-type="linux">
-          <img src="../ressources/linux-icons.png" alt="Linux Icons" />
-          <p>Linux Icons</p>
-        </li>
-      </section>
-    </section>
-    <section class="panel" id="picker-tab">
-      <h2>Options</h2>
-      <p class="toggle" id="picker-realtime"><i class="fa fa-toggle-on"></i> Show color in realtime</p>
-    </section>
-    <section class="panel" id="colorsbook-tab">
-      <h2>Colorsbook</h2>
-      <!-- <p>Export/Import your colors</p>
+    <head>
+        <meta charset="utf-8" />
+        <title>Settings Colorpicker</title>
+        <link rel="stylesheet" href="./css/settings.css" />
+        <link rel="stylesheet" href="./css/fontawesome-all.min.css" />
+        <link rel="stylesheet" href="./css/tippy.css" />
+        <script defer src="./js/settings.js"></script>
+    </head>
+    <body>
+        <header>
+            <li id="general" class="active">
+                <img
+                    src="../ressources/general-icon.png"
+                    alt="General Settings"
+                />
+                <p>General</p>
+            </li>
+            <li id="colorpicker">
+                <img
+                    src="../ressources/colorpicker-icon.png"
+                    alt="Colorpicker Settings"
+                />
+                <p>Colorpicker</p>
+            </li>
+            <li id="picker">
+                <img
+                    src="../ressources/picker-icon.png"
+                    alt="Picker Settings"
+                />
+                <p>Picker</p>
+            </li>
+            <li id="colorsbook">
+                <img
+                    src="../ressources/colorsbook-icon.png"
+                    alt="Colorsbook Settings"
+                />
+                <p>Colorsbook</p>
+            </li>
+            <li id="about">
+                <img src="../ressources/about-icon.png" alt="About Settings" />
+                <p>About</p>
+            </li>
+        </header>
+        <section class="panel active" id="general-tab">
+            <!-- <h2>Application</h2> -->
+            <!-- <p class="toggle" id="tray-icon"><i class="fa fa-toggle-off"></i> Show Tray icon</p> -->
+            <h2>Colorpicker Tools</h2>
+            <p>Change your toolset</p>
+            <section id="toolset">
+                <div id="allTools"></div>
+                <i class="arrow fa fa-exchange"></i>
+                <div id="selectedTools"></div>
+            </section>
+            <h2>Preferences</h2>
+            <p id="reset">Reset Colorpicker</p>
+        </section>
+        <section class="panel" id="colorpicker-tab">
+            <h2>Appearance</h2>
+            <p class="toggle" id="colorfull-app">
+                <i class="fa fa-toggle-off"></i> Show complementary colors in
+                OSX Icons
+            </p>
+            <p>Change the position of app's icons</p>
+            <section id="position">
+                <li data-position="left">
+                    <img
+                        src="../ressources/position-left.png"
+                        alt="Position Left"
+                    />
+                    <p>Left position</p>
+                </li>
+                <li data-position="right">
+                    <img
+                        src="../ressources/position-right.png"
+                        alt="Position Right"
+                    />
+                    <p>Right position</p>
+                </li>
+            </section>
+            <p>Change the type of app's icons</p>
+            <section id="type-icons">
+                <li data-type="osx">
+                    <img src="../ressources/osx-icons.png" alt="OSX Icons" />
+                    <p>OSX Icons</p>
+                </li>
+                <li data-type="windows">
+                    <img
+                        src="../ressources/windows-icons.png"
+                        alt="Windows Icons"
+                    />
+                    <p>Windows Icons</p>
+                </li>
+                <li data-type="linux">
+                    <img
+                        src="../ressources/linux-icons.png"
+                        alt="Linux Icons"
+                    />
+                    <p>Linux Icons</p>
+                </li>
+            </section>
+        </section>
+        <section class="panel" id="picker-tab">
+            <h2>Options</h2>
+            <p class="toggle" id="picker-realtime">
+                <i class="fa fa-toggle-on"></i> Show color in realtime
+            </p>
+        </section>
+        <section class="panel" id="colorsbook-tab">
+            <h2>Colorsbook</h2>
+            <!-- <p>Export/Import your colors</p>
       <button type="button" id="import">Import</button>
       <a id="export" href="data:' + '" download="colorsbook.json">Export</a> -->
-    </section>
-    <section class="panel" id="about-tab">
-      <h2>About</h2>
-      <p>Colopicker - version <span id="colorpicker-version"></span></p>
-      <p>Electron - version <span id="electron-version"></span></p>
-      <p>Node - version <span id="node-version"></span></p>
-      <p>Chrome - version <span id="chrome-version"></span></p>
-      <p>V8 - version <span id="v8-version"></span></p>
-      <h2>Update</h2>
-      <p id="update">Fetching..</p>
-      <h2>Thank's part</h2>
-      <p>Thank's to Ryunako, Khaly, PAN, and Hanabi!</p>
-      <p>Colorpicker is developed by Toinane with <i class="fa fa-heart"></i></p>
-    </section>
-  </body>
+        </section>
+        <section class="panel" id="about-tab">
+            <h2>About</h2>
+            <p>Colopicker - version <span id="colorpicker-version"></span></p>
+            <p>Electron - version <span id="electron-version"></span></p>
+            <p>Node - version <span id="node-version"></span></p>
+            <p>Chrome - version <span id="chrome-version"></span></p>
+            <p>V8 - version <span id="v8-version"></span></p>
+            <h2>Update</h2>
+            <p id="update">Fetching..</p>
+            <h2>Thank's part</h2>
+            <p>Thank's to Ryunako, Khaly, PAN, and Hanabi!</p>
+            <p>
+                Colorpicker is developed by Toinane with
+                <i class="fa fa-heart"></i>
+            </p>
+        </section>
+    </body>
 </html>

src/views/support.html

@@ -1,26 +1,29 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Picker</title>
-    <style>
-      html{
-        margin: 0; padding: 0;
-        height: 100%;
-        border: 1px solid red;
-        cursor: crosshair;
-        box-sizing: border-box;
-      }
-    </style>
-  </head>
-  <body>
-    <script>
-      const {ipcRenderer} = require('electron')
-      //window.addEventListener('mousemove', event => ipcRenderer.send('supportMove'))
-      window.addEventListener('mouseup', event => ipcRenderer.send('supportClick'))
-      window.addEventListener('keyup', event => {
-        if (event.code === 'Escape') ipcRenderer.send('supportQuit')
-      })
-    </script>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <title>Picker</title>
+        <style>
+            html {
+                margin: 0;
+                padding: 0;
+                height: 100%;
+                border: 1px solid red;
+                cursor: crosshair;
+                box-sizing: border-box;
+            }
+        </style>
+    </head>
+    <body>
+        <script>
+            const { ipcRenderer } = require("electron");
+            //window.addEventListener('mousemove', event => ipcRenderer.send('supportMove'))
+            window.addEventListener("mouseup", (event) =>
+                ipcRenderer.send("supportClick")
+            );
+            window.addEventListener("keyup", (event) => {
+                if (event.code === "Escape") ipcRenderer.send("supportQuit");
+            });
+        </script>
+    </body>
 </html>