mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
jdescottes 2014-07-13 00:21:36 +02:00
parent dfc3bfd181
commit 6af04bb599
25 changed files with 434 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
misc/selenium-ide/change-colors.html Normal file
View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://localhost:9901/?debug" />
<title>change-colors</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">change-colors</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/?debug</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=div.sp-preview-inner</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=input.sp-input</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>css=input.sp-input</td>
<td>rgb(170, 187, 204)</td>
</tr>
<tr>
<td>mouseDown</td>
<td>id=preview-list-scroller</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=div.swap-colors-icon</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>

52
misc/selenium-ide/change-size.html Normal file
View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://localhost:9901/?debug" />
<title>change-size</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">change-size</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/?debug</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=div.tool-icon.resize-icon</td>
<td></td>
</tr>
<tr>
<td>type</td>
<td>name=resize-width</td>
<td>64</td>
</tr>
<tr>
<td>type</td>
<td>name=resize-height</td>
<td>64</td>
</tr>
<tr>
<td>click</td>
<td>name=resize-content-checkbox</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//input[@value='Resize']</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>id=column-wrapper</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>

82
misc/selenium-ide/select-tools.html Normal file
View File

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://localhost:9901/?debug" />
<title>Select tools</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Select tools</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/?debug</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[2]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[3]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[4]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[5]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[6]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[7]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[8]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[9]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[10]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[11]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[12]</td>
<td></td>
</tr>
<tr>
<td>mouseDown</td>
<td>//ul[@id='tools-container']/li[13]</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>

92
misc/selenium-ide/user-preferences.html Normal file
View File

@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://localhost:9901/?debug" />
<title>user-preferences</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">user-preferences</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/?debug</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=div.tool-icon.gear-icon</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=div.background-picker.lowcont-medium-picker-background</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=div.background-picker.medium-picker-background</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=div.background-picker.light-picker-background</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=grid-width</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=grid-width</td>
<td>label=Enabled - 1px wide</td>
</tr>
<tr>
<td>click</td>
<td>css=option[value=&quot;1&quot;]</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=grid-width</td>
<td>label=Enabled - 2px wide</td>
</tr>
<tr>
<td>click</td>
<td>css=option[value=&quot;2&quot;]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=grid-width</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=grid-width</td>
<td>label=Enabled - 3px wide</td>
</tr>
<tr>
<td>click</td>
<td>css=option[value=&quot;3&quot;]</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=grid-width</td>
<td>label=Enabled - 4px wide</td>
</tr>
<tr>
<td>click</td>
<td>css=option[value=&quot;4&quot;]</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>

13
src/css/dialogs-browse-local.css
View File

@ -3,7 +3,7 @@
/* Browse local piskels panel */
/************************************************************************************************/
.local-piskels-list {
.local-piskel-list {
width: 100%;
}
@ -19,12 +19,19 @@
font-weight : normal;
}
.local-piskels-list a {
.local-piskel-list a {
text-decoration: none;
}
.local-piskels-list a:hover {
.local-piskel-list a:hover {
text-decoration: underline;
}
.local-piskel-list-head {
font-weight: bold;
color: gold;
}
.local-piskel-load-button,
.local-piskel-delete-button {
width : 75px;

55
src/css/dialogs-import-image.css Normal file
View File

@ -0,0 +1,55 @@
/************************************************************************************************/
/* Import dialog */
/************************************************************************************************/
.import-section-preview {
display : inline-block;
height : 60px;
width: 60px;
border : 1px dashed #999;
border-radius: 3px;
}
.dialog-section-title {
display : inline-block;
width: 55px;
}
.import-size-field,
.resize-size-field {
width: 50px;
margin-right: 8px;
text-align: right;
}
.import-size-field:nth-of-type(2),
.resize-size-field:nth-of-type(2) {
margin-left: 5px;
}
.import-image-file-name {
display: inline-block;
overflow: hidden;
height: 2rem;
word-break : break-all;
vertical-align: middle;
font-style: italic;
font-weight: normal;
text-shadow: none;
}
[name=smooth-resize-checkbox] {
margin : 0 8px;
}
.dialog-import-body {
padding:10px 20px;
font-size:1.5em
}
.import-button {
font-size: 1em;
height: auto;
padding: 5px 10px;
}

39
src/css/settings-export.css
View File

@ -1,22 +1,21 @@
/*******************************/
/* Gif/Png Export Setting panel*/
/*******************************/
.gif-upload-button,
.gif-download-button,
.gif-render-button {
/*float : right;*/
margin-top : 10px;
margin-right : 10px;
}
.gif-export-radio-group {
margin:10px 0;
}
.gif-export-preview,
.png-export-preview {
margin-top:20px;
max-width:240px;
position:relative;
margin-top:10px;
max-height:32px;
}
.gif-export-preview {
max-width:32px;
}
.png-export-preview {
@ -28,8 +27,15 @@
float: left;
}
.png-upload-status {
margin : 10px 0;
.gif-upload-status {
width: 180px;
margin-left: 5px;
margin-top: 10px;
}
.gif-upload-status,
.gif-export-preview {
float : left;
}
.preview-upload-ongoing:before{
@ -45,3 +51,14 @@
background: rgba(0,0,0,0.5);
color: white;
}
.gif-export-progress-status {
margin-left: 5px;
}
.gif-export-progress-bar {
margin-top:5px;
height:3px;
width: 0;
background:gold;
}

18
src/css/settings-import.css vendored Normal file
View File

@ -0,0 +1,18 @@
/************************************************************************************************/
/* Import panel */
/************************************************************************************************/
.import-section,
.resize-section {
margin: 10px 0;
}
.file-input-button {
margin-right: 8px;
border-radius: 2px;
}
.import-highlight {
font-weight: bold;
color: white;
}

144
src/css/settings.css
View File

@ -184,151 +184,7 @@
border: gold 1px solid;
}
/************************************************************************************************/
/* Gif/Png Export panel */
/************************************************************************************************/
.gif-upload-button,
.gif-render-button {
margin-top : 10px;
margin-right : 10px;
}
.gif-export-radio-group {
margin:10px 0;
}
.gif-export-progress-status {
margin-left: 5px;
}
.gif-export-progress-bar {
margin-top:5px;
height:3px;
width: 0;
background:gold;
}
.png-export-preview {
margin:10px 0;
overflow: hidden;
}
.png-export-preview img {
float: left;
}
.png-upload-status {
margin : 10px 0;
}
.gif-upload-status,
.gif-export-preview {
float : left;
}
.gif-export-preview {
}
.gif-upload-status {
width: 180px;
margin-left: 5px;
margin-top: 10px;
}
.gif-export-preview,
.png-export-preview {
margin-top:10px;
position:relative;
}
.gif-export-preview,
.png-export-preview {
max-width:32px;
max-height:32px;
}
.png-export-preview {
max-width:240px;
}
.preview-upload-ongoing:before{
content: "Upload ongoing ...";
position: absolute;
display: block;
height: 100%;
width: 100%;
text-align: center;
padding-top: 45%;
box-sizing:border-box;
-moz-box-sizing:border-box;
background: rgba(0,0,0,0.5);
color: white;
}
/************************************************************************************************/
/* Import panel */
/************************************************************************************************/
.import-section,
.resize-section {
margin: 10px 0;
}
.import-section-title {
display : inline-block;
}
.import-section-title-small {
width: 55px;
}
.import-section-disabled {
color : #888;
}
.import-section-preview {
display : inline-block;
height : 60px;
width: 60px;
border : 1px dashed #999;
border-radius: 3px;
}
.import-size-field,
.resize-size-field {
width: 50px;
margin-right: 8px;
text-align: right;
}
.import-size-field:nth-of-type(2),
.resize-size-field:nth-of-type(2) {
margin-left: 5px;
}
.file-input-button {
margin-right: 8px;
border-radius: 2px;
}
.import-image-file-name {
display: inline-block;
overflow: hidden;
height: 2rem;
word-break : break-all;
vertical-align: middle;
font-style: italic;
font-weight: normal;
text-shadow: none;
}
[name=smooth-resize-checkbox] {
margin : 0 8px;
}
/************************************************************************************************/
/* Save panel */

3
src/index.html
View File

@ -54,11 +54,10 @@
<iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container">
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/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/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/export.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>

9
src/js/controller/DrawingController.js
View File

@ -271,10 +271,13 @@
};
/**
* @private
* Translate absolute x,y screen coordinates into sprite coordinates
* @param {Number} screenX
* @param {Number} screenY
* @return {Object} {x:Number, y:Number}
*/
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
return this.renderer.getCoordinates(event.clientX, event.clientY);
ns.DrawingController.prototype.getSpriteCoordinates = function(screenX, screenY) {
return this.renderer.getCoordinates(screenX, screenY);
};
ns.DrawingController.prototype.setCurrentButton = function (event) {

6
src/js/controller/dialogs/BrowseLocalController.js
View File

@ -12,12 +12,12 @@
this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
this.service_ = pskl.app.localStorageService;
this.piskelsList = $('.local-piskels-list');
this.piskelList = $('.local-piskel-list');
this.prevSessionContainer = $('.previous-session');
this.fillLocalPiskelsList_();
this.piskelsList.click(this.onPiskelsListClick_.bind(this));
this.piskelList.click(this.onPiskelsListClick_.bind(this));
};
ns.BrowseLocalController.prototype.onPiskelsListClick_ = function (evt) {
@ -51,7 +51,7 @@
html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
}).bind(this));
var tableBody_ = this.piskelsList.get(0).tBodies[0];
var tableBody_ = this.piskelList.get(0).tBodies[0];
tableBody_.innerHTML = html;
};
})();

