Commit 7e5ca00a authored by Mario Botsch's avatar Mario Botsch
Browse files

polish whiteboard color/size picker

parent 8412d646
......@@ -188,21 +188,28 @@
position: absolute;
top: auto;
right: auto;
padding: 0;
padding: 5px;
margin: 0;
z-index: 40;
border: 1px solid #eeeeee;
border-radius: calc(var(--whiteboard-icon-size) * 0.5);
background: var(--whiteboard-background-color);
left: calc(var(--whiteboard-icon-size) * 2.5);
bottom: calc(var(--whiteboard-icon-size) * 11.5);
left: calc(var(--whiteboard-icon-size) * 3);
bottom: calc(var(--whiteboard-icon-size) * 14);
display: block;
visibility: hidden;
display: grid;
grid-template-columns: repeat(7, 1fr);
}
#whiteboardColorPicker button.whiteboard {
margin: 0;
padding: 0;
width: calc(var(--whiteboard-icon-size) * 1.5);
height: calc(var(--whiteboard-icon-size) * 1.5);
text-align: center;
vertical-align: middle;
color: black;
}
/* slides for choosing pen width */
......
......@@ -196,38 +196,35 @@ let RevealWhiteboard = (function () {
"eraser"
);
// generate color picker container
let colorPicker = document.createElement("div");
colorPicker.id = "whiteboardColorPicker";
reveal.appendChild(colorPicker);
// color buttons
penColors.forEach((color) => {
let b = document.createElement("button");
b.className = "whiteboard fas fa-pen";
b.className = "whiteboard fas fa-circle";
b.onclick = () => {
selectPenColor(color);
};
b.style.color = color;
colorPicker.appendChild(b);
});
// generate penWidth slider
let penWidthSlider = document.createElement("input");
penWidthSlider.id = "whiteboardSlider";
penWidthSlider.type = "range";
penWidthSlider.min = 1;
penWidthSlider.max = 10;
penWidthSlider.value = 2;
colorPicker.appendChild(penWidthSlider);
penWidthSlider.onchange = () => {
selectPenRadius(parseInt(penWidthSlider.value));
};
penWidthSlider.oninput = () => {
penWidthSlider.style.setProperty(
"--size",
parseInt(penWidthSlider.value) + 2 + "px"
);
// pen radius buttons
for (let r=2; r<15; r+=2) {
const slideScale = Reveal.getScale();
const radius = r*slideScale + "px";
let b = document.createElement("button");
b.className = "whiteboard fas fa-circle";
b.style.fontSize = radius;
b.onclick = () => {
selectPenRadius(r);
};
colorPicker.appendChild(b);
};
/* Set slides to full height, such that they contain the full-height whiteboard.
* For centered slides, also enforce full height, and wrap the slide content
* in a flex-box to achieve vertical centering. This is necessary, since
......@@ -503,7 +500,7 @@ let RevealWhiteboard = (function () {
function selectPenColor(col) {
hideColorPicker();
penWidthSlider.style.setProperty("--color", col);
// penWidthSlider.style.setProperty("--color", col);
penColor = col;
buttonPen.style.color = penColor;
createPenCursor();
......@@ -513,8 +510,6 @@ let RevealWhiteboard = (function () {
function selectPenRadius(radius) {
hideColorPicker();
penWidth = radius;
penWidthSlider.value = radius;
penWidthSlider.style.setProperty("--size", radius + 1 + "px");
createPenCursor();
selectCursor(penCursor);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment