From d0cca52f478bd3e3f29fa179cea86c73daccea48 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Mon, 28 Nov 2016 01:00:49 +0100 Subject: [PATCH] issue #555: add performance warning icon, show dialog --- src/css/animations.css | 6 +++ src/css/dialogs-performance-info.css | 34 ++++++++++++ src/img/icons/common/common-warning-red.png | Bin 0 -> 285 bytes .../icons/common/common-warning-red@2x.png | Bin 0 -> 357 bytes src/index.html | 6 ++- src/js/controller/UserWarningController.js | 50 ++++++++++++------ .../controller/dialogs/DialogsController.js | 4 ++ .../dialogs/PerformanceInfoController.js | 11 ++++ src/piskel-script-list.js | 1 + src/piskel-style-list.js | 1 + src/templates/dialogs/performance-info.html | 11 ++++ 11 files changed, 108 insertions(+), 16 deletions(-) create mode 100644 src/css/dialogs-performance-info.css create mode 100644 src/img/icons/common/common-warning-red.png create mode 100644 src/img/icons/common/common-warning-red@2x.png create mode 100644 src/js/controller/dialogs/PerformanceInfoController.js create mode 100644 src/templates/dialogs/performance-info.html diff --git a/src/css/animations.css b/src/css/animations.css index 83463b4a..f24f9e72 100644 --- a/src/css/animations.css +++ b/src/css/animations.css @@ -1,3 +1,9 @@ @keyframes fade { 50% { opacity: 0.5; } } + +@keyframes glow { + 0% { opacity: 0.66; } + 50% { opacity: 1; } + 100% { opacity: 0.66; } +} diff --git a/src/css/dialogs-performance-info.css b/src/css/dialogs-performance-info.css new file mode 100644 index 00000000..81ced106 --- /dev/null +++ b/src/css/dialogs-performance-info.css @@ -0,0 +1,34 @@ +.performance-link { + display: none; + position: fixed; + bottom: 10px; + right: 10px; + z-index: 11000; + cursor: pointer; + opacity: 0; + transition : opacity 0.3s; +} + +.performance-link.visible { + display: block; + opacity: 0.66; + animation: glow 2s infinite; +} + +.performance-link.visible:hover { + opacity: 1; + animation: none; +} + +#dialog-container.performance-info { + width: 500px; + height: 600px; + top : 50%; + left : 50%; + position : absolute; + margin-left: -250px; +} + +.show #dialog-container.performance-info { + margin-top: -300px; +} diff --git a/src/img/icons/common/common-warning-red.png b/src/img/icons/common/common-warning-red.png new file mode 100644 index 0000000000000000000000000000000000000000..506482f1c5d153350c9a948ec40a21695fa9afb3 GIT binary patch literal 285 zcmV+&0pk9NP)!G$_m?$!2?UY%tdLHjIwsJ5Bg2?NwChTJA=Dh0}HJ?P0&E6e~B(AH<2 zaDrwFy}KXT_E6Wd9(Q<9B8jErc$u151`!JlEhE$Vedq)W<+{5x_|;MV(L#ErSAn{| j_3ZTN`)7w+pg$e?ZWdKADf$2a002ovPDHLkV1fVuh)#7s literal 0 HcmV?d00001 diff --git a/src/img/icons/common/common-warning-red@2x.png b/src/img/icons/common/common-warning-red@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..85ad393429f3123a8fb79e47f25ef2a61902a3ad GIT binary patch literal 357 zcmV-r0h<1aP)`>##%NS0u)(8Gt&Y!>{T?W?wcAj|^vu#mRS--b zHz=E29ajTWMp=Nm{j>iiOTOyzm>*Bpq$M8x*je*Jqt=ACfLbAKR|j`WP^}LE>V;%m zUre!ehHI2fP`CTcIbBdsLH1_qtz)L16qG$jTUZw;Gs(KUnRrz9U=&SYih5#DT?pza zs+iN>Y;i$*yH{bzlB4&X0PlKBfiq+OplZ8ejJ^ODR-7x)g**xX0000 literal 0 HcmV?d00001 diff --git a/src/index.html b/src/index.html index d0f5f478..12d178ac 100644 --- a/src/index.html +++ b/src/index.html @@ -71,13 +71,17 @@ @@include('templates/misc-templates.html', {}) @@include('templates/popup-preview.html', {}) -   +   +
 