14
src/js/controller/settings/ImageExportController.js Normal file
View File

@ -0,0 +1,14 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
ns.ImageExportController = function (piskelController) {
this.piskelController = piskelController;
this.pngExportController = new ns.PngExportController(piskelController);
this.gifExportController = new ns.GifExportController(piskelController);
};
ns.ImageExportController.prototype.init = function () {
this.pngExportController.init();
this.gifExportController.init();
};
})();

101
src/js/controller/settings/LocalStorageController.js
View File

@ -1,101 +0,0 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
ns.LocalStorageController = function () {};
/**
* @public
*/
ns.LocalStorageController.prototype.init = function() {
this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
this.previousSessionTemplate_ = pskl.utils.Template.get("previous-session-info-template");
this.service_ = pskl.app.localStorageService;
this.piskelsList = $('.local-piskels-list');
this.prevSessionContainer = $('.previous-session');
this.fillRestoreSession_();
this.fillLocalPiskelsList_();
this.piskelsList.click(this.onPiskelsListClick_.bind(this));
};
ns.LocalStorageController.prototype.onPiskelsListClick_ = function (evt) {
var action = evt.target.getAttribute('data-action');
var name = evt.target.getAttribute('data-name');
if (action === 'load') {
if (window.confirm('This will erase your current piskel. Continue ?')) {
this.service_.load(name);
$.publish(Events.CLOSE_SETTINGS_DRAWER);
}
} else if (action === 'delete') {
if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) {
this.service_.remove(name);
this.fillLocalPiskelsList_();
}
}
};
ns.LocalStorageController.prototype.fillRestoreSession_ = function () {
var previousInfo = pskl.app.backupService.getPreviousPiskelInfo();
if (previousInfo) {
var info = {
name : previousInfo.name,
date : this.formatDate_(previousInfo.date, "{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}")
};
this.prevSessionContainer.html(pskl.utils.Template.replace(this.previousSessionTemplate_, info));
$(".restore-session-button").click(this.onRestorePreviousSessionClick_.bind(this));
} else {
this.prevSessionContainer.html("No piskel backup was found on this browser.");
}
};
ns.LocalStorageController.prototype.onRestorePreviousSessionClick_ = function () {
if (window.confirm('This will erase your current workspace. Continue ?')) {
pskl.app.backupService.load();
$.publish(Events.CLOSE_SETTINGS_DRAWER);
}
};
var pad = function (num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
};
ns.LocalStorageController.prototype.formatDate_ = function (date, format) {
date = new Date(date);
var formattedDate = pskl.utils.Template.replace(format, {
Y : date.getFullYear(),
M : pad(date.getMonth() + 1),
D : pad(date.getDate()),
H : pad(date.getHours()),
m : pad(date.getMinutes())
});
return formattedDate;
};
ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () {
var html = "";
var keys = this.service_.getKeys();
keys.sort(function (k1, k2) {
if (k1.date < k2.date) {return 1;}
if (k1.date > k2.date) {return -1;}
return 0;
});
keys.forEach((function (key) {
var date = this.formatDate_(key.date, "{{Y}}/{{M}}/{{D}} {{H}}:{{m}}");
html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
}).bind(this));
var tableBody_ = this.piskelsList.get(0).tBodies[0];
tableBody_.innerHTML = html;
};
})();

