mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
new version
This commit is contained in:
jdescottes
parent
d6608ab263
commit
0caacd6223
Binary file not shown.
@ -7,6 +7,7 @@
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode=" " d="" horiz-adv-x="256" />
|
||||
<glyph unicode="" d="M548.568 469.33c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.998 548.568 255.998s-319.896 254.974-548.568 255.999zM543.082 387.731c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 320.645c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
|
||||
<glyph unicode="" d="M340.96 469.333l-32.981-29.267-1.969 10.697-18.862-5.459v-36.471l1.221-25.849 35.952 31.903c-0.462-6.572-0.68-13.508-0.223-21.207 0.724-12.19 4.071-23.146 10.733-31.718s15.637-14.063 25.589-18.607c19.904-9.088 44.707-23.995 75.102-49.258 57.553-47.833 64.672-71.707 75.043-113.771 9.874-54.678-5.819-94.055-28.463-127.459-16.179-23.866-36.205-45.046-80.229-53.974s-85.245-11.81-114.725-11.81v-29.712c31.378 0 73.891 2.924 120.63 12.404s92.839 24.688 121.002 54.15c30.486 31.892 59.625 89.691 42.191 180.054l-0.074 0.297c-7.766 36.041-31.345 90.17-123.528 130.25-38.13 16.578-58.817 27.279-74.37 34.381-7.777 3.551-12.257 8.151-14.697 11.29s-4.042 6.988-4.531 15.228c-1.101 18.541 1.596 32.644 4.42 41.968s5.2 12.925 5.2 12.925l-22.433 19.015zM308.574 410.875c0 0-21.425 5.601-21.425-1.56 0-39.679-0.543-46.688 13.068-74.726s31.172-56.883 57.683-81.363c50.137-46.294 46.077-53.33 54.399-77.145 3.064-8.767 4.356-29.132 2.228-45.125s-8.091-37.102-15.933-49.099c-12.322-18.852-22.247-38.122-45.82-51.216-24.626-13.678-45.867-16.634-65.626-16.634v-29.712c24.75 0 52.923 5.962 82.673 17.976s58.387 30.034 75.728 56.564c11.616 17.771 23.842 44.829 26.541 66.454s8.060 40.281-6.041 69.411c-21.705 44.841-50.569 58.307-85.806 88.136-21.815 18.466-41.428 40.207-53.325 64.713s-17.61 49.391-18.347 63.324zM304.637 391.785l-17.488-1.597c0.887-16.769 0-51.279 0-84.047 0-15.558 2.587-34.459 5.019-47.508 4.685-25.143 12.495-41.458 17.392-57.248 3.892-12.55 8.256-30.116 11.158-36.87 7.858-18.288 8.948-40.637 0.897-66.369-8.154-26.060-20.866-51.039-42.106-59.238l7.64-25.197c30.736 11.865 73.733 45.32 85.493 82.907 10.6 33.878 3.906 64.497-5.757 86.981-5.858 13.634-11.428 23.024-17.668 34.392-7.678 13.987-23.993 31.521-28.665 45.802-4.248 12.988-9.303 28.695-10.605 44.761-2.605 32.132-4.319 65.104-5.311 83.231zM235.254 469.297l32.98-29.267 1.969 10.697 18.862-5.459v-36.471l-1.221-25.85-35.952 31.903c0.463-6.572 0.68-13.508 0.223-21.207-0.724-12.19 0.731-24.346-5.931-32.918s-14.437-20.066-24.389-24.61c-19.904-9.088-43.506-23.995-73.901-49.258-57.553-47.833-56.268-60.902-66.639-102.966-3.871-55.878-7.038-55.096 5.653-93.844 7.669-23.416 26.602-46.246 70.624-67.18 40.566-19.291 102.053-35.822 131.533-35.822v-29.712c-31.378 0-73.891 2.924-120.63 12.404s-92.839 24.688-121.002 54.15c-30.485 31.892-59.626 89.691-42.191 180.054l0.074 0.297c7.766 36.041 31.345 90.17 123.528 130.25 38.13 16.578 58.816 27.279 74.37 34.381 7.777 3.551 12.256 8.151 14.697 11.29s4.042 6.988 4.531 15.228c1.101 18.541-1.595 32.644-4.419 41.968s-5.2 12.925-5.2 12.925l22.433 19.015zM279.99 414.237l10.697-15.18c-0.887-16.769 0-51.279 0-84.047 0-15.558 4.204-36.156 1.772-49.205-4.685-25.143-4.006-33.818-8.903-49.609-3.892-12.55-8.256-34.361-11.158-41.114-7.858-18.288-9.797-60.161-1.745-85.894 8.154-26.060 13.226-59.528 25.976-78.763l4.742-48.906c-28.188 38.181-56.634 82.055-68.394 119.642-10.6 33.878-9.848 93.36-0.185 115.844 5.858 13.634 11.428 27.269 17.668 38.636 7.678 13.987 12.048 27.92 15.519 43.401 2.99 13.334 8.248 35.049 9.55 51.115 2.605 32.131 3.469 65.953 4.462 84.079z" horiz-adv-x="576" />
|
||||
<glyph unicode="" d="M548.568 479.997c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.999 548.568 255.999s-319.896 254.974-548.568 255.999zM543.082 398.397c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 331.312c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
|
||||
<glyph unicode="" d="M333.139 442.196l-28.111-24.945-1.682 9.117-16.077-4.654v-31.086l1.038-22.032 30.642 27.192c-0.394-5.602-0.579-11.514-0.189-18.076 0.616-10.389 3.469-19.727 9.148-27.036s13.329-11.986 21.812-15.858c16.965-7.745 38.105-20.45 64.012-41.986 49.053-40.769 55.122-61.117 63.962-96.969 8.416-46.603-4.959-80.166-24.261-108.637-13.789-20.344-30.859-38.395-68.38-46.004s-72.657-10.067-97.784-10.067v-25.324c26.745 0 62.98 2.493 102.815 10.574s79.13 21.041 103.132 46.154c25.984 27.183 50.821 76.445 35.96 153.464l-0.063 0.253c-6.619 30.719-26.716 76.854-105.285 111.015-32.5 14.131-50.132 23.25-63.389 29.304-6.628 3.027-10.442 6.947-12.524 9.622s-3.445 5.956-3.862 12.978c-0.939 15.803 1.36 27.825 3.767 35.771s4.432 11.015 4.432 11.015l-19.12 16.209zM305.535 392.371c0 0-18.259 4.773-18.259-1.332 0-33.82-0.462-39.793 11.136-63.691s26.568-48.483 49.166-69.349c42.733-39.459 39.275-45.454 46.367-65.753 2.611-7.473 3.713-24.832 1.899-38.462s-6.896-31.623-13.579-41.846c-10.502-16.069-18.963-32.495-39.053-43.653-20.991-11.659-39.094-14.177-55.936-14.177v-25.324c21.094 0 45.108 5.082 70.464 15.322s49.766 25.601 64.546 48.212c9.899 15.147 20.321 38.209 22.622 56.641s6.87 34.332-5.148 59.162c-18.5 38.219-43.101 49.697-73.135 75.121-18.592 15.74-35.31 34.27-45.45 55.156s-15.009 42.098-15.636 53.973zM302.18 376.1l-14.906-1.362c0.757-14.293 0-43.707 0-71.637 0-13.26 2.204-29.37 4.278-40.492 3.993-21.428 10.649-35.336 14.823-48.794 3.317-10.697 7.035-25.671 9.51-31.424 6.695-15.587 7.627-34.636 0.765-56.569-6.95-22.212-17.785-43.502-35.888-50.49l6.513-21.476c26.197 10.113 62.845 38.626 72.867 70.666 9.036 28.875 3.329 54.971-4.906 74.137-4.993 11.622-9.74 19.624-15.059 29.314-6.544 11.921-20.45 26.866-24.431 39.038-3.621 11.070-7.929 24.458-9.038 38.151-2.22 27.384-3.681 55.489-4.526 70.94zM243.043 442.167l28.111-24.945 1.682 9.117 16.077-4.654v-31.086l-1.038-22.031-30.642 27.192c0.394-5.601 0.579-11.514 0.189-18.076-0.616-10.391 0.623-20.75-5.055-28.057s-12.305-17.102-20.787-20.976c-16.965-7.747-37.083-20.449-62.988-41.986-49.053-40.769-47.959-51.909-56.799-87.761-3.299-47.627-5.999-46.959 4.819-79.986 6.537-19.959 22.674-39.417 60.195-57.258 34.577-16.442 86.982-30.531 112.107-30.531v-25.324c-26.745 0-62.98 2.493-102.815 10.57s-79.129 21.041-103.132 46.154c-25.983 27.182-50.821 76.447-35.959 153.464l0.063 0.253c6.618 30.719 26.715 76.854 105.288 111.015 32.499 14.131 50.131 23.25 63.386 29.302 6.629 3.026 10.442 6.948 12.528 9.622s3.445 5.956 3.862 12.978c0.939 15.803-1.36 27.825-3.767 35.771s-4.431 11.015-4.431 11.015l19.12 16.207zM281.173 395.236l9.119-12.938c-0.757-14.293 0-43.707 0-71.637 0-13.261 3.582-30.816 1.509-41.939-3.993-21.428-3.416-28.824-7.589-42.282-3.317-10.697-7.035-29.287-9.51-35.043-6.695-15.587-8.351-51.277-1.488-73.21 6.95-22.212 11.272-50.74 22.139-67.131l4.043-41.683c-24.026 32.543-48.269 69.938-58.294 101.975-9.036 28.875-8.394 79.572-0.158 98.736 4.993 11.622 9.74 23.244 15.059 32.931 6.544 11.922 10.268 23.796 13.227 36.99 2.548 11.365 7.031 29.873 8.139 43.568 2.22 27.387 2.957 56.213 3.804 71.663z" horiz-adv-x="576" />
|
||||
<glyph unicode="" d="M256 384c-111.659 0-208.441-65.021-256-160 47.559-94.979 144.341-160 256-160 111.657 0 208.439 65.021 256 160-47.558 94.979-144.343 160-256 160zM382.225 299.148c30.081-19.187 55.571-44.887 74.717-75.148-19.146-30.261-44.637-55.961-74.718-75.149-37.797-24.108-81.445-36.851-126.224-36.851-44.78 0-88.428 12.743-126.225 36.852-30.080 19.186-55.57 44.886-74.717 75.148 19.146 30.262 44.637 55.962 74.717 75.148 1.959 1.25 3.938 2.461 5.929 3.65-4.979-13.664-7.704-28.411-7.704-43.798 0-70.692 57.308-128 128-128s128 57.308 128 128c0 15.387-2.725 30.134-7.704 43.799 1.99-1.189 3.969-2.401 5.929-3.651zM256 275c0-26.51-21.49-48-48-48s-48 21.49-48 48 21.49 48 48 48 48-21.49 48-48z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
Binary file not shown.
@ -293,7 +293,7 @@ body {
|
||||
}
|
||||
|
||||
.piskel-icon-eye:before {
|
||||
content: "\e600";
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.piskel-icon-onion:before {
|
||||
@ -1407,11 +1407,11 @@ body {
|
||||
|
||||
.layers-toggle-preview {
|
||||
position: absolute;
|
||||
top : 0.9em;
|
||||
right: 3.3em;
|
||||
top: 0.3em;
|
||||
right: 2em;
|
||||
|
||||
color: #999;
|
||||
font-size: 0.8em;
|
||||
font-size: 1.3em;
|
||||
cursor: pointer;
|
||||
|
||||
transition: 0.2s linear;
|
||||
@ -1587,7 +1587,7 @@ body {
|
||||
}
|
||||
|
||||
.preview-toggle-onion-skin {
|
||||
font-size: 1.6rem;
|
||||
font-size: 2rem;
|
||||
color: #aaa;
|
||||
float: left;
|
||||
line-height: 26px;
|
||||
|
||||
2
js/piskel-packaged-min.js
vendored
2
js/piskel-packaged-min.js
vendored
File diff suppressed because one or more lines are too long
@ -21346,13 +21346,14 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
* @override
|
||||
*/
|
||||
ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
||||
this.previousCol = col;
|
||||
this.previousRow = row;
|
||||
|
||||
overlay.setPixel(col, row, color);
|
||||
|
||||
if (color === Constants.TRANSPARENT_COLOR) {
|
||||
frame.setPixel(col, row, color);
|
||||
}
|
||||
this.previousCol = col;
|
||||
this.previousRow = row;
|
||||
this.pixels.push({
|
||||
col : col,
|
||||
row : row,
|
||||
@ -21482,22 +21483,19 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
this.superclass.constructor.call(this);
|
||||
|
||||
this.toolId = "tool-vertical-mirror-pen";
|
||||
this.helpText = "vertical mirror pen tool";
|
||||
|
||||
this.swap = null;
|
||||
this.helpText = "Vertical Mirror pen tool (hold CTRL for Horizontal, hold SHIFT for both)";
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
|
||||
|
||||
|
||||
ns.VerticalMirrorPen.prototype.setMirrorContext = function() {
|
||||
this.swap = this.previousCol;
|
||||
this.previousCol = this.mirroredPreviousCol;
|
||||
ns.VerticalMirrorPen.prototype.backupPreviousPositions_ = function () {
|
||||
this.backupPreviousCol = this.previousCol;
|
||||
this.backupPreviousRow = this.previousRow;
|
||||
};
|
||||
|
||||
ns.VerticalMirrorPen.prototype.unsetMirrorContext = function() {
|
||||
this.mirroredPreviousCol = this.previousCol;
|
||||
this.previousCol = this.swap;
|
||||
ns.VerticalMirrorPen.prototype.restorePreviousPositions_ = function () {
|
||||
this.previousCol = this.backupPreviousCol;
|
||||
this.previousRow = this.backupPreviousRow;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -21505,21 +21503,34 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
*/
|
||||
ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
||||
this.superclass.applyToolAt.call(this, col, row, color, frame, overlay);
|
||||
this.backupPreviousPositions_();
|
||||
|
||||
var mirroredCol = this.getSymmetricCol_(col, frame);
|
||||
this.mirroredPreviousCol = mirroredCol;
|
||||
var mirroredRow = this.getSymmetricRow_(row, frame);
|
||||
|
||||
this.setMirrorContext();
|
||||
this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
|
||||
this.unsetMirrorContext();
|
||||
if (!event.ctrlKey) {
|
||||
this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
|
||||
}
|
||||
|
||||
if (event.shiftKey || event.ctrlKey) {
|
||||
this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
|
||||
}
|
||||
|
||||
if (event.shiftKey) {
|
||||
this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color, frame, overlay);
|
||||
}
|
||||
|
||||
|
||||
this.restorePreviousPositions_();
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
|
||||
return frame.getWidth() - col - 1;
|
||||
};
|
||||
|
||||
ns.VerticalMirrorPen.prototype.getSymmetricRow_ = function(row, frame) {
|
||||
return frame.getHeight() - row - 1;
|
||||
};
|
||||
})();
|
||||
;/**
|
||||
* @provide pskl.drawingtools.Eraser
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 223 B |
Binary file not shown.
|
Before Width: | Height: | Size: 431 B |
Binary file not shown.
|
Before Width: | Height: | Size: 278 B |
Binary file not shown.
|
Before Width: | Height: | Size: 418 B |
Binary file not shown.
|
Before Width: | Height: | Size: 594 B |
Binary file not shown.
|
Before Width: | Height: | Size: 532 B |
Binary file not shown.
|
Before Width: | Height: | Size: 634 B |
Binary file not shown.
|
Before Width: | Height: | Size: 177 B |
Binary file not shown.
|
Before Width: | Height: | Size: 305 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 789 B |
Binary file not shown.
|
Before Width: | Height: | Size: 761 B |
Binary file not shown.
|
Before Width: | Height: | Size: 209 B |
Binary file not shown.
|
Before Width: | Height: | Size: 543 B |
Binary file not shown.
|
Before Width: | Height: | Size: 656 B |
Binary file not shown.
|
Before Width: | Height: | Size: 672 B |
Binary file not shown.
|
Before Width: | Height: | Size: 557 B |
Binary file not shown.
|
Before Width: | Height: | Size: 707 B |
Binary file not shown.
|
Before Width: | Height: | Size: 450 B |
Binary file not shown.
|
Before Width: | Height: | Size: 660 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 450 B |
Binary file not shown.
|
Before Width: | Height: | Size: 603 B |
Binary file not shown.
|
Before Width: | Height: | Size: 570 B |
Binary file not shown.
|
Before Width: | Height: | Size: 720 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1,62 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="90"
|
||||
height="87.886002"
|
||||
id="svg3024">
|
||||
<defs
|
||||
id="defs3026" />
|
||||
<metadata
|
||||
id="metadata3029">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-266.63206,-597.79217)"
|
||||
id="layer1">
|
||||
<g
|
||||
transform="translate(262.14286,465.21932)"
|
||||
id="Captions" />
|
||||
<g
|
||||
id="g3825" />
|
||||
<g
|
||||
transform="translate(-0.51079959,126.51585)"
|
||||
id="layer1-9"
|
||||
style="fill:#ffffff;fill-opacity:1">
|
||||
<g
|
||||
transform="translate(262.14286,465.21932)"
|
||||
id="Captions-4"
|
||||
style="fill:#ffffff;fill-opacity:1" />
|
||||
<g
|
||||
id="g3825-8"
|
||||
style="fill:#ffffff;fill-opacity:1">
|
||||
<path
|
||||
d="m 357.14286,556.72132 c 0,1.346 -1.097,2.441 -2.442,2.441 h -60.239 c -1.347,0 -2.441,-1.096 -2.441,-2.441 v -4.555 h 50.241 c 4.346,0 7.884,-3.539 7.884,-7.885 v -48.128 h 4.555 c 1.346,0 2.442,1.096 2.442,2.441 v 58.127 z"
|
||||
id="path2989-8"
|
||||
style="fill:#ffffff;fill-opacity:1" />
|
||||
<path
|
||||
d="m 279.58086,544.28132 v -4.555 h 6.997 2.722 2.721 37.803 c 4.346,0 7.884,-3.537 7.884,-7.883 v -35.69 -2.721 -2.721 -6.998 h 4.555 c 1.346,0 2.442,1.096 2.442,2.443 v 4.555 2.721 2.721 48.129 c 0,1.346 -1.097,2.443 -2.442,2.443 h -50.242 -2.721 -2.722 -4.555 c -1.347,0 -2.442,-1.098 -2.442,-2.444 z"
|
||||
id="path2991-2"
|
||||
style="fill:#ffffff;fill-opacity:1" />
|
||||
<path
|
||||
d="m 329.82386,471.27632 h -60.239 c -1.347,0 -2.442,1.093 -2.442,2.441 v 58.127 c 0,1.344 1.095,2.441 2.442,2.441 h 4.555 2.721 2.721 6.997 2.722 2.721 37.803 c 1.345,0 2.441,-1.098 2.441,-2.441 v -35.691 -2.721 -2.721 -6.998 -2.721 -2.721 -4.554 c -10e-4,-1.348 -1.098,-2.441 -2.442,-2.441 z"
|
||||
id="path2993-4"
|
||||
style="fill:#ffffff;fill-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 271 B |
Binary file not shown.
|
Before Width: | Height: | Size: 506 B |
Binary file not shown.
|
Before Width: | Height: | Size: 395 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 909 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1010 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 253 B |
Binary file not shown.
|
Before Width: | Height: | Size: 245 B |
Binary file not shown.
|
Before Width: | Height: | Size: 376 B |
Binary file not shown.
|
Before Width: | Height: | Size: 372 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 973 B |
@ -1,74 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Piskel</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Julian Descottes">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="loading-mask"
|
||||
style="
|
||||
position:fixed;
|
||||
top:0;right:0;bottom:0;left:0;
|
||||
background:black;
|
||||
opacity:1;
|
||||
text-align:center;
|
||||
z-index : 20000;
|
||||
transition:opacity 0.5s;
|
||||
color:white;">
|
||||
<span style="top:45%">Loading Piskel ...</span>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
||||
<div id="main-wrapper" class="main-wrapper">
|
||||
<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
|
||||
<div id="column-wrapper" class="column-wrapper">
|
||||
<div class='column left-column'>
|
||||
<iframe src="templates/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
</div>
|
||||
|
||||
<div class='column main-column'>
|
||||
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
||||
<div class="canvas-background"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column right-column">
|
||||
<iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<div class="pull-bottom cursor-coordinates"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
|
||||
<div class="sticky-section-wrap">
|
||||
<iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<div class="drawer vertical-centerer">
|
||||
<div class="drawer-content" id="drawer-container">
|
||||
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<!-- <iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe> -->
|
||||
<iframe src="templates/settings/export.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dialog-container-wrapper">
|
||||
<div id="dialog-container">
|
||||
<iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<script type="text/javascript" src="piskel-boot.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,56 +0,0 @@
|
||||
(function () {
|
||||
/**
|
||||
* Depending on the value of the data-iframe-loader attribute, display or store the content of the iframe
|
||||
* @param {HTMLElement} iframe
|
||||
*/
|
||||
var processFrame = function (iframe) {
|
||||
var type = iframe.getAttribute('data-iframe-loader');
|
||||
if (type === "display") {
|
||||
displayFrame(iframe);
|
||||
} else if (type === "store") {
|
||||
storeFrame(iframe);
|
||||
} else {
|
||||
console.error('iframeLoader invalid type : ' + type);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Replace the existing iframe with the content of the iframe
|
||||
* If the iframe has a single root element, it will directly replace the iframe.
|
||||
* If there are several roots, a wrapping div will be created and will replace the iframe
|
||||
* @param {HTMLElement} iframe
|
||||
*/
|
||||
var displayFrame = function (iframe) {
|
||||
var div=document.createElement("div");
|
||||
div.innerHTML = iframe.contentWindow.document.body.innerHTML;
|
||||
if (div.children.length == 1) {
|
||||
div = div.children[0];
|
||||
}
|
||||
iframe.parentNode.replaceChild(div, iframe);
|
||||
};
|
||||
|
||||
/**
|
||||
* Load the iframe content as a <script type="text/html" id={iframe-src}>{iframe-content}</script>
|
||||
* The content can later be accessed by getting the script (through getElementById for instance) and reading innerHTML
|
||||
* @param {HTMLElement} iframe
|
||||
*/
|
||||
var storeFrame = function (iframe) {
|
||||
var script=document.createElement("script");
|
||||
script.setAttribute("type", "text/html");
|
||||
if (window.pskl && window.pskl.appEngineToken_) {
|
||||
script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
|
||||
} else {
|
||||
script.setAttribute("id", iframe.getAttribute("src"));
|
||||
}
|
||||
script.innerHTML = iframe.contentWindow.document.body.innerHTML;
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
document.body.appendChild(script);
|
||||
};
|
||||
|
||||
window.iframeloader = {
|
||||
onLoad : function (event) {
|
||||
var iframe = event.target || event.srcElement;
|
||||
processFrame(iframe);
|
||||
}
|
||||
}
|
||||
})();
|
||||
12
right-panel-proto/js/piskel-packaged-min.js
vendored
12
right-panel-proto/js/piskel-packaged-min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 414 B |
@ -1,77 +0,0 @@
|
||||
(function () {
|
||||
|
||||
window.onPiskelReady = function () {
|
||||
var loadingMask = document.getElementById('loading-mask');
|
||||
loadingMask.style.opacity = 0;
|
||||
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600)
|
||||
pskl.app.init();
|
||||
// cleanup
|
||||
delete window.pskl_exports;
|
||||
delete window.loadDebugScripts;
|
||||
delete window.done;
|
||||
};
|
||||
|
||||
var prefixPath = function (path) {
|
||||
if (window.pskl && window.pskl.appEngineToken_) {
|
||||
return '../' + path;
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
};
|
||||
|
||||
var loadScript = function (src, callback) {
|
||||
src = prefixPath(src);
|
||||
var script = window.document.createElement('script');
|
||||
script.setAttribute('src',src);
|
||||
script.setAttribute('onload',callback);
|
||||
window.document.body.appendChild(script);
|
||||
};
|
||||
|
||||
var loadStyle = function (src) {
|
||||
src = prefixPath(src);
|
||||
var link = document.createElement('link');
|
||||
link.setAttribute('href', src);
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('type', 'text/css');
|
||||
document.head.appendChild(link);
|
||||
};
|
||||
|
||||
if (window.location.href.indexOf("debug") != -1) {
|
||||
window.pskl_exports = {};
|
||||
var scriptIndex = 0;
|
||||
window.loadNextScript = function () {
|
||||
if (scriptIndex == window.pskl_exports.scripts.length) {
|
||||
window.onPiskelReady();
|
||||
} else {
|
||||
loadScript(window.pskl_exports.scripts[scriptIndex], "loadNextScript()");
|
||||
scriptIndex ++;
|
||||
}
|
||||
};
|
||||
loadScript("piskel-script-list.js", "loadNextScript()");
|
||||
|
||||
window.loadStyles = function () {
|
||||
var styles = window.pskl_exports.styles;
|
||||
for (var i = 0 ; i < styles.length ; i++) {
|
||||
loadStyle(styles[i]);
|
||||
}
|
||||
};
|
||||
loadScript("piskel-style-list.js", "loadStyles()");
|
||||
} else {
|
||||
var script;
|
||||
if (window.location.href.indexOf("pack") != -1) {
|
||||
script = "js/piskel-packaged.js";
|
||||
} else {
|
||||
script = "js/piskel-packaged-min.js";
|
||||
}
|
||||
loadStyle('css/piskel-style-packaged.css');
|
||||
|
||||
var loaderInterval = window.setInterval(function () {
|
||||
if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
|
||||
window.clearInterval(loaderInterval);
|
||||
loadScript(script, "onPiskelReady()");
|
||||
} else {
|
||||
console.log("waiting for templates to load ....");
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
})();
|
||||
@ -1,24 +0,0 @@
|
||||
<div id="cheatsheet-wrapper" style="display:none">
|
||||
<div class="cheatsheet-container">
|
||||
<div class="cheatsheet-section">
|
||||
<h3>Tool shortcuts</h3>
|
||||
<ul class="cheatsheet-tool-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-section">
|
||||
<h3>Misc shortcuts</h3>
|
||||
<ul class="cheatsheet-misc-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-section">
|
||||
<h3>Selection shortcuts</h3>
|
||||
<ul class="cheatsheet-selection-shortcuts"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="cheatsheet-link">Keyboard shortcuts</a>
|
||||
<script type="text/template" id="cheatsheet-shortcut-template">
|
||||
<li class="cheatsheet-shortcut">
|
||||
<div class="cheatsheet-icon {{shortcutIcon}}"></div>
|
||||
<span class="cheatsheet-key">{{shortcutKey}}</span>
|
||||
<span class="cheatsheet-description">{{shortcutDescription}}</span>
|
||||
</li>
|
||||
</script>
|
||||
@ -1,57 +0,0 @@
|
||||
<div class="palette-manager-wrapper">
|
||||
<h3 class="palette-manager-head">
|
||||
Palette manager
|
||||
<span class="palette-manager-close">X</span>
|
||||
</h3>
|
||||
<div class="palette-manager-body">
|
||||
<div class="palette-manager-drawer">
|
||||
<div class="palette-manager-actions">
|
||||
<button type="button" class="palette-manager-actions-button button " data-action="create">Create</button>
|
||||
<button type="button" class="palette-manager-actions-button button " data-action="save-all">Save all</button>
|
||||
</div>
|
||||
<ul class="palette-manager-list">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="palette-manager-details">
|
||||
<div class="palette-manager-details-head"></div>
|
||||
<div class="palette-manager-details-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/template" id="palette-details-head-template">
|
||||
<span class="palette-manager-details-head-name">{{name}}</span>
|
||||
<span class="action-icon edit-icon" title="edit name"> </span>
|
||||
<div class="palette-manager-details-head-actions">
|
||||
<button class="palette-manager-palette-button button button-primary" {{save:disabled}} data-action="save" type="button">Save</button>
|
||||
<button class="palette-manager-palette-button button " {{revert:disabled}} data-action="revert" type="button">Revert</button>
|
||||
<button class="palette-manager-palette-button button " {{delete:disabled}} data-action="delete" type="button">Delete</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="palette-color-card-template">
|
||||
<div class="palette-manager-color-card" data-color-id="{{colorId}}">
|
||||
<span class="palette-manager-delete-card" title="remove this color">X</span>
|
||||
<div class="palette-manager-color-square" style="background-color:{{hex}}"></div>
|
||||
<div class="palette-manager-color-details allow-user-select">
|
||||
<ul>
|
||||
<li>{{hex}}</li>
|
||||
<li>{{rgb}}</li>
|
||||
<li>{{hsl}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="palette-new-color-template">
|
||||
<div class="palette-manager-color-card {{classname}}">
|
||||
<div class="palette-manager-color-square">Add</div>
|
||||
<div class="palette-manager-color-details">
|
||||
<ul>
|
||||
<li>Hex</li>
|
||||
<li>RGB</li>
|
||||
<li>HSL</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
@ -1,34 +0,0 @@
|
||||
<div class="sticky-section left-sticky-section" id="tool-section">
|
||||
<div class="sticky-section-wrap">
|
||||
<div class="vertical-centerer">
|
||||
<script type="text/template" id="drawing-tool-item-template">
|
||||
<li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
|
||||
</script>
|
||||
<ul id="tools-container" class="tools-wrapper"></ul>
|
||||
<div class="palette-wrapper">
|
||||
<div
|
||||
class="tool-icon tool-color-picker"
|
||||
title="Primary - left mouse button"
|
||||
rel="tooltip"
|
||||
data-placement="right"
|
||||
>
|
||||
<input id="color-picker" class="color" type="text"/>
|
||||
</div>
|
||||
<div
|
||||
class="tool-icon tool-color-picker"
|
||||
title="Secondary - right mouse button"
|
||||
rel="tooltip"
|
||||
data-placement="right"
|
||||
>
|
||||
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
|
||||
</div>
|
||||
<div
|
||||
class="swap-colors-icon"
|
||||
title="Swap colors (X)"
|
||||
rel="tooltip"
|
||||
data-placement="right"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,7 +0,0 @@
|
||||
<div id="preview-list-wrapper" class="preview-list-wrapper">
|
||||
<div id="preview-list-scroller" class="preview-list-scroller">
|
||||
<ul class="preview-list" id="preview-list"></ul>
|
||||
</div>
|
||||
<div class="top-overflow"></div>
|
||||
<div class="bottom-overflow"></div>
|
||||
</div>
|
||||
@ -1,15 +0,0 @@
|
||||
<div class="toolbox-container layers-list-container">
|
||||
<h3 class="toolbox-title layers-title">Layers</h3>
|
||||
<div class="toolbox-button-container layers-button-container">
|
||||
<button class="button toolbox-button" data-action="add" >Add</button>
|
||||
<button class="button toolbox-button" data-action="delete" >Delete</button>
|
||||
<button class="button toolbox-button layers-button-arrow" data-action="up" >↑</button>
|
||||
<button class="button toolbox-button layers-button-arrow" data-action="down" >↓</button>
|
||||
</div>
|
||||
<script type="text/template" id="layer-item-template">
|
||||
<li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}
|
||||
<span class="action-icon edit-icon" title="edit name"> </span>
|
||||
</li>
|
||||
</script>
|
||||
<ul class="layers-list"></ul>
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
<div class="toolbox-container palettes-list-container">
|
||||
<h3 class="toolbox-title palettes-title" style="overflow:hidden">
|
||||
<span style="line-height:24px ">Palettes</span>
|
||||
<select class="palettes-list-select">
|
||||
<option value="__current-colors">Current colors</option>
|
||||
<option value="__manage-palettes">Create custom palettes</option>
|
||||
<optgroup class="palettes-list-select-group" label="Custom palettes">
|
||||
</optgroup>
|
||||
</select>
|
||||
</h3>
|
||||
<div class="palettes-list-colors"></div>
|
||||
<script type="text/template" id="palette-color-template">
|
||||
<div class="palettes-list-color" data-color="{{color}}" title="{{color}}">
|
||||
<div data-color="{{color}}" style="background:{{color}}"></div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<div id="animated-preview-container" class="preview-container">
|
||||
<div id="animated-preview-canvas-container" class="canvas-container">
|
||||
<div class="canvas-background"></div>
|
||||
</div>
|
||||
<div>
|
||||
<span id="display-fps" class="display-fps"></span>
|
||||
<input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,53 +0,0 @@
|
||||
<div class="vertical-centerer">
|
||||
|
||||
|
||||
<div
|
||||
data-setting="user"
|
||||
class="tool-icon gear-icon"
|
||||
title="Preferences"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="resize"
|
||||
class="tool-icon resize-icon"
|
||||
title="Modify Canvas"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="save"
|
||||
class="tool-icon save-icon"
|
||||
title="Save to gallery"
|
||||
rel="tooltip" data-placement="left" >
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="import"
|
||||
class="tool-icon local-storage-icon"
|
||||
title="Import piskel"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
data-setting="localstorage"
|
||||
class="tool-icon local-storage-icon"
|
||||
title="Browse piskels saved locally"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div> -->
|
||||
|
||||
<!-- <div
|
||||
data-setting="gif"
|
||||
class="tool-icon upload-cloud-icon"
|
||||
title="Export Animation"
|
||||
rel="tooltip" data-placement="left">
|
||||
<span class="label">ANIM</span>
|
||||
</div> -->
|
||||
|
||||
<div
|
||||
data-setting="png"
|
||||
class="tool-icon import-icon"
|
||||
title="Export"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
</div>
|
||||
@ -1,49 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Canvas settings:
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>Background:</label>
|
||||
<div id="background-picker-wrapper" class="background-picker-wrapper">
|
||||
<div class="background-picker light-picker-background" data-background-class="light-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="light / high contrast">
|
||||
</div>
|
||||
<div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / low contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="dark / low contrast">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label for="grid-width">Grid :</label>
|
||||
<select id="grid-width">
|
||||
<option value="0">Disabled</option>
|
||||
<option value="1">Enabled - 1px wide</option>
|
||||
<option value="2">Enabled - 2px wide</option>
|
||||
<option value="3">Enabled - 3px wide</option>
|
||||
<option value="4">Enabled - 4px wide</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-title">
|
||||
Overlay:
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label for="overlay">Display :</label>
|
||||
<select id="overlay">
|
||||
<option value="no-overlay">No overlay</option>
|
||||
<option value="onion-skin">Onion skin</option>
|
||||
<option value="layer-preview">Layer preview</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="settings-item">
|
||||
<label for="tiled-preview">Display tiled preview :</label>
|
||||
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Export Spritesheet
|
||||
</div>
|
||||
<div class="png-export-preview"></div>
|
||||
<div class="settings-item">
|
||||
<span class="settings-description">PNG with all frames side by side.</span>
|
||||
<button type="button" class="button button-primary png-download-button">Download PNG</button>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="settings-description">ZIP with one PNG file per frame.</span>
|
||||
<div>
|
||||
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Export to Animated GIF
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" class="gif-export-form">
|
||||
<div style="margin:10px 0;">
|
||||
<label>Select resolution:</label>
|
||||
<select class="gif-export-select-resolution"></select>
|
||||
<script type="text/template" id="gif-export-option-template">
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
</script>
|
||||
</div>
|
||||
<div style="margin:10px 0;">
|
||||
<button type="button" class="button button-primary gif-download-button">Download GIF</button>
|
||||
<button type="button" class="button button gif-upload-button">Get public URL</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="clearfix">
|
||||
<div class="gif-export-preview"></div>
|
||||
<div class="gif-upload-status"></div>
|
||||
</div>
|
||||
<span class="gif-export-progress-status"></span>
|
||||
<div class="gif-export-progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,51 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Open Piskel Project
|
||||
</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>
|
||||
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary open-piskel-button">Open...</button>
|
||||
<span class="file-input-open-piskel-status"></span>
|
||||
<input style="display:none"
|
||||
type="file" name="open-piskel-input"
|
||||
value="file" accept=".piskel"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Import From Picture
|
||||
</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 class="import-section">
|
||||
<button type="button" class="button button-primary file-input-button">Browse...</button>
|
||||
<span class="file-input-status"></span>
|
||||
<input style="display:none"
|
||||
type="file" name="file-upload-input"
|
||||
value="file" accept="image/*"/>
|
||||
</div>
|
||||
|
||||
<div class="import-options">
|
||||
<div class="import-section">
|
||||
<span class="import-section-title import-section-title-small" style="vertical-align:top">Info :</span>
|
||||
<div class="import-section-preview"></div>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<span class="import-section-title import-section-title-small">Size :</span>
|
||||
<input type="text" class="textfield import-size-field" name="resize-width"/>x
|
||||
<input type="text" class="textfield import-size-field" name="resize-height"/>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<span class="import-section-title">Smooth resize :</span>
|
||||
<input type="checkbox" checked="checked" name="smooth-resize-checkbox" value="1"/>
|
||||
</div>
|
||||
<input type="submit" name="import-submit" class="button button-primary import-button" value="Import" />
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,18 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Browse Local Piskels
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<table class="local-piskels-list">
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script type="text/template" id="local-storage-item-template">
|
||||
<tr class="local-piskel-item">
|
||||
<td class="local-piskel-name">{{name}}</td>
|
||||
<td class="local-piskel-save-date">{{date}}</td>
|
||||
<td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
|
||||
<td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
|
||||
</tr>
|
||||
</script>
|
||||
</div>
|
||||
@ -1,20 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Resize drawing area
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" name="resize-form">
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title resize-section-title-small">Size :</span>
|
||||
<input type="text" class="textfield resize-size-field" name="resize-width"/>x
|
||||
<input type="text" class="textfield resize-size-field" name="resize-height"/>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title resize-section-title-small">Resize canvas content : </span>
|
||||
<input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
|
||||
</div>
|
||||
<input type="submit" class="button button-primary resize-button" value="Resize" />
|
||||
<input type="button" class="button resize-cancel-button" value="Cancel" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,38 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="settings-form-section save-public-section">
|
||||
<label class="row">
|
||||
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">Save online</div>
|
||||
<div class="settings-item">
|
||||
<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-item">
|
||||
<div id="save-local-status" class="save-status"></div>
|
||||
<input type="button" class="button" id="save-local-button" value="Download Piskel Project" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script type="text/template" id="save-please-login-partial">
|
||||
<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>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user