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
f139a9c130
piskel/diff.txt
jdescottes 087b8c57c5 UI : Align PNG export with GIF export 
- PNG export now has its own panel
- Lots of code duplication between PNG and GIF controller => FIXIT
- Added a link displayed after image upload
2014-03-08 17:23:20 +01:00

223 lines
7.9 KiB
Plaintext
Raw Blame History

diff --git a/css/settings.css b/css/settings.css
index 829a727..32dd7df 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -161,7 +161,8 @@
border: gold 1px solid;
}
-/* Gif Export Setting panel*/
+/* Gif/Png Export Setting panel*/
+/*******************************/
.gif-upload-button,
.gif-render-button {
/*float : right;*/
@@ -173,12 +174,26 @@
margin:10px 0;
}
-.gif-export-preview {
+.gif-export-preview,
+.png-export-preview {
margin-top:20px;
max-width:240px;
position:relative;
}
+.png-export-preview {
+ margin:10px 0;
+ overflow: hidden;
+}
+
+.png-export-preview img {
+ float: left;
+}
+
+.png-upload-status {
+ margin : 10px 0;
+}
+
.preview-upload-ongoing:before{
content: "Upload ongoing ...";
position: absolute;
diff --git a/css/style.css b/css/style.css
index a61879a..fe9405b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -300,3 +300,7 @@ body {
.user-message .close:hover {
color: black;
}
+
+.image-link {
+ color : gold;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 05d758b..36cb01c 100644
--- a/index.html
+++ b/index.html
@@ -51,12 +51,13 @@
<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/export-gif.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/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+ <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+ <iframe src="templates/settings/export-png.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>
</div>
diff --git a/js/Constants.js b/js/Constants.js
index 71a12bc..67be116 100644
--- a/js/Constants.js
+++ b/js/Constants.js
@@ -44,8 +44,8 @@ var Constants = {
SAVE : 'save'
}
},
- IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload',
- IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/',
+ IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload',
+ IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/',
GRID_STROKE_WIDTH: 1,
ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js
index ac7602e..9a5bd75 100644
--- a/js/controller/settings/GifExportController.js
+++ b/js/controller/settings/GifExportController.js
@@ -1,6 +1,8 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
+ var URL_MAX_LENGTH = 60;
+
ns.GifExportController = function (piskelController) {
this.piskelController = piskelController;
};
@@ -26,6 +28,8 @@
ns.GifExportController.prototype.init = function () {
this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
+ this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0];
+
this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
@@ -52,7 +56,9 @@
ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
this.updatePreview_(imageUrl);
+ this.updateStatus_(imageUrl);
this.previewContainerEl.classList.remove("preview-upload-ongoing");
+
};
ns.GifExportController.prototype.updatePreview_ = function (src) {
@@ -127,4 +133,27 @@
gif.render();
};
+
+ // FIXME : HORRIBLE COPY/PASTA
+
+ ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
+ if (imageUrl) {
+ var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
+ var linkHtml = pskl.utils.Template.replace(linkTpl, {
+ link : imageUrl,
+ shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
+ });
+ this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
+ } else {
+ // FIXME : Should display error message instead
+ }
+ };
+
+ ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) {
+ if (url.length > maxLength) {
+ url = url.substring(0, maxLength);
+ url += suffix;
+ }
+ return url;
+ };
})();
\ No newline at end of file
diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js
index de4a0bd..dc20b2d 100644
--- a/js/controller/settings/SettingsController.js
+++ b/js/controller/settings/SettingsController.js
@@ -14,6 +14,10 @@
template : 'templates/settings/export-gif.html',
controller : ns.GifExportController
},
+ 'png' : {
+ template : 'templates/settings/export-png.html',
+ controller : ns.PngExportController
+ },
'import' : {
template : 'templates/settings/import.html',
controller : ns.ImportController
diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js
index 1d2dfd4..a78d5cf 100644
--- a/js/drawingtools/BaseTool.js
+++ b/js/drawingtools/BaseTool.js
@@ -33,7 +33,11 @@
ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) {
if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) {
- overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
+ try {
+ overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
+ } catch (e) {
+ console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
+ }
this.highlightedPixelRow = null;
this.highlightedPixelCol = null;
}
diff --git a/piskel-script-list.js b/piskel-script-list.js
index 65247a7..6048fa7 100644
--- a/piskel-script-list.js
+++ b/piskel-script-list.js
@@ -72,6 +72,7 @@ exports.scripts = [
"js/controller/settings/ApplicationSettingsController.js",
"js/controller/settings/ResizeController.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",
diff --git a/templates/settings.html b/templates/settings.html
index bb12a43..22b9a43 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -43,9 +43,9 @@
</div>
<div
+ data-setting="png"
class="tool-icon upload-cloud-icon"
title="Upload as a spritesheet PNG"
- onclick="pskl.app.uploadAsSpritesheetPNG()"
rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
diff --git a/templates/settings/export-gif.html b/templates/settings/export-gif.html
index b2c9576..97feaf3 100644
--- a/templates/settings/export-gif.html
+++ b/templates/settings/export-gif.html
@@ -13,5 +13,6 @@
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
</form>
<div class="gif-export-preview"></div>
+ <div class="gif-upload-status"></div>
</div>
</div>
\ No newline at end of file
Reference in New Issue View Git Blame Copy Permalink