Added handlers for update notification buttons

Now the restart and change log buttons do something. I quickly styled the change log display to sort of suit the rest of the app. Will probably change later. For now it works

Author: jduncanator

index.html

@@ -27,6 +27,19 @@ <h1>Popcorn Time</h1>
 
     <div id="notification"></div>
 
+    <div id="changelog-container"></div>
+
+    <script id="changelog-tpl" type="text/x-template">
+        <a class="btn-close"><img src="/images/close.svg" width="50" /></a>
+        <h1><%= title %></h1>
+        <h3><%= description %></h3>
+        <ul>
+        <% for(var i = 0; i < changeLog.length; i++) { %>
+          <li><%= changeLog[i] %></li>
+        <% } %>
+        </ul>
+    </script>
+
     <div id="catalog-select">
       <div class="search">
         <input type="text" placeholder="Search" data-translate="search" />

js/updater.js

@@ -198,6 +198,25 @@
                 '</span>'
             ).addClass('blue');
 
+            var $restart = $('.btn.restart'),
+                $chnglog = $('.btn.chnglog');
+
+            $restart.on('click', function() {
+                var spawn = require('child_process').spawn,
+                    argv = gui.App.fullArgv;
+                argv.push(process.cwd());
+                spawn(process.execPath, argv, { cwd: process.cwd(), detached: true, stdio: [ 'ignore', 'ignore', 'ignore' ] }).unref();
+                gui.App.quit();
+            })
+                
+            $chnglog.on('click', function() {
+                var $changelog = $('#changelog-container').html(_.template($('#changelog-tpl').html())(updateData));
+                $changelog.find('.btn-close').on('click', function() {
+                    $changelog.hide();
+                });
+                $changelog.show();
+            })
+
             $('body').addClass('has-notification')
         }
     }

sass/_layout.scss

@@ -246,6 +246,51 @@ a { text-decoration: none; }
   background: #f15153;
 }
 
+#changelog-container {
+  position: absolute;
+  left: 0; top: $header_height + $notification_height;
+  height: 100%;
+  width: calc(100% - 90px);
+  padding: 30px;
+  padding-left: 70px;
+  z-index: 997;
+  background: rgba(0, 0, 0, 0.93);
+  display: none;
+
+  .btn-close {
+    position: absolute;
+    z-index: 9999;
+    top: 19px;
+    left: 15px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  h1 {
+    font-weight: bold;
+    font-size: 30px;
+  }
+
+  h3 {
+    font-style: italic;
+    font-size: 15px;
+  }
+
+  ul {
+    margin-top: 10px;
+    padding-left: 20px;
+    list-style-type: square;
+
+    li {
+      margin: 10px 0;
+      line-height: 20px;
+    }
+  }
+}
+
 // Catalog select
 #catalog-select {
   @include box-sizing(border-box);