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 00000000..506482f1 Binary files /dev/null and b/src/img/icons/common/common-warning-red.png differ 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 00000000..85ad3934 Binary files /dev/null and b/src/img/icons/common/common-warning-red@2x.png differ 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