Skip to content
Snippets Groups Projects
Commit bbd56d60 authored by Giovanni Caruso's avatar Giovanni Caruso Committed by Moritz Langenstein
Browse files

Add brush-size UI

parent 4d1ebf08
No related branches found
No related tags found
No related merge requests found
......@@ -79,6 +79,25 @@
<div id="rectangle"></div>
</a>
</div>
<div class="pen-body">
<div id="brush-colour">
<h3>Brush size</h3>
</div>
&nbsp;
<div class="slide-size">
<input
type="range"
min="1"
max="100"
value="50"
class="slider"
id="range"
/>
<p style="text-align: center; margin: 0px">
Size: <span id="value"></span>
</p>
</div>
</div>
</div>
</div>
<div id="palette" class="properties" style="padding-top: 150px">
......
......@@ -357,6 +357,44 @@ button.selected {
text-align: center;
}
.slide-size {
width: 90%;
height: 20%;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
margin-top: 30px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4f4f4f;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4f4f4f;
cursor: pointer;
}
#others {
margin-top: 2%;
display: flex;
......@@ -409,4 +447,4 @@ button.selected {
format("truetype"),
url("./assets/fonts/martel-v4-latin/martel-v4-latin-regular.svg#Martel")
format("svg");
}
}
\ No newline at end of file
......@@ -130,6 +130,12 @@ HTML.picker.addEventListener("change", () => {
canvas.setStrokeColour(paletteColour)
})
HTML.output.innerHTML = HTML.slider.value
HTML.slider.oninput = function() {
HTML.output.innerHTML = this.value
}
HTML.eraserButton.addEventListener("click", () => {
currentTool = tools.ERASER
HTML.penButton.classList.remove("selected")
......
......@@ -27,3 +27,5 @@ export const rectangle = document.getElementById("rectangle")
export const wheel = document.getElementById("wheel")
export const picker = document.getElementById("other-colours")
export const labelColour = document.getElementById("colours")
export const slider = document.getElementById("range")
export const output = document.getElementById("value")
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment