added pin to top functionality

css/app.css

@@ -254,7 +254,14 @@ ul {
         margin: 0px 0px 5px 0px;
       }
       /* Custom checkboxes inspired by https://codepen.io/sderoij/pen/VvJJwE */
-      #coinlist label {
+      .checkbox-wrapper {
+        position: relative;
+        display: block;
+        margin: 15px 0px 0px;
+      }
+
+      #coinlist label,
+      .checkbox-styled-label {
         height: auto;
         width: 100%;
         z-index: 0;
@@ -264,7 +271,8 @@ ul {
         left: 0;
         text-indent: 24px;
       }
-      #coinlist label div {
+      #coinlist label div,
+      .checkbox-styled-label div {
         height: 12px;
         width: 12px;
         border: solid 2px rgba(255, 255, 255, 0.6);
@@ -275,10 +283,12 @@ ul {
         position: absolute;
         top: 0;
       }
-        #coinlist input:hover + label div {
+        #coinlist input:hover + label div,
+        .checkbox-styled:hover + label div {
           border-color: rgba(138, 255, 131, 0.9);
         }
-      #coinlist input {
+      #coinlist input,
+      .checkbox-styled {
         height: auto;
         width: 18px;
         margin: 0;
@@ -287,7 +297,8 @@ ul {
         position: relative;
         cursor: pointer;
       }
-      #coinlist input:checked + label > div {
+      #coinlist input:checked + label > div,
+      .checkbox-styled:checked + label > div {
         border-radius: 0;
         border-top: 0;
         border-left: 0;
@@ -299,6 +310,10 @@ ul {
         transform: rotate(40deg);
         transition: all 0ms ease-in-out;
       }
+        .checkbox-styled:checked + label > div {
+          width: 8px;
+          margin-left: 4px;
+        }
     #tips {
       font-size: 12px;
     }

index.html

@@ -62,6 +62,15 @@
           <option value="ZAR">ZAR</option>
         </select>
       </label>
+      
+      <div class="checkbox-wrapper">
+      <input id="pin-to-top" class="checkbox-styled" type="checkbox" name="pin-to-top">
+      <label class="checkbox-styled-label">
+        Window always on top?
+        <div></div>
+      </label>
+      </div>
+
 
       <h3>Tip Jar</h3>
       <ul id="tips">

js/app_common.js

@@ -1,6 +1,8 @@
 /******************
 * APP FUNCTIONALITY
 ******************/
+//access electron from here
+const remote = require('electron').remote;
 //user settings
 const settings = require('electron-settings');
 settings.set('developer', {
@@ -118,6 +120,8 @@ const ul = document.getElementById('prices'); // Get the list where we will plac
 const portfolio_ul = document.getElementById('portfolio-list');; 
 const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
 
+var pinCheck = document.getElementById("pin-to-top");
+
 function initData() {
   fetch(url)
     .then(  
@@ -359,6 +363,15 @@ function updateData() {
                   }
               }
             }); //myChart
+            
+            //Pin to Top - settings check - immediately set checkbox and window to saved state
+            if(settings.get('user.pinToTop') == 'yes') {
+              pinCheck.checked = true;
+              remote.getCurrentWindow().setAlwaysOnTop(true);
+            } else {
+              pinCheck.checked = false; 
+              remote.getCurrentWindow().setAlwaysOnTop(false);
+            }
 
           }); //then
         }  
@@ -432,13 +445,28 @@ document.getElementById('saveQuantities').onclick = function(){
   //location.reload(false);
 }
 
+/***********
+* PIN TO TOP
+*************/
+pinCheck.onclick = function(event) {
+  var window = remote.getCurrentWindow();
+  var checkbox = event.target;
+  if(checkbox.checked) {
+    //Checkbox has been checked
+    window.setAlwaysOnTop(true); //immediately make the change to the window
+    settings.set('user.pinToTop', 'yes');
+  } else {
+    //Checkbox has been unchecked
+    window.setAlwaysOnTop(false);
+    settings.set('user.pinToTop', 'no');
+  }
+};
 
 /*******
 * APP UI
 ********/
 
 //Window controls
-const remote = require('electron').remote;
 document.getElementById("close-btn").addEventListener("click", function (e) {
   var window = remote.getCurrentWindow();
   window.close();

main.js

@@ -25,6 +25,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new electron.BrowserWindow({
     title: app.getName(),
+    alwaysOnTop: false,
     //show: false,
     x: mainWindowState.x,
     y: mainWindowState.y,

renderer.js

@@ -1,4 +1,3 @@
 // This file is required by the index.html file and will
 // be executed in the renderer process for that window.
 // All of the Node.js APIs are available in this process.
-