From 1bb6c1efc742efefcb4dedc577d08ba55583c071 Mon Sep 17 00:00:00 2001 From: Julian van der Horst Date: Wed, 30 Sep 2020 20:55:57 +0200 Subject: [PATCH] Fixed bug #947 --- src/css/style.css | 9 ++ src/css/toolbox-layers-list.css | 12 +-- src/js/controller/LayersListController.js | 123 ++++++++-------------- src/templates/layers-list.html | 39 +++---- 4 files changed, 76 insertions(+), 107 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index d5a302ff..d1229e38 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -75,6 +75,15 @@ body { text-align: left; } +.tooltip-wrapper { + display: inline-block; + margin: 0; +} + +.tooltip-wrapper .layers-button[disabled] { + pointer-events: none; +} + .tooltip-descriptor { color:#999; } diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css index bcd06b8f..922e881b 100644 --- a/src/css/toolbox-layers-list.css +++ b/src/css/toolbox-layers-list.css @@ -44,8 +44,8 @@ .layers-button { margin: 0; - width: 16.66667%; float : left; + width: 120%; } /** @@ -66,17 +66,12 @@ cursor: pointer; } -.layer-item .layer-name, -.layer-item .layer-name-input { +.layer-item .layer-name { padding: 0 0 0 10px; flex: 1 auto; white-space: nowrap; } -.layer-item .layer-name-input { - width: 80%; -} - .layer-item .layer-name.overflowing-name { overflow: hidden; text-overflow: ellipsis; @@ -87,8 +82,7 @@ } .layer-item-opacity { - padding: 0 8px 0 8px; - flex: 0 auto; + padding-right: 8px; } .current-layer-item, diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js index 96e32be4..46d44f37 100644 --- a/src/js/controller/LayersListController.js +++ b/src/js/controller/LayersListController.js @@ -1,18 +1,15 @@ (function () { var ns = $.namespace('pskl.controller'); + var TOGGLE_LAYER_SHORTCUT = 'alt+L'; + ns.LayersListController = function (piskelController) { this.piskelController = piskelController; - this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW; - this.startRenamingCurrentLayer_ = this.startRenamingCurrentLayer_.bind(this); - this.onRenameInput_ = this.onRenameInput_.bind(this); + this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW ; }; ns.LayersListController.prototype.init = function () { - this.isRenaming = false; - this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template'); - this.layerNameInputTemplate_ = pskl.utils.Template.get('layer-name-input-template'); this.rootEl = document.querySelector('.layers-list-container'); this.layersListEl = document.querySelector('.layers-list'); this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview'); @@ -27,7 +24,7 @@ this.updateToggleLayerPreview_(); $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this)); - $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this)); + $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); }; ns.LayersListController.prototype.renderLayerList_ = function () { @@ -53,20 +50,32 @@ var addTooltip = pskl.utils.TooltipFormatter.format('Create a layer', null, [ {key : 'shift', description : 'Clone current layer'} ]); - var addButton = this.rootEl.querySelector('[data-action="add"]'); - addButton.setAttribute('title', addTooltip); + var addDiv = this.rootEl.querySelector('[data-action="add"]').parentElement; + addDiv.setAttribute('title', addTooltip); var moveDownTooltip = pskl.utils.TooltipFormatter.format('Move layer down', null, [ {key : 'shift', description : 'Move to the bottom'} ]); - var moveDownButton = this.rootEl.querySelector('[data-action="down"]'); - moveDownButton.setAttribute('title', moveDownTooltip); + var moveDownDiv = this.rootEl.querySelector('[data-action="down"]').parentElement; + moveDownDiv.setAttribute('title', moveDownTooltip); var moveUpTooltip = pskl.utils.TooltipFormatter.format('Move layer up', null, [ {key : 'shift', description : 'Move to the top'} ]); - var moveUpButton = this.rootEl.querySelector('[data-action="up"]'); - moveUpButton.setAttribute('title', moveUpTooltip); + var moveUpDiv = this.rootEl.querySelector('[data-action="up"]').parentElement; + moveUpDiv.setAttribute('title', moveUpTooltip); + + var editLayerTooltip = pskl.utils.TooltipFormatter.format('Edit layer name', null,[]); + var editLayerDiv = this.rootEl.querySelector('[data-action="edit"]').parentElement; + editLayerDiv.setAttribute('title', editLayerTooltip); + + var mergeLayerTooltip = pskl.utils.TooltipFormatter.format('Merge with layer below', null,[]); + var mergeLayerDiv = this.rootEl.querySelector('[data-action="merge"]').parentElement; + mergeLayerDiv.setAttribute('title', mergeLayerTooltip); + + var deleteLayerTooltip = pskl.utils.TooltipFormatter.format('Delete selected layer', null,[]); + var deleteLayerDiv = this.rootEl.querySelector('[data-action="delete"]').parentElement; + deleteLayerDiv.setAttribute('title', deleteLayerTooltip); }; ns.LayersListController.prototype.initToggleLayerPreview_ = function () { @@ -80,6 +89,7 @@ ns.LayersListController.prototype.updateButtonStatus_ = function () { var layers = this.piskelController.getLayers(); + var currentLayer = this.piskelController.getCurrentLayer(); var index = this.piskelController.getCurrentLayerIndex(); var isLast = index === 0; @@ -113,53 +123,26 @@ }; ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) { - if (name == pskl.UserSettings.LAYER_PREVIEW) { + if (name === pskl.UserSettings.LAYER_PREVIEW) { this.updateToggleLayerPreview_(); } }; ns.LayersListController.prototype.addLayerItem = function (layer, index) { var isSelected = this.piskelController.getCurrentLayer() === layer; - var isRenaming = isSelected && this.isRenaming; var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, { 'layername' : layer.getName(), 'layerindex' : index, 'isselected:current-layer-item' : isSelected, - 'opacity' : layer.getOpacity() + 'opacity': layer.getOpacity() }); var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml); this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild); if (layerItem.offsetWidth < layerItem.scrollWidth) { - var layerNameEl = layerItem.querySelector('.layer-name'); - layerNameEl.classList.add('overflowing-name'); - layerNameEl.setAttribute('title', layer.getName()); - layerNameEl.setAttribute('rel', 'tooltip'); - } - if (isSelected) { - layerItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_); - layerItem.addEventListener('dblclick', this.startRenamingCurrentLayer_); - } - if (isRenaming) { - var layerNameInputHtml = pskl.utils.Template.replace(this.layerNameInputTemplate_, { - 'layername' : layer.getName() - }); - var layerNameInput = pskl.utils.Template.createFromHTML(layerNameInputHtml); - var layerNameEl = layerItem.querySelector('.layer-name'); - layerItem.replaceChild(layerNameInput, layerNameEl); - layerNameInput.removeEventListener('blur', this.onRenameInput_); - layerNameInput.removeEventListener('keydown', this.onRenameInput_); - layerNameInput.addEventListener('blur', this.onRenameInput_); - layerNameInput.addEventListener('keydown', this.onRenameInput_); - layerNameInput.focus(); - layerNameInput.select(); - } - var opacity = layer.getOpacity(); - if (opacity == 1) { - layerItem.querySelector('.layer-item-opacity').style.color = '#ffd700'; - } else if (opacity == 0) { - layerItem.querySelector('.layer-item-opacity').style.color = '#969696'; - } else { - layerItem.querySelector('.layer-item-opacity').style.color = '#ffffff'; + $(layerItem).find('.layer-name') + .addClass('overflowing-name') + .attr('title', layer.getName()) + .tooltip(); } }; @@ -169,13 +152,8 @@ if (el.classList.contains('button')) { this.onButtonClick_(el, evt); } else if (el.classList.contains('layer-name')) { - var currentIndex = this.piskelController.getCurrentLayerIndex(); index = pskl.utils.Dom.getData(el, 'layerIndex'); - if (index != currentIndex) { - var currentItem = el.parentElement.parentElement.querySelector('.current-layer-item'); - currentItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_); - this.piskelController.setCurrentLayerIndex(parseInt(index, 10)); - } + this.piskelController.setCurrentLayerIndex(parseInt(index, 10)); } else if (el.classList.contains('layer-item-opacity')) { index = pskl.utils.Dom.getData(el, 'layerIndex'); var layer = this.piskelController.getLayerAt(parseInt(index, 10)); @@ -184,29 +162,14 @@ } }; - ns.LayersListController.prototype.startRenamingCurrentLayer_ = function () { - this.isRenaming = true; - this.renderLayerList_(); - }; - - ns.LayersListController.prototype.onRenameInput_ = function (evt) { - var el = evt.target || evt.srcElement; - if (evt.key === 'Enter') { - this.finishRenamingCurrentLayer_(el, el.value); - } else if (!evt.key || evt.key === 'Escape') { - this.finishRenamingCurrentLayer_(el); - } - }; - - ns.LayersListController.prototype.finishRenamingCurrentLayer_ = function (input, newName) { - if (newName) { + ns.LayersListController.prototype.renameCurrentLayer_ = function () { + var layer = this.piskelController.getCurrentLayer(); + var name = window.prompt('Please enter the layer name', layer.getName()); + if (name) { var index = this.piskelController.getCurrentLayerIndex(); - this.piskelController.renameLayerAt(index, newName); + this.piskelController.renameLayerAt(index, name); + this.renderLayerList_(); } - input.removeEventListener('blur', this.onRenameInput_); - input.removeEventListener('keydown', this.onRenameInput_); - this.isRenaming = false; - this.renderLayerList_(); }; ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () { @@ -217,22 +180,22 @@ ns.LayersListController.prototype.onButtonClick_ = function (button, evt) { var action = button.getAttribute('data-action'); - if (action == 'up') { + if (action === 'up') { this.piskelController.moveLayerUp(evt.shiftKey); - } else if (action == 'down') { + } else if (action === 'down') { this.piskelController.moveLayerDown(evt.shiftKey); - } else if (action == 'add') { + } else if (action === 'add') { if (evt.shiftKey) { this.piskelController.duplicateCurrentLayer(); } else { this.piskelController.createLayer(); } - } else if (action == 'delete') { + } else if (action === 'delete') { this.piskelController.removeCurrentLayer(); - } else if (action == 'merge') { + } else if (action === 'merge') { this.mergeDownCurrentLayer_(); - } else if (action == 'edit') { - this.startRenamingCurrentLayer_(); + } else if (action === 'edit') { + this.renameCurrentLayer_(); } }; diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html index e6628076..a7026e8a 100644 --- a/src/templates/layers-list.html +++ b/src/templates/layers-list.html @@ -5,29 +5,36 @@ class="layers-toggle-preview piskel-icon-eye">
+ +
+ class="button layers-button piskel-icon-plus"> +
+
+ class="button layers-button piskel-icon-arrow-up-fat"> +
+
+ class="button layers-button piskel-icon-arrow-down-fat"> +
+
+ class="button layers-button piskel-icon-pencil"> +
+
+ class="button layers-button piskel-icon-merge"> +
+
+ class="button layers-button piskel-icon-close"> +
@@ -38,13 +45,9 @@ data-layer-index="{{layerindex}}"> {{layername}} - α + title="Layer opacity" rel="tooltip" data-placement="top"> + {{opacity}}α - -