Fixed Gruntfile for ghpages export

Gruntfile.js

@@ -145,19 +145,6 @@ module.exports = function(grunt) {
           {expand: true, flatten: true, src: ['src/piskel-boot-0.1.0.js'], dest: 'dest/'}
         ]
       },
-      index: {
-        options: {
-          patterns: [
-            {
-              match: /templates\//g,
-              replacement: "templates"+version+"/"
-            }
-          ]
-        },
-        files: [
-          {src: ['src/index.html'], dest: 'dest/index.html'}
-        ]
-      },
       editor: {
         options: {
           patterns: [
@@ -192,7 +179,7 @@ module.exports = function(grunt) {
           {src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
           {expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
           {expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
-          {expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates/', filter: 'isFile'}
+          {expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
         ]
       }
     },
@@ -299,7 +286,7 @@ module.exports = function(grunt) {
   // Compile JS code (eg verify JSDoc annotation and types, no actual minified code generated).
   grunt.registerTask('compile', ['closureCompiler:compile', 'clean:after']);
 
-  grunt.registerTask('rep', ['replace:main', 'replace:index', 'replace:editor']);
+  grunt.registerTask('rep', ['replace:main', 'replace:editor']);
 
   grunt.registerTask('merge',  ['concat:js', 'concat:css', 'uglify', 'rep', 'copy']);
 

src/css/dialogs-browse-local.css

@@ -0,0 +1,31 @@
+
+/************************************************************************************************/
+/* Browse local piskels panel                                                                   */
+/************************************************************************************************/
+
+.local-piskels-list {
+  width: 100%;
+}
+
+.local-piskel-item {
+  height: 3em;
+}
+
+.local-piskel-name {
+  width: 40%;
+}
+
+.local-piskel-save-date {
+  font-weight : normal;
+}
+
+.local-piskels-list a {
+  text-decoration: none;
+}
+.local-piskels-list a:hover {
+  text-decoration: underline;
+}
+.local-piskel-load-button,
+.local-piskel-delete-button {
+  width : 75px;
+}

src/css/dialogs.css

@@ -17,16 +17,16 @@
   opacity: 0;
   pointer-events: none;
 
-  transition: opacity 0.5s;
-
-
   color: white;
 }
 
+#dialog-container-wrapper.animated {
+  transition: opacity 0.5s;
+}
+
 #dialog-container-wrapper.show {
   opacity: 1;
   pointer-events: auto;
-  transition: opacity 0.5s;
 }
 
 #dialog-container {
@@ -34,21 +34,50 @@
   height:  100%;
 
   margin-top: -1500px;
-  transition:margin-top 0.5s;
 
   box-sizing: border-box;
   -moz-box-sizing : border-box;
 
   border-radius: 3px;
   border : 3px solid gold;
-  background: rgba(0,0,0,1);
+  background: #444;
   overflow: auto;
 }
 
+.animated #dialog-container {
+  transition:margin-top 0.5s;
+}
+
 .show #dialog-container {
   margin-top: 0;
 }
 
+#dialog-container.browse-local {
+  width: 700px;
+  height: 500px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -350px;
+}
+
+.show #dialog-container.browse-local {
+  margin-top: -250px;
+}
+
+#dialog-container.import-image {
+  width: 500px;
+  height: 300px;
+  top : 50%;
+  left : 50%;
+  position : absolute;
+  margin-left: -250px;
+}
+
+.show #dialog-container.import-image {
+  margin-top: -150px;
+}
+
 .dialog-wrapper {
   position : relative;
 }

src/css/settings.css

@@ -49,9 +49,9 @@
   background-size: 32px 32px;
 }
 
-.tool-icon.upload-cloud-icon {
-  background-image: url(../img/cloud_export.png);
-  background-position: 4px 0px;
+.tool-icon.export-icon {
+  background-image: url(../img/export.png);
+  background-position: 7px 5px;
   background-size: 36px 36px;
   position: relative;
 }
@@ -244,16 +244,16 @@
   position:relative;
 }
 
