diff --git a/src/css/pensize.css b/src/css/pensize.css index 231041a3..94f40068 100644 --- a/src/css/pensize.css +++ b/src/css/pensize.css @@ -46,4 +46,8 @@ .pen-size-option.selected { border-color: gold; -} \ No newline at end of file +} + +.pen-size-option.labeled:before { + content: attr(real-pen-size); +} diff --git a/src/js/controller/PenSizeController.js b/src/js/controller/PenSizeController.js index 0e8bc1fa..324e4cf6 100644 --- a/src/js/controller/PenSizeController.js +++ b/src/js/controller/PenSizeController.js @@ -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'); } diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index 003ab3a4..77be432f 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -5,7 +5,7 @@
- +