diff --git a/.npmignore b/.npmignore
new file mode 100644
index 00000000..b350e189
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,3 @@
+node_modules/
+test/
+
diff --git a/Gruntfile.js b/Gruntfile.js
index f68d9862..8e3ea6f0 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -163,7 +163,9 @@ module.exports = function(grunt) {
sprite:{
all : {
src: 'src/img/icons/**/*.png',
+ retinaSrcFilter: 'src/img/icons/**/*@2x.png',
dest: 'src/img/icons.png',
+ retinaDest: 'src/img/icons@2x.png',
destCss: 'src/css/icons.css'
}
},
@@ -228,6 +230,20 @@ module.exports = function(grunt) {
// src/index.html should already have been moved by the includereplace task
{src: ['dest/tmp/index.html'], dest: 'dest/prod/piskelapp-partials/main-partial.html'}
]
+ },
+ // remove the fake header from the desktop build
+ desktop: {
+ options: {
+ patterns: [{
+ match: /(?:.|[\r\n])*/,
+ replacement: "",
+ description : "Remove everything between standalone-start & standalone-end"
+ }
+ ]
+ },
+ files: [
+ {src: ['dest/prod/index.html'], dest: 'dest/prod/index.html'}
+ ]
}
},
@@ -278,7 +294,7 @@ module.exports = function(grunt) {
nwjs: {
windows : {
options: {
- version : "0.12.3",
+ version : "0.15.4",
build_dir: './dest/desktop/', // destination folder of releases.
win: true,
linux32: true,
@@ -289,7 +305,7 @@ module.exports = function(grunt) {
macos : {
options: {
osx64: true,
- version : "0.12.3",
+ version : "0.15.4",
build_dir: './dest/desktop/'
},
src: ['./dest/prod/**/*', "./package.json", "!./dest/desktop/"]
@@ -314,15 +330,15 @@ module.exports = function(grunt) {
grunt.registerTask('build-index.html', ['includereplace']);
grunt.registerTask('merge-statics', ['concat:js', 'concat:css', 'uglify']);
- grunt.registerTask('build', ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace', 'copy:prod']);
+ grunt.registerTask('build', ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace:mainPartial', 'copy:prod']);
grunt.registerTask('build-dev', ['clean:dev', 'sprite', 'build-index.html', 'copy:dev']);
// Validate & Build
grunt.registerTask('default', ['lint', 'build']);
// Build stand alone app with nodewebkit
- grunt.registerTask('desktop', ['clean:desktop', 'default', 'nwjs:windows']);
- grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'nwjs:macos']);
+ grunt.registerTask('desktop', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:windows']);
+ grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:macos']);
// Start webserver and watch for changes
grunt.registerTask('serve', ['build', 'connect:prod', 'open:prod', 'watch:prod']);
diff --git a/misc/icons/SVG/swap-colors.svg b/misc/icons/SVG/swap-colors.svg
deleted file mode 100644
index fd652981..00000000
--- a/misc/icons/SVG/swap-colors.svg
+++ /dev/null
@@ -1,97 +0,0 @@
-
-
-
-
diff --git a/misc/icons/source/common-keyboard-gold.svg b/misc/icons/source/common-keyboard-gold.svg
new file mode 100644
index 00000000..976a54ad
--- /dev/null
+++ b/misc/icons/source/common-keyboard-gold.svg
@@ -0,0 +1,188 @@
+
+
+
+
diff --git a/misc/icons/source/common-swapcolors-arrow-grey.svg b/misc/icons/source/common-swapcolors-arrow-grey.svg
new file mode 100644
index 00000000..27c64b58
--- /dev/null
+++ b/misc/icons/source/common-swapcolors-arrow-grey.svg
@@ -0,0 +1,90 @@
+
+
+
+
diff --git a/misc/icons/source/file-icon-base.svg b/misc/icons/source/file-icon-base.svg
new file mode 100644
index 00000000..4a3ae595
--- /dev/null
+++ b/misc/icons/source/file-icon-base.svg
@@ -0,0 +1,80 @@
+
+
+
+
diff --git a/misc/icons/source/frame-dragndrop-white.svg b/misc/icons/source/frame-dragndrop-white.svg
new file mode 100644
index 00000000..897503f9
--- /dev/null
+++ b/misc/icons/source/frame-dragndrop-white.svg
@@ -0,0 +1,107 @@
+
+
+
+
diff --git a/misc/icons/source/frame-duplicate-white-base.pdn b/misc/icons/source/frame-duplicate-white-base.pdn
new file mode 100644
index 00000000..f5112c74
Binary files /dev/null and b/misc/icons/source/frame-duplicate-white-base.pdn differ
diff --git a/misc/icons/source/frame-duplicate-white-base@2x.pdn b/misc/icons/source/frame-duplicate-white-base@2x.pdn
new file mode 100644
index 00000000..ba223257
Binary files /dev/null and b/misc/icons/source/frame-duplicate-white-base@2x.pdn differ
diff --git a/misc/icons/source/frame-duplicate-white.svg b/misc/icons/source/frame-duplicate-white.svg
new file mode 100644
index 00000000..d9847be1
--- /dev/null
+++ b/misc/icons/source/frame-duplicate-white.svg
@@ -0,0 +1,81 @@
+
+
+
+
diff --git a/misc/icons/SVG/swap-colors-sq.svg b/misc/icons/source/frame-plus-white.svg
similarity index 53%
rename from misc/icons/SVG/swap-colors-sq.svg
rename to misc/icons/source/frame-plus-white.svg
index 6dfafcb7..892a5f24 100644
--- a/misc/icons/SVG/swap-colors-sq.svg
+++ b/misc/icons/source/frame-plus-white.svg
@@ -9,14 +9,17 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="435"
- height="409.28125"
- id="svg3768"
+ width="52"
+ height="52"
+ id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
- sodipodi:docname="New document 3">
+ sodipodi:docname="frame-plus-white.svg"
+ inkscape:export-filename="C:\Development\git\piskel\misc\icons\source\frame-dragndrop-white@2x.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ id="defs2987" />
+ inkscape:window-maximized="1">
+
+
+ id="metadata2990">
@@ -52,21 +60,24 @@
+ transform="translate(0,-12)">
-
+ id="rect4572"
+ width="8"
+ height="32"
+ x="22"
+ y="22" />
+
diff --git a/misc/icons/source/frame-recyclebin-white.svg b/misc/icons/source/frame-recyclebin-white.svg
new file mode 100644
index 00000000..f9b75f7b
--- /dev/null
+++ b/misc/icons/source/frame-recyclebin-white.svg
@@ -0,0 +1,86 @@
+
+
+
+
diff --git a/misc/icons/source/minimap-popup-preview-arrow.svg b/misc/icons/source/minimap-popup-preview-arrow.svg
new file mode 100644
index 00000000..6a47ee5e
--- /dev/null
+++ b/misc/icons/source/minimap-popup-preview-arrow.svg
@@ -0,0 +1,82 @@
+
+
+
+
diff --git a/misc/icons/source/settings-export-white.svg b/misc/icons/source/settings-export-white.svg
new file mode 100644
index 00000000..2a6609e3
--- /dev/null
+++ b/misc/icons/source/settings-export-white.svg
@@ -0,0 +1,87 @@
+
+
+
+
diff --git a/misc/icons/source/settings-gear-white.svg b/misc/icons/source/settings-gear-white.svg
new file mode 100644
index 00000000..b2735d1b
--- /dev/null
+++ b/misc/icons/source/settings-gear-white.svg
@@ -0,0 +1,145 @@
+
+
+
+
diff --git a/misc/icons/source/settings-open-folder-white.svg b/misc/icons/source/settings-open-folder-white.svg
new file mode 100644
index 00000000..c3c4de53
--- /dev/null
+++ b/misc/icons/source/settings-open-folder-white.svg
@@ -0,0 +1,77 @@
+
+
+
+
diff --git a/misc/icons/source/settings-resize-white.svg b/misc/icons/source/settings-resize-white.svg
new file mode 100644
index 00000000..508950b0
--- /dev/null
+++ b/misc/icons/source/settings-resize-white.svg
@@ -0,0 +1,95 @@
+
+
+
+
diff --git a/misc/icons/source/settings-save-white.svg b/misc/icons/source/settings-save-white.svg
new file mode 100644
index 00000000..bb7a5e57
--- /dev/null
+++ b/misc/icons/source/settings-save-white.svg
@@ -0,0 +1,87 @@
+
+
+
+
diff --git a/misc/icons/source/tool-center.svg b/misc/icons/source/tool-center.svg
new file mode 100644
index 00000000..b163a87f
--- /dev/null
+++ b/misc/icons/source/tool-center.svg
@@ -0,0 +1,148 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-circle.svg b/misc/icons/source/tool-circle.svg
new file mode 100644
index 00000000..37481eb1
--- /dev/null
+++ b/misc/icons/source/tool-circle.svg
@@ -0,0 +1,59 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-clone.svg b/misc/icons/source/tool-clone.svg
new file mode 100644
index 00000000..79e18870
--- /dev/null
+++ b/misc/icons/source/tool-clone.svg
@@ -0,0 +1,51 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-colorpicker-big.png b/misc/icons/source/tool-colorpicker-big.png
deleted file mode 100644
index 1153aed8..00000000
Binary files a/misc/icons/source/tool-colorpicker-big.png and /dev/null differ
diff --git a/misc/icons/source/tool-colorpicker.svg b/misc/icons/source/tool-colorpicker.svg
new file mode 100644
index 00000000..52c44002
--- /dev/null
+++ b/misc/icons/source/tool-colorpicker.svg
@@ -0,0 +1,67 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-colorswap.svg b/misc/icons/source/tool-colorswap.svg
new file mode 100644
index 00000000..8edc9f87
--- /dev/null
+++ b/misc/icons/source/tool-colorswap.svg
@@ -0,0 +1,60 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-dithering.svg b/misc/icons/source/tool-dithering.svg
new file mode 100644
index 00000000..65b647e4
--- /dev/null
+++ b/misc/icons/source/tool-dithering.svg
@@ -0,0 +1,101 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-eraser.svg b/misc/icons/source/tool-eraser.svg
new file mode 100644
index 00000000..2b51c175
--- /dev/null
+++ b/misc/icons/source/tool-eraser.svg
@@ -0,0 +1,54 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-flip.svg b/misc/icons/source/tool-flip.svg
new file mode 100644
index 00000000..6a7f7d90
--- /dev/null
+++ b/misc/icons/source/tool-flip.svg
@@ -0,0 +1,101 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-lasso-select.svg b/misc/icons/source/tool-lasso-select.svg
new file mode 100644
index 00000000..5c3ea449
--- /dev/null
+++ b/misc/icons/source/tool-lasso-select.svg
@@ -0,0 +1,55 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-lighten.svg b/misc/icons/source/tool-lighten.svg
new file mode 100644
index 00000000..9e290945
--- /dev/null
+++ b/misc/icons/source/tool-lighten.svg
@@ -0,0 +1,59 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-move.svg b/misc/icons/source/tool-move.svg
new file mode 100644
index 00000000..aba243e5
--- /dev/null
+++ b/misc/icons/source/tool-move.svg
@@ -0,0 +1,60 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-paint-bucket.svg b/misc/icons/source/tool-paint-bucket.svg
new file mode 100644
index 00000000..85e3e721
--- /dev/null
+++ b/misc/icons/source/tool-paint-bucket.svg
@@ -0,0 +1,57 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-pen.svg b/misc/icons/source/tool-pen.svg
new file mode 100644
index 00000000..01a1ab84
--- /dev/null
+++ b/misc/icons/source/tool-pen.svg
@@ -0,0 +1,60 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-rectangle-select.svg b/misc/icons/source/tool-rectangle-select.svg
new file mode 100644
index 00000000..e5ece4a6
--- /dev/null
+++ b/misc/icons/source/tool-rectangle-select.svg
@@ -0,0 +1,57 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-rectangle.svg b/misc/icons/source/tool-rectangle.svg
new file mode 100644
index 00000000..4b5e0ed3
--- /dev/null
+++ b/misc/icons/source/tool-rectangle.svg
@@ -0,0 +1,57 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-rotate.svg b/misc/icons/source/tool-rotate.svg
new file mode 100644
index 00000000..45e4e493
--- /dev/null
+++ b/misc/icons/source/tool-rotate.svg
@@ -0,0 +1,70 @@
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-shape-select.svg b/misc/icons/source/tool-shape-select.svg
new file mode 100644
index 00000000..09d9abdd
--- /dev/null
+++ b/misc/icons/source/tool-shape-select.svg
@@ -0,0 +1,60 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-stroke.svg b/misc/icons/source/tool-stroke.svg
new file mode 100644
index 00000000..a308563d
--- /dev/null
+++ b/misc/icons/source/tool-stroke.svg
@@ -0,0 +1,59 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/icons/source/tool-vertical-mirror-pen.svg b/misc/icons/source/tool-vertical-mirror-pen.svg
new file mode 100644
index 00000000..3af65f5b
--- /dev/null
+++ b/misc/icons/source/tool-vertical-mirror-pen.svg
@@ -0,0 +1,65 @@
+
+
+
+
\ No newline at end of file
diff --git a/misc/scripts/piskel-root b/misc/scripts/piskel-root
new file mode 100644
index 00000000..26cd8ab4
--- /dev/null
+++ b/misc/scripts/piskel-root
@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+// Writes the absolute path to the release build root to stdout
+var path = require('path');
+process.stdout.write(path.resolve(__dirname, '../../dest/prod') + '\n');
diff --git a/package.json b/package.json
index 02c88ce3..f8843393 100644
--- a/package.json
+++ b/package.json
@@ -1,24 +1,37 @@
{
- "author": "Julian Descottes, Vincent Renaudin",
"name": "piskel",
- "main": "./dest/prod/index.html",
- "description": "Web based 2d animations editor",
- "version": "0.7.0-SNAPSHOT",
+ "version": "0.9.0-SNAPSHOT",
+ "description": "Pixel art editor",
+ "author": "Julian Descottes ",
+ "contributors": [
+ "Vincent Renaudin"
+ ],
"homepage": "http://github.com/juliandescottes/piskel",
+ "license": "Apache-2.0",
"repository": {
"type": "git",
"url": "http://github.com/juliandescottes/piskel.git"
},
+ "files": [
+ "dest/prod",
+ "misc/scripts/piskel-root"
+ ],
+ "bin": {
+ "piskel-root": "./misc/scripts/piskel-root"
+ },
+ "main": "./dest/prod/index.html",
"scripts": {
"test": "grunt test",
- "start": "nodewebkit"
+ "start": "nodewebkit",
+ "preversion": "grunt test-local build",
+ "postversion": "git push && git push --tags && npm publish"
},
"devDependencies": {
"dateformat": "1.0.11",
- "grunt": "1.0.1",
+ "grunt": "^0.4.5",
"grunt-contrib-clean": "1.0.0",
"grunt-contrib-concat": "1.0.1",
- "grunt-contrib-connect": "1.0.0",
+ "grunt-contrib-connect": "1.0.2",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-jshint": "1.0.0",
"grunt-contrib-uglify": "1.0.1",
@@ -26,16 +39,16 @@
"grunt-ghost": "1.1.0",
"grunt-include-replace": "4.0.1",
"grunt-jscs": "2.8.0",
- "grunt-karma": "0.12.1",
+ "grunt-karma": "1.0.0",
"grunt-leading-indent": "0.2.0",
- "grunt-nw-builder": "2.0.0",
+ "grunt-nw-builder": "2.0.3",
"grunt-open": "0.2.3",
"grunt-replace": "1.0.1",
"grunt-spritesmith": "6.3.0",
"jasmine-core": "2.1.0",
"karma": "0.13.21",
- "karma-chrome-launcher": "0.2.2",
- "karma-jasmine": "0.3.7",
+ "karma-chrome-launcher": "1.0.1",
+ "karma-jasmine": "1.0.2",
"karma-phantomjs-launcher": "0.2.3",
"load-grunt-tasks": "3.5.0",
"phantomjs": "1.9.19"
diff --git a/src/css/forms.css b/src/css/forms.css
index e7663793..47778c72 100644
--- a/src/css/forms.css
+++ b/src/css/forms.css
@@ -14,6 +14,10 @@
height: 23px;
}
+.textfield[readonly="true"] {
+ background: transparent;
+}
+
.textfield[disabled=disabled] {
background : #3a3a3a;
}
diff --git a/src/css/layout.css b/src/css/layout.css
index 64fb1fd7..7af658fe 100644
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -13,6 +13,8 @@
.column-wrapper {
text-align: center;
font-size: 0;
+ display: flex;
+
position: absolute;
left: 100px; /* Reserve room for tools on the left edge of the screen. */
top: 0;
@@ -20,10 +22,6 @@
bottom: 0;
}
-.column {
- display: inline-block;
-}
-
.left-column {
vertical-align: top;
height: 100%;
@@ -36,10 +34,17 @@
}
.right-column {
+ box-sizing: border-box;
vertical-align: top;
- margin-left: 10px;
height: 100%;
+
+ display: flex;
+ flex-direction: column;
position: relative;
+
+ margin-left: 10px;
+ /* Add some padding for the absolutely positioned .cursor-coordinates */
+ padding-bottom: 20px;
}
.drawing-canvas-container {
diff --git a/src/css/settings-application.css b/src/css/settings-application.css
index 9b49a7b0..d8a9b6d0 100644
--- a/src/css/settings-application.css
+++ b/src/css/settings-application.css
@@ -3,42 +3,37 @@
/*******************************/
.background-picker-wrapper {
+ display: inline-block;
+ width: 130px;
overflow: hidden;
- padding: 5px 5px 2px 5px;
+ vertical-align: middle;
+ margin-left: 5px;
}
.background-picker {
cursor: pointer;
float: left;
- height: 35px;
- width: 35px;
+ height: 14px;
+ width: 14px;
background-color: transparent;
- margin-right: 15px;
+ margin-right: 5px;
padding: 1px;
position: relative;
+ border: #888 2px solid;
}
-.background-picker:after {
- content: " ";
- position: absolute;
- top: -2px;
- right: -2px;
- bottom: -2px;
- left: -2px;
+.background-picker:hover {
+ border-color: #eee;
}
-.background-picker:hover:after {
- border: #eee 1px solid;
-}
-
-.background-picker.selected:after {
- border: gold 1px solid;
+.background-picker.selected {
+ border-color: gold;
}
.layer-opacity-input {
margin: 5px;
vertical-align: middle;
- width: 145px;
+ width: 100px;
}
.layer-opacity-text {
@@ -53,9 +48,10 @@
}
.grid-width-select {
- margin: 5px;
+ margin: 5px 5px 0 5px;
}
-.settings-section--application-general > .settings-item > label {
- display: block;
-}
\ No newline at end of file
+.settings-section-application > .settings-title {
+ /* Override the default 10px margin bottom for this panel */
+ margin-bottom: 15px;
+}
diff --git a/src/css/settings-export.css b/src/css/settings-export.css
index aad86bb8..182aa534 100644
--- a/src/css/settings-export.css
+++ b/src/css/settings-export.css
@@ -57,17 +57,17 @@
color: white;
}
-.scaling-factor {
+.export-scale {
margin-bottom: 10px;
}
-.scaling-factor-input {
+.export-scale .scale-input {
margin: 5px;
vertical-align: middle;
- width: 145px;
+ width: 150px;
}
-.scaling-factor-text {
+.export-scale .scale-text {
height: 31px;
display: inline-block;
line-height: 30px;
@@ -77,3 +77,107 @@
border-radius: 3px;
text-align: center;
}
+
+.export-resize {
+ margin: 10px 0;
+ overflow: hidden;
+}
+
+.export-resize > * {
+ float: left;
+}
+
+.export-resize > *:not(:last-child) {
+ margin-right: 10px;
+}
+
+.export-resize > .resize-field {
+ width: 70px;
+}
+
+.export-resize > .resize-label {
+ height: 23px;
+ line-height: 23px;
+}
+
+.export-tabs {
+ overflow: hidden;
+ position: relative;
+}
+
+.export-tabs:after {
+ content: "";
+ display: block;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 1px;
+ z-index: 0;
+ background-color: gold;
+}
+
+.export-tab {
+ float: left;
+ cursor: pointer;
+ padding: 5px;
+ border: 1px solid transparent;
+ /* Make sure the tab and its border are positioned above the :after element; */
+ position: relative;
+ z-index: 1;
+}
+
+.export-tab.selected,
+.export-tab:hover {
+ color: gold;
+}
+
+.export-tab.selected {
+ border-color: gold gold #444 gold;
+ border-style: solid;
+ border-width: 1px;
+}
+
+.export-panel-header {
+ padding: 10px 5px 0px;
+}
+
+.export-info {
+ font-style: italic;
+ text-shadow: none;
+ font-weight: normal;
+}
+
+.export-panel-section {
+ padding: 5px;
+ margin-top: 10px;
+ border: 1px solid #5d5d5d;
+ border-radius: 2px;
+}
+
+.export-panel-row {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+}
+
+.export-panel-gif .button {
+ margin-right: 5px;
+ width: 75px;
+ flex-shrink: 0;
+}
+
+.export-panel-png .textfield {
+ width: 50px;
+}
+
+.png-export-dimension-info,
+.png-export-datauri-info {
+ margin-left: 5px;
+}
+
+#png-export-columns,
+#png-export-rows {
+ /* Override default textfield padding-right to keep the number spinners
+ aligned to the right. */
+ padding-right: 0;
+}
diff --git a/src/css/settings.css b/src/css/settings.css
index 0a16c425..f5a615ef 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -35,7 +35,7 @@
.drawer-content {
overflow: hidden;
background-color: #444;
- height: 650px;
+ height: 550px;
max-height: 100%;
width: 280px;
border-top-left-radius: 4px;
@@ -72,7 +72,6 @@
}
.settings-title {
- color : gold;
margin-top: 20px;
margin-bottom: 10px;
text-transform: uppercase;
diff --git a/src/css/style.css b/src/css/style.css
index 8375d1a2..3f69f9f3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -52,7 +52,6 @@ body {
}
.checkbox-fix {
- vertical-align: -2px;
margin-left: 0;
}
diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css
index c55a402c..86f30a2e 100644
--- a/src/css/toolbox-animated-preview.css
+++ b/src/css/toolbox-animated-preview.css
@@ -3,6 +3,8 @@
*/
.preview-container {
+ flex-shrink: 0;
+
border : 0 Solid black;
border-radius:5px 0 0 5px;
box-shadow : 0 0 2px rgba(0,0,0,0.2);
diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index 4de131fa..106fbf23 100644
--- a/src/css/toolbox-layers-list.css
+++ b/src/css/toolbox-layers-list.css
@@ -3,10 +3,18 @@
* Layers container
*/
.layers-list-container {
+ min-height: 85px;
+ display: flex;
+ flex-direction: column;
}
+/**
+ * Layers title and toggle preview
+ */
+
.layers-title {
position: relative;
+ flex-shrink: 0;
}
.layers-toggle-preview {
@@ -30,16 +38,32 @@
color : gold;
}
+/**
+ * Layers buttons
+ */
+
+.layers-button {
+ margin: 0;
+ width: 16.66667%;
+ float : left;
+}
+
+/**
+ * Layers list
+ */
+
.layers-list {
font-size : 12px;
+ overflow: auto;
}
.layer-item {
+ position: relative;
height:24px;
line-height: 24px;
- padding : 0 0 0 10px;
+ padding: 0 0 0 10px;
border-top: 1px solid #444;
- cursor : pointer;
+ cursor: pointer;
}
.layer-item:hover {
@@ -55,23 +79,4 @@
.current-layer-item:hover {
background : #333;
color: gold;
-}
-
-.layers-button-container {
- overflow : hidden;
-}
-
-.layers-button {
- margin: 0;
- width: 16.66667%;
- float : left;
-}
-
-/* @override */
-.layers-button-container .layers-button {
- border-left-width: 0;
-}
-
-.layers-button:last-child {
- border-right-width: 0;
}
\ No newline at end of file
diff --git a/src/css/toolbox-palettes-list.css b/src/css/toolbox-palettes-list.css
index 4033a8f0..7b2c63d5 100644
--- a/src/css/toolbox-palettes-list.css
+++ b/src/css/toolbox-palettes-list.css
@@ -1,146 +1,174 @@
+.palettes-list-container {
+ min-height: 100px;
+ display: flex;
+ flex-direction: column;
+}
+
.palettes-title {
- background-size: 22px;
- background-repeat: no-repeat;
- background-position: 97%;
-}
-.palettes-list-colors {
- overflow: auto;
- max-height: 160px;
-}
-.palettes-list-color {
- cursor: pointer;
- float: left;
- margin: 0 0 5px 5px;
- width: 32px;
- height: 32px;
- position: relative;
+ flex-shrink: 0;
+ background-size: 22px;
+ background-repeat: no-repeat;
+ background-position: 97%;
}
-.palettes-list-color:nth-child(-n+10):after {
- position: absolute;
- top: 0;
- right: 0;
+/**
+ * Palettes action buttons
+ */
- background-color: black;
- color: gold;
-
- font-family: Tahoma;
- font-size: 0.5em;
- font-weight: bold;
-
- padding: 2px 3px 2px 3px;
- border-radius: 0 0 0 2px;
-}
-
-.palettes-list-color:nth-child(1):after {
- content: "1";
-}
-.palettes-list-color:nth-child(2):after {
- content: "2";
-}
-.palettes-list-color:nth-child(3):after {
- content: "3";
-}
-.palettes-list-color:nth-child(4):after {
- content: "4";
-}
-.palettes-list-color:nth-child(5):after {
- content: "5";
-}
-.palettes-list-color:nth-child(6):after {
- content: "6";
-}
-.palettes-list-color:nth-child(7):after {
- content: "7";
-}
-.palettes-list-color:nth-child(8):after {
- content: "8";
-}
-.palettes-list-color:nth-child(9):after {
- content: "9";
-}
-
-.palettes-list-color:nth-child(-n+5) {
- margin-top: 5px;
-}
-
-.palettes-list-color div {
- width: 32px;
- height: 32px;
-}
-.palettes-list-has-scrollbar .palettes-list-color, .palettes-list-has-scrollbar .palettes-list-color div {
- width: 29px
-}
-.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
- content: "";
- position: absolute;
- bottom: 1px;
- display: inline-block;
- background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M1%203v10h10z%22/%3E%3C/svg%3E');
- width: 14px;
- height: 14px;
-}
-.palettes-list-primary-color:before {
- left: 1px;
-}
-.palettes-list-secondary-color:before {
- right: 1px;
- background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M3%2013h10V3z%22/%3E%3C/svg%3E');
-}
-.palettes-list-actions {
- background-color: #3f3f3f;
- border-bottom-color: #222;
- height: 24px;
- padding: 0;
- overflow: hidden;
+.palettes-list-container .toolbox-buttons {
+ background-color: #3f3f3f;
+ height: 24px;
+ padding: 0;
}
.palettes-list-button,
.palettes-list-select {
- margin: 0;
- float: left;
+ margin: 0;
+ float: left;
}
.palettes-list-button {
- width: 16.66667%;
+ width: 16.66667%;
}
+
.palettes-list-select {
- width: 66.66667%;
- height: 100%;
- padding: 0 5px 0 5px;
+ width: 66.66667%;
+ height: 100%;
+ padding: 0 5px 0 5px;
- border-style: solid;
- border-width: 1px 0 1px 0;
+ color: #aaa;
+ font-size : 0.75em;
- color: #aaa;
- font-size : 0.75em;
+ text-align:left;
+ font-weight: normal;
- /*thanks firefox, you suck*/
- text-align:left;
- /*text-shadow:none;*/
- font-weight: normal;
-
- transition : background-color 0.3s, color 0.3s;
- cursor:pointer;
+ transition : background-color 0.3s, color 0.3s;
+ cursor:pointer;
}
-.palettes-list-select:hover {
- color: white;
- background-color: #484848;
+.palettes-list-select:hover,
+.palettes-list-select:focus {
+ background-color: #484848;
+ color: white;
}
.palettes-list-select:focus {
- background-color: #484848;
- color: white;
- outline: none;
+ outline: none;
}
-.palettes-list-no-colors {
- height: 42px;
- width: 100%;
- color: grey;
- font-size: 0.7em;
- font-style: italic;
- line-height: 42px;
- text-align: center
+/*
+ * Palette colors list
+ */
+
+.palettes-list-colors {
+ height: 100%;
+ max-height: 160px;
+ overflow: auto;
+ padding-top: 5px;
+}
+
+.palettes-list-color {
+ cursor: pointer;
+ float: left;
+ margin: 0 0 5px 5px;
+ width: calc((100% - 30px) / 5);
+ height: 32px;
+ position: relative;
+}
+
+.palettes-list-color div {
+ height: 100%;
+}
+
+/*
+ * Placeholder when no color is available in the current palette
+ */
+
+.palettes-list-no-colors {
+ height: 35px;
+ line-height: 35px;
+ width: 100%;
+ color: gray;
+ font-size: 0.7em;
+ font-style: italic;
+ text-align: center
+}
+
+/*
+ * Primary and secondary color markers
+ */
+
+.palettes-list-primary-color:before, .palettes-list-secondary-color:before {
+ content: "";
+ position: absolute;
+ bottom: 1px;
+ display: inline-block;
+ background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M1%203v10h10z%22/%3E%3C/svg%3E');
+ width: 14px;
+ height: 14px;
+}
+
+.palettes-list-primary-color:before {
+ left: 1px;
+}
+
+.palettes-list-secondary-color:before {
+ right: 1px;
+ background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2215%22%20width%3D%2215%22%3E%3Cpath%20stroke%3D%22gold%22%20stroke-width%3D%222%22%20d%3D%22M3%2013h10V3z%22/%3E%3C/svg%3E');
+}
+
+/*
+ * Color index for the 9 first colors
+ */
+
+.palettes-list-color:nth-child(-n+10):after {
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ background-color: black;
+ color: gold;
+
+ font-family: Tahoma;
+ font-size: 0.5em;
+ font-weight: bold;
+
+ padding: 2px 3px 2px 3px;
+ border-radius: 0 0 0 2px;
+}
+
+.palettes-list-color:nth-child(1):after {
+ content: "1";
+}
+
+.palettes-list-color:nth-child(2):after {
+ content: "2";
+}
+
+.palettes-list-color:nth-child(3):after {
+ content: "3";
+}
+
+.palettes-list-color:nth-child(4):after {
+ content: "4";
+}
+
+.palettes-list-color:nth-child(5):after {
+ content: "5";
+}
+
+.palettes-list-color:nth-child(6):after {
+ content: "6";
+}
+
+.palettes-list-color:nth-child(7):after {
+ content: "7";
+}
+
+.palettes-list-color:nth-child(8):after {
+ content: "8";
+}
+
+.palettes-list-color:nth-child(9):after {
+ content: "9";
}
diff --git a/src/css/toolbox.css b/src/css/toolbox.css
index 6f157486..ad7c5526 100644
--- a/src/css/toolbox.css
+++ b/src/css/toolbox.css
@@ -1,11 +1,10 @@
.toolbox-container {
- border: 4px solid #888;
+ border: 2px solid #888;
font-size: medium;
color: white;
text-align: left;
- border-radius: 4px;
+ border-radius: 2px;
margin-top: 5px;
- margin-bottom: 10px;
overflow: hidden;
}
@@ -13,5 +12,23 @@
padding: 8px;
margin: 0;
font-size: 15px;
+ /* reset for firefox */
+ height: 16px;
background: #222;
-}
\ No newline at end of file
+}
+
+.toolbox-buttons {
+ flex-shrink: 0;
+ overflow: hidden;
+ border-top: 1px solid #666;
+ border-bottom: 1px solid #222;
+}
+
+.toolbox-buttons .button {
+ /* Override border propery on .button elements from form.css */
+ border-width: 0 1px 0 0;
+}
+
+.toolbox-buttons button:last-child {
+ border-right-width: 0;
+}
diff --git a/src/css/transformations.css b/src/css/transformations.css
index 9f0da07d..b2810fdb 100644
--- a/src/css/transformations.css
+++ b/src/css/transformations.css
@@ -1,3 +1,6 @@
+.transformations-container {
+ flex-shrink: 0;
+}
.transformations-container .tool-icon {
float:left;
diff --git a/src/img/icons/common/common-keyboard-gold.png b/src/img/icons/common/common-keyboard-gold.png
index c765e6d6..f2173c76 100644
Binary files a/src/img/icons/common/common-keyboard-gold.png and b/src/img/icons/common/common-keyboard-gold.png differ
diff --git a/src/img/icons/common/common-keyboard-gold@2x.png b/src/img/icons/common/common-keyboard-gold@2x.png
new file mode 100644
index 00000000..c647658d
Binary files /dev/null and b/src/img/icons/common/common-keyboard-gold@2x.png differ
diff --git a/src/img/icons/common/common-swapcolors-arrow-grey.png b/src/img/icons/common/common-swapcolors-arrow-grey.png
index d8b57c3f..e80406a6 100644
Binary files a/src/img/icons/common/common-swapcolors-arrow-grey.png and b/src/img/icons/common/common-swapcolors-arrow-grey.png differ
diff --git a/src/img/icons/common/common-swapcolors-arrow-grey@2x.png b/src/img/icons/common/common-swapcolors-arrow-grey@2x.png
new file mode 100644
index 00000000..ea1b4242
Binary files /dev/null and b/src/img/icons/common/common-swapcolors-arrow-grey@2x.png differ
diff --git a/src/img/icons/frame/frame-dragndrop-white.png b/src/img/icons/frame/frame-dragndrop-white.png
index 22c620db..e6515b62 100644
Binary files a/src/img/icons/frame/frame-dragndrop-white.png and b/src/img/icons/frame/frame-dragndrop-white.png differ
diff --git a/src/img/icons/frame/frame-dragndrop-white@2x.png b/src/img/icons/frame/frame-dragndrop-white@2x.png
new file mode 100644
index 00000000..c1011816
Binary files /dev/null and b/src/img/icons/frame/frame-dragndrop-white@2x.png differ
diff --git a/src/img/icons/frame/frame-duplicate-white.png b/src/img/icons/frame/frame-duplicate-white.png
index 0795aeb7..6ec8948d 100644
Binary files a/src/img/icons/frame/frame-duplicate-white.png and b/src/img/icons/frame/frame-duplicate-white.png differ
diff --git a/src/img/icons/frame/frame-duplicate-white@2x.png b/src/img/icons/frame/frame-duplicate-white@2x.png
new file mode 100644
index 00000000..d6c28c6e
Binary files /dev/null and b/src/img/icons/frame/frame-duplicate-white@2x.png differ
diff --git a/src/img/icons/frame/frame-plus-white.png b/src/img/icons/frame/frame-plus-white.png
index 2a4104ce..5227e9cf 100644
Binary files a/src/img/icons/frame/frame-plus-white.png and b/src/img/icons/frame/frame-plus-white.png differ
diff --git a/src/img/icons/frame/frame-plus-white@2x.png b/src/img/icons/frame/frame-plus-white@2x.png
new file mode 100644
index 00000000..090f9a6a
Binary files /dev/null and b/src/img/icons/frame/frame-plus-white@2x.png differ
diff --git a/src/img/icons/frame/frame-recyclebin-white.png b/src/img/icons/frame/frame-recyclebin-white.png
index 8554e55a..98a6e4ea 100644
Binary files a/src/img/icons/frame/frame-recyclebin-white.png and b/src/img/icons/frame/frame-recyclebin-white.png differ
diff --git a/src/img/icons/frame/frame-recyclebin-white@2x.png b/src/img/icons/frame/frame-recyclebin-white@2x.png
new file mode 100644
index 00000000..1ed1955f
Binary files /dev/null and b/src/img/icons/frame/frame-recyclebin-white@2x.png differ
diff --git a/src/img/icons/minimap/minimap-popup-preview-arrow-gold.png b/src/img/icons/minimap/minimap-popup-preview-arrow-gold.png
index c437ae00..f2aeb33d 100644
Binary files a/src/img/icons/minimap/minimap-popup-preview-arrow-gold.png and b/src/img/icons/minimap/minimap-popup-preview-arrow-gold.png differ
diff --git a/src/img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png b/src/img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png
new file mode 100644
index 00000000..648c3e84
Binary files /dev/null and b/src/img/icons/minimap/minimap-popup-preview-arrow-gold@2x.png differ
diff --git a/src/img/icons/minimap/minimap-popup-preview-arrow-white.png b/src/img/icons/minimap/minimap-popup-preview-arrow-white.png
index b97bd38b..4afa0e5d 100644
Binary files a/src/img/icons/minimap/minimap-popup-preview-arrow-white.png and b/src/img/icons/minimap/minimap-popup-preview-arrow-white.png differ
diff --git a/src/img/icons/minimap/minimap-popup-preview-arrow-white@2x.png b/src/img/icons/minimap/minimap-popup-preview-arrow-white@2x.png
new file mode 100644
index 00000000..6ffe2bf1
Binary files /dev/null and b/src/img/icons/minimap/minimap-popup-preview-arrow-white@2x.png differ
diff --git a/src/img/icons/settings/settings-export-white.png b/src/img/icons/settings/settings-export-white.png
index b869cd09..45d76e67 100644
Binary files a/src/img/icons/settings/settings-export-white.png and b/src/img/icons/settings/settings-export-white.png differ
diff --git a/src/img/icons/settings/settings-export-white@2x.png b/src/img/icons/settings/settings-export-white@2x.png
new file mode 100644
index 00000000..5c9f5d94
Binary files /dev/null and b/src/img/icons/settings/settings-export-white@2x.png differ
diff --git a/src/img/icons/settings/settings-gear-white.png b/src/img/icons/settings/settings-gear-white.png
index 1c638b6f..267daa67 100644
Binary files a/src/img/icons/settings/settings-gear-white.png and b/src/img/icons/settings/settings-gear-white.png differ
diff --git a/src/img/icons/settings/settings-gear-white@2x.png b/src/img/icons/settings/settings-gear-white@2x.png
new file mode 100644
index 00000000..b874fc52
Binary files /dev/null and b/src/img/icons/settings/settings-gear-white@2x.png differ
diff --git a/src/img/icons/settings/settings-open-folder-white.png b/src/img/icons/settings/settings-open-folder-white.png
index 3630df10..fd68fbf4 100644
Binary files a/src/img/icons/settings/settings-open-folder-white.png and b/src/img/icons/settings/settings-open-folder-white.png differ
diff --git a/src/img/icons/settings/settings-open-folder-white@2x.png b/src/img/icons/settings/settings-open-folder-white@2x.png
new file mode 100644
index 00000000..0a1fb21d
Binary files /dev/null and b/src/img/icons/settings/settings-open-folder-white@2x.png differ
diff --git a/src/img/icons/settings/settings-resize-white.png b/src/img/icons/settings/settings-resize-white.png
index f2f17eaf..f85cae21 100644
Binary files a/src/img/icons/settings/settings-resize-white.png and b/src/img/icons/settings/settings-resize-white.png differ
diff --git a/src/img/icons/settings/settings-resize-white@2x.png b/src/img/icons/settings/settings-resize-white@2x.png
new file mode 100644
index 00000000..2db490a8
Binary files /dev/null and b/src/img/icons/settings/settings-resize-white@2x.png differ
diff --git a/src/img/icons/settings/settings-save-white.png b/src/img/icons/settings/settings-save-white.png
index d8dfeadd..bf131536 100644
Binary files a/src/img/icons/settings/settings-save-white.png and b/src/img/icons/settings/settings-save-white.png differ
diff --git a/src/img/icons/settings/settings-save-white@2x.png b/src/img/icons/settings/settings-save-white@2x.png
new file mode 100644
index 00000000..1b514ed3
Binary files /dev/null and b/src/img/icons/settings/settings-save-white@2x.png differ
diff --git a/src/img/icons/tools/tool-circle.png b/src/img/icons/tools/tool-circle.png
index 7f4dbd97..52a14811 100644
Binary files a/src/img/icons/tools/tool-circle.png and b/src/img/icons/tools/tool-circle.png differ
diff --git a/src/img/icons/tools/tool-circle@2x.png b/src/img/icons/tools/tool-circle@2x.png
new file mode 100644
index 00000000..524de8b1
Binary files /dev/null and b/src/img/icons/tools/tool-circle@2x.png differ
diff --git a/src/img/icons/tools/tool-colorpicker.png b/src/img/icons/tools/tool-colorpicker.png
index fe4cbcb8..59090d0e 100644
Binary files a/src/img/icons/tools/tool-colorpicker.png and b/src/img/icons/tools/tool-colorpicker.png differ
diff --git a/src/img/icons/tools/tool-colorpicker@2x.png b/src/img/icons/tools/tool-colorpicker@2x.png
new file mode 100644
index 00000000..bebff88b
Binary files /dev/null and b/src/img/icons/tools/tool-colorpicker@2x.png differ
diff --git a/src/img/icons/tools/tool-colorswap.png b/src/img/icons/tools/tool-colorswap.png
index ac316bc2..778a53d3 100644
Binary files a/src/img/icons/tools/tool-colorswap.png and b/src/img/icons/tools/tool-colorswap.png differ
diff --git a/src/img/icons/tools/tool-colorswap@2x.png b/src/img/icons/tools/tool-colorswap@2x.png
new file mode 100644
index 00000000..91a95860
Binary files /dev/null and b/src/img/icons/tools/tool-colorswap@2x.png differ
diff --git a/src/img/icons/tools/tool-dithering.png b/src/img/icons/tools/tool-dithering.png
index 7290eb86..00180e69 100644
Binary files a/src/img/icons/tools/tool-dithering.png and b/src/img/icons/tools/tool-dithering.png differ
diff --git a/src/img/icons/tools/tool-dithering@2x.png b/src/img/icons/tools/tool-dithering@2x.png
new file mode 100644
index 00000000..2eafde8e
Binary files /dev/null and b/src/img/icons/tools/tool-dithering@2x.png differ
diff --git a/src/img/icons/tools/tool-eraser.png b/src/img/icons/tools/tool-eraser.png
index 88fa7583..263a9c04 100644
Binary files a/src/img/icons/tools/tool-eraser.png and b/src/img/icons/tools/tool-eraser.png differ
diff --git a/src/img/icons/tools/tool-eraser@2x.png b/src/img/icons/tools/tool-eraser@2x.png
new file mode 100644
index 00000000..1fc02334
Binary files /dev/null and b/src/img/icons/tools/tool-eraser@2x.png differ
diff --git a/src/img/icons/tools/tool-lasso-select.png b/src/img/icons/tools/tool-lasso-select.png
index 0e9abc14..f388925e 100644
Binary files a/src/img/icons/tools/tool-lasso-select.png and b/src/img/icons/tools/tool-lasso-select.png differ
diff --git a/src/img/icons/tools/tool-lasso-select@2x.png b/src/img/icons/tools/tool-lasso-select@2x.png
new file mode 100644
index 00000000..17e7162f
Binary files /dev/null and b/src/img/icons/tools/tool-lasso-select@2x.png differ
diff --git a/src/img/icons/tools/tool-lighten.png b/src/img/icons/tools/tool-lighten.png
index 4a3a993e..74a2ef42 100644
Binary files a/src/img/icons/tools/tool-lighten.png and b/src/img/icons/tools/tool-lighten.png differ
diff --git a/src/img/icons/tools/tool-lighten@2x.png b/src/img/icons/tools/tool-lighten@2x.png
new file mode 100644
index 00000000..c45feacc
Binary files /dev/null and b/src/img/icons/tools/tool-lighten@2x.png differ
diff --git a/src/img/icons/tools/tool-move.png b/src/img/icons/tools/tool-move.png
index 7911e1a7..91816987 100644
Binary files a/src/img/icons/tools/tool-move.png and b/src/img/icons/tools/tool-move.png differ
diff --git a/src/img/icons/tools/tool-move@2x.png b/src/img/icons/tools/tool-move@2x.png
new file mode 100644
index 00000000..78fcc514
Binary files /dev/null and b/src/img/icons/tools/tool-move@2x.png differ
diff --git a/src/img/icons/tools/tool-paint-bucket.png b/src/img/icons/tools/tool-paint-bucket.png
index cea3ed36..c3dbd17a 100644
Binary files a/src/img/icons/tools/tool-paint-bucket.png and b/src/img/icons/tools/tool-paint-bucket.png differ
diff --git a/src/img/icons/tools/tool-paint-bucket@2x.png b/src/img/icons/tools/tool-paint-bucket@2x.png
new file mode 100644
index 00000000..aafd114a
Binary files /dev/null and b/src/img/icons/tools/tool-paint-bucket@2x.png differ
diff --git a/src/img/icons/tools/tool-pen.png b/src/img/icons/tools/tool-pen.png
index 6f3a0317..68e3b7e7 100644
Binary files a/src/img/icons/tools/tool-pen.png and b/src/img/icons/tools/tool-pen.png differ
diff --git a/src/img/icons/tools/tool-pen@2x.png b/src/img/icons/tools/tool-pen@2x.png
new file mode 100644
index 00000000..5a8c1569
Binary files /dev/null and b/src/img/icons/tools/tool-pen@2x.png differ
diff --git a/src/img/icons/tools/tool-rectangle-select.png b/src/img/icons/tools/tool-rectangle-select.png
index 421e0f96..a613bd9b 100644
Binary files a/src/img/icons/tools/tool-rectangle-select.png and b/src/img/icons/tools/tool-rectangle-select.png differ
diff --git a/src/img/icons/tools/tool-rectangle-select@2x.png b/src/img/icons/tools/tool-rectangle-select@2x.png
new file mode 100644
index 00000000..cc2e5650
Binary files /dev/null and b/src/img/icons/tools/tool-rectangle-select@2x.png differ
diff --git a/src/img/icons/tools/tool-rectangle.png b/src/img/icons/tools/tool-rectangle.png
index 3fa778d3..a2d43856 100644
Binary files a/src/img/icons/tools/tool-rectangle.png and b/src/img/icons/tools/tool-rectangle.png differ
diff --git a/src/img/icons/tools/tool-rectangle@2x.png b/src/img/icons/tools/tool-rectangle@2x.png
new file mode 100644
index 00000000..b1897a13
Binary files /dev/null and b/src/img/icons/tools/tool-rectangle@2x.png differ
diff --git a/src/img/icons/tools/tool-shape-select.png b/src/img/icons/tools/tool-shape-select.png
index 10da42f1..55d6400f 100644
Binary files a/src/img/icons/tools/tool-shape-select.png and b/src/img/icons/tools/tool-shape-select.png differ
diff --git a/src/img/icons/tools/tool-shape-select@2x.png b/src/img/icons/tools/tool-shape-select@2x.png
new file mode 100644
index 00000000..fed2da90
Binary files /dev/null and b/src/img/icons/tools/tool-shape-select@2x.png differ
diff --git a/src/img/icons/tools/tool-stroke.png b/src/img/icons/tools/tool-stroke.png
index 39b9bc14..5ae9bf3c 100644
Binary files a/src/img/icons/tools/tool-stroke.png and b/src/img/icons/tools/tool-stroke.png differ
diff --git a/src/img/icons/tools/tool-stroke@2x.png b/src/img/icons/tools/tool-stroke@2x.png
new file mode 100644
index 00000000..86648058
Binary files /dev/null and b/src/img/icons/tools/tool-stroke@2x.png differ
diff --git a/src/img/icons/tools/tool-vertical-mirror-pen.png b/src/img/icons/tools/tool-vertical-mirror-pen.png
index f5ffc49c..618bd5a6 100644
Binary files a/src/img/icons/tools/tool-vertical-mirror-pen.png and b/src/img/icons/tools/tool-vertical-mirror-pen.png differ
diff --git a/src/img/icons/tools/tool-vertical-mirror-pen@2x.png b/src/img/icons/tools/tool-vertical-mirror-pen@2x.png
new file mode 100644
index 00000000..27a29229
Binary files /dev/null and b/src/img/icons/tools/tool-vertical-mirror-pen@2x.png differ
diff --git a/src/img/icons/transform/tool-center.png b/src/img/icons/transform/tool-center.png
new file mode 100644
index 00000000..8786d162
Binary files /dev/null and b/src/img/icons/transform/tool-center.png differ
diff --git a/src/img/icons/transform/tool-center@2x.png b/src/img/icons/transform/tool-center@2x.png
new file mode 100644
index 00000000..64ff4e92
Binary files /dev/null and b/src/img/icons/transform/tool-center@2x.png differ
diff --git a/src/img/icons/transform/tool-clone.png b/src/img/icons/transform/tool-clone.png
index 0425befd..03234558 100644
Binary files a/src/img/icons/transform/tool-clone.png and b/src/img/icons/transform/tool-clone.png differ
diff --git a/src/img/icons/transform/tool-clone@2x.png b/src/img/icons/transform/tool-clone@2x.png
new file mode 100644
index 00000000..8f265323
Binary files /dev/null and b/src/img/icons/transform/tool-clone@2x.png differ
diff --git a/src/img/icons/transform/tool-flip.png b/src/img/icons/transform/tool-flip.png
index 4df04b16..8369b2b4 100644
Binary files a/src/img/icons/transform/tool-flip.png and b/src/img/icons/transform/tool-flip.png differ
diff --git a/src/img/icons/transform/tool-flip@2x.png b/src/img/icons/transform/tool-flip@2x.png
new file mode 100644
index 00000000..ace55c60
Binary files /dev/null and b/src/img/icons/transform/tool-flip@2x.png differ
diff --git a/src/img/icons/transform/tool-rotate.png b/src/img/icons/transform/tool-rotate.png
index 986837a8..20ee6374 100644
Binary files a/src/img/icons/transform/tool-rotate.png and b/src/img/icons/transform/tool-rotate.png differ
diff --git a/src/img/icons/transform/tool-rotate@2x.png b/src/img/icons/transform/tool-rotate@2x.png
new file mode 100644
index 00000000..af99739a
Binary files /dev/null and b/src/img/icons/transform/tool-rotate@2x.png differ
diff --git a/src/img/icons@2x.png b/src/img/icons@2x.png
new file mode 100644
index 00000000..74b86c65
Binary files /dev/null and b/src/img/icons@2x.png differ
diff --git a/src/index.html b/src/index.html
index a54301b6..d0f5f478 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,26 +22,10 @@
color:white;">
Loading Piskel ...
+
+ @@include('templates/debug-header.html', {})
+
-
-
@@ -101,6 +85,10 @@
@@include('templates/settings/save.html', {})
@@include('templates/settings/import.html', {})
@@include('templates/settings/export.html', {})
+ @@include('templates/settings/export/png.html', {})
+ @@include('templates/settings/export/gif.html', {})
+ @@include('templates/settings/export/zip.html', {})
+ @@include('templates/settings/export/misc.html', {})
diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html
index e2b6614c..526c8b8e 100644
--- a/src/templates/settings/export.html
+++ b/src/templates/settings/export.html
@@ -1,72 +1,25 @@
diff --git a/src/templates/settings/export/gif.html b/src/templates/settings/export/gif.html
new file mode 100644
index 00000000..8446ab90
--- /dev/null
+++ b/src/templates/settings/export/gif.html
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/src/templates/settings/export/misc.html b/src/templates/settings/export/misc.html
new file mode 100644
index 00000000..b2f6768c
--- /dev/null
+++ b/src/templates/settings/export/misc.html
@@ -0,0 +1,16 @@
+
\ No newline at end of file
diff --git a/src/templates/settings/export/png.html b/src/templates/settings/export/png.html
new file mode 100644
index 00000000..71693ec7
--- /dev/null
+++ b/src/templates/settings/export/png.html
@@ -0,0 +1,26 @@
+
\ No newline at end of file
diff --git a/src/templates/settings/export/zip.html b/src/templates/settings/export/zip.html
new file mode 100644
index 00000000..1562a8bf
--- /dev/null
+++ b/src/templates/settings/export/zip.html
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/src/templates/settings/import.html b/src/templates/settings/import.html
index 87c26877..85d9e3ac 100644
--- a/src/templates/settings/import.html
+++ b/src/templates/settings/import.html
@@ -1,5 +1,5 @@