diff --git a/src/css/dialogs-import.css b/src/css/dialogs-import.css
index c6039519..41a9fa25 100644
--- a/src/css/dialogs-import.css
+++ b/src/css/dialogs-import.css
@@ -13,14 +13,18 @@
}
.import-step-container {
+ display: flex;
width: 100%;
height: 100%;
- padding: 10px;
box-sizing: border-box;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
background: #444;
}
+.import-step-content {
+ padding: 10px;
+}
+
.import-step-buttons {
position: absolute;
bottom: 10px;
@@ -36,6 +40,10 @@
* IMAGE IMPORT STEP
*/
+.import-image-container {
+ padding: 10px;
+}
+
.import-image-loading {
opacity: 0.3;
pointer-events: none;
@@ -148,6 +156,14 @@
.import-info {
display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ max-width: 178px;
+ box-sizing: border-box;
+
+ padding: 10px;
+ border-right: 3px solid gold;
}
.import-preview canvas {
@@ -156,8 +172,7 @@
}
.import-meta {
- width: 50%;
- padding-left: 10px;
+ margin-top: 10px;
box-sizing: border-box;
/*center meta information horizontally*/
@@ -203,10 +218,6 @@
color: #aaa;
}
-.import-mode {
- margin: 15px 0 20px 0;
-}
-
.import-mode-title {
margin-bottom: 10px
}
@@ -228,10 +239,6 @@
/**
* ADJUST SIZE
*/
-.import-resize-info {
- margin: 10px 0 20px 0;
-}
-
.import-resize-anchor-info,
.import-resize-option-label,
.insert-mode-option-label {
@@ -242,6 +249,10 @@
margin-bottom: 10px;
}
+.import-resize-anchor {
+ margin-top: 20px;
+}
+
.import-resize-option :checked + span {
color: var(--highlight-color);
}
@@ -255,9 +266,14 @@
*/
.insert-mode-container {
+ margin-top: 20px;
margin-bottom: 10px;
}
-.insert-frame-container {
+.insert-frame-preview {
margin: 10px 0;
}
+
+.insert-frame-preview .frame-picker-wrapper {
+ height: 120px;
+}
\ No newline at end of file
diff --git a/src/js/controller/dialogs/importwizard/ImportWizard.js b/src/js/controller/dialogs/importwizard/ImportWizard.js
index a550476a..ca0785c4 100644
--- a/src/js/controller/dialogs/importwizard/ImportWizard.js
+++ b/src/js/controller/dialogs/importwizard/ImportWizard.js
@@ -52,6 +52,7 @@
if (this.hasSingleImage_()) {
this.wizard.goTo('IMAGE_IMPORT');
} else if (this.hasSinglePiskelFile_()) {
+ // If a piskel file was provided we can directly go to
pskl.utils.PiskelFileUtils.loadFromFile(this.mergeData.rawFiles[0],
// onSuccess
function (piskel) {
@@ -70,12 +71,12 @@
}
};
- ns.ImportWizard.prototype.back = function (stepInstance) {
+ ns.ImportWizard.prototype.back = function () {
this.wizard.back();
this.wizard.getCurrentStep().instance.onShow();
};
- ns.ImportWizard.prototype.next = function (stepInstance) {
+ ns.ImportWizard.prototype.next = function () {
var step = this.wizard.getCurrentStep();
if (step.name === 'IMAGE_IMPORT') {
@@ -149,11 +150,7 @@
this.piskelController.setPiskel(piskel);
this.closeDialog();
}
- } else if (mode === ns.steps.SelectMode.MODES.NEW) {
- console.log('import as new: not implemented yet');
} else if (mode === ns.steps.SelectMode.MODES.MERGE) {
- // Need to also fetch resize options
- // and insert location option
var merge = pskl.utils.MergeUtils.merge(this.piskelController.getPiskel(), piskel, {
insertIndex: this.mergeData.insertIndex,
insertMode: this.mergeData.insertMode,
diff --git a/src/js/controller/dialogs/importwizard/steps/AbstractImportStep.js b/src/js/controller/dialogs/importwizard/steps/AbstractImportStep.js
index 5ba78151..5a6dc86d 100644
--- a/src/js/controller/dialogs/importwizard/steps/AbstractImportStep.js
+++ b/src/js/controller/dialogs/importwizard/steps/AbstractImportStep.js
@@ -38,6 +38,30 @@
this.importController.back(this);
};
- ns.AbstractImportStep.prototype.onShow = Constants.EMPTY_FUNCTION;
+ ns.AbstractImportStep.prototype.onShow = function () {
+ var mergePiskel = this.mergeData.mergePiskel;
+ if (!mergePiskel) {
+ return;
+ }
+
+ if (!this.framePickerWidget) {
+ var framePickerContainer = this.container.querySelector('.import-preview');
+ this.framePickerWidget = new pskl.widgets.FramePicker(mergePiskel, framePickerContainer);
+ this.framePickerWidget.init();
+ } else if (this.framePickerWidget.piskel != mergePiskel) {
+ // If the piskel displayed by the frame picker is different from the previous one,
+ // refresh the widget.
+ this.framePickerWidget.piskel = mergePiskel;
+ this.framePickerWidget.setFrameIndex(1);
+ }
+
+ var metaHtml = pskl.utils.Template.getAndReplace('import-meta-content', {
+ name : mergePiskel.getDescriptor().name,
+ dimensions : pskl.utils.StringUtils.formatSize(mergePiskel.getWidth(), mergePiskel.getHeight()),
+ frames : mergePiskel.getFrameCount(),
+ layers : mergePiskel.getLayers().length
+ });
+ this.container.querySelector('.import-meta').innerHTML = metaHtml;
+ };
})();
diff --git a/src/js/controller/dialogs/importwizard/steps/AdjustSize.js b/src/js/controller/dialogs/importwizard/steps/AdjustSize.js
index 31fbcc14..4f7e6ae8 100644
--- a/src/js/controller/dialogs/importwizard/steps/AdjustSize.js
+++ b/src/js/controller/dialogs/importwizard/steps/AdjustSize.js
@@ -34,6 +34,7 @@
ns.AdjustSize.prototype.onShow = function () {
this.refresh_();
+ this.superclass.onShow.call(this);
};
ns.AdjustSize.prototype.refresh_ = function () {
diff --git a/src/js/controller/dialogs/importwizard/steps/InsertLocation.js b/src/js/controller/dialogs/importwizard/steps/InsertLocation.js
index bad508c0..83736b0b 100644
--- a/src/js/controller/dialogs/importwizard/steps/InsertLocation.js
+++ b/src/js/controller/dialogs/importwizard/steps/InsertLocation.js
@@ -15,13 +15,13 @@
ns.InsertLocation.prototype.init = function () {
this.superclass.init.call(this);
this.framePreview = this.container.querySelector('.insert-frame-preview');
- this.framePickerWidget = new pskl.widgets.FramePicker(
+ this.currentPiskelFramePickerWidget = new pskl.widgets.FramePicker(
this.piskelController.getPiskel(), this.framePreview);
- this.framePickerWidget.init();
+ this.currentPiskelFramePickerWidget.init();
var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
- this.framePickerWidget.setFrameIndex(currentFrameIndex + 1);
- this.framePickerWidget.setFirstFrameIndex(0);
+ this.currentPiskelFramePickerWidget.setFrameIndex(currentFrameIndex + 1);
+ this.currentPiskelFramePickerWidget.setFirstFrameIndex(0);
this.insertModeContainer = this.container.querySelector('.insert-mode-container');
this.addEventListener(this.insertModeContainer, 'change', this.onInsertModeChange_);
@@ -33,25 +33,25 @@
this.mergeData.insertMode = value;
if (this.mergeData.insertMode === ns.InsertLocation.MODES.ADD) {
- this.framePickerWidget.setFirstFrameIndex(0);
+ this.currentPiskelFramePickerWidget.setFirstFrameIndex(0);
} else {
- this.framePickerWidget.setFirstFrameIndex(1);
+ this.currentPiskelFramePickerWidget.setFirstFrameIndex(1);
}
};
ns.InsertLocation.prototype.onShow = function () {
- var count = this.mergeData.mergePiskel.getFrameCount();
- this.container.querySelector('.insert-frames-count').innerText = count;
+ // Nothing to do here!
+ this.superclass.onShow.call(this);
};
ns.InsertLocation.prototype.onNextClick = function () {
- var insertIndex = this.framePickerWidget.getFrameIndex();
+ var insertIndex = this.currentPiskelFramePickerWidget.getFrameIndex();
this.mergeData.insertIndex = insertIndex;
this.superclass.onNextClick.call(this);
};
ns.InsertLocation.prototype.destroy = function () {
- this.framePickerWidget.destroy();
+ this.currentPiskelFramePickerWidget.destroy();
this.superclass.destroy.call(this);
};
})();
diff --git a/src/js/controller/dialogs/importwizard/steps/SelectMode.js b/src/js/controller/dialogs/importwizard/steps/SelectMode.js
index 1d593f06..937f09cb 100644
--- a/src/js/controller/dialogs/importwizard/steps/SelectMode.js
+++ b/src/js/controller/dialogs/importwizard/steps/SelectMode.js
@@ -6,7 +6,6 @@
};
ns.SelectMode.MODES = {
- NEW : 'new',
REPLACE : 'replace',
MERGE : 'merge'
};
@@ -25,6 +24,7 @@
ns.SelectMode.prototype.onShow = function () {
this.refresh_();
+ this.superclass.onShow.call(this);
};
ns.SelectMode.prototype.destroy = function () {
@@ -37,7 +37,6 @@
ns.SelectMode.prototype.refresh_ = function () {
var mergePiskel = this.mergeData.mergePiskel;
if (mergePiskel) {
- this.updateMergeFilePreview_();
this.nextButton.removeAttribute('disabled');
} else {
this.nextButton.setAttribute('disabled', true);
@@ -52,32 +51,6 @@
}
};
- ns.SelectMode.prototype.updateMergeFilePreview_ = function () {
- var mergePiskel = this.mergeData.mergePiskel;
-
- var previewFrame = pskl.utils.LayerUtils.mergeFrameAt(mergePiskel.getLayers(), 0);
- var image = pskl.utils.FrameUtils.toImage(previewFrame);
-
- if (!this.framePickerWidget) {
- var framePickerContainer = this.container.querySelector('.import-preview');
- this.framePickerWidget = new pskl.widgets.FramePicker(mergePiskel, framePickerContainer);
- this.framePickerWidget.init();
- } else if (this.framePickerWidget.piskel != mergePiskel) {
- // If the piskel displayed by the frame picker is different from the previous one,
- // refresh the widget.
- this.framePickerWidget.piskel = mergePiskel;
- this.framePickerWidget.setFrameIndex(1);
- }
-
- var metaHtml = pskl.utils.Template.getAndReplace('import-meta-content', {
- name : mergePiskel.getDescriptor().name,
- dimensions : pskl.utils.StringUtils.formatSize(mergePiskel.getWidth(), mergePiskel.getHeight()),
- frames : mergePiskel.getFrameCount(),
- layers : mergePiskel.getLayers().length
- });
- this.container.querySelector('.import-meta').innerHTML = metaHtml;
- };
-
ns.SelectMode.prototype.onImportModeChange_ = function () {
this.mergeData.importMode = this.getSelectedMode_();
this.refresh_();
diff --git a/src/templates/dialogs/import.html b/src/templates/dialogs/import.html
index c77ab166..b0ba1d68 100644
--- a/src/templates/dialogs/import.html
+++ b/src/templates/dialogs/import.html
@@ -9,48 +9,46 @@
@@ -159,29 +159,32 @@