Mirrors/whitebophir
2
0
Fork 0
mirror of https://github.com/lovasoa/whitebophir synced 2024-11-10 06:24:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix various bugs with the menu (#49)

Browse source 
* fix color picker on safari

* do not block space above and below opened tooltip from passing pointer events through to the svg

* don't automatically retract tooltip when hovering

* use focus instead of hover on mobile and blur focus on first touchmove

* stop UA sniffing and assert that activeElement exists before attempting to blur

* Disable dragging of menu icons

* Remove unused CSS property

Property is ignored due to the display. With 'display: block', vertical-align should not be used.

* Better image dragging prevention

Co-authored-by: Ophir LOJKINE <ophir.lojkine@auto-grid.com>
This commit is contained in:
finnboeger 2020-04-28 11:47:43 +02:00 committed by GitHub
parent 2f46c013c2
commit be1880aa1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
client-data/board.css
View file

@ -54,6 +54,7 @@ html, body, svg {
transition-duration:1s;
cursor:default;
padding: 10px;
pointer-events: none;
}
#menu.closed {
@ -108,22 +109,18 @@ html, body, svg {
box-shadow: inset 0 0 3px #8FA2BC;
}
@keyframes minimize {
to {max-width:100%;}
}
#menu .tool:hover {
color:black;
animation-name: minimize;
animation-duration: 1.2s;
animation-iteration-count: 2;
animation-timing-function: cubic-bezier(.4,.2,.2,1);
animation-direction: alternate;
max-width: 100%;
}
#menu .tool:focus-within,
#menu #settings .tool:hover {
max-width:100%;
@media (hover: none) {
#menu .tool:hover {
max-width: 40px;
}
#menu .tool:focus {
max-width: 100%;
}
}
#menu .tool.curTool {
@ -141,6 +138,10 @@ html, body, svg {
overflow: hidden;
}
#menu img.tool-icon {
pointer-events: none;
}
#menu .tool-icon > * {
display: block;
margin: auto;
@ -184,6 +185,7 @@ input {
.colorPresets {
margin-right: 20px;
vertical-align: top;
display: inline-block;
}
.colorPresetButton {

8
client-data/board.html
View file

@ -34,27 +34,27 @@
<div id="menu">
<div id="menuItems">
<ul id="tools" class="tools">
<li class="tool">
<li class="tool" tabindex="-1">
<img class="tool-icon" width="35" height="35" src="" alt="icon" /><span class="tool-name"></span>
</li>
</ul>
<ul class="tools" id="settings">
<li class="tool">
<li class="tool" tabindex="-1">
<input class="tool-icon" type="color" id="chooseColor" value="#1913B0" />
<label class="tool-name" for="chooseColor">{{translations.color}}</label>
<span class="colorPresets" id="colorPresetSel">
<span class="colorPresetButton"></span>
</span>
</li>
<li class="tool">
<li class="tool" tabindex="-1">
<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
<label class="tool-name slider" for="chooseSize">
<span>{{translations.size}}</span>
<input type="range" id="chooseSize" value="4" min="1" max="50" step="1" class="rangeChooser" />
</label>
</li>
<li class="tool">
<li class="tool" tabindex="-1">
<span class="tool-icon">
<svg viewBox="0 0 8 8">
<pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">

11
client-data/js/board.js
View file

@ -425,9 +425,16 @@ Tools.toolHooks = [
});
}
function wrapUnsetHover(f, toolName) {
return (function unsetHover(evt) {
document.activeElement && document.activeElement.blur();
return f(evt);
});
}
if (listeners.press) {
compiled["mousedown"] = compile(listeners.press);
compiled["touchstart"] = compileTouch(listeners.press);
compiled["mousedown"] = wrapUnsetHover(compile(listeners.press), tool.name);
compiled["touchstart"] = wrapUnsetHover(compileTouch(listeners.press), tool.name);
}
if (listeners.move) {
compiled["mousemove"] = compile(listeners.move);