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 #414: part4: UI to view/update layer opacity

Browse Source
This commit is contained in:
Julian Descottes 2016-03-06 00:26:03 +01:00 committed by juliandescottes
parent a75e78e366
commit 186b5a305a
3 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/toolbox-layers-list.css
View File

@ -46,6 +46,11 @@
background : #222; background : #222;
} }
.layer-item-opacity {
position: absolute;
right: 8px;
}
.current-layer-item, .current-layer-item,
.current-layer-item:hover { .current-layer-item:hover {
background : #333; background : #333;

8
src/js/controller/LayersListController.js
View File

@ -88,7 +88,8 @@
var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, { var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
'layername' : layer.getName(), 'layername' : layer.getName(),
'layerindex' : index, 'layerindex' : index,
'isselected:current-layer-item' : isSelected 'isselected:current-layer-item' : isSelected,
'opacity': layer.getOpacity()
}); });
var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml); var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild); this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
@ -102,6 +103,11 @@
} else if (el.classList.contains('layer-item')) { } else if (el.classList.contains('layer-item')) {
index = el.dataset.layerIndex; index = el.dataset.layerIndex;
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));
var opacity = window.prompt('Set layer opacity (value between 0 and 1)', layer.getOpacity());
this.piskelController.setLayerOpacityAt(index, opacity);
} }
}; };

9
src/templates/layers-list.html
View File

@ -34,6 +34,13 @@
<ul class="layers-list"></ul> <ul class="layers-list"></ul>
<script type="text/template" id="layer-item-template"> <script type="text/template" id="layer-item-template">
<li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}</li> <li class="layer-item {{isselected:current-layer-item}}"
data-layer-index="{{layerindex}}">
{{layername}}
<span class="layer-item-opacity"
title="Layer opacity" rel="tooltip" data-placement="top">
{{opacity}}&#945;
</span>
</li>
</script> </script>
</div> </div>