From df6780a3e74820546eba53a88d9e61a31285edcb Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Sun, 14 May 2017 17:16:24 +0200
Subject: [PATCH] store version in window.pskl and display it in settings

---
 Gruntfile.js                            |  4 +++-
 src/css/settings-application.css        | 25 +++++++++++++++++++++++++
 src/piskel-boot.js                      |  1 +
 src/templates/settings/application.html | 10 +++++++++-
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 8e5e976..087aa61 100644
--- a/Gruntfile.js
+++ b/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
           }
         }
       }
diff --git a/src/css/settings-application.css b/src/css/settings-application.css
index 5d0c9fe..19c3bd8 100644
--- a/src/css/settings-application.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/piskel-boot.js b/src/piskel-boot.js
index 4292e6f..644cf46 100644
--- a/src/piskel-boot.js
+++ b/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;
diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html
index e272dea..0509ddd 100644
--- a/src/templates/settings/application.html
+++ b/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>