remove cancel button from import steps, add big select mode buttons

src/css/dialogs-import.css

@@ -222,6 +222,29 @@
   margin-bottom: 10px
 }
 
+.import-mode-section {
+  display: flex;
+  border: 3px solid #666;
+  border-radius: 3px;
+  padding: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.import-mode-section .button {
+  width: 90px;
+  height: 40px;
+  font-size: 16px;
+  margin-left: 10px;
+
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.import-mode-section-description {
+  flex-grow: 1;
+}
+
 .import-mode-option,
 .import-resize-option,
 .insert-mode-option {

src/js/controller/dialogs/importwizard/steps/AbstractImportStep.js

@@ -11,10 +11,8 @@
   ns.AbstractImportStep.prototype.init = function () {
     this.nextButton = this.container.querySelector('.import-next-button');
     this.backButton = this.container.querySelector('.import-back-button');
-    this.cancelButton = this.container.querySelector('.import-cancel-button');
 
     this.addEventListener(this.nextButton, 'click', this.onNextClick);
-    this.addEventListener(this.cancelButton, 'click', this.onCancelClick);
     this.addEventListener(this.backButton, 'click', this.onBackClick);
   };
 
@@ -30,10 +28,6 @@
     pskl.utils.Event.removeAllEventListeners(this);
   };
 
-  ns.AbstractImportStep.prototype.onCancelClick = function () {
-    this.importController.closeDialog();
-  };
-
   ns.AbstractImportStep.prototype.onNextClick = function () {
     this.importController.next(this);
   };

src/js/controller/dialogs/importwizard/steps/ImageImport.js

@@ -49,7 +49,9 @@
     this.createPiskelFromImage().then(function (piskel) {
       this.mergeData.mergePiskel = piskel;
       this.superclass.onNextClick.call(this);
-    }.bind(this));
+    }.bind(this)).catch(function (e) {
+      console.error(e);
+    });
   };
 
   ns.ImageImport.prototype.onShow = function () {

src/js/controller/dialogs/importwizard/steps/SelectMode.js

@@ -15,15 +15,14 @@
   ns.SelectMode.prototype.init = function () {
     this.superclass.init.call(this);
 
-    this.importMode = this.container.querySelector('.import-mode');
+    var replaceButton = this.container.querySelector('.import-mode-replace-button');
-    this.addEventListener(this.importMode, 'change', this.onImportModeChange_);
+    var mergeButton = this.container.querySelector('.import-mode-merge-button');
 
-    // Set the initial importMode value in the merge data.
+    this.addEventListener(replaceButton, 'click', this.onReplaceButtonClick_);
-    this.mergeData.importMode = this.getSelectedMode_();
+    this.addEventListener(mergeButton, 'click', this.onMergeButtonClick_);
   };
 
   ns.SelectMode.prototype.onShow = function () {
-    this.refresh_();
     this.superclass.onShow.call(this);
   };
 
@@ -31,29 +30,13 @@
     this.superclass.destroy.call(this);
   };
 
-  ns.SelectMode.prototype.refresh_ = function () {
+  ns.SelectMode.prototype.onReplaceButtonClick_ = function () {
-    var mergePiskel = this.mergeData.mergePiskel;
+    this.mergeData.importMode = ns.SelectMode.MODES.REPLACE;
-    if (mergePiskel) {
+    this.onNextClick();
-      this.nextButton.removeAttribute('disabled');
-    } else {
-      this.nextButton.setAttribute('disabled', true);
-    }
-
-    if (this.mergeData.importMode === ns.SelectMode.MODES.MERGE) {
-      // If the user wants to merge with the existing content, there are more steps ahead.
-      this.nextButton.textContent = 'next';
-    } else {
-      // Otherwise this is the last step, update the button text.
-      this.nextButton.textContent = 'import';
-    }
   };
 
-  ns.SelectMode.prototype.onImportModeChange_ = function () {
+  ns.SelectMode.prototype.onMergeButtonClick_ = function () {
-    this.mergeData.importMode = this.getSelectedMode_();
+    this.mergeData.importMode = ns.SelectMode.MODES.MERGE;
-    this.refresh_();
+    this.onNextClick();
-  };
-
-  ns.SelectMode.prototype.getSelectedMode_ = function () {
-    return this.importMode.querySelector(':checked').value;
   };
 })();

src/templates/dialogs/import.html

@@ -50,7 +50,6 @@
     </div>
   </form>
   <div class="import-step-buttons">
-    <button class="import-cancel-button button">cancel</button>
     <button class="import-back-button button">back</button>
     <button class="import-next-button button button-primary">next</button>
   </div>
@@ -67,20 +66,19 @@
   <div class="import-step-content">
     <div class="import-mode">
       <div class="import-mode-title">How do you want to import the new content?</div>
-      <label class="import-mode-option">
+      <div class="import-mode-section">
-        <input type="radio" checked="checked" name="import-mode" id="select-mode-replace" value="replace"/>
+        <span class="import-mode-section-description">Combine the imported content and your existing sprite.</span>
-        <span>Replace your current sprite</span>
+        <button class="import-mode-merge-button button-primary button">Merge</button>
-      </label>
+      </div>
-      <label class="import-mode-option">
+      <div class="import-mode-section">
-        <input type="radio" name="import-mode" id="select-mode-merge" value="merge"/>
+        <span class="import-mode-section-description">Replace your current sprite by the imported content.</span>
-        <span>Merge with your current sprite</span>
+        <button class="import-mode-replace-button button-primary button">Replace</button>
-      </label>
+      </div>
     </div>
 
     <div class="import-step-buttons">
-      <button class="import-cancel-button button">cancel</button>
       <button class="import-back-button button">back</button>
-      <button class="import-next-button button button-primary">next</button>
+      <button style="display: none" class="import-next-button button button-primary">next</button>
     </div>
   </div>
 </div>
@@ -120,7 +118,6 @@
       <div class="import-resize-anchor-container"></div>
     </div>
     <div class="import-step-buttons">
-      <button class="import-cancel-button button">cancel</button>
       <button class="import-back-button button">back</button>
       <button class="import-next-button button button-primary">next</button>
     </div>
@@ -181,7 +178,6 @@
       </label>
     </div>
     <div class="import-step-buttons">
-      <button class="import-cancel-button button">cancel</button>
       <button class="import-back-button button">back</button>
       <button class="import-next-button button button-primary">import</button>
     </div>
@@ -193,7 +189,6 @@
 <div class="import-step-container">
   <div>THIS IS AN INVALID FILEZ</div>
   <div class="import-step-buttons">
-    <button class="import-cancel-button button">cancel</button>
     <button class="import-back-button button">back</button>
     <button class="import-next-button button button-primary">next</button>
   </div>