wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Displays pen size in selector for sizes above 4 pixels wide.

Browse source
This commit is contained in:
Smie 2016-11-26 12:44:42 -07:00
parent 8cb7a4aaf6
commit 39dba2b70f
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/css/pensize.css
View file

@ -46,4 +46,8 @@
.pen-size-option.selected {
border-color: gold;
}
}
.pen-size-option.labeled:before {
content: attr(real-pen-size);
}

10
src/js/controller/PenSizeController.js
View file

@ -25,9 +25,17 @@
};
ns.PenSizeController.prototype.updateSelectedOption_ = function () {
pskl.utils.Dom.removeClass('labeled', this.container);
pskl.utils.Dom.removeClass('selected', this.container);
var size = pskl.app.penSizeService.getPenSize();
var selectedOption = this.container.querySelector('[data-size="' + size + '"]');
var selectedOption;
if (size <= 4) {
selectedOption = this.container.querySelector('[data-size="' + size + '"]');
} else {
selectedOption = this.container.querySelector('[data-size="4"]');
selectedOption.classList.add('labeled');
selectedOption.setAttribute('real-pen-size', size);
}
if (selectedOption) {
selectedOption.classList.add('selected');
}

4
src/templates/drawing-tools.html
View file

@ -5,7 +5,7 @@
<div class="pen-size-option" data-size="1"></div>
<div class="pen-size-option" data-size="2"></div>
<div class="pen-size-option" data-size="3"></div>
<div class="pen-size-option" data-size="4"></div>
<div class="pen-size-option" data-size="4" real-pen-size="6"></div>
</div>
<ul id="tools-container" class="tools-wrapper">
<!-- Drawing tools will be inserted here -->
@ -43,4 +43,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>
</div>
</div>