-.png-export-preview {
-  max-width:240px;
-}
-
 .gif-export-preview,
 .png-export-preview {
   max-width:32px;
   max-height:32px;
 }
 
+.png-export-preview {
+  max-width:240px;
+}
+
 .preview-upload-ongoing:before{
   content: "Upload ongoing ...";
   position: absolute;
@@ -282,7 +282,7 @@
 }
 
 .import-section-title-small {
-  width: 35px;
+  width: 55px;
 }
 
 .import-section-disabled {
@@ -316,10 +316,9 @@
 
 .import-image-file-name {
   display: inline-block;
-  width: 130px;
   overflow: hidden;
 
-  height: 1.5rem;
+  height: 2rem;
   word-break : break-all;
   vertical-align: middle;
   font-style: italic;
@@ -352,38 +351,4 @@
   font-weight: bold;
   color: white;
   font-style: normal;
-}
-
-
-/************************************************************************************************/
-/* Browse local piskels panel                                                                   */
-/************************************************************************************************/
-
-.local-piskels-list {
-  width: 100%;
-}
-
-.local-piskel-item {
-  height: 3em;
-}
-
-.local-piskel-name {
-  width: 40%;
-}
-
-.local-piskel-save-date {
-  font-weight : normal;
-}
-
-.local-piskels-list a {
-  text-decoration: none;
-}
-.local-piskels-list a:hover {
-  text-decoration: underline;
-}
-.local-piskel-load-link {
-  color : gold;
-}
-.local-piskel-delete-link {
-  color : red;
 }

src/js/app.js

@@ -108,7 +108,6 @@
       this.fileDropperService = new pskl.service.FileDropperService(this.piskelController, $('#drawing-canvas-container').get(0));
       this.fileDropperService.init();
 
-
       if (this.isAppEngineVersion) {
         this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
       } else {

src/js/controller/dialogs/DialogsController.js

@@ -28,6 +28,7 @@
     $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
 
     pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'manage-palettes'));
+    this.dialogWrapper_.classList.add('animated');
   };
 
   ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, args) {
@@ -42,6 +43,8 @@
       var config = dialogs[dialogId];
       if (config) {
         this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
+        this.dialogContainer_.classList.add(dialogId);
+
         var controller = new config.controller(this.piskelController);
         controller.init(initArgs);
 
@@ -69,6 +72,10 @@
     var currentDialog = this.currentDialog_;
     if (currentDialog) {
       currentDialog.controller.destroy();
+      var dialogId = this.currentDialog_.id;
+      window.setTimeout(function () {
+        this.dialogContainer_.classList.remove(dialogId);
+      }.bind(this), 800);
     }
 
     this.hideDialogWrapper_();

src/js/controller/settings/ImportController.js

@@ -21,6 +21,10 @@
 
     this.hiddenOpenPiskelInput.change(this.onOpenPiskelChange_.bind(this));
     this.openPiskelInputButton.click(this.onOpenPiskelClick_.bind(this));
+
+    this.prevSessionContainer = $('.previous-session');
+    this.previousSessionTemplate_ = pskl.utils.Template.get("previous-session-info-template");
+    this.fillRestoreSession_();
   };
 
   ns.ImportController.prototype.closeDrawer_ = function () {
@@ -94,4 +98,26 @@
     return (/\.piskel$/).test(file.name);
   };
 
+  ns.ImportController.prototype.fillRestoreSession_ = function () {
+    var previousInfo = pskl.app.backupService.getPreviousPiskelInfo();
+    if (previousInfo) {
+      var info = {
+        name : previousInfo.name,
+        date : pskl.utils.DateUtils.format(previousInfo.date, "{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}")
+      };
+
+      this.prevSessionContainer.html(pskl.utils.Template.replace(this.previousSessionTemplate_, info));
+      $(".restore-session-button").click(this.onRestorePreviousSessionClick_.bind(this));
+    } else {
+      this.prevSessionContainer.html("No piskel backup was found on this browser.");
+    }
+  };
+
+  ns.ImportController.prototype.onRestorePreviousSessionClick_ = function () {
+    if (window.confirm('This will erase your current workspace. Continue ?')) {
+      pskl.app.backupService.load();
+      $.publish(Events.CLOSE_SETTINGS_DRAWER);
+    }
+  };
+
 })();