2
src/js/controller/settings/PngExportController.js
View File

@ -15,8 +15,6 @@
document.querySelector(".zip-generate-button").addEventListener('click', this.onZipButtonClick_.bind(this));
this.updatePreview_(this.getFramesheetAsCanvas().toDataURL("image/png"));
(new ns.GifExportController(this.piskelController)).init();
};
ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {

15
src/js/controller/settings/SaveController.js
View File

@ -87,10 +87,14 @@
this.piskelController.getPiskel().setDescriptor(descriptor);
this.beforeSaving_();
this.saveOnlineButton.attr('disabled', true);
this.saveOnlineStatus.html('Saving ...');
pskl.app.storageService.store({
success : this.onSaveSuccess_.bind(this),
error : this.onSaveError_.bind(this),
after : this.afterSaving_.bind(this)
after : this.afterOnlineSaving_.bind(this)
});
}
};
@ -116,7 +120,6 @@
ns.SaveController.prototype.saveFile_ = function () {
this.beforeSaving_();
this.saveToFile_();
pskl.utils.BlobUtils.stringToBlob(pskl.app.piskelController.serialize(), function(blob) {
pskl.utils.FileUtils.downloadAsFile(blob, this.getLocalFilename_());
this.onSaveSuccess_();
@ -135,9 +138,6 @@
ns.SaveController.prototype.beforeSaving_ = function () {
this.updatePiskelDescriptor_();
this.saveOnlineButton.attr('disabled', true);
this.saveOnlineStatus.html('Saving ...');
if (this.piskelName) {
this.piskelName.classList.add('piskel-name-saving');
}
@ -162,10 +162,13 @@
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]);
};
ns.SaveController.prototype.afterSaving_ = function () {
ns.SaveController.prototype.afterOnlineSaving_ = function () {
this.saveOnlineButton.attr('disabled', false);
this.saveOnlineStatus.html('');
this.afterSaving_();
};
ns.SaveController.prototype.afterSaving_ = function () {
if (this.piskelName) {
this.piskelName.classList.remove('piskel-name-saving');
}

2
src/js/controller/settings/SettingsController.js
View File

@ -12,7 +12,7 @@
},
'png' : {
template : 'templates/settings/export.html',
controller : ns.PngExportController
controller : ns.ImageExportController
},
'import' : {
template : 'templates/settings/import.html',

13
src/js/drawingtools/PaintBucket.js
View File

@ -30,16 +30,3 @@
pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, replayData.col, replayData.row, replayData.color);
};
})();

5
src/js/service/FileDropperService.js
View File

