mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
update right drawer
This commit is contained in:
jdescottes
parent
2be28f4d3d
commit
978d6ef832
@ -34,6 +34,10 @@ ul, li {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color:gold;
|
||||
}
|
||||
body {
|
||||
background: radial-gradient(circle, #000, #373737);
|
||||
/* 16/06/2013 : -webkit still needed for
|
||||
@ -47,6 +51,10 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.allow-user-select {
|
||||
-webkit-touch-callout: initial;
|
||||
-webkit-user-select: initial;
|
||||
@ -428,9 +436,9 @@ body {
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
.tool-icon.upload-cloud-icon {
|
||||
background-image: url(../img/cloud_export.png);
|
||||
background-position: 4px 0px;
|
||||
.tool-icon.export-icon {
|
||||
background-image: url(../img/export.png);
|
||||
background-position: 7px 5px;
|
||||
background-size: 36px 36px;
|
||||
position: relative;
|
||||
}
|
||||
@ -449,7 +457,7 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-cloud-icon .label {
|
||||
.tool-icon .label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 4px;
|
||||
@ -506,6 +514,7 @@ body {
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px #aaa solid;
|
||||
padding-bottom: 5px;
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.settings-description {
|
||||
@ -521,6 +530,10 @@ body {
|
||||
margin : 10px 0;
|
||||
}
|
||||
|
||||
[name*=checkbox] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/************************************************************************************************/
|
||||
/* Application settings */
|
||||
/************************************************************************************************/
|
||||
@ -583,13 +596,6 @@ body {
|
||||
background:gold;
|
||||
}
|
||||
|
||||
.gif-export-preview,
|
||||
.png-export-preview {
|
||||
margin-top:20px;
|
||||
max-width:240px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.png-export-preview {
|
||||
margin:10px 0;
|
||||
overflow: hidden;
|
||||
@ -603,6 +609,38 @@ body {
|
||||
margin : 10px 0;
|
||||
}
|
||||
|
||||
.gif-upload-status,
|
||||
.gif-export-preview {
|
||||
float : left;
|
||||
}
|
||||
|
||||
.gif-export-preview {
|
||||
|
||||
}
|
||||
|
||||
.gif-upload-status {
|
||||
width: 180px;
|
||||
margin-left: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.gif-export-preview,
|
||||
.png-export-preview {
|
||||
margin-top:10px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.gif-export-preview,
|
||||
.png-export-preview {
|
||||
max-width:32px;
|
||||
max-height:32px;
|
||||
}
|
||||
|
||||
.png-export-preview {
|
||||
max-width:240px;
|
||||
}
|
||||
|
||||
.preview-upload-ongoing:before{
|
||||
content: "Upload ongoing ...";
|
||||
position: absolute;
|
||||
@ -623,7 +661,7 @@ body {
|
||||
|
||||
.import-section,
|
||||
.resize-section {
|
||||
margin: 15px 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.import-section-title {
|
||||
@ -631,7 +669,7 @@ body {
|
||||
}
|
||||
|
||||
.import-section-title-small {
|
||||
width: 35px;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.import-section-disabled {
|
||||
@ -663,12 +701,11 @@ body {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.file-input-status {
|
||||
.import-image-file-name {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
overflow: hidden;
|
||||
|
||||
height: 1.5rem;
|
||||
height: 2rem;
|
||||
word-break : break-all;
|
||||
vertical-align: middle;
|
||||
font-style: italic;
|
||||
@ -676,60 +713,31 @@ body {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.save-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#save-status {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.status {
|
||||
height: 1.5rem;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[name=smooth-resize-checkbox] {
|
||||
margin : 0 8px;
|
||||
}
|
||||
|
||||
[name*=checkbox] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/************************************************************************************************/
|
||||
/* Browse local piskels panel */
|
||||
/* Save panel */
|
||||
/************************************************************************************************/
|
||||
|
||||
.local-piskels-list {
|
||||
.save-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.local-piskel-item {
|
||||
height: 3em;
|
||||
.save-status {
|
||||
margin-bottom: 10px;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.local-piskel-name {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.local-piskel-save-date {
|
||||
font-weight : normal;
|
||||
}
|
||||
|
||||
.local-piskels-list a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.local-piskels-list a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.local-piskel-load-link {
|
||||
color : gold;
|
||||
}
|
||||
.local-piskel-delete-link {
|
||||
color : red;
|
||||
.save-file-name {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tools-wrapper,
|
||||
@ -1131,16 +1139,16 @@ body {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transition: opacity 0.5s;
|
||||
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
#dialog-container-wrapper.animated {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
#dialog-container-wrapper.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
#dialog-container {
|
||||
@ -1148,20 +1156,74 @@ body {
|
||||
height: 100%;
|
||||
|
||||
margin-top: -1500px;
|
||||
transition:margin-top 0.5s;
|
||||
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing : border-box;
|
||||
|
||||
border-radius: 3px;
|
||||
background: rgba(0,0,0,1);
|
||||
border : 3px solid gold;
|
||||
background: #444;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.animated #dialog-container {
|
||||
transition:margin-top 0.5s;
|
||||
}
|
||||
|
||||
.show #dialog-container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#dialog-container.browse-local {
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
top : 50%;
|
||||
left : 50%;
|
||||
position : absolute;
|
||||
margin-left: -350px;
|
||||
}
|
||||
|
||||
.show #dialog-container.browse-local {
|
||||
margin-top: -250px;
|
||||
}
|
||||
|
||||
#dialog-container.import-image {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
top : 50%;
|
||||
left : 50%;
|
||||
position : absolute;
|
||||
margin-left: -250px;
|
||||
}
|
||||
|
||||
.show #dialog-container.import-image {
|
||||
margin-top: -150px;
|
||||
}
|
||||
|
||||
.dialog-wrapper {
|
||||
position : relative;
|
||||
}
|
||||
|
||||
.dialog-head {
|
||||
width: 100%;
|
||||
background: gold;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
font-size: 1.8em;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 45px;
|
||||
margin-right: 10px;
|
||||
font-size: 1.3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.palette-manager-wrapper {
|
||||
height: 100%;
|
||||
@ -1385,6 +1447,37 @@ body {
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/************************************************************************************************/
|
||||
/* Browse local piskels panel */
|
||||
/************************************************************************************************/
|
||||
|
||||
.local-piskels-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.local-piskel-item {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.local-piskel-name {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.local-piskel-save-date {
|
||||
font-weight : normal;
|
||||
}
|
||||
|
||||
.local-piskels-list a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.local-piskels-list a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.local-piskel-load-button,
|
||||
.local-piskel-delete-button {
|
||||
width : 75px;
|
||||
}
|
||||
.toolbox-container {
|
||||
border: 4px solid #888;
|
||||
font-size: medium;
|
||||
BIN
img/export.png
Normal file
BIN
img/export.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 734 B |
31
index.html
31
index.html
@ -28,11 +28,11 @@
|
||||
<!-- do not delete, do not move :) -->
|
||||
<!--body-main-start-->
|
||||
<div id="main-wrapper" class="main-wrapper">
|
||||
<iframe src="templates-2014-07-12-12-20/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<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-2014-07-12-12-20/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
</div>
|
||||
|
||||
<div class='column main-column'>
|
||||
@ -42,25 +42,24 @@
|
||||
</div>
|
||||
|
||||
<div class="column right-column">
|
||||
<iframe src="templates-2014-07-12-12-20/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<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-2014-07-12-12-20/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<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-2014-07-12-12-20/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates-2014-07-12-12-20/settings/export-png.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<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>
|
||||
@ -69,11 +68,13 @@
|
||||
|
||||
<div id="dialog-container-wrapper">
|
||||
<div id="dialog-container">
|
||||
<iframe src="templates-2014-07-12-12-20/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/dialogs/manage-palettes.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/dialogs/import-image.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/dialogs/browse-local.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<iframe src="templates-2014-07-12-12-20/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<!--body-main-end-->
|
||||
<!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
|
||||
<!-- do not delete, do not move :) -->
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
13
js/piskel-packaged-min-2014-07-12-06-35.js
Normal file
13
js/piskel-packaged-min-2014-07-12-06-35.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
17
js/piskel-packaged-min.js
vendored
17
js/piskel-packaged-min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
(function () {
|
||||
|
||||
var version = '-2014-07-12-12-20';
|
||||
var version = '-2014-07-12-06-35';
|
||||
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
|
||||
if (versionHasNotBeenReplaced) {
|
||||
version = '';
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Export to Animated GIF
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" class="gif-export-form">
|
||||
<label>Select resolution:</label>
|
||||
<script type="text/template" id="gif-export-radio-template">
|
||||
<label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
|
||||
{{label}}</label>
|
||||
</script>
|
||||
<div class="gif-export-radio-group"></div>
|
||||
|
||||
<button type="button" class="button button-primary gif-download-button">Download GIF</button>
|
||||
<button type="button" class="button button gif-upload-button">Export online</button>
|
||||
</form>
|
||||
<span class="gif-export-progress-status"></span>
|
||||
<div class="gif-export-progress-bar"></div>
|
||||
<div class="gif-export-preview"></div>
|
||||
<div class="gif-upload-status"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Export Spritesheet as PNG
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>Preview : </span>
|
||||
<div class="png-export-preview"></div>
|
||||
<div class="png-export-radio-group"></div>
|
||||
<button type="button" class="button button-primary png-download-button">Download PNG</button>
|
||||
<button type="button" class="button png-upload-button">Export online</button>
|
||||
<!-- <input type="button" class="button png-download-button" value="Download" /> -->
|
||||
<div class="png-upload-status"></div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Export Spritesheet as ZIP
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span class="settings-description">A ZIP archive will be created with one PNG file per frame.</span>
|
||||
<div>
|
||||
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,34 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Import Picture
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" name="import-form">
|
||||
<div class="import-section">
|
||||
<span class="import-section-title import-section-title-small">File :</span>
|
||||
<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-section import-section-disabled">
|
||||
<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 import-section-disabled">
|
||||
<span class="import-section-title import-section-title-small">Size :</span>
|
||||
<input type="text" disabled="disabled" class="textfield import-size-field" name="resize-width"/>x
|
||||
<input type="text" disabled="disabled" class="textfield import-size-field" name="resize-height"/>
|
||||
</div>
|
||||
<div class="import-section import-section-disabled">
|
||||
<span class="import-section-title">Smooth resize :</span>
|
||||
<input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox" value="1"/>
|
||||
</div>
|
||||
<input type="submit" name="import-submit" disabled="disabled" class="button button-primary import-button" value="Import" />
|
||||
|
||||
<span class="settings-description" style="margin-top:5px;">Animated GIFs will be split in several frames. Other images will be imported as a single-frame.</span>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">Save</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" name="save-form">
|
||||
<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">
|
||||
<label class="row">
|
||||
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<input type="submit" class="button button-primary" id="save-cloud-button" value="Upload" />
|
||||
<input type="button" class="button" id="save-local-button" value="Local save" />
|
||||
<div id="save-status" class="status"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
27
templates/dialogs/browse-local.html
Normal file
27
templates/dialogs/browse-local.html
Normal file
@ -0,0 +1,27 @@
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Browse Local Piskels
|
||||
<span class="palette-manager-close dialog-close">X</span>
|
||||
</h3>
|
||||
<div style="padding:10px 20px; font-size:1.5em">
|
||||
<table class="local-piskels-list">
|
||||
<thead>
|
||||
<tr class="local-piskel-list-head">
|
||||
<td class="local-piskel-name">Name</td>
|
||||
<td class="local-piskel-save-date">Date</td>
|
||||
<td colspan=2>Actions</td>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<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><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
|
||||
<td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
|
||||
</tr>
|
||||
</script>
|
||||
</div>
|
||||
27
templates/dialogs/import-image.html
Normal file
27
templates/dialogs/import-image.html
Normal file
@ -0,0 +1,27 @@
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Import Image
|
||||
<span class="palette-manager-close dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="import-options" style="padding:10px 20px; font-size:1.5em">
|
||||
<form action="" method="POST" name="import-image-form">
|
||||
<div class="import-section">
|
||||
<span class="import-section-title import-section-title-small">Name :</span><span class="import-image-file-name"></span>
|
||||
</div>
|
||||
<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" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="palette-manager-wrapper">
|
||||
<h3 class="palette-manager-head">
|
||||
<h3 class="palette-manager-head dialog-head">
|
||||
Palette manager
|
||||
<span class="palette-manager-close">X</span>
|
||||
<span class="palette-manager-close dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="palette-manager-body">
|
||||
<div class="palette-manager-drawer">
|
||||
@ -1,10 +1,5 @@
|
||||
<div class="vertical-centerer">
|
||||
<div
|
||||
data-setting="save"
|
||||
class="tool-icon save-icon"
|
||||
title="Save to gallery"
|
||||
rel="tooltip" data-placement="left" >
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
data-setting="user"
|
||||
@ -16,37 +11,43 @@
|
||||
<div
|
||||
data-setting="resize"
|
||||
class="tool-icon resize-icon"
|
||||
title="Resize"
|
||||
title="Resize the drawing area"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="save"
|
||||
class="tool-icon save-icon"
|
||||
title="Save to your gallery, save locally<br/>or export as a file"
|
||||
rel="tooltip" data-placement="left" >
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="png"
|
||||
class="tool-icon export-icon"
|
||||
title="Export as Image, as Spritesheet<br/>or as Animated GIF"
|
||||
rel="tooltip" data-placement="left">
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-setting="import"
|
||||
class="tool-icon import-icon"
|
||||
title="Import an existing picture"
|
||||
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> -->
|
||||
|
||||
<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 upload-cloud-icon"
|
||||
title="Export Spritesheet"
|
||||
rel="tooltip" data-placement="left">
|
||||
<span class="label">SHEET</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
40
templates/settings/export.html
Normal file
40
templates/settings/export.html
Normal file
@ -0,0 +1,40 @@
|
||||
<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>
|
||||
55
templates/settings/import.html
Normal file
55
templates/settings/import.html
Normal file
@ -0,0 +1,55 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Load from Browser
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>Load a <span style="font-weight:bold;color:white">local piskel</span> saved in this Browser</span>
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary browse-local-button">Browse local saves</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Load .piskel file
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<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">Browse .piskel files</button>
|
||||
<span class="file-input-open-piskel-status"></span>
|
||||
<input style="display:none"
|
||||
type="file" name="open-piskel-input"
|
||||
value="file" accept=".piskel"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Import From Picture
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div style="margin-top:5px;margin-bottom:5px;">Supports : <span style="font-weight:bold;color:white">PNG, JPG, BMP, Animated GIF ...</span></div>
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary file-input-button">Browse images</button>
|
||||
<input style="display:none"
|
||||
type="file" name="file-upload-input"
|
||||
value="file" accept="image/*"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Recover recent sessions
|
||||
</div>
|
||||
<div class="settings-item previous-session">
|
||||
<!-- <span>Load a <span style="font-weight:bold;color:white">backup</span> from a recent session</span>
|
||||
<div class="import-section">
|
||||
<button type="button" class="button button-primary load-recent-button">Browse recent sessions</button>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<script type="text/template" id="previous-session-info-template">
|
||||
<div>
|
||||
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
|
||||
<div style="margin-top:10px;">
|
||||
<button type="button" class="button button-primary restore-session-button">Restore</button>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
42
templates/settings/save.html
Normal file
42
templates/settings/save.html
Normal file
@ -0,0 +1,42 @@
|
||||
<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" style="overflow:hidden">
|
||||
<label class="row" style="float:left;line-height:28px;">Title : </label>
|
||||
<input id="save-name" type="text" class="save-field textfield" style="float:left;width:200px;margin-left:10px;"/>
|
||||
</div>
|
||||
<div class="settings-form-section">
|
||||
<textarea id="save-description" class="save-field textfield" placeholder="Description ..."></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="button" class="button button-primary" id="save-online-button" value="Upload" />
|
||||
<div id="save-online-status" class="save-status"></div>
|
||||
</div>
|
||||
<div class="settings-title">Save offline in Browser</div>
|
||||
<div class="settings-item">
|
||||
<div id="save-browser-status" class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
|
||||
<input type="button" class="button button-primary" id="save-browser-button" value="Save in Browser" />
|
||||
</div>
|
||||
<div class="settings-title">Save offline as File</div>
|
||||
<div class="settings-item">
|
||||
<div id="save-file-status" class="save-status"></div>
|
||||
<input type="button" class="button" id="save-file-button" value="Save as File" />
|
||||
</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-file-status-template">
|
||||
<span>Your piskel will be downloaded as <span class="save-file-name">{{name}}<span></span>
|
||||
</script>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user