store version in window.pskl and display it in settings

Gruntfile.js

@@ -12,6 +12,7 @@ module.exports = function(grunt) {
   // create a version based on the build timestamp
   var dateFormat = require('dateformat');
   var version = '-' + dateFormat(new Date(), "yyyy-mm-dd-hh-MM");
+  var releaseVersion = require('./package.json').version;
 
   /**
    * Helper to prefix all strings in provided array with the provided path
@@ -194,7 +195,8 @@ module.exports = function(grunt) {
         dest: 'dest/tmp/index.html',
         options : {
           globals : {
-            'version' : version
+            'version' : version,
+            'releaseVersion' : releaseVersion
           }
         }
       }

src/css/settings-application.css

@@ -1,6 +1,16 @@
 /*******************************/
 /*  Application Setting panel  */
 /*******************************/
+.application-settings-form {
+  height: 100%;
+}
+
+.settings-section-application {
+  position: relative;
+  overflow: hidden;
+  margin: 0 20px;
+  height: 100%;
+}
 
 .background-picker-wrapper {
   display: inline-block;
@@ -67,3 +77,18 @@
 .settings-section-application .button-primary {
   margin-top: 10px;
 }
+
+.settings-version-info {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  color: #888;
+}
+
+/* Override default link styles for the release notes link
+   It doesn't need to popout too much */
+.settings-version,
+.settings-version:hover {
+  color: white !important;
+  text-decoration: none !important;
+}

src/piskel-boot.js

@@ -18,6 +18,7 @@
     loadingMask.style.opacity = 0;
     window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
     pskl.app.init();
+    pskl._releaseVersion = '@@releaseVersion';
     // cleanup
     delete window.pskl_exports;
     delete window.loadDebugScripts;

src/templates/settings/application.html

@@ -1,5 +1,5 @@
 <script type="text/html" id="templates/settings/application.html">
-  <form action="" method="POST" name="application-settings-form">
+  <form action="" method="POST" name="application-settings-form" class="application-settings-form">
     <div class="settings-section settings-section-application">
       <div class="settings-title">
         General
@@ -66,6 +66,14 @@
         </select>
       </div>
 
+      <div class="settings-version-info">
+        Piskel
+        <span rel="tooltip" data-placement="bottom" title="View release notes">
+          <a  class="settings-version" target="_blank"
+              href="https://github.com/piskelapp/piskel/releases/tag/v@@releaseVersion">v@@releaseVersion</a>
+        </span>
+      </div>
+
       <input type="submit" class="button button-primary" value="Apply settings" />
     </div>
   </form>