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

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

4
src/css/pensize.css
View File

@ -47,3 +47,7 @@
.pen-size-option.selected { .pen-size-option.selected {
border-color: gold; 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 () { ns.PenSizeController.prototype.updateSelectedOption_ = function () {
pskl.utils.Dom.removeClass('labeled', this.container);
pskl.utils.Dom.removeClass('selected', this.container); pskl.utils.Dom.removeClass('selected', this.container);
var size = pskl.app.penSizeService.getPenSize(); 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) { if (selectedOption) {
selectedOption.classList.add('selected'); selectedOption.classList.add('selected');
} }

2
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="1"></div>
<div class="pen-size-option" data-size="2"></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="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> </div>
<ul id="tools-container" class="tools-wrapper"> <ul id="tools-container" class="tools-wrapper">
<!-- Drawing tools will be inserted here --> <!-- Drawing tools will be inserted here -->