@ -21,11 +21,10 @@
event.preventDefault();
event.stopPropagation();
// FIXME : Ahah this is horrible
this.coords_ = pskl.app.drawingController.getSpriteCoordinates(event);
this.coords_ = pskl.app.drawingController.getSpriteCoordinates(event.clientX, event.clientY);
var files = event.dataTransfer.files;
for (var i = 0; i < files.length ; i++) {
var file = files[i];
var isImage = file.type.indexOf('image') === 0;

2
src/piskel-script-list.js
View File

@ -88,9 +88,9 @@
// Settings sub-controllers
"js/controller/settings/ApplicationSettingsController.js",
"js/controller/settings/ResizeController.js",
"js/controller/settings/ImageExportController.js",
"js/controller/settings/GifExportController.js",
"js/controller/settings/PngExportController.js",
"js/controller/settings/LocalStorageController.js",
"js/controller/settings/SaveController.js",
"js/controller/settings/ImportController.js",

3
src/piskel-style-list.js
View File

@ -6,10 +6,13 @@
"css/font-icon.css",
"css/forms.css",
"css/settings.css",
"css/settings-export.css",
"css/settings-import.css",
"css/tools.css",
"css/icons.css",
"css/cheatsheet.css",
"css/dialogs.css",
"css/dialogs-import-image.css",
"css/dialogs-manage-palettes.css",
"css/dialogs-browse-local.css",
"css/toolbox.css",

3
src/templates/dialogs/browse-local.html
View File

@ -4,13 +4,12 @@
<span class="palette-manager-close dialog-close">X</span>
</h3>
<div style="padding:10px 20px; font-size:1.5em">
<table class="local-piskels-list">
<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>

8
src/templates/dialogs/import-image.html
View File

@ -3,17 +3,17 @@
Import Image
<span class="palette-manager-close dialog-close">X</span>
</h3>
<div class="import-options" style="padding:10px 20px; font-size:1.5em">
<div class="dialog-import-body">
<form action="" method="POST" name="import-image-form">
<div class="import-section">
<span class="import-section-title import-section-title-small">Name :</span><span class="import-image-file-name"></span>
<span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
</div>
<div class="import-section">
<span class="import-section-title import-section-title-small" style="vertical-align:top">Info :</span>
<span class="dialog-section-title" style="vertical-align:top">Info :</span>
<div class="import-section-preview"></div>
</div>
<div class="import-section">
<span class="import-section-title import-section-title-small">Size :</span>
<span class="dialog-section-title">Size :</span>
<input type="text" class="textfield import-size-field" name="resize-width"/>x
<input type="text" class="textfield import-size-field" name="resize-height"/>
</div>

8
src/templates/settings/import.html
View File

@ -3,7 +3,7 @@
Load from Browser
</div>
<div class="settings-item">
<span>Load a <span style="font-weight:bold;color:white">local piskel</span> saved in this Browser</span>
<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>
</div>
@ -12,7 +12,7 @@
Load .piskel file
</div>
<div class="settings-item">
<span>Load a <span style="font-weight:bold;color:white">.piskel</span> file from your computer</span>
<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>
@ -26,7 +26,7 @@
Import From Picture
</div>
<div class="settings-item">
<div style="margin-top:5px;margin-bottom:5px;">Supports : <span style="font-weight:bold;color:white">PNG, JPG, BMP, Animated GIF ...</span></div>
<div 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"
@ -38,7 +38,7 @@
Recover recent sessions
</div>
<div class="settings-item previous-session">
<!-- <span>Load a <span style="font-weight:bold;color:white">backup</span> from a recent session</span>
<!-- <span>Load a <span class="import-highlight">backup</span> from a recent session</span>
<div class="import-section">
<button type="button" class="button button-primary load-recent-button">Browse recent sessions</button>
</div> -->

31
src/templates/settings/localstorage.html
View File

@ -1,31 +0,0 @@
<div class="settings-section">
<div class="settings-title">
Restore previous session
</div>
<div class="settings-item previous-session">
</div>
<div class="settings-title">
Browse Local Piskels
</div>
<div class="settings-item">
<table class="local-piskels-list">
<tbody></tbody>
</table>
</div>
<script type="text/template" id="local-storage-item-template">
<tr class="local-piskel-item">
<td class="local-piskel-name">{{name}}</td>
<td class="local-piskel-save-date">{{date}}</td>
<td><a class="local-piskel-load-link" data-action="load" data-name="{{name}}" href="javascript:void(0);">load</a></td>
<td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
</tr>
</script>
<script type="text/template" id="previous-session-info-template">
<div>
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
<div style="margin-top:10px;">
<button type="button" class="button button-primary restore-session-button">Restore</button>
</div>
</div>
</script>
</div>