Skip to content

Commit

Permalink
Merge pull request #320 from juliandescottes/fix-layerpreview-tooltip
Browse files Browse the repository at this point in the history 
Issue #312 : Improve layer preview tooltip + mutualize tooltip code
  • Loading branch information
@juliandescottes
juliandescottes committed Oct 7, 2015
2 parents 1e693e4 + 0021de3 commit a9e04a4
Show file tree
Hide file tree
Showing 10 changed files with 102 additions and 97 deletions.
27 changes: 27 additions & 0 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
21 changes: 0 additions & 21 deletions src/css/tools.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

17 changes: 14 additions & 3 deletions src/js/controller/LayersListController.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
(function () {
var ns = $.namespace('pskl.controller');

var TOGGLE_LAYER_SHORTCUT = 'alt+L';

ns.LayersListController = function (piskelController) {
this.piskelController = piskelController;
};
Expand All @@ -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));
};

Expand All @@ -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();
Expand Down
34 changes: 25 additions & 9 deletions src/js/controller/preview/PreviewController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
};
Expand All @@ -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_();
Expand All @@ -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();
};
Expand All @@ -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 () {
Expand Down
29 changes: 1 addition & 28 deletions src/js/tools/IconMarkupRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(' '),
Expand All @@ -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);
};
})();
17 changes: 9 additions & 8 deletions src/js/utils/TooltipFormatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down
23 changes: 0 additions & 23 deletions src/templates/drawing-tools.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,27 +37,4 @@
<script type="text/template" id="drawingTool-item-template">
<li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
</script>

<!-- Drawing tool tooltip container -->
<script type="text/template" id="drawingTool-tooltipContainer-template">
<div class='tools-tooltip-container'>
<div>{{helptext}} <span class='tooltip-shortcut'>{{shortcut}}</span></div>
{{descriptors}}
</div>
</script>

<!-- Drawing tool tooltip line for modifier -->
<script type="text/template" id="drawingTool-tooltipDescriptor-template">
<div class='tools-tooltip-descriptor'>
<span class='tools-tooltip-descriptor-button'>{{key}}</span>
{{description}}
</div>
</script>

<!-- Drawing tool tooltip line -->
<script type="text/template" id="drawingTool-simpleTooltipDescriptor-template">
<div class='tools-tooltip-descriptor'>
{{description}}
</div>
</script>
</div>
3 changes: 1 addition & 2 deletions src/templates/layers-list.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<div class="toolbox-container layers-list-container">
<h3 class="toolbox-title layers-title">Layers
<div title="Toggle layer preview (alt+L)"
rel="tooltip"
<div rel="tooltip"
data-placement="left"
class="layers-toggle-preview piskel-icon-eye"></div>
</h3>
Expand Down
23 changes: 23 additions & 0 deletions src/templates/misc-templates.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,27 @@
<div class="progress-bar-item progress-bar-status">{{status}}%</div>
</div>
</script>

<!-- Tooltip container -->
<script type="text/template" id="tooltip-container-template">
<div class='tooltip-container'>
<div>{{helptext}} <span class='tooltip-shortcut'>{{shortcut}}</span></div>
{{descriptors}}
</div>
</script>

<!-- Tooltip description with modifier -->
<script type="text/template" id="tooltip-modifier-descriptor-template">
<div class='tooltip-descriptor'>
<span class='tooltip-descriptor-button'>{{key}}</span>
{{description}}
</div>
</script>

<!-- Simple tooltip description -->
<script type="text/template" id="tooltip-simple-descriptor-template">
<div class='tooltip-descriptor'>
{{description}}
</div>
</script>
</div>
5 changes: 2 additions & 3 deletions src/templates/preview.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div id="animated-preview-container" class="preview-container">
<div class="canvas-container-wrapper minimap-container">
<div class="preview-contextual-actions">
<div class="preview-contextual-action original-size-button" title="Original size preview <span class='tooltip-shortcut'>(alt+1)</span>" rel="tooltip" data-placement="bottom">1x</div>
<div class="preview-contextual-action original-size-button" rel="tooltip" data-placement="bottom">1x</div>
<div class="preview-contextual-action open-popup-preview-button" title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
</div>

Expand All @@ -10,8 +10,7 @@
</div>
</div>
<div>
<div title="Toggle onion skin (alt+O)"
rel="tooltip"
<div rel="tooltip"
data-placement="bottom"
class="piskel-icon-onion preview-toggle-onion-skin"></div>
<span id="display-fps" class="display-fps"></span>
Expand Down

0 comments on commit a9e04a4

Please sign in to comment.