From 0021de35b41737fda9f6d63cd01952aedcd9306f Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 8 Oct 2015 00:47:35 +0200 Subject: [PATCH] Issue #312 : Improve layer preview tooltip + mutualize tooltip code --- src/css/style.css | 27 +++++++++++++++ src/css/tools.css | 21 ------------ src/js/controller/LayersListController.js | 17 ++++++++-- .../controller/preview/PreviewController.js | 34 ++++++++++++++----- src/js/tools/IconMarkupRenderer.js | 29 +--------------- src/js/utils/TooltipFormatter.js | 17 +++++----- src/templates/drawing-tools.html | 23 ------------- src/templates/layers-list.html | 3 +- src/templates/misc-templates.html | 23 +++++++++++++ src/templates/preview.html | 5 ++- 10 files changed, 102 insertions(+), 97 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index d855d70ff..8375d1a2a 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -56,6 +56,33 @@ body { margin-left: 0; } +/** + * TOOLTIPS + */ .tooltip-shortcut { color:gold; +} + +.tooltip-container { + text-align: left; +} + +.tooltip-descriptor { + color:#999; +} + +.tooltip-descriptor:last-child { + padding-bottom: 5px; +} + +.tooltip-descriptor-button { + padding: 2px; + border: 1px Solid #999; + font-size: 0.8em; + margin-right: 5px; + width: 35px; + text-align: center; + border-radius: 3px; + display: inline-block; + line-height: 10px; } \ No newline at end of file diff --git a/src/css/tools.css b/src/css/tools.css index dee76ffa2..27af6c05a 100644 --- a/src/css/tools.css +++ b/src/css/tools.css @@ -258,24 +258,3 @@ ); } -.tools-tooltip-container { - text-align: left; - padding-bottom: 5px; -} - -.tools-tooltip-descriptor { - color:#999; -} - -.tools-tooltip-descriptor-button { - padding:2px; - border:1px Solid #999; - font-size:0.8em; - margin-right:5px; - width:35px; - text-align:center; - border-radius:3px; - display:inline-block; - line-height: 10px; -} - diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js index 670755598..e6fb81baa 100644 --- a/src/js/controller/LayersListController.js +++ b/src/js/controller/LayersListController.js @@ -1,6 +1,8 @@ (function () { var ns = $.namespace('pskl.controller'); + var TOGGLE_LAYER_SHORTCUT = 'alt+L'; + ns.LayersListController = function (piskelController) { this.piskelController = piskelController; }; @@ -14,13 +16,12 @@ this.rootEl.addEventListener('click', this.onClick_.bind(this)); this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this)); - $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this)); - - pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this)); + this.initToggleLayerPreview_(); this.renderLayerList_(); this.updateToggleLayerPreview_(); + $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); }; @@ -31,6 +32,16 @@ this.updateButtonStatus_(); }; + ns.LayersListController.prototype.initToggleLayerPreview_ = function () { + var descriptors = [{description : 'Opacity defined in PREFERENCES'}]; + var helpText = 'Preview all layers'; + + var toggleLayerPreviewTooltip = pskl.utils.TooltipFormatter.format(helpText, TOGGLE_LAYER_SHORTCUT, descriptors); + this.toggleLayerPreviewEl.setAttribute('title', toggleLayerPreviewTooltip); + + pskl.app.shortcutService.addShortcut(TOGGLE_LAYER_SHORTCUT, this.toggleLayerPreview_.bind(this)); + }; + ns.LayersListController.prototype.updateButtonStatus_ = function () { var layers = this.piskelController.getLayers(); var currentLayer = this.piskelController.getCurrentLayer(); diff --git a/src/js/controller/preview/PreviewController.js b/src/js/controller/preview/PreviewController.js index 1cd282e81..aad5a81cf 100644 --- a/src/js/controller/preview/PreviewController.js +++ b/src/js/controller/preview/PreviewController.js @@ -4,6 +4,9 @@ // Preview is a square of PREVIEW_SIZE x PREVIEW_SIZE var PREVIEW_SIZE = 200; + var ONION_SKIN_SHORTCUT = 'alt+O'; + var ORIGINAL_SIZE_SHORTCUT = 'alt+1'; + ns.PreviewController = function (piskelController, container) { this.piskelController = piskelController; this.container = container; @@ -13,15 +16,23 @@ this.renderFlag = true; + /** + * !! WARNING !! ALL THE INITIALISATION BELOW SHOULD BE MOVED TO INIT() + * IT WILL STAY HERE UNTIL WE CAN REMOVE SETFPS (see comment below) + */ this.fpsRangeInput = document.querySelector('#preview-fps'); this.fpsCounterDisplay = document.querySelector('#display-fps'); this.openPopupPreview = document.querySelector('.open-popup-preview-button'); this.originalSizeButton = document.querySelector('.original-size-button'); + this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin'); + /** + * !! WARNING !! THIS SHOULD REMAIN HERE UNTIL, BECAUSE THE PREVIEW CONTROLLER + * IS THE SOURCE OF TRUTH AT THE MOMENT WHEN IT COMES TO FPSs + * IT WILL BE QUERIED BY OTHER OBJECTS SO DEFINE IT AS SOON AS POSSIBLE + */ this.setFPS(Constants.DEFAULT.FPS); - var frame = this.piskelController.getCurrentFrame(); - this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer(this.container); this.popupPreviewController = new ns.PopupPreviewController(piskelController); }; @@ -32,21 +43,19 @@ document.querySelector('.right-column').style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px'; - this.toggleOnionSkinEl = document.querySelector('.preview-toggle-onion-skin'); - this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this)); - + pskl.utils.Event.addEventListener(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this); pskl.utils.Event.addEventListener(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this); pskl.utils.Event.addEventListener(this.originalSizeButton, 'click', this.onOriginalSizeButtonClick_, this); - pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this)); - pskl.app.shortcutService.addShortcut('alt+1', this.onOriginalSizeButtonClick_.bind(this)); + pskl.app.shortcutService.addShortcut(ONION_SKIN_SHORTCUT, this.toggleOnionSkin_.bind(this)); + pskl.app.shortcutService.addShortcut(ORIGINAL_SIZE_SHORTCUT, this.onOriginalSizeButtonClick_.bind(this)); $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); - $.subscribe(Events.PISKEL_SAVE_STATE, this.setRenderFlag_.bind(this, true)); $.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true)); + this.initTooltips_(); this.popupPreviewController.init(); this.updateZoom_(); @@ -56,6 +65,13 @@ this.updateContainerDimensions_(); }; + ns.PreviewController.prototype.initTooltips_ = function () { + var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', ONION_SKIN_SHORTCUT); + this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip); + var originalSizeTooltip = pskl.utils.TooltipFormatter.format('Original size preview', ORIGINAL_SIZE_SHORTCUT); + this.originalSizeButton.setAttribute('title', originalSizeTooltip); + }; + ns.PreviewController.prototype.onOpenPopupPreviewClick_ = function () { this.popupPreviewController.open(); }; @@ -80,7 +96,7 @@ ns.PreviewController.prototype.updateOnionSkinPreview_ = function () { var enabledClassname = 'preview-toggle-onion-skin-enabled'; var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN); - this.toggleOnionSkinEl.classList.toggle(enabledClassname, isEnabled); + this.toggleOnionSkinButton.classList.toggle(enabledClassname, isEnabled); }; ns.PreviewController.prototype.updateOriginalSizeButton_ = function () { diff --git a/src/js/tools/IconMarkupRenderer.js b/src/js/tools/IconMarkupRenderer.js index f16157722..03ba13699 100644 --- a/src/js/tools/IconMarkupRenderer.js +++ b/src/js/tools/IconMarkupRenderer.js @@ -5,7 +5,6 @@ ns.IconMarkupRenderer.prototype.render = function (tool, shortcut, tooltipPosition) { tooltipPosition = tooltipPosition || 'right'; - shortcut = shortcut ? '(' + shortcut + ')' : ''; var tpl = pskl.utils.Template.get('drawingTool-item-template'); return pskl.utils.Template.replace(tpl, { cssclass : ['tool-icon', tool.toolId].join(' '), @@ -17,32 +16,6 @@ ns.IconMarkupRenderer.prototype.getTooltipText = function(tool, shortcut) { var descriptors = tool.tooltipDescriptors; - var tpl = pskl.utils.Template.get('drawingTool-tooltipContainer-template'); - return pskl.utils.Template.replace(tpl, { - helptext : tool.getHelpText(), - shortcut : shortcut, - descriptors : this.formatToolDescriptors_(descriptors) - }); - }; - - ns.IconMarkupRenderer.prototype.formatToolDescriptors_ = function(descriptors) { - descriptors = descriptors || []; - return descriptors.reduce(function (p, descriptor) { - return p += this.formatToolDescriptor_(descriptor); - }.bind(this), ''); - }; - - ns.IconMarkupRenderer.prototype.formatToolDescriptor_ = function(descriptor) { - var tpl; - if (descriptor.key) { - tpl = pskl.utils.Template.get('drawingTool-tooltipDescriptor-template'); - descriptor.key = descriptor.key.toUpperCase(); - if (pskl.utils.UserAgent.isMac) { - descriptor.key = descriptor.key.replace('CTRL', 'CMD'); - } - } else { - tpl = pskl.utils.Template.get('drawingTool-simpleTooltipDescriptor-template'); - } - return pskl.utils.Template.replace(tpl, descriptor); + return pskl.utils.TooltipFormatter.format(tool.getHelpText(), shortcut, descriptors); }; })(); diff --git a/src/js/utils/TooltipFormatter.js b/src/js/utils/TooltipFormatter.js index 5c29de1ef..b8b339dd3 100644 --- a/src/js/utils/TooltipFormatter.js +++ b/src/js/utils/TooltipFormatter.js @@ -3,32 +3,33 @@ ns.TooltipFormatter = {}; - ns.TooltipFormatter.formatForTool = function(shortcut, descriptors, helpText) { - var tpl = pskl.utils.Template.get('drawingTool-tooltipContainer-template'); + ns.TooltipFormatter.format = function(helpText, shortcut, descriptors) { + var tpl = pskl.utils.Template.get('tooltip-container-template'); + shortcut = shortcut ? '(' + shortcut + ')' : ''; return pskl.utils.Template.replace(tpl, { helptext : helpText, shortcut : shortcut, - descriptors : this.formatToolDescriptors_(descriptors) + descriptors : this.formatDescriptors_(descriptors) }); }; - ns.TooltipFormatter.formatToolDescriptors_ = function(descriptors) { + ns.TooltipFormatter.formatDescriptors_ = function(descriptors) { descriptors = descriptors || []; return descriptors.reduce(function (p, descriptor) { - return p += this.formatToolDescriptor_(descriptor); + return p += this.formatDescriptor_(descriptor); }.bind(this), ''); }; - ns.TooltipFormatter.formatToolDescriptor_ = function(descriptor) { + ns.TooltipFormatter.formatDescriptor_ = function(descriptor) { var tpl; if (descriptor.key) { - tpl = pskl.utils.Template.get('drawingTool-tooltipDescriptor-template'); + tpl = pskl.utils.Template.get('tooltip-modifier-descriptor-template'); descriptor.key = descriptor.key.toUpperCase(); if (pskl.utils.UserAgent.isMac) { descriptor.key = descriptor.key.replace('CTRL', 'CMD'); } } else { - tpl = pskl.utils.Template.get('drawingTool-simpleTooltipDescriptor-template'); + tpl = pskl.utils.Template.get('tooltip-simple-descriptor-template'); } return pskl.utils.Template.replace(tpl, descriptor); }; diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index 08f4bbacf..6cf7aa9d6 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -37,27 +37,4 @@ - - - - - - - - - \ No newline at end of file diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html index 48f28f3bb..36b838566 100644 --- a/src/templates/layers-list.html +++ b/src/templates/layers-list.html @@ -1,7 +1,6 @@

Layers -

diff --git a/src/templates/misc-templates.html b/src/templates/misc-templates.html index 56d5a0b73..41fc2c004 100644 --- a/src/templates/misc-templates.html +++ b/src/templates/misc-templates.html @@ -6,4 +6,27 @@
{{status}}%
+ + + + + + + + + \ No newline at end of file diff --git a/src/templates/preview.html b/src/templates/preview.html index 468a60541..796848c34 100644 --- a/src/templates/preview.html +++ b/src/templates/preview.html @@ -1,7 +1,7 @@
-
1x
+
1x
@@ -10,8 +10,7 @@
-