@@include('templates/dialogs/create-palette.html', {}) @@include('templates/dialogs/import-image.html', {}) @@include('templates/dialogs/browse-local.html', {}) @@include('templates/dialogs/cheatsheet.html', {}) + @@include('templates/dialogs/performance-info.html', {}) @@include('templates/settings/application.html', {}) diff --git a/src/js/controller/UserWarningController.js b/src/js/controller/UserWarningController.js index ae1b787f..108149ea 100644 --- a/src/js/controller/UserWarningController.js +++ b/src/js/controller/UserWarningController.js @@ -4,32 +4,52 @@ ns.UserWarningController = function (piskelController, currentColorsService) { this.piskelController = piskelController; this.currentColorsService = currentColorsService; - this.isWarningDisplayed = false; + }; + + // This method is not attached to the prototype because we want to trigger it + // from markup generated for a notification message. + ns.UserWarningController.showPerformanceInfoDialog = function () { + $.publish(Events.DIALOG_DISPLAY, { + dialogId: 'performance-info' + }); }; ns.UserWarningController.prototype.init = function () { $.subscribe(Events.PERFORMANCE_REPORT_CHANGED, this.onPerformanceReportChanged_.bind(this)); + + this.performanceLinkEl = document.querySelector('.performance-link'); + pskl.utils.Event.addEventListener( + this.performanceLinkEl, + 'click', + ns.UserWarningController.showPerformanceInfoDialog, + this + ); + }; + + ns.UserWarningController.prototype.destroy = function () { + pskl.utils.Event.removeAllEventListeners(this); + this.performanceLinkEl = null; }; ns.UserWarningController.prototype.onPerformanceReportChanged_ = function (event, report) { - console.log(report); - var shouldDisplayWarning = report.hasProblem(); - if (shouldDisplayWarning && !this.isWarningDisplayed) { - // show a notification - // show the warning bubble + + // Check if a performance warning is already displayed. + var isWarningDisplayed = this.performanceLinkEl.classList.contains('visible'); + + // Show/hide the performance warning link depending on the received report. + this.performanceLinkEl.classList.toggle('visible', shouldDisplayWarning); + + // Show a notification message if the new report indicates a performance issue + // and we were not displaying a warning before. + if (shouldDisplayWarning && !isWarningDisplayed) { $.publish(Events.SHOW_NOTIFICATION, [{ - 'content': 'performance problem notification', + 'content': 'performance problem notification ' + + '' + + 'learn more?', 'hideDelay' : 5000 }]); - console.log('should show a performance notification'); - this.isWarningDisplayed = true; - } - - if (!shouldDisplayWarning && this.isWarningDisplayed) { - // hide the warning bubble - console.log('should hide a performance notification'); - this.isWarningDisplayed = false; } }; })(); diff --git a/src/js/controller/dialogs/DialogsController.js b/src/js/controller/dialogs/DialogsController.js index 7afb6561..cf6a9e63 100644 --- a/src/js/controller/dialogs/DialogsController.js +++ b/src/js/controller/dialogs/DialogsController.js @@ -17,6 +17,10 @@ 'import-image' : { template : 'templates/dialogs/import-image.html', controller : ns.ImportImageController + }, + 'performance-info' : { + template : 'templates/dialogs/performance-info.html', + controller : ns.PerformanceInfoController } }; diff --git a/src/js/controller/dialogs/PerformanceInfoController.js b/src/js/controller/dialogs/PerformanceInfoController.js new file mode 100644 index 00000000..87fd57b5 --- /dev/null +++ b/src/js/controller/dialogs/PerformanceInfoController.js @@ -0,0 +1,11 @@ +(function () { + var ns = $.namespace('pskl.controller.dialogs'); + + ns.PerformanceInfoController = function () {}; + + pskl.utils.inherit(ns.PerformanceInfoController, ns.AbstractDialogController); + + ns.PerformanceInfoController.prototype.init = function () { + this.superclass.init.call(this); + }; +})(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 4de8e3ff..cb2e8d3d 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -140,6 +140,7 @@ "js/controller/dialogs/ImportImageController.js", "js/controller/dialogs/BrowseLocalController.js", "js/controller/dialogs/CheatsheetController.js", + "js/controller/dialogs/PerformanceInfoController.js", // Dialogs controller "js/controller/dialogs/DialogsController.js", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index 9199543e..a208b9c1 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -22,6 +22,7 @@ "css/dialogs-cheatsheet.css", "css/dialogs-create-palette.css", "css/dialogs-import-image.css", + "css/dialogs-performance-info.css", "css/notifications.css", "css/toolbox.css", "css/toolbox-layers-list.css", diff --git a/src/templates/dialogs/performance-info.html b/src/templates/dialogs/performance-info.html new file mode 100644 index 00000000..fb9ccee2 --- /dev/null +++ b/src/templates/dialogs/performance-info.html @@ -0,0 +1,11 @@ + \ No newline at end of file