cleanup of import tab

src/css/settings.css

@@ -339,20 +339,15 @@
   width: 100%;
 }
 
-#save-online-status {
-  margin-top: 10px;
-}
-#save-local-status {
-  margin-bottom: 10px;
-}
 .save-status {
+  margin-bottom: 10px;
   vertical-align: middle;
   font-weight: normal;
   text-shadow: none;
   font-style: italic;
 }
 
-.save-local-name {
+.save-file-name {
   white-space: nowrap;
   font-weight: bold;
   color: white;

src/js/controller/settings/SaveController.js

@@ -14,14 +14,14 @@
     this.descriptionInput = $('#save-description');
     this.isPublicCheckbox = $('input[name=save-public-checkbox]');
     this.saveOnlineButton = $('#save-online-button');
-    this.saveLocalButton = $('#save-local-button');
+    this.saveFileButton = $('#save-file-button');
 
     // Only available in app-engine mode ...
     this.piskelName = $('.piskel-name').get(0);
 
     this.saveOnlineStatus = $('#save-online-status');
 
-    this.saveLocalStatus = $('#save-local-status');
+    this.saveFileStatus = $('#save-file-status');
     this.timestamp = new Date();
 
     var descriptor = this.piskelController.getPiskel().getDescriptor();
@@ -30,7 +30,7 @@
 
     this.isPublicCheckbox.prop('checked', descriptor.isPublic);
 
-    this.saveLocalButton.click(this.onSaveLocalClick_.bind(this));
+    this.saveFileButton.click(this.onSaveLocalClick_.bind(this));
     this.nameInput.keyup(this.updateLocalStatusFilename_.bind(this));
 
     if (pskl.app.isLoggedIn()) {
@@ -39,7 +39,7 @@
       this.saveOnlineButton.hide();
       $('.save-public-section').hide();
       this.saveOnlineStatus.html(pskl.utils.Template.get('save-please-login-partial'));
-      this.saveLocalButton.get(0).classList.add('button-primary');
+      this.saveFileButton.get(0).classList.add('button-primary');
       this.saveForm.submit(this.onSaveLocalClick_.bind(this));
     }
 
@@ -47,7 +47,7 @@
   };
 
   ns.SaveController.prototype.updateLocalStatusFilename_ = function () {
-    this.saveLocalStatus.html(pskl.utils.Template.getAndReplace('save-local-status-template', {
+    this.saveFileStatus.html(pskl.utils.Template.getAndReplace('save-file-status-template', {
       name : this.getLocalFilename_()
     }));
   };

src/templates/settings/import.html

@@ -1,13 +1,22 @@
 <div class="settings-section">
   <div class="settings-title">
-    Open Piskel Project
+    Load from Browser
+  </div>
+  <div class="settings-item">
+    <span>Load a <span style="font-weight:bold;color:white">local piskel</span> saved in this Browser</span>
+    <div class="import-section">
+      <button type="button" class="button  button-primary load-browser-button">Browse local saves</button>
+    </div>
+  </div>
+  <div class="settings-title">
+    Load .piskel file
   </div>
   <div class="settings-item">
     <form action="" method="POST" name="open-piskel-form">
-      <span>Load a <span style="font-weight:bold;color:white">.piskel</span> file from your computer.</span>
+      <span>Load a <span style="font-weight:bold;color:white">.piskel</span> file from your computer</span>
 
       <div class="import-section">
-        <button type="button" class="button  button-primary open-piskel-button">Open...</button>
+        <button type="button" class="button  button-primary open-piskel-button">Browse .piskel files</button>
         <span class="file-input-open-piskel-status"></span>
         <input style="display:none"
           type="file" name="open-piskel-input"
@@ -20,9 +29,9 @@
   </div>
   <div class="settings-item">
     <form action="" method="POST" name="import-form">
-      <div style="margin-top:5px;margin-bottom:5px;">Supports : PNG, JPG, BMP, Animated GIF ...</div>
+      <div style="margin-top:5px;margin-bottom:5px;">Supports : <span style="font-weight:bold;color:white">PNG, JPG, BMP, Animated GIF ...</span></div>
       <div class="import-section">
-        <button type="button" class="button  button-primary file-input-button">Browse...</button>
+        <button type="button" class="button  button-primary file-input-button">Browse images</button>
         <span class="file-input-status"></span>
         <input style="display:none"
           type="file" name="file-upload-input"
@@ -48,4 +57,13 @@
 
     </form>
   </div>
+  <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="import-section">
+        <button type="button" class="button  button-primary load-recent-button">Browse recent sessions</button>
+      </div>
+  </div>
 </div>

src/templates/settings/save.html

@@ -2,13 +2,12 @@
   <form action="" method="POST" name="save-form">
     <div class="settings-title">Describe your piskel</div>
     <div class="settings-item">
-      <div class="settings-form-section">
-        <label class="row">Title : </label>
-        <input id="save-name" type="text" class="save-field textfield"/>
+      <div class="settings-form-section" style="overflow:hidden">
+        <label class="row" style="float:left;line-height:28px;">Title : </label>
+        <input id="save-name" type="text" class="save-field textfield" style="float:left;width:200px;margin-left:10px;"/>
       </div>
       <div class="settings-form-section">
-        <label class="row">Description :</label>
-        <textarea id="save-description" class="save-field textfield" placeholder="Your piskel in a few words"></textarea>
+        <textarea id="save-description" class="save-field textfield" placeholder="Description ..."></textarea>
       </div>
       <div class="settings-form-section save-public-section">
         <label class="row">
@@ -21,10 +20,15 @@
       <input type="submit" class="button button-primary" id="save-online-button" value="Upload" />
       <div id="save-online-status" class="save-status"></div>
     </div>
-    <div class="settings-title">Download Project</div>
+    <div class="settings-title">Save offline in Browser</div>
     <div class="settings-item">
-      <div id="save-local-status" class="save-status"></div>
-      <input type="button" class="button" id="save-local-button" value="Download Piskel Project" />
+      <div id="save-browser-status" class="save-status">Your piskel will be saved in the browser and will only be accessible from this browser.</div>
+      <input type="submit" 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">
+      <div id="save-file-status" class="save-status"></div>
+      <input type="button" class="button" id="save-file-button" value="Save as File" />
     </div>
   </form>
 
@@ -32,7 +36,7 @@
     <span>Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online !</span>
   </script>
 
-  <script type="text/template" id="save-local-status-template">
-    <span>Your piskel will be downloaded as <span class="save-local-name">{{name}}<span></span>
+  <script type="text/template" id="save-file-status-template">
+    <span>Your piskel will be downloaded as <span class="save-file-name">{{name}}<span></span>
   </script>
 </div>