src/js/controller/settings/SaveController.js

@@ -14,6 +14,7 @@
     this.descriptionInput = $('#save-description');
     this.isPublicCheckbox = $('input[name=save-public-checkbox]');
     this.saveOnlineButton = $('#save-online-button');
+    this.saveLocalButton = $('#save-browser-button');
     this.saveFileButton = $('#save-file-button');
 
     // Only available in app-engine mode ...
@@ -30,17 +31,18 @@
 
     this.isPublicCheckbox.prop('checked', descriptor.isPublic);
 
-    this.saveFileButton.click(this.onSaveLocalClick_.bind(this));
+    this.saveFileButton.click(this.saveFile_.bind(this));
+    this.saveLocalButton.click(this.saveLocal_.bind(this));
+    this.saveOnlineButton.click(this.saveOnline_.bind(this));
+    this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
+
     this.nameInput.keyup(this.updateLocalStatusFilename_.bind(this));
 
-    if (pskl.app.isLoggedIn()) {
-      this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
-    } else {
+    if (!pskl.app.isLoggedIn()) {
       this.saveOnlineButton.hide();
       $('.save-public-section').hide();
       this.saveOnlineStatus.html(pskl.utils.Template.get('save-please-login-partial'));
       this.saveFileButton.get(0).classList.add('button-primary');
-      this.saveForm.submit(this.onSaveLocalClick_.bind(this));
     }
 
     this.updateLocalStatusFilename_();
@@ -62,6 +64,15 @@
     evt.preventDefault();
     evt.stopPropagation();
 
+    if (pskl.app.isLoggedIn()) {
+      this.saveOnline_();
+    } else {
+      this.saveLocal_();
+    }
+
+  };
+
+  ns.SaveController.prototype.saveOnline_ = function () {
     var name = this.getName();
 
     if (!name) {
@@ -84,9 +95,28 @@
     }
   };
 
