mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Issue #727 - simplify import: resize and insertion steps

Browse Source
This commit is contained in:
juliandescottes 2017-10-01 12:32:33 +02:00 committed by Julian Descottes
parent 7445357368
commit 95c8df1224
3 changed files with 16 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/css/dialogs-import.css vendored
View File

@ -234,7 +234,7 @@
.insert-mode-option { .insert-mode-option {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5px; margin: 5px 0;
} }
.import-resize-option :checked + span, .import-resize-option :checked + span,
@ -242,11 +242,15 @@
color: var(--highlight-color); color: var(--highlight-color);
} }
.import-resize-option input,
.insert-mode-option input {
margin: 5px;
}
/** /**
* ADJUST SIZE * ADJUST SIZE
*/ */
.import-resize-anchor-info, .import-resize-anchor-info {
.import-resize-option-label {
margin-bottom: 10px; margin-bottom: 10px;
} }

11
src/js/controller/dialogs/importwizard/steps/AdjustSize.js
View File

@ -69,16 +69,15 @@
var anchorInfo = this.container.querySelector('.import-resize-anchor-info'); var anchorInfo = this.container.querySelector('.import-resize-anchor-info');
if (isBigger && keep) { if (isBigger && keep) {
anchorInfo.innerHTML = [ anchorInfo.innerHTML = [
'<span class="import-resize-warning">', '<div class="import-resize-warning">',
' Imported content will be cropped!', ' Imported content will be cropped!',
'</span>', '</div>',
' ', 'Select crop anchor:'
'Select crop origin'
].join(''); ].join('');
} else if (isBigger) { } else if (isBigger) {
anchorInfo.innerHTML = 'Select the anchor for resizing the canvas'; anchorInfo.innerHTML = 'Select resize anchor:';
} else { } else {
anchorInfo.innerHTML = 'Select where the import should be positioned'; anchorInfo.innerHTML = 'Select position anchor:';
} }
}; };

21
src/templates/dialogs/import.html
View File

@ -131,9 +131,6 @@
The imported image is bigger than the current sprite. The imported image is bigger than the current sprite.
</div> </div>
<div class="import-resize-section"> <div class="import-resize-section">
<div class="import-resize-option-label">
How do you want to proceed?
</div>
<label class="import-resize-option"> <label class="import-resize-option">
<input type="radio" name="resize-mode" id="resize-option-expand" value="expand" {{expandChecked}}/> <input type="radio" name="resize-mode" id="resize-option-expand" value="expand" {{expandChecked}}/>
<span>Expand canvas to {{newSize}}</span> <span>Expand canvas to {{newSize}}</span>
@ -162,19 +159,19 @@
</div> </div>
<div class="import-step-content"> <div class="import-step-content">
<div>Select a frame in your current sprite:</div> <div>Select the insertion frame:</div>
<div class="insert-frame-preview"></div> <div class="insert-frame-preview"></div>
<div class="insert-mode-container"> <div class="insert-mode-container">
<div class="insert-mode-option-label"> <div class="insert-mode-option-label">
How should the imported frames be inserted: Insert imported frames:
</div> </div>
<label class="insert-mode-option"> <label class="insert-mode-option">
<input type="radio" name="insert-mode" id="insert-mode-add" value="add" checked="checked"/> <input type="radio" name="insert-mode" id="insert-mode-add" value="add" checked="checked"/>
<span>Add new frames</span> <span>as new frames</span>
</label> </label>
<label class="insert-mode-option"> <label class="insert-mode-option">
<input type="radio" name="insert-mode" id="insert-mode-insert" value="insert"/> <input type="radio" name="insert-mode" id="insert-mode-insert" value="insert"/>
<span>Insert in existing frames</span> <span>in existing frames</span>
</label> </label>
</div> </div>
<div class="import-step-buttons"> <div class="import-step-buttons">
@ -184,13 +181,3 @@
</div> </div>
</div> </div>
</script> </script>
<script type="text/template" id="import-invalid-file">
<div class="import-step-container">
<div>THIS IS AN INVALID FILEZ</div>
<div class="import-step-buttons">
<button class="import-back-button button">back</button>
<button class="import-next-button button button-primary">next</button>
</div>
</div>
</script>