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

Move 'add frame button' to preview frames

Browse Source 
and change UXD
This commit is contained in:
Vince 2013-06-13 17:39:12 +02:00
parent d1f292bd69
commit 9478055658
5 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/preview-film-section.css
View File

@ -10,6 +10,31 @@
padding-right: 7px;
}
.add-frame-action {
border: #888 solid 4px;
font-size: 13px;
color: #888;
cursor: pointer;
padding: 6px 0;
border-radius: 4px;
margin-top: 8px;
background-image: url(../img/plus.png);
background-repeat: no-repeat;
background-position: 3px 7px;
background-size: 26px 26px;
text-indent: 18px;
background-color: #222;
}
.add-frame-action .label {
width: 80px;
margin: 0 auto;
}
.add-frame-action:hover {
border-color: gold;
}
.preview-tile {
position: relative;
border: #444 3px solid;

5
css/tools.css
View File

@ -185,6 +185,7 @@
/*
* Framesheet level actions:
*/
.tool-icon.save-icon {
background-image: url(../img/save.png);
background-position: 6px 6px;
@ -208,7 +209,3 @@
color: #fff;
}
.tool-icon.tool-add-frame {
background-image: url(../img/actions/add.png);
}

BIN
img/plus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 B

3
index.html
View File

@ -81,9 +81,6 @@
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="bottom" >
<span class="label">PNG</span>
</div>
<div class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></div>
</div>
</div>
</div>

15
js/controller/PreviewFilmController.js
View File

@ -13,10 +13,7 @@
$.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
};
ns.PreviewFilmController.prototype.init = function() {
var addFrameButton = $('#add-frame-button')[0];
addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
};
ns.PreviewFilmController.prototype.init = function() {};
ns.PreviewFilmController.prototype.addFrame = function () {
this.framesheet.addEmptyFrame();
@ -50,7 +47,15 @@
for (var i = 0, l = frameCount; i < l ; i++) {
this.container.append(this.createPreviewTile_(i));
}
// Append 'new empty frame' button
var newFrameButton = document.createElement("div");
newFrameButton.id = "add-frame-action";
newFrameButton.className = "add-frame-action";
newFrameButton.innerHTML = "<p class='label'>Add new frame</p>";
this.container.append(newFrameButton);
$(newFrameButton).click(this.addFrame.bind(this));
var needDragndropBehavior = (frameCount > 1);
if(needDragndropBehavior) {
this.initDragndropBehavior_();