Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-08 07:12:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #14469 from huffman/fix/draggable-input-tabbable

Browse source 
Fix draggable inputs not being tabbable
This commit is contained in:
Shannon Romano 2018-11-30 19:28:11 -08:00 committed by GitHub
commit 0d2b0903d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
scripts/system/html/css/edit-style.css
View file

@ -916,7 +916,7 @@ div.refresh input[type="button"] {
}
.draggable-number div {
height: 28px;
width: 92px;
width: 124px;
}
.draggable-number.text {
display: inline-block;
@ -929,6 +929,7 @@ div.refresh input[type="button"] {
height: 28px;
width: 100%;
line-height: 2;
box-sizing: border-box;
}
.draggable-number.text:hover {
cursor: ew-resize;
@ -944,12 +945,12 @@ div.refresh input[type="button"] {
cursor: default;
}
.draggable-number.left-arrow {
top: -5px;
top: 3px;
left: 0px;
transform: rotate(180deg);
}
.draggable-number.right-arrow {
top: -5px;
top: 3px;
right: 0px;
}
.draggable-number input[type=number] {
@ -971,14 +972,14 @@ div.refresh input[type="button"] {
left: 12px;
}
.draggable-number.fstuple + .draggable-number.fstuple {
padding-left: 28px;
margin-left: 28px;
}
.draggable-number.fstuple input {
right: -10px;
}
.draggable-number.fstuple .sublabel {
position: absolute;
top: 0;
top: 6px;
left: -16px;
font-family: FiraSans-SemiBold;
font-size: 15px;

32
scripts/system/html/js/draggableNumber.js
View file

@ -23,6 +23,20 @@ function DraggableNumber(min, max, step, decimals, dragStart, dragEnd) {
}
DraggableNumber.prototype = {
showInput: function() {
this.elText.style.visibility = "hidden";
this.elLeftArrow.style.visibility = "hidden";
this.elRightArrow.style.visibility = "hidden";
this.elInput.style.opacity = 1;
},
hideInput: function() {
this.elText.style.visibility = "visible";
this.elLeftArrow.style.visibility = "visible";
this.elRightArrow.style.visibility = "visible";
this.elInput.style.opacity = 0;
},
mouseDown: function(event) {
if (event.target === this.elText) {
this.initialMouseEvent = event;
@ -36,8 +50,8 @@ DraggableNumber.prototype = {
if (event.target === this.elText && this.initialMouseEvent) {
let dx = event.clientX - this.initialMouseEvent.clientX;
if (Math.abs(dx) <= DELTA_X_FOCUS_THRESHOLD) {
this.elInput.style.visibility = "visible";
this.elText.style.visibility = "hidden";
this.showInput();
this.elInput.focus();
}
this.initialMouseEvent = null;
}
@ -125,9 +139,8 @@ DraggableNumber.prototype = {
this.setValue(this.elInput.value);
},
inputBlur: function() {
this.elInput.style.visibility = "hidden";
this.elText.style.visibility = "visible";
inputBlur: function(ev) {
this.hideInput();
},
initialize: function() {
@ -171,13 +184,14 @@ DraggableNumber.prototype = {
if (this.step !== undefined) {
this.elInput.setAttribute("step", this.step);
}
this.elInput.style.visibility = "hidden";
this.elInput.style.opacity = 0;
this.elInput.addEventListener("change", this.onInputChange);
this.elInput.addEventListener("blur", this.onInputBlur);
this.elInput.addEventListener("focus", this.showInput.bind(this));
this.elText.appendChild(this.elLeftArrow);
this.elText.appendChild(this.elInput);
this.elText.appendChild(this.elRightArrow);
this.elDiv.appendChild(this.elLeftArrow);
this.elDiv.appendChild(this.elInput);
this.elDiv.appendChild(this.elRightArrow);
this.elDiv.appendChild(this.elText);
}
};

2
scripts/system/html/js/entityProperties.js
View file

@ -2149,7 +2149,7 @@ function createTupleNumberInput(property, subLabel) {
propertyData.decimals, dragStartFunction, dragEndFunction);
elDraggableNumber.elInput.setAttribute("id", elementID);
elDraggableNumber.elDiv.className += " fstuple";
elDraggableNumber.elText.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
elDraggableNumber.elDiv.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
return elDraggableNumber;
}