mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Issue #344 : Remove iframes loader, Gruntf cleanup
This commit is contained in:
jdescottes
parent
dd1d2bf441
commit
7e1451fa8d
6
.gitignore
vendored
6
.gitignore
vendored
@ -21,8 +21,14 @@ diff.txt
|
||||
|
||||
# build destination
|
||||
dest
|
||||
dest-dev
|
||||
dest-tmp
|
||||
build/closure/closure_compiled_binary.js
|
||||
|
||||
# spriting artifacts
|
||||
src/img/icons.png
|
||||
src/css/icons.css
|
||||
|
||||
# plato report directory
|
||||
report
|
||||
|
||||
|
||||
138
Gruntfile.js
138
Gruntfile.js
@ -70,14 +70,21 @@ module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
clean: {
|
||||
before: ['dest']
|
||||
prod: ['dest', 'dest-tmp'],
|
||||
dev: ['dest-dev', 'dest-tmp']
|
||||
},
|
||||
|
||||
/**
|
||||
* STYLE CHECKS
|
||||
*/
|
||||
|
||||
leadingIndent : {
|
||||
options: {
|
||||
indentation : "spaces"
|
||||
},
|
||||
css : ['src/css/**/*.css']
|
||||
},
|
||||
|
||||
jscs : {
|
||||
options : {
|
||||
"preset": "google",
|
||||
@ -89,6 +96,7 @@ module.exports = function(grunt) {
|
||||
},
|
||||
js : [ 'src/js/**/*.js' , '!src/js/**/lib/**/*.js' ]
|
||||
},
|
||||
|
||||
jshint: {
|
||||
options: {
|
||||
undef : true,
|
||||
@ -105,11 +113,17 @@ module.exports = function(grunt) {
|
||||
'!src/js/**/lib/**/*.js' // Exclude lib folder (note the leading !)
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* SERVERS, BROWSER LAUNCHERS
|
||||
*/
|
||||
|
||||
express: {
|
||||
test: getExpressConfig(['src', 'test'], 9991),
|
||||
test: getExpressConfig(['dest-dev', 'test'], 9991),
|
||||
regular: getExpressConfig('dest', 9001),
|
||||
debug: getExpressConfig(['src', 'test'], 9901)
|
||||
debug: getExpressConfig(['dest-dev', 'test'], 9901)
|
||||
},
|
||||
|
||||
open : {
|
||||
regular : {
|
||||
path : 'http://' + ip + ':9001/'
|
||||
@ -118,6 +132,7 @@ module.exports = function(grunt) {
|
||||
path : 'http://' + ip + ':9901/?debug'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
prod: {
|
||||
files: ['src/**/*.*'],
|
||||
@ -127,17 +142,26 @@ module.exports = function(grunt) {
|
||||
}
|
||||
},
|
||||
dev: {
|
||||
files: ['src/img/**/*.*'],
|
||||
tasks: ['sprite'],
|
||||
files: ['src/**/*.*'],
|
||||
tasks: ['build-dev'],
|
||||
options: {
|
||||
spawn: false
|
||||
}
|
||||
}
|
||||
},
|
||||
ghost : {
|
||||
'travis' : getCasperConfig('travis'),
|
||||
'local' : getCasperConfig('local')
|
||||
|
||||
/**
|
||||
* BUILD STEPS
|
||||
*/
|
||||
|
||||
sprite:{
|
||||
all : {
|
||||
src: 'src/img/icons/**/*.png',
|
||||
dest: 'src/img/icons.png',
|
||||
destCss: 'src/css/icons.css'
|
||||
}
|
||||
},
|
||||
|
||||
concat : {
|
||||
js : {
|
||||
options : {
|
||||
@ -151,18 +175,27 @@ module.exports = function(grunt) {
|
||||
dest : 'dest/css/piskel-style-packaged' + version + '.css'
|
||||
}
|
||||
},
|
||||
|
||||
uglify : {
|
||||
options : {
|
||||
mangle : true
|
||||
},
|
||||
js : {
|
||||
files : {
|
||||
'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
|
||||
'dest-tmp/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
includereplace: {
|
||||
all: {
|
||||
src: 'src/index.html',
|
||||
dest: 'dest-tmp/index.html'
|
||||
}
|
||||
},
|
||||
|
||||
replace: {
|
||||
main: {
|
||||
piskelBoot: {
|
||||
options: {
|
||||
patterns: [
|
||||
{
|
||||
@ -172,16 +205,14 @@ module.exports = function(grunt) {
|
||||
]
|
||||
},
|
||||
files: [
|
||||
{src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'}
|
||||
{src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'},
|
||||
{src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot' + version +'.js'}
|
||||
]
|
||||
},
|
||||
editor: {
|
||||
// main-partial.html is used when embedded in piskelapp.com
|
||||
mainPartial: {
|
||||
options: {
|
||||
patterns: [
|
||||
{
|
||||
match: /templates\//g,
|
||||
replacement: "../templates"+version+"/"
|
||||
},{
|
||||
patterns: [{
|
||||
match: /piskel-boot.js/g,
|
||||
replacement: "../piskel-boot"+version+".js"
|
||||
},{
|
||||
@ -200,29 +231,57 @@ module.exports = function(grunt) {
|
||||
]
|
||||
},
|
||||
files: [
|
||||
{src: ['src/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
|
||||
// src/index.html should already have been moved by the includereplace task
|
||||
{src: ['dest/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
copy: {
|
||||
main: {
|
||||
prod: {
|
||||
files: [
|
||||
{src: ['dest/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
|
||||
{src: ['dest/piskel-boot.js'], dest: 'dest/piskel-boot' + version + '.js'},
|
||||
// dest/js/piskel-packaged-min.js should have been created by the uglify task
|
||||
{src: ['dest-tmp/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
|
||||
{src: ['dest-tmp/index.html'], dest: 'dest/index.html'},
|
||||
{src: ['src/logo.png'], dest: 'dest/logo.png'},
|
||||
{src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
|
||||
{src: ['src/js/lib/gif/gif.ie.worker.js'], dest: 'dest/js/lib/gif/gif.ie.worker.js'},
|
||||
{expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
|
||||
{expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
|
||||
{expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
|
||||
{expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
|
||||
]
|
||||
},
|
||||
dev: {
|
||||
files: [
|
||||
// in dev copy everything to dest-dev
|
||||
{src: ['dest-tmp/index.html'], dest: 'dest-dev/index.html'},
|
||||
{src: ['src/piskel-boot.js'], dest: 'dest-dev/piskel-boot.js'},
|
||||
{src: ['src/piskel-script-list.js'], dest: 'dest-dev/piskel-script-list.js'},
|
||||
{src: ['src/piskel-style-list.js'], dest: 'dest-dev/piskel-style-list.js'},
|
||||
{expand: true, src: ['js/**'], cwd: 'src/', dest: 'dest-dev/', filter: 'isFile'},
|
||||
{expand: true, src: ['css/**'], cwd: 'src/', dest: 'dest-dev/', filter: 'isFile'},
|
||||
{expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest-dev/', filter: 'isFile'},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* TESTING
|
||||
*/
|
||||
|
||||
karma: {
|
||||
unit: {
|
||||
configFile: 'karma.conf.js'
|
||||
}
|
||||
},
|
||||
|
||||
ghost : {
|
||||
'travis' : getCasperConfig('travis'),
|
||||
'local' : getCasperConfig('local')
|
||||
},
|
||||
|
||||
/**
|
||||
* DESKTOP BUILDS
|
||||
*/
|
||||
|
||||
nodewebkit: {
|
||||
windows : {
|
||||
options: {
|
||||
@ -237,23 +296,12 @@ module.exports = function(grunt) {
|
||||
macos : {
|
||||
options: {
|
||||
platforms : ['osx64'],
|
||||
// had performance issues with 0.11.5 on mac os, need to test new versions/new hardware
|
||||
version : "0.10.5",
|
||||
build_dir: './dest/desktop/'
|
||||
},
|
||||
src: ['./dest/**/*', "./package.json", "!./dest/desktop/"]
|
||||
}
|
||||
},
|
||||
/**
|
||||
*
|
||||
* SPRITING
|
||||
*
|
||||
*/
|
||||
sprite:{
|
||||
all : {
|
||||
src: 'src/img/icons/**/*.png',
|
||||
dest: 'src/img/icons.png',
|
||||
destCss: 'src/css/icons.css'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -264,19 +312,22 @@ module.exports = function(grunt) {
|
||||
grunt.registerTask('unit-test', ['karma']);
|
||||
|
||||
// Validate & Test
|
||||
grunt.registerTask('test-travis', ['lint', 'unit-test', 'express:test', 'ghost:travis']);
|
||||
grunt.registerTask('test-travis', ['lint', 'unit-test', 'build-dev', 'express:test', 'ghost:travis']);
|
||||
// Validate & Test (faster version) will NOT work on travis !!
|
||||
grunt.registerTask('test-local', ['lint', 'unit-test', 'express:test', 'ghost:local']);
|
||||
grunt.registerTask('test-local-nolint', ['unit-test', 'express:test', 'ghost:local']);
|
||||
grunt.registerTask('test-local', ['lint', 'unit-test', 'build-dev', 'express:test', 'ghost:local']);
|
||||
grunt.registerTask('test-local-nolint', ['unit-test', 'build-dev', 'express:test', 'ghost:local']);
|
||||
|
||||
grunt.registerTask('test', ['test-travis']);
|
||||
grunt.registerTask('precommit', ['test-local']);
|
||||
|
||||
grunt.registerTask('build', ['sprite', 'concat:js', 'concat:css', 'uglify', 'replace:main', 'replace:editor', 'copy']);
|
||||
grunt.registerTask('build-index.html', ['includereplace']);
|
||||
grunt.registerTask('merge-statics', ['concat:js', 'concat:css', 'uglify']);
|
||||
grunt.registerTask('replace-all', ['replace:piskelBoot', 'replace:mainPartial']);
|
||||
grunt.registerTask('build', ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace-all', 'copy:prod']);
|
||||
grunt.registerTask('build-dev', ['clean:dev', 'sprite', 'build-index.html', 'copy:dev']);
|
||||
|
||||
// Validate & Build
|
||||
grunt.registerTask('default', ['clean:before', 'lint', 'build']);
|
||||
grunt.registerTask('caca', ['sprite']);
|
||||
grunt.registerTask('default', ['lint', 'build']);
|
||||
|
||||
// Build stand alone app with nodewebkit
|
||||
grunt.registerTask('desktop', ['default', 'nodewebkit:windows']);
|
||||
@ -284,8 +335,7 @@ module.exports = function(grunt) {
|
||||
|
||||
// Start webserver and watch for changes
|
||||
grunt.registerTask('serve', ['build', 'express:regular', 'open:regular', 'watch:prod']);
|
||||
|
||||
// Start webserver on src folder, in debug mode
|
||||
grunt.registerTask('serve-debug', ['sprite', 'express:debug', 'open:debug', 'watch:dev']);
|
||||
grunt.registerTask('serve-debug', ['build-dev', 'express:debug', 'open:debug', 'watch:dev']);
|
||||
grunt.registerTask('play', ['serve-debug']);
|
||||
};
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
"grunt-contrib-watch": "0.6.1",
|
||||
"grunt-express": "1.4.1",
|
||||
"grunt-ghost": "1.1.0",
|
||||
"grunt-include-replace": "^3.2.0",
|
||||
"grunt-jscs": "^1.6.0",
|
||||
"grunt-karma": "^0.10.1",
|
||||
"grunt-leading-indent": "^0.2.0",
|
||||
|
||||
@ -1,197 +0,0 @@
|
||||
/*
|
||||
Icon classes can be used entirely standalone. They are named after their original file names.
|
||||
|
||||
```html
|
||||
<!-- `display: block` sprite -->
|
||||
<div class="icon-home"></div>
|
||||
|
||||
<!-- `display: inline-block` sprite -->
|
||||
<img class="icon-home" />
|
||||
```
|
||||
*/
|
||||
.icon-common-keyboard-gold {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -230px 0px;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
}
|
||||
.icon-common-swapcolors-arrow-grey {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -230px -46px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon-frame-dragndrop-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -198px -184px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.icon-frame-duplicate-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -168px -184px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.icon-frame-plus-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -230px -20px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.icon-frame-recyclebin-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -138px -184px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.icon-minimap-popup-preview-arrow-gold {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -230px -82px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon-minimap-popup-preview-arrow-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -230px -64px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon-settings-export-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -92px -92px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-settings-gear-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -138px 0px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-settings-open-folder-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -138px -46px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-settings-resize-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -138px -92px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-settings-save-white {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: 0px -138px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-circle {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -46px -138px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-colorpicker {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -92px -138px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-colorswap {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: 0px 0px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-dithering {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -184px 0px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-eraser {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -184px -46px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-lasso-select {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -184px -92px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-lighten {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -184px -138px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-move {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: 0px -184px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-paint-bucket {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -46px -184px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-pen {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -92px -184px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-rectangle-select {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -138px -138px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-rectangle {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -46px -92px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-shape-select {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: 0px -92px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-stroke {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -92px -46px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-vertical-mirror-pen {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -92px 0px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-clone {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -46px -46px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-flip {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: 0px -46px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.icon-tool-rotate {
|
||||
background-image: url(../img/icons.png);
|
||||
background-position: -46px 0px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 396 B |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 778 B After Width: | Height: | Size: 765 B |
@ -22,7 +22,6 @@
|
||||
color:white;">
|
||||
<span style="top:45%">Loading Piskel ...</span>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/lib/iframeLoader-0.1.0.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#main-wrapper {
|
||||
@ -47,11 +46,11 @@
|
||||
<!-- do not delete, do not move :) -->
|
||||
<!--body-main-start-->
|
||||
<div id="main-wrapper" class="main-wrapper">
|
||||
<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
@@include('templates/drawing-tools.html', {})
|
||||
|
||||
<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>
|
||||
@@include('templates/frames-list.html', {})
|
||||
</div>
|
||||
|
||||
<div class='column main-column'>
|
||||
@ -61,24 +60,19 @@
|
||||
</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/transformations.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>
|
||||
@@include('templates/preview.html', {})
|
||||
@@include('templates/layers-list.html', {})
|
||||
@@include('templates/transformations.html', {})
|
||||
@@include('templates/palettes-list.html', {})
|
||||
<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>
|
||||
@@include('templates/settings.html', {})
|
||||
<div class="drawer vertical-centerer">
|
||||
<div class="drawer-content" id="drawer-container">
|
||||
<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/save.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/export.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,18 +81,27 @@
|
||||
|
||||
<div id="dialog-container-wrapper">
|
||||
<div id="dialog-container">
|
||||
<iframe src="templates/dialogs/create-palette.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>
|
||||
<iframe src="templates/dialogs/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<iframe src="templates/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates/popup-preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
@@include('templates/misc-templates.html', {})
|
||||
@@include('templates/popup-preview.html', {})
|
||||
|
||||
<span class="cheatsheet-link icon-common-keyboard-gold" rel="tooltip" data-placement="right" title="Keyboard shortcuts"> </span>
|
||||
|
||||
<!-- dialogs partials -->
|
||||
@@include('templates/dialogs/create-palette.html', {})
|
||||
@@include('templates/dialogs/import-image.html', {})
|
||||
@@include('templates/dialogs/browse-local.html', {})
|
||||
@@include('templates/dialogs/cheatsheet.html', {})
|
||||
|
||||
<!-- settings-panel partials -->
|
||||
@@include('templates/settings/application.html', {})
|
||||
@@include('templates/settings/resize.html', {})
|
||||
@@include('templates/settings/save.html', {})
|
||||
@@include('templates/settings/import.html', {})
|
||||
@@include('templates/settings/export.html', {})
|
||||
|
||||
<script type="text/javascript" src="piskel-boot.js"></script>
|
||||
<!--body-main-end-->
|
||||
<!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
|
||||
|
||||
@ -72,15 +72,8 @@
|
||||
} else {
|
||||
script = 'js/piskel-packaged-min' + version + '.js';
|
||||
}
|
||||
loadStyle('css/piskel-style-packaged' + version + '.css');
|
||||
|
||||
var loaderInterval = window.setInterval(function () {
|
||||
if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
|
||||
window.clearInterval(loaderInterval);
|
||||
loadScript(script, 'onPiskelReady()');
|
||||
} else {
|
||||
window.console.log('waiting for templates to load ....');
|
||||
}
|
||||
}, 100);
|
||||
loadStyle('css/piskel-style-packaged' + version + '.css');
|
||||
loadScript(script, 'onPiskelReady()');
|
||||
}
|
||||
})();
|
||||
@ -1,26 +1,29 @@
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Browse Local Piskels
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="dialog-content" style="padding:10px 20px; font-size:1.5em; overflow: auto;">
|
||||
<table class="local-piskel-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>
|
||||
<script type="text/template" id="templates/dialogs/browse-local.html">
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Browse Local Piskels
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="dialog-content" style="padding:10px 20px; font-size:1.5em; overflow: auto;">
|
||||
<table class="local-piskel-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>
|
||||
</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>
|
||||
</script>
|
||||
|
||||
<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>
|
||||
@ -1,42 +1,45 @@
|
||||
<div id="cheatsheetContainer" class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
<span class="dialog-title">Keyboard shortcuts</span>
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="cheatsheet-container dialog-content">
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Tool shortcuts</h3>
|
||||
<ul class="cheatsheet-tool-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Misc shortcuts</h3>
|
||||
<ul class="cheatsheet-misc-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-boxes">
|
||||
<script type="text/template" id="templates/dialogs/cheatsheet.html">
|
||||
<div id="cheatsheetContainer" class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
<span class="dialog-title">Keyboard shortcuts</span>
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="cheatsheet-container dialog-content">
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Selection shortcuts</h3>
|
||||
<ul class="cheatsheet-selection-shortcuts"></ul>
|
||||
<h3 class="cheatsheet-title">Tool shortcuts</h3>
|
||||
<ul class="cheatsheet-tool-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Color shortcuts</h3>
|
||||
<ul class="cheatsheet-color-shortcuts"></ul>
|
||||
<h3 class="cheatsheet-title">Misc shortcuts</h3>
|
||||
<ul class="cheatsheet-misc-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Storage shortcuts</h3>
|
||||
<ul class="cheatsheet-storage-shortcuts"></ul>
|
||||
<div class="cheatsheet-boxes">
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Selection shortcuts</h3>
|
||||
<ul class="cheatsheet-selection-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Color shortcuts</h3>
|
||||
<ul class="cheatsheet-color-shortcuts"></ul>
|
||||
</div>
|
||||
<div class="cheatsheet-section">
|
||||
<h3 class="cheatsheet-title">Storage shortcuts</h3>
|
||||
<ul class="cheatsheet-storage-shortcuts"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cheatsheet-actions">
|
||||
<span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
|
||||
<button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
|
||||
</div>
|
||||
<div class="cheatsheet-actions">
|
||||
<span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
|
||||
<button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
|
||||
</div>
|
||||
|
||||
<!-- Event trap to capture keyboard remaps -->
|
||||
<div style="position:relative; overflow:hidden; width:1px; height:1px;">
|
||||
<input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
|
||||
<!-- Event trap to capture keyboard remaps -->
|
||||
<div style="position:relative; overflow:hidden; width:1px; height:1px;">
|
||||
<input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="cheatsheet-shortcut-template">
|
||||
<li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
|
||||
<div class="cheatsheet-icon {{icon}}"></div>
|
||||
|
||||
@ -1,83 +1,84 @@
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
<span class="dialog-title">Create palette</span>
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="dialog-create-palette" style="font-size:1.3em">
|
||||
<div class="create-palette-section form-section">
|
||||
<span class="create-palette-name-label">Name</span>
|
||||
<input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
|
||||
<div class="create-palette-import-section">
|
||||
<button
|
||||
type="button"
|
||||
rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
|
||||
class="button button-primary create-palette-import-button">Import from file</button>
|
||||
<button
|
||||
type="button"
|
||||
rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
|
||||
class="button button-primary create-palette-download-button">Download as file</button>
|
||||
<input style="display:none"
|
||||
class="create-palette-import-input"
|
||||
type="file" value="file" accept="*"/>
|
||||
<script type="text/template" id="templates/dialogs/create-palette.html">
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
<span class="dialog-title">Create palette</span>
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="dialog-create-palette" style="font-size:1.3em">
|
||||
<div class="create-palette-section form-section">
|
||||
<span class="create-palette-name-label">Name</span>
|
||||
<input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
|
||||
<div class="create-palette-import-section">
|
||||
<button
|
||||
type="button"
|
||||
rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
|
||||
class="button button-primary create-palette-import-button">Import from file</button>
|
||||
<button
|
||||
type="button"
|
||||
rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
|
||||
class="button button-primary create-palette-download-button">Download as file</button>
|
||||
<input style="display:none"
|
||||
class="create-palette-import-input"
|
||||
type="file" value="file" accept="*"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colors-container">
|
||||
<ul class="colors-list"></ul>
|
||||
<div class="color-picker-container">
|
||||
<div class="color-picker-spectrum"></div>
|
||||
<div class="color-picker-input">
|
||||
<input type="text" data-model="hex" data-dimension="*" class="textfield uppercase" value="#000000" />
|
||||
<div class="colors-container">
|
||||
<ul class="colors-list"></ul>
|
||||
<div class="color-picker-container">
|
||||
<div class="color-picker-spectrum"></div>
|
||||
<div class="color-picker-input">
|
||||
<input type="text" data-model="hex" data-dimension="*" class="textfield uppercase" value="#000000" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>H</span>
|
||||
<input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
|
||||
<input type="text" data-model="hsv" data-dimension="h" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>S</span>
|
||||
<input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
|
||||
<input type="text" data-model="hsv" data-dimension="s" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>V</span>
|
||||
<input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
|
||||
<input type="text" data-model="hsv" data-dimension="v" class="textfield" value="0" />
|
||||
</div>
|
||||
<br/>
|
||||
<div class="color-picker-slider">
|
||||
<span>R</span>
|
||||
<input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
|
||||
<input type="text" data-model="rgb" data-dimension="r" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>G</span>
|
||||
<input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
|
||||
<input type="text" data-model="rgb" data-dimension="g" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>B</span>
|
||||
<input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
|
||||
<input type="text" data-model="rgb" data-dimension="b" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-preview"></div>
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>H</span>
|
||||
<input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
|
||||
<input type="text" data-model="hsv" data-dimension="h" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>S</span>
|
||||
<input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
|
||||
<input type="text" data-model="hsv" data-dimension="s" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>V</span>
|
||||
<input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
|
||||
<input type="text" data-model="hsv" data-dimension="v" class="textfield" value="0" />
|
||||
</div>
|
||||
<br/>
|
||||
<div class="color-picker-slider">
|
||||
<span>R</span>
|
||||
<input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
|
||||
<input type="text" data-model="rgb" data-dimension="r" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>G</span>
|
||||
<input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
|
||||
<input type="text" data-model="rgb" data-dimension="g" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-picker-slider">
|
||||
<span>B</span>
|
||||
<input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
|
||||
<input type="text" data-model="rgb" data-dimension="b" class="textfield" value="0" />
|
||||
</div>
|
||||
<div class="color-preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="create-palette-actions">
|
||||
<button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
|
||||
<button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
|
||||
<!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
|
||||
<button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
|
||||
</div>
|
||||
<div class="create-palette-actions">
|
||||
<button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
|
||||
<button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
|
||||
<!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
|
||||
<button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="create-palette-color-template">
|
||||
<li
|
||||
class="create-palette-color {{:selected}} {{:light-color}}"
|
||||
style="background:{{color}}"
|
||||
data-palette-index="{{index}}"
|
||||
data-palette-color="{{color}}">
|
||||
<div class="create-palette-remove-color">X</div>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
<script type="text/template" id="create-palette-color-template">
|
||||
<li
|
||||
class="create-palette-color {{:selected}} {{:light-color}}"
|
||||
style="background:{{color}}"
|
||||
data-palette-index="{{index}}"
|
||||
data-palette-color="{{color}}">
|
||||
<div class="create-palette-remove-color">X</div>
|
||||
</li>
|
||||
</script>
|
||||
@ -1,49 +1,51 @@
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Import Image
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="dialog-import-body">
|
||||
<form action="" method="POST" name="import-image-form">
|
||||
<div class="import-section">
|
||||
<span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<div class="import-section-preview-title">Preview :</div>
|
||||
<div class="import-section-preview"></div>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<label class="dialog-section-radio-label">
|
||||
<input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
|
||||
Import as single image
|
||||
</label>
|
||||
</div>
|
||||
<div class="import-section import-subsection">
|
||||
<span class="dialog-section-title">Resize to</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 import-subsection">
|
||||
<span class="import-section-title">Smooth resize</span>
|
||||
<input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<label class="dialog-section-radio-label">
|
||||
<input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
|
||||
Import as spritesheet
|
||||
</label>
|
||||
</div>
|
||||
<div class="import-section import-subsection">
|
||||
<span class="dialog-section-title">Frame size</span>
|
||||
<input type="text" class="textfield import-size-field" name="frame-size-x"/>x
|
||||
<input type="text" class="textfield import-size-field" name="frame-size-y"/>
|
||||
</div>
|
||||
<div class="import-section import-subsection">
|
||||
<span class="dialog-section-title">Offset</span>
|
||||
<input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
|
||||
<input type="text" class="textfield import-size-field" name="frame-offset-y"/>
|
||||
</div>
|
||||
<input type="submit" name="import-submit" class="button button-primary import-button" value="Import"/>
|
||||
</form>
|
||||
<script type="text/template" id="templates/dialogs/import-image.html">
|
||||
<div class="dialog-wrapper">
|
||||
<h3 class="dialog-head">
|
||||
Import Image
|
||||
<span class="dialog-close">X</span>
|
||||
</h3>
|
||||
<div class="dialog-import-body">
|
||||
<form action="" method="POST" name="import-image-form">
|
||||
<div class="import-section">
|
||||
<span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<div class="import-section-preview-title">Preview :</div>
|
||||
<div class="import-section-preview"></div>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<label class="dialog-section-radio-label">
|
||||
<input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
|
||||
Import as single image
|
||||
</label>
|
||||
</div>
|
||||
<div class="import-section import-subsection">
|
||||
<span class="dialog-section-title">Resize to</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 import-subsection">
|
||||
<span class="import-section-title">Smooth resize</span>
|
||||
<input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
|
||||
</div>
|
||||
<div class="import-section">
|
||||
<label class="dialog-section-radio-label">
|
||||
<input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
|
||||
Import as spritesheet
|
||||
</label>
|
||||
</div>
|
||||
<div class="import-section import-subsection">
|
||||
<span class="dialog-section-title">Frame size</span>
|
||||
<input type="text" class="textfield import-size-field" name="frame-size-x"/>x
|
||||
<input type="text" class="textfield import-size-field" name="frame-size-y"/>
|
||||
</div>
|
||||
<div class="import-section import-subsection">
|
||||
<span class="dialog-section-title">Offset</span>
|
||||
<input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
|
||||
<input type="text" class="textfield import-size-field" name="frame-offset-y"/>
|
||||
</div>
|
||||
<input type="submit" name="import-submit" class="button button-primary import-button" value="Import"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
@ -1,63 +1,64 @@
|
||||
<form action="" method="POST" name="application-settings-form">
|
||||
<div class="settings-section settings-section--application-general">
|
||||
<div class="settings-title">
|
||||
General
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>Background</label>
|
||||
<div class="background-picker-wrapper">
|
||||
<div class="background-picker light-picker-background" data-background="light-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="light / high contrast">
|
||||
</div>
|
||||
<div class="background-picker medium-picker-background" data-background="medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / low contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="dark / low contrast">
|
||||
<script type="text/html" id="templates/settings/application.html">
|
||||
<form action="" method="POST" name="application-settings-form">
|
||||
<div class="settings-section settings-section--application-general">
|
||||
<div class="settings-title">
|
||||
General
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>Background</label>
|
||||
<div class="background-picker-wrapper">
|
||||
<div class="background-picker light-picker-background" data-background="light-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="light / high contrast">
|
||||
</div>
|
||||
<div class="background-picker medium-picker-background" data-background="medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / low contrast">
|
||||
</div>
|
||||
<div class="background-picker lowcont-dark-picker-background" data-background="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" class="grid-width-select">
|
||||
<option value="0">Disabled</option>
|
||||
<option value="1">1px</option>
|
||||
<option value="2">2px</option>
|
||||
<option value="3">3px</option>
|
||||
<option value="4">4px</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="tiled-preview">Layer Preview Opacity</label>
|
||||
<input type="range" class="layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
|
||||
<span class="layer-opacity-text"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="grid-width">Grid</label>
|
||||
<select id="grid-width" class="grid-width-select">
|
||||
<option value="0">Disabled</option>
|
||||
<option value="1">1px</option>
|
||||
<option value="2">2px</option>
|
||||
<option value="3">3px</option>
|
||||
<option value="4">4px</option>
|
||||
</select>
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Preview
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
<input type="checkbox" value="1" class="tiled-preview-checkbox checkbox-fix" name="tiled-preview-checkbox"/>
|
||||
Repeated preview
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="tiled-preview">Maximum FPS </label>
|
||||
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
|
||||
</div>
|
||||
|
||||
<input type="submit" class="button button-primary" value="Save" />
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="tiled-preview">Layer Preview Opacity</label>
|
||||
<input type="range" class="layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
|
||||
<span class="layer-opacity-text"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Preview
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
<input type="checkbox" value="1" class="tiled-preview-checkbox checkbox-fix" name="tiled-preview-checkbox"/>
|
||||
Repeated preview
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="tiled-preview">Maximum FPS </label>
|
||||
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
|
||||
</div>
|
||||
|
||||
<input type="submit" class="button button-primary" value="Save" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</form>
|
||||
</script>
|
||||
|
||||
@ -1,63 +1,65 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Export Spritesheet
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-description">PNG with all frames side by side.</div>
|
||||
<div class="scaling-factor"
|
||||
title="Scale the exported PNG spritesheet"
|
||||
rel="tooltip"
|
||||
data-placement="top">
|
||||
<label for="scaling-factor">Scale</label>
|
||||
<input type="range" class="scaling-factor-input" name="scaling-factor" min="1" max="32" step="1"/>
|
||||
<span class="scaling-factor-text"></span>
|
||||
<script type="text/html" id="templates/settings/export.html">
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Export Spritesheet
|
||||
</div>
|
||||
<button type="button" class="button button-primary png-download-button">Download PNG</button>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Export as ZIP
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-description">ZIP with one PNG file per frame.</div>
|
||||
<div class="settings-description">File names will start with the prefix below.</div>
|
||||
<div class="settings-item">
|
||||
<label>Prefix</label>
|
||||
<input type="text" class="zip-prefix-name textfield" autocomplete="off" placeholder="PNG file prefix ...">
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
<input class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
|
||||
Split by layers
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Export to Animated GIF
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" class="gif-export-form">
|
||||
<div class="settings-item">
|
||||
<label>Select resolution:</label>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Width</span>
|
||||
<input type="text" class="textfield export-size-field export-gif-resize-width" autocomplete="off" name="resize-width"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Height</span>
|
||||
<input type="text" class="textfield export-size-field export-gif-resize-height" autocomplete="off" name="resize-height"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="settings-description">PNG with all frames side by side.</div>
|
||||
<div class="scaling-factor"
|
||||
title="Scale the exported PNG spritesheet"
|
||||
rel="tooltip"
|
||||
data-placement="top">
|
||||
<label for="scaling-factor">Scale</label>
|
||||
<input type="range" class="scaling-factor-input" name="scaling-factor" min="1" max="32" step="1"/>
|
||||
<span class="scaling-factor-text"></span>
|
||||
</div>
|
||||
<button type="button" class="button button-primary png-download-button">Download PNG</button>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Export as ZIP
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-description">ZIP with one PNG file per frame.</div>
|
||||
<div class="settings-description">File names will start with the prefix below.</div>
|
||||
<div class="settings-item">
|
||||
<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>
|
||||
<label>Prefix</label>
|
||||
<input type="text" class="zip-prefix-name textfield" autocomplete="off" placeholder="PNG file prefix ...">
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
<input class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
|
||||
Split by layers
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Export to Animated GIF
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" class="gif-export-form">
|
||||
<div class="settings-item">
|
||||
<label>Select resolution:</label>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Width</span>
|
||||
<input type="text" class="textfield export-size-field export-gif-resize-width" autocomplete="off" name="resize-width"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Height</span>
|
||||
<input type="text" class="textfield export-size-field export-gif-resize-height" autocomplete="off" name="resize-height"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<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="gif-upload">
|
||||
<div class="gif-export-preview"></div>
|
||||
<div class="gif-upload-status"></div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="gif-upload">
|
||||
<div class="gif-export-preview"></div>
|
||||
<div class="gif-upload-status"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
@ -1,55 +1,53 @@
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Load from Browser
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>Load a <span class="import-highlight">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>
|
||||
<script type="text/template" id="templates/settings/import.html">
|
||||
<div class="settings-section">
|
||||
<div class="settings-title">
|
||||
Load from Browser
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Load .piskel file
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>Load a <span class="import-highlight">.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 class="import-highlight">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 class="import-highlight">backup</span> from a recent session</span>
|
||||
<div class="settings-item">
|
||||
<span>Load a <span class="import-highlight">local piskel</span> saved in this Browser</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>
|
||||
<button type="button" class="button button-primary browse-local-button">Browse local saves</button>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
<div class="settings-title">
|
||||
Load .piskel file
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>Load a <span class="import-highlight">.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 class="import-highlight">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">
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<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>
|
||||
@ -1,66 +1,68 @@
|
||||
<div class="settings-section">
|
||||
<!-- RESIZE DRAWING SECTION -->
|
||||
<div class="settings-title">
|
||||
Resize
|
||||
</div>
|
||||
<div class="settings-item resize-canvas">
|
||||
<form action="" method="POST" name="resize-canvas-form">
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Width</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-width"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Height</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-height"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<label>
|
||||
<input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
|
||||
<span>Maintain aspect ratio</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<label>
|
||||
<input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
|
||||
<span>Resize canvas content</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Anchor</span>
|
||||
<div class="resize-origin-container">
|
||||
<div class="resize-origin-option" title="top left" data-origin="TOPLEFT"></div>
|
||||
<div class="resize-origin-option" title="top" data-origin="TOP"></div>
|
||||
<div class="resize-origin-option" title="top right" data-origin="TOPRIGHT"></div>
|
||||
<div class="resize-origin-option" title="middle left" data-origin="MIDDLELEFT"></div>
|
||||
<div class="resize-origin-option" title="middle" data-origin="MIDDLE"></div>
|
||||
<div class="resize-origin-option" title="middle right" data-origin="MIDDLERIGHT"></div>
|
||||
<div class="resize-origin-option" title="bottom left" data-origin="BOTTOMLEFT"></div>
|
||||
<div class="resize-origin-option" title="bottom" data-origin="BOTTOM"></div>
|
||||
<div class="resize-origin-option" title="bottom right" data-origin="BOTTOMRIGHT"></div>
|
||||
<script type="text/html" id="templates/settings/resize.html">
|
||||
<div class="settings-section">
|
||||
<!-- RESIZE DRAWING SECTION -->
|
||||
<div class="settings-title">
|
||||
Resize
|
||||
</div>
|
||||
<div class="settings-item resize-canvas">
|
||||
<form action="" method="POST" name="resize-canvas-form">
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Width</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-width"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" class="button button-primary resize-button" value="Resize" />
|
||||
</form>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Height</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-height"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<label>
|
||||
<input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
|
||||
<span>Maintain aspect ratio</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<label>
|
||||
<input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
|
||||
<span>Resize canvas content</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Anchor</span>
|
||||
<div class="resize-origin-container">
|
||||
<div class="resize-origin-option" title="top left" data-origin="TOPLEFT"></div>
|
||||
<div class="resize-origin-option" title="top" data-origin="TOP"></div>
|
||||
<div class="resize-origin-option" title="top right" data-origin="TOPRIGHT"></div>
|
||||
<div class="resize-origin-option" title="middle left" data-origin="MIDDLELEFT"></div>
|
||||
<div class="resize-origin-option" title="middle" data-origin="MIDDLE"></div>
|
||||
<div class="resize-origin-option" title="middle right" data-origin="MIDDLERIGHT"></div>
|
||||
<div class="resize-origin-option" title="bottom left" data-origin="BOTTOMLEFT"></div>
|
||||
<div class="resize-origin-option" title="bottom" data-origin="BOTTOM"></div>
|
||||
<div class="resize-origin-option" title="bottom right" data-origin="BOTTOMRIGHT"></div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" class="button button-primary resize-button" value="Resize" />
|
||||
</form>
|
||||
</div>
|
||||
<!-- DEFAULT SIZE SECTION -->
|
||||
<div class="settings-title">
|
||||
Default size
|
||||
</div>
|
||||
<div class="settings-item settings-default-size">
|
||||
<form action="" method="POST" name="default-size-form">
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Width</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-width"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Height</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<input type="submit" class="button button-primary resize-button" value="Set default" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- DEFAULT SIZE SECTION -->
|
||||
<div class="settings-title">
|
||||
Default size
|
||||
</div>
|
||||
<div class="settings-item settings-default-size">
|
||||
<form action="" method="POST" name="default-size-form">
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Width</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-width"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="resize-section">
|
||||
<span class="resize-section-title">Height</span>
|
||||
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
|
||||
<span>px</span>
|
||||
</div>
|
||||
<input type="submit" class="button button-primary resize-button" value="Set default" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
@ -1,67 +1,67 @@
|
||||
<div class="settings-section setting-save-section">
|
||||
<form action="" method="POST" class="save-form" name="save-form">
|
||||
<div class="settings-title">Sprite Information</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-form-section" style="overflow:hidden">
|
||||
<label class="row" style="line-height:20px;">Title : </label>
|
||||
<input id="save-name" type="text" class="save-field textfield" autocomplete="off" />
|
||||
<script type="text/template" id="templates/settings/save.html">
|
||||
<div class="settings-section setting-save-section">
|
||||
<form action="" method="POST" class="save-form" name="save-form">
|
||||
<div class="settings-title">Sprite Information</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-form-section" style="overflow:hidden">
|
||||
<label class="row" style="line-height:20px;">Title : </label>
|
||||
<input id="save-name" type="text" class="save-field textfield" autocomplete="off" />
|
||||
</div>
|
||||
<div class="settings-form-section">
|
||||
<label class="row" style="line-height:20px;">Description : </label>
|
||||
<textarea id="save-description" class="save-field textfield"></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-form-section">
|
||||
<label class="row" style="line-height:20px;">Description : </label>
|
||||
<textarea id="save-description" class="save-field textfield"></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>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- PARTIALS -->
|
||||
<!-- save-gallery-partial -->
|
||||
<script type="text/template" id="save-gallery-partial">
|
||||
<div class="settings-title">Save online</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
|
||||
<div class="save-status">Your piskel will be stored online in your gallery.</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- save-gallery-partial -->
|
||||
<script type="text/template" id="save-gallery-partial">
|
||||
<div class="settings-title">Save online</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
|
||||
<div class="save-status">Your piskel will be stored online in your gallery.</div>
|
||||
</div>
|
||||
</script>
|
||||
<!-- save-gallery-unavailable-partial -->
|
||||
<script type="text/template" id="save-gallery-unavailable-partial">
|
||||
<div class="settings-title">Save online</div>
|
||||
<div class="settings-item">
|
||||
<div class="save-status">Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online.</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- save-gallery-unavailable-partial -->
|
||||
<script type="text/template" id="save-gallery-unavailable-partial">
|
||||
<div class="settings-title">Save online</div>
|
||||
<div class="settings-item">
|
||||
<div class="save-status">Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online.</div>
|
||||
</div>
|
||||
</script>
|
||||
<!-- save-localstorage-partial -->
|
||||
<script type="text/template" id="save-localstorage-partial">
|
||||
<div class="settings-title">Save offline in Browser</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-localstorage-button" value="Save in Browser" />
|
||||
<div class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- save-localstorage-partial -->
|
||||
<script type="text/template" id="save-localstorage-partial">
|
||||
<div class="settings-title">Save offline in Browser</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-localstorage-button" value="Save in Browser" />
|
||||
<div class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
|
||||
</div>
|
||||
</script>
|
||||
<!-- save-desktop-partial -->
|
||||
<script type="text/template" id="save-desktop-partial">
|
||||
<div class="settings-title">Save as File</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-desktop-button" value="Save" />
|
||||
<input type="button" class="button button-primary" id="save-desktop-as-new-button" value="Save as ..." />
|
||||
<div class="save-status">Your sprite will be saved as a .piskel file.</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- save-desktop-partial -->
|
||||
<script type="text/template" id="save-desktop-partial">
|
||||
<div class="settings-title">Save as File</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-desktop-button" value="Save" />
|
||||
<input type="button" class="button button-primary" id="save-desktop-as-new-button" value="Save as ..." />
|
||||
<div class="save-status">Your sprite will be saved as a .piskel file.</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- save-file-download-partial -->
|
||||
<script type="text/template" id="save-file-download-partial">
|
||||
<div class="settings-title">Save offline as File</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-file-download-button" value="Save as .piskel" />
|
||||
<div class="save-status">Your sprite will be downloaded as a .piskel file.</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
<!-- save-file-download-partial -->
|
||||
<script type="text/template" id="save-file-download-partial">
|
||||
<div class="settings-title">Save offline as File</div>
|
||||
<div class="settings-item">
|
||||
<input type="button" class="button button-primary" id="save-file-download-button" value="Save as .piskel" />
|
||||
<div class="save-status">Your sprite will be downloaded as a .piskel file.</div>
|
||||
</div>
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user