-  ns.SaveController.prototype.onSaveLocalClick_ = function (evt) {
-    this.beforeSaving_();
+  ns.SaveController.prototype.saveLocal_ = function () {
+    var localStorageService = pskl.app.localStorageService;
+    var isOk = true;
+    var name = this.getName();
+    var description = this.getDescription();
+    if (localStorageService.getPiskel(name)) {
+      isOk = window.confirm('There is already a piskel saved as ' + name + '. Override ?');
+    }
 
+    if (isOk) {
+      this.beforeSaving_();
+      localStorageService.save(name, description, pskl.app.piskelController.serialize());
+      window.setTimeout(function () {
+        this.onSaveSuccess_();
+        this.afterSaving_();
+      }.bind(this), 500);
+    }
+  };
+
+  ns.SaveController.prototype.saveFile_ = function () {
+    this.beforeSaving_();
+    this.saveToFile_();
     pskl.utils.BlobUtils.stringToBlob(pskl.app.piskelController.serialize(), function(blob) {
       pskl.utils.FileUtils.downloadAsFile(blob, this.getLocalFilename_());
       this.onSaveSuccess_();
@@ -134,7 +164,7 @@
 
   ns.SaveController.prototype.afterSaving_ = function () {
     this.saveOnlineButton.attr('disabled', false);
-    this.submitButton.html('');
+    this.saveOnlineStatus.html('');
 
     if (this.piskelName) {
       this.piskelName.classList.remove('piskel-name-saving');

src/piskel-style-list.js

@@ -11,6 +11,7 @@
   "css/cheatsheet.css",
   "css/dialogs.css",
   "css/dialogs-manage-palettes.css",
+  "css/dialogs-browse-local.css",
   "css/toolbox.css",
   "css/toolbox-layers-list.css",
   "css/toolbox-palettes-list.css",

src/templates/dialogs/browse-local.html

@@ -3,8 +3,16 @@
     Browse Local Piskels
     <span class="palette-manager-close dialog-close">X</span>
   </h3>
-  <div>
+  <div style="padding:10px 20px; font-size:1.5em">
     <table class="local-piskels-list">
+      <thead>
+        <tr class="local-piskel-list-head">
+          <td class="local-piskel-name">Name</td>
+          <td class="local-piskel-save-date">Date</td>
+          <td colspan=2>Actions</td>
+
+        </tr>
+      </thead>
       <tbody></tbody>
     </table>
   </div>
@@ -12,16 +20,8 @@
     <tr class="local-piskel-item">
       <td class="local-piskel-name">{{name}}</td>
       <td class="local-piskel-save-date">{{date}}</td>
-      <td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
-      <td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
+      <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
+      <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
     </tr>
   </script>
-  <script type="text/template" id="previous-session-info-template">
-    <div>
-      Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
-      <div style="margin-top:10px;">
-        <button type="button" class="button  button-primary restore-session-button">Restore</button>
-      </div>
-    </div>
-  </script>
 </div>

src/templates/dialogs/import-image.html

@@ -3,10 +3,10 @@
     Import Image
     <span class="palette-manager-close dialog-close">X</span>
   </h3>
-  <div class="import-options">
+  <div class="import-options" style="padding:10px 20px; font-size:1.5em">
     <form action="" method="POST" name="import-image-form">
       <div class="import-section">
-        <span class="import-image-file-name"></span>
+        <span class="import-section-title  import-section-title-small">Name :</span><span class="import-image-file-name"></span>
       </div>
       <div class="import-section">
         <span class="import-section-title  import-section-title-small" style="vertical-align:top">Info :</span>

src/templates/settings.html

@@ -11,28 +11,28 @@
   <div
     data-setting="resize"
     class="tool-icon resize-icon"
-    title="Modify Canvas"
+    title="Resize the drawing area"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="save"
     class="tool-icon save-icon"
-    title="Save to gallery"
+    title="Save to your gallery, save locally<br/>or export as a file"
     rel="tooltip" data-placement="left" >
   </div>
 
   <div
     data-setting="png"
-    class="tool-icon import-icon"
-    title="Export"
+    class="tool-icon export-icon"
+    title="Export as Image, as Spritesheet<br/>or as Animated GIF"
     rel="tooltip" data-placement="left">
   </div>
 
   <div
     data-setting="import"
     class="tool-icon local-storage-icon"
-    title="Import piskel"
+    title="Import an existing image,<br/>an animated GIF or a .piskel file"
     rel="tooltip" data-placement="left">
   </div>
 <!--

src/templates/settings/import.html

@@ -37,10 +37,19 @@
   <div class="settings-title">
     Recover recent sessions
   </div>
-  <div class="settings-item">
-      <span>Load a <span style="font-weight:bold;color:white">backup</span> from a recent session</span>
+  <div class="settings-item previous-session">
+      <!-- <span>Load a <span style="font-weight:bold;color:white">backup</span> from a recent session</span>
       <div class="import-section">
         <button type="button" class="button  button-primary load-recent-button">Browse recent sessions</button>
-      </div>
+      </div> -->
   </div>
+
+  <script type="text/template" id="previous-session-info-template">
+    <div>
+      Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
+      <div style="margin-top:10px;">
+        <button type="button" class="button  button-primary restore-session-button">Restore</button>
+      </div>
+    </div>
+  </script>
 </div>

src/templates/settings/save.html

@@ -17,13 +17,13 @@
     </div>
     <div class="settings-title">Save online</div>
     <div class="settings-item">
-      <input type="submit" class="button button-primary" id="save-online-button" value="Upload" />
+      <input type="button" class="button button-primary" id="save-online-button" value="Upload" />
       <div id="save-online-status" class="save-status"></div>
     </div>
     <div class="settings-title">Save offline in Browser</div>
     <div class="settings-item">
       <div id="save-browser-status" class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
-      <input type="submit" class="button button-primary" id="save-browser-button" value="Save in Browser" />
+      <input type="button" class="button button-primary" id="save-browser-button" value="Save in Browser" />
     </div>
     <div class="settings-title">Save offline as File</div>
     <div class="settings-item">