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

Issue #312 : Improve layer preview tooltip + mutualize tooltip code

Browse Source
This commit is contained in:
jdescottes 2015-10-08 00:47:35 +02:00
parent 1e693e4e36
commit 0021de35b4
10 changed files with 102 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/css/style.css
View File

@ -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
src/css/tools.css
View File

@ -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
src/js/controller/LayersListController.js
View File

@ -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();

34
src/js/controller/preview/PreviewController.js
View File

@ -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 () {

29
src/js/tools/IconMarkupRenderer.js
View File

@ -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);
};
})();

17
src/js/utils/TooltipFormatter.js
View File

@ -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);
};

23
src/templates/drawing-tools.html
View File

@ -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
src/templates/layers-list.html
View File

@ -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>

23
src/templates/misc-templates.html
View File

@ -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
src/templates/preview.html
View File

@ -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>
